Gentleface › Design › pencil-squiggle

pencil-squiggle icon

Pencil squiggle: draw, freehand drawing, sketch, drawing. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

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="M3.49 8.45C3.349 8.447 3.231 8.396 3.137 8.298C3.043 8.199 2.998 8.08 3.001 7.939C3.017 7.183 3.338 6.537 3.964 5.999C4.191 5.805 4.471 5.614 4.804 5.427C4.995 5.32 5.28 5.174 5.661 4.989C5.937 4.856 6.136 4.756 6.258 4.691C6.447 4.589 6.597 4.496 6.709 4.411C6.903 4.264 7 4.127 7 4C7 3.853 6.964 3.721 6.891 3.606C6.819 3.491 6.71 3.392 6.564 3.309C6.204 3.103 5.682 3 5 3C4.467 3 4.027 3.139 3.678 3.418C3.34 3.689 3.128 4.061 3.041 4.536C3.016 4.672 2.947 4.779 2.833 4.857C2.719 4.936 2.595 4.962 2.459 4.937C2.323 4.913 2.216 4.843 2.137 4.73C2.059 4.616 2.032 4.491 2.057 4.356C2.189 3.636 2.521 3.064 3.054 2.637C3.584 2.212 4.233 2 5 2C5.859 2 6.546 2.147 7.061 2.441C7.356 2.61 7.584 2.822 7.744 3.079C7.895 3.32 7.979 3.588 7.997 3.882L5.886 5.992C5.629 6.119 5.432 6.221 5.294 6.298C5.018 6.454 4.792 6.607 4.616 6.758C4.419 6.927 4.271 7.104 4.171 7.289C4.075 7.469 4.019 7.665 4.004 7.878C3.83 8.061 3.666 8.252 3.513 8.45C3.505 8.45 3.497 8.45 3.49 8.45ZM10.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.146C10.319 2.974 10.516 2.84 10.74 2.743ZM12.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.146C12.325 4.968 12.414 4.752 12.414 4.5ZM7.086 12.821C7.153 12.818 7.221 12.83 7.291 12.856C7.543 12.952 7.779 13 8 13C8.611 13 9.216 12.941 9.817 12.822C10.441 12.699 10.994 12.524 11.475 12.298C11.971 12.064 12.351 11.794 12.612 11.488C12.871 11.185 13 10.856 13 10.5C13 10.213 12.952 9.991 12.856 9.836C12.775 9.706 12.649 9.614 12.476 9.561C12.342 9.52 12.243 9.439 12.179 9.318C12.115 9.198 12.104 9.071 12.146 8.936C12.188 8.801 12.268 8.702 12.389 8.639C12.509 8.575 12.636 8.564 12.771 8.606C13.183 8.732 13.494 8.967 13.706 9.31C13.902 9.626 14 10.023 14 10.5C14 11.102 13.791 11.647 13.372 12.137C13.018 12.552 12.527 12.908 11.9 13.202C11.345 13.464 10.715 13.664 10.011 13.803C9.346 13.934 8.676 14 8 14C7.657 14 7.302 13.93 6.935 13.791C6.806 13.742 6.713 13.654 6.657 13.528C6.6 13.402 6.597 13.275 6.646 13.146C6.656 13.12 6.667 13.095 6.68 13.072C6.818 12.992 6.953 12.909 7.086 12.821ZM5.65 11.357L4.643 10.35C4.593 10.438 4.545 10.527 4.5 10.618L3.618 12.382L5.382 11.5C5.473 11.455 5.562 11.407 5.65 11.357Z"/></svg>

React

// Gentleface "pencil-squiggle" (line-round), MIT. https://gentleface.com/icons/pencil-squiggle
import type { SVGProps } from 'react';

