Tools

Icon studio

Two modes. A pixel grid for crisp 16, 24, or 44-cell icons, and a freehand canvas with adjustable brush and color for hand-drawn annotations. Both export as SVG. Touch and mouse both work.

Pixel grid

Preview

67 pixels

At actual sizes

11px

12px

13px

14px

16px

18px

24px

Canvas

Actions

Export

<svg viewBox="0 0 16 16" shape-rendering="crispEdges">
  <g fill="currentColor">
    <rect x="4" y="2" width="4" height="1" />
    <rect x="9" y="2" width="3" height="1" />
    <rect x="3" y="3" width="2" height="1" />
    <rect x="6" y="3" width="3" height="1" />
    <rect x="11" y="3" width="2" height="1" />
    <rect x="3" y="4" width="1" height="1" />
    <rect x="6" y="4" width="7" height="1" />
    <rect x="3" y="5" width="5" height="1" />
    <rect x="13" y="5" width="2" height="1" />
    <rect x="1" y="6" width="3" height="1" />
    <rect x="5" y="6" width="1" height="1" />
    <rect x="13" y="6" width="1" height="1" />
    <rect x="1" y="7" width="1" height="1" />
    <rect x="4" y="7" width="1" height="1" />
    <rect x="13" y="7" width="2" height="1" />
    <rect x="1" y="8" width="2" height="1" />
    <rect x="4" y="8" width="1" height="1" />
    <rect x="15" y="8" width="1" height="1" />
    <rect x="1" y="9" width="3" height="1" />
    <rect x="15" y="9" width="1" height="1" />
    <rect x="1" y="10" width="1" height="1" />
    <rect x="3" y="10" width="1" height="1" />
    <rect x="13" y="10" width="2" height="1" />
    <rect x="1" y="11" width="1" height="1" />
    <rect x="3" y="11" width="1" height="1" />
    <rect x="10" y="11" width="3" height="1" />
    <rect x="1" y="12" width="3" height="1" />
    <rect x="8" y="12" width="3" height="1" />
    <rect x="2" y="13" width="6" height="1" />
  </g>
</svg>

Freehand annotation

Draw with your mouse or finger. Pick a color, set thickness with the slider, then save as PNG or SVG. Use SVG to paste vector paths back into source.