SVG Icon Editor

Create and edit simple SVG icons with path tools, fill/stroke controls, and optimized SVG code export.

Tested tool guide Tested browser tools Checked August 16, 2026

What SVG Icon Editor does, with a checked example

This editor makes simple icons as SVG markup: you sketch with path tools on a square canvas, tune fill and stroke settings, and copy a self-contained svg element from the export pane. Because the drawing is stored as path data inside a viewBox, the export scales cleanly at any size, which is the point of icon work. The surprise is that the deliverable is code, not an image: whatever color you chose is written into the markup, so a fixed hex fill will not adapt to dark and light UI unless you export with currentColor.

Worked example

A concrete input and expected output from the current implementation.

Input

Draw a check mark with the pen tool: click at (6,12), (10,16), (18,8) on a 24x24 canvas, set stroke to currentColor, width 2, round caps and joins, and fill to none.

Expected output

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12l4 4l8-8"/></svg>

The three clicks become the path commands M6 12, l4 4 and l8 -8, which end at (10,16) and (18,8), tracing the check mark's two strokes. The wrapper repeats the 24x24 viewBox and the stroke settings you chose; fill none with stroke currentColor is what makes the icon follow the surrounding text color once pasted.

How the result is produced

Drawing becomes path data

The pen tool records anchor points as you click, and the editor serializes them into a path d attribute using SVG's command syntax: M moves to a point, L draws a line, C draws a curve, Z closes the shape. You edit the outline by moving points on the canvas, and the path string updates to match - the same string that goes into the export.

The export is a self-contained element

The export pane emits one svg element: the viewBox that matches the canvas, the path data you drew, and the paint attributes you set. 'Optimized' means the editor's working state - grid, guides, selection, undo history - is excluded, so the markup contains only what a page needs to render the icon. Paste it into HTML directly, or wrap it for CSS usage like a mask image.

Good uses

Build a one-off custom icon - a brand mark, a status glyph, a specific arrow - when a full vector editor or an icon-library search is overkill.
Draft an icon for an empty state or error message and judge how it reads at small sizes before a designer redraws it.
Produce a theme-following variant of a stock icon by redrawing it with currentColor strokes, then paste the export into HTML or a CSS mask.

Limits and checks

The deliverable is code, not a file: the export gives SVG markup to paste somewhere. If the final target is a PNG, favicon, or store asset, rendering or converting the SVG is a separate step you must plan for.
Colors are baked in: a hex fill or stroke keeps that color in every context, light or dark. Export with currentColor if the icon must follow its surroundings, and remember the color then comes from CSS, not the markup.
Canvas units are not pixels: stroke width is expressed in viewBox units, so a 2-unit stroke renders at 2px only when the icon is displayed at its 1:1 size. At other sizes the stroke scales with the drawing, so preview at the size where the icon will actually appear.

Common questions

How do I make the icon follow the surrounding text color?

Set the stroke or fill to currentColor rather than a hex value. The icon then renders in the CSS color inherited by the svg element, so it adapts to light or dark UI without re-exporting. A hex value is permanent: it will not change when the page theme does, which is why icon sets use currentColor.

Why does my icon look wrong at 16 pixels when it looked fine on the canvas?

Two reasons. Thin strokes dominate: at small sizes a 1-unit stroke is less than a pixel, and fine gaps fill in. And details that were legible at canvas zoom get lost. Redraw with the target size in mind - thicker strokes, round joins, simpler geometry - or preview the export at actual size in the browser before using it.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.