Icon Editor

Create and edit icons on a pixel-perfect grid with vector shapes, strokes, and export options.

Tested tool guide Tested browser tools Checked August 16, 2026

What Icon Editor does and how it behaves

Icon Editor builds compact graphics by placing vector shapes and strokes on a pixel-oriented grid, then exporting the completed icon. The grid helps coordinate edges, centers, spacing, and proportions while the vector geometry remains scalable. The detail most often missed is that a stroke has visible width beyond its path. A centered 2-unit stroke extends 1 unit on either side, so path coordinates can fit inside the canvas while the painted icon reaches outside it or appears closer to one edge.

How the result is produced

Shape and stroke geometry

Construct the icon from vector shapes positioned against the grid. A fill paints a shape's interior, while a stroke paints its outline along the path. Use consistent coordinates, dimensions, and stroke widths across related shapes. For small icons, compare the visible outer stroke edge with the intended pixel boundary, because the path itself is not the complete painted area.

SVG size and output

For an SVG export, shapes remain coordinate-based geometry rather than becoming a fixed-resolution bitmap. The SVG viewBox establishes the internal coordinate system, and the displayed width and height determine its rendered size. Scaling is mathematically clean, but the browser still maps edges onto screen pixels, so inspect the icon at the exact interface sizes in which it will appear.

Good uses

Drawing a 16-by-16 toolbar icon from rectangles, circles, and strokes while keeping its margins and visual weight balanced on a small grid.
Creating a coordinated family of outline icons whose centers, baselines, gaps, and visible stroke edges align when the icons appear beside one another.
Preparing an SVG icon for a website or design system after checking its silhouette at common UI sizes and reserving enough canvas space for stroked edges.

Limits and checks

Grid placement does not guarantee crisp rasterization. A one-unit stroke centered on an integer coordinate has edges at half units, which may be anti-aliased depending on the rendered scale and device pixel ratio.
A shape's path bounds and painted bounds are different when a stroke is present. Line caps, joins, and stroke width can make the visible result extend beyond the coordinates used to construct the path.
A scalable SVG is not automatically legible at every size. Closely spaced shapes can merge, narrow gaps can disappear, and consistent mathematical alignment can still look optically uneven in a very small icon.

Common questions

Will the exported icon stay sharp at every size?

Usually, an SVG version can be enlarged without the blockiness of a bitmap because its shapes remain coordinate-based. No, that does not mean one drawing is optimal at every size. At 16 px, thin strokes and small gaps can merge or blur. Check each target size and make a size-specific variant when necessary.

Does keeping every path inside the canvas prevent clipping?

No. The path can be inside the canvas while its stroke extends outside it. A 2-unit centered stroke adds 1 unit on each side of the path. Leave enough inset for the painted edge, then inspect the export. Whether anything is visibly cut off also depends on the exported viewport and how the SVG is embedded.

References and verification

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