KOENJP

SVG Icon Maker (Grid Editor)

ICON · 24×24 GRID · SVG

Draw icons on a 24×24 (or 16/32/48) grid with rectangles, circles, lines, polylines and text, add your own image as a tracing layer or vector paths, and export SVG code, .svg or PNG.

Pick a tool and drag on the canvas. Arrow keys move 1 unit, Shift+arrow 0.1.

16
24
48
dark
SVG CODE · 0 B

Your work autosaves in this browser only. Images are never uploaded. (Vector tracing: imagetracerjs 1.2.6 · Unlicense)

Good to know. Large images may not fit in autosave. The pen draws straight segments only, and currentColor export replaces every color, so it suits single-color icons.

HOW TO

How to use

  1. Pick a grid size (16, 24, 32 or 48) and drag on the canvas with the rectangle, circle, line or pen tool.
  2. Set stroke width, round caps and fill in the properties panel, then fine-tune with the select tool and arrow keys.
  3. Use Add image to place your own picture as a tracing layer, or add it as vectors to edit it as a path group.
  4. Copy the SVG code or download .svg or PNG. Export with currentColor so single-color icons follow the text color.
PAIRS WELL WITH

Pairs well with

FAQ

FAQ

Will I lose my icon if I close the page?

Your work autosaves to this browser’s localStorage, so you can pick up where you left off. Large images can fill the storage, so download an .svg now and then.

What does exporting with currentColor do?

Every stroke and fill becomes currentColor, so the icon follows the surrounding text color (CSS color) when used inline in HTML. Ideal for single-color UI icons.

Can I draw on my phone?

Yes. Tap to place shapes or pen points, and drag to move or resize. Finish a pen shape with the “Finish pen” button.