export function PencilSquiggleIcon(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="M3.49 8.45C3.349 8.447 3.231 8.396 3.137 8.298C3.043 8.199 2.998 8.08 3.001 7.939C3.017 7.183 3.338 6.537 3.964 5.999C4.191 5.805 4.471 5.614 4.804 5.427C4.995 5.32 5.28 5.174 5.661 4.989C5.937 4.856 6.136 4.756 6.258 4.691C6.447 4.589 6.597 4.496 6.709 4.411C6.903 4.264 7 4.127 7 4C7 3.853 6.964 3.721 6.891 3.606C6.819 3.491 6.71 3.392 6.564 3.309C6.204 3.103 5.682 3 5 3C4.467 3 4.027 3.139 3.678 3.418C3.34 3.689 3.128 4.061 3.041 4.536C3.016 4.672 2.947 4.779 2.833 4.857C2.719 4.936 2.595 4.962 2.459 4.937C2.323 4.913 2.216 4.843 2.137 4.73C2.059 4.616 2.032 4.491 2.057 4.356C2.189 3.636 2.521 3.064 3.054 2.637C3.584 2.212 4.233 2 5 2C5.859 2 6.546 2.147 7.061 2.441C7.356 2.61 7.584 2.822 7.744 3.079C7.895 3.32 7.979 3.588 7.997 3.882L5.886 5.992C5.629 6.119 5.432 6.221 5.294 6.298C5.018 6.454 4.792 6.607 4.616 6.758C4.419 6.927 4.271 7.104 4.171 7.289C4.075 7.469 4.019 7.665 4.004 7.878C3.83 8.061 3.666 8.252 3.513 8.45C3.505 8.45 3.497 8.45 3.49 8.45ZM10.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.146C10.319 2.974 10.516 2.84 10.74 2.743ZM12.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.146C12.325 4.968 12.414 4.752 12.414 4.5ZM7.086 12.821C7.153 12.818 7.221 12.83 7.291 12.856C7.543 12.952 7.779 13 8 13C8.611 13 9.216 12.941 9.817 12.822C10.441 12.699 10.994 12.524 11.475 12.298C11.971 12.064 12.351 11.794 12.612 11.488C12.871 11.185 13 10.856 13 10.5C13 10.213 12.952 9.991 12.856 9.836C12.775 9.706 12.649 9.614 12.476 9.561C12.342 9.52 12.243 9.439 12.179 9.318C12.115 9.198 12.104 9.071 12.146 8.936C12.188 8.801 12.268 8.702 12.389 8.639C12.509 8.575 12.636 8.564 12.771 8.606C13.183 8.732 13.494 8.967 13.706 9.31C13.902 9.626 14 10.023 14 10.5C14 11.102 13.791 11.647 13.372 12.137C13.018 12.552 12.527 12.908 11.9 13.202C11.345 13.464 10.715 13.664 10.011 13.803C9.346 13.934 8.676 14 8 14C7.657 14 7.302 13.93 6.935 13.791C6.806 13.742 6.713 13.654 6.657 13.528C6.6 13.402 6.597 13.275 6.646 13.146C6.656 13.12 6.667 13.095 6.68 13.072C6.818 12.992 6.953 12.909 7.086 12.821ZM5.65 11.357L4.643 10.35C4.593 10.438 4.545 10.527 4.5 10.618L3.618 12.382L5.382 11.5C5.473 11.455 5.562 11.407 5.65 11.357Z" />
    </svg>
  );
}

Vue

Vue: see /icons/pencil-squiggle.md

Svelte

Svelte: see /icons/pencil-squiggle.md

HTML img

HTML img: see /icons/pencil-squiggle.md

CSS

CSS: see /icons/pencil-squiggle.md

Data URL

Data URL: see /icons/pencil-squiggle.md

Sprite

Sprite: see /icons/pencil-squiggle.md

SwiftUI

SwiftUI: see /icons/pencil-squiggle.md

Compose

Compose: see /icons/pencil-squiggle.md

Android XML

Android XML: see /icons/pencil-squiggle.md

Flutter

Flutter: see /icons/pencil-squiggle.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

draw, freehand drawing, sketch, drawing, freehand

Alternatives

scribble: a doodle as an object, without the pencil

Don’t confuse with

pencil: pencil alone means edit

Also fits

doodle: the draw action or tool

Tags

draw, pencil, squiggle, freehand, sketch, doodle, scribble, ink

Category

Design

Component name

PencilSquiggleIcon

History

2026-10-16 added

Family 6

pencil pencil-gear pencil-line pencil-off pencil-sparkle pencil-square

More design icons

align-objects-bottom align-objects-bottom-three align-objects-left align-objects-left-three align-objects-right align-objects-right-three align-objects-top align-objects-top-three angle animation animation-off bezier-curve boolean-exclude boolean-intersect boolean-union bounding-box · all design icons

For agents

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

pencil-squiggle icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp