gentleface

Gentleface › Actions › pencil

pencil icon

Pencil: edit, write, modify, edit mode. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

Code line-round

SVG
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M10.146 3.146C10.319 2.974 10.516 2.84 10.74 2.743C10.982 2.638 11.236 2.586 11.5 2.586C11.764 2.586 12.018 2.638 12.26 2.743C12.484 2.84 12.681 2.974 12.854 3.146C13.026 3.319 13.16 3.516 13.257 3.74C13.362 3.982 13.414 4.236 13.414 4.5C13.414 4.764 13.362 5.018 13.257 5.26C13.16 5.484 13.026 5.681 12.854 5.854L7.561 11.146C7.051 11.656 6.474 12.072 5.829 12.394L2.724 13.947C2.598 14.01 2.47 14.02 2.341 13.977C2.212 13.934 2.116 13.85 2.053 13.724C1.978 13.575 1.978 13.425 2.053 13.276L3.606 10.171C3.928 9.526 4.344 8.949 4.854 8.439L10.146 3.146ZM12.146 5.146C12.325 4.968 12.414 4.752 12.414 4.5C12.414 4.248 12.325 4.032 12.146 3.854C11.968 3.675 11.752 3.586 11.5 3.586C11.248 3.586 11.032 3.675 10.854 3.854L5.561 9.146C5.442 9.265 5.329 9.388 5.223 9.515L6.485 10.777C6.612 10.671 6.735 10.558 6.854 10.439L12.146 5.146ZM5.382 11.5C5.473 11.455 5.562 11.407 5.65 11.357L4.643 10.35C4.593 10.438 4.545 10.527 4.5 10.618L3.618 12.382L5.382 11.5Z"/></svg>
React
// Gentleface "pencil" (line-round), MIT. https://gentleface.com/icons/pencil
import type { SVGProps } from 'react';

export function PencilIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M10.146 3.146C10.319 2.974 10.516 2.84 10.74 2.743C10.982 2.638 11.236 2.586 11.5 2.586C11.764 2.586 12.018 2.638 12.26 2.743C12.484 2.84 12.681 2.974 12.854 3.146C13.026 3.319 13.16 3.516 13.257 3.74C13.362 3.982 13.414 4.236 13.414 4.5C13.414 4.764 13.362 5.018 13.257 5.26C13.16 5.484 13.026 5.681 12.854 5.854L7.561 11.146C7.051 11.656 6.474 12.072 5.829 12.394L2.724 13.947C2.598 14.01 2.47 14.02 2.341 13.977C2.212 13.934 2.116 13.85 2.053 13.724C1.978 13.575 1.978 13.425 2.053 13.276L3.606 10.171C3.928 9.526 4.344 8.949 4.854 8.439L10.146 3.146ZM12.146 5.146C12.325 4.968 12.414 4.752 12.414 4.5C12.414 4.248 12.325 4.032 12.146 3.854C11.968 3.675 11.752 3.586 11.5 3.586C11.248 3.586 11.032 3.675 10.854 3.854L5.561 9.146C5.442 9.265 5.329 9.388 5.223 9.515L6.485 10.777C6.612 10.671 6.735 10.558 6.854 10.439L12.146 5.146ZM5.382 11.5C5.473 11.455 5.562 11.407 5.65 11.357L4.643 10.35C4.593 10.438 4.545 10.527 4.5 10.618L3.618 12.382L5.382 11.5Z" />
    </svg>
  );
}
Vue
Vue: see /icons/pencil.md
Svelte
Svelte: see /icons/pencil.md
HTML img
HTML img: see /icons/pencil.md
CSS
CSS: see /icons/pencil.md
Data URL
Data URL: see /icons/pencil.md
Sprite
Sprite: see /icons/pencil.md
SwiftUI
SwiftUI: see /icons/pencil.md
Compose
Compose: see /icons/pencil.md
Android XML
Android XML: see /icons/pencil.md
Flutter
Flutter: see /icons/pencil.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for
edit, write, modify, edit mode
Alternatives
Don’t confuse with
  • pen-tool: the vector pen tool in design apps, not edit
Also fits
  • rename: edit the content, not the name
  • edit file: the bare edit when the UI already names the file
Not for
  • line color (use line-color): pencil means edit; the pencil Google uses for border color is not ours
  • pen tool (use pen-tool): pencil means edit
  • draw (use pencil-squiggle): pencil alone means edit
  • stylus (use stylus): the pencil means edit
Tags
edit, pen, write
Category
Actions
Component name
PencilIcon
History
  • added
  • 20 px drawn, 24 px drawn

Family 6

pencil-gearpencil-linepencil-offpencil-sparklepencil-squarepencil-squiggle

More actions icons

arrow-down-a-z ban bolt bolt-off check check-double clipboard clipboard-alert clipboard-check clipboard-clock clipboard-list clipboard-off clipboard-pencil clipboard-plus clipboard-search clipboard-user · all actions icons

For agents

Metadata: /icons/pencil.json · Markdown: /icons/pencil.md · SVG: https://gentleface.com/svg/{style}/16/pencil.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/pencil.png

Feedback