Pixel Perfect Icons the Easy Way

Small icons look blurry up close, and it's almost always a pixel-grid alignment problem, not your drawing. This guide explains why that happens, gives the stroke-width rules that actually matter, and shows the one-click Pixel-Align Selection command that does the fiddly part for you.

Why small icons go blurry

SVG coordinates are continuous, but a screen is a fixed grid of whole pixels. When a shape edge falls between two pixel centers, the renderer has to anti-alias it: it spreads that edge across two pixels as semi-transparent grey, which your eye reads as fuzzy. The effect is worst at 16-24px, where one soft pixel is a big fraction of the whole icon.

Stroke width vs the grid (get this right)

Where a stroke lands depends on whether its width is even or odd. You control it through the centerline (the path coordinate), because the renderer draws half the stroke width on each side of it.

• 2px (even) stroke: put the centerline on a whole-pixel coordinate. The 2px then covers two whole pixels and both edges land on grid lines, so it stays crisp.
• 1px (odd) stroke: put the centerline on a half-pixel (x.5) coordinate. The 1px then fills exactly one whole pixel. Center a 1px stroke on a whole integer instead and it splits into two grey half-pixels, which is the classic blur.
• 1.5px (fractional) stroke: you cannot make both edges crisp at once, so be honest about the trade-off. The practical fixes are to align the outer edge to the grid so the softness falls inward and the outline stays clean (the "push the half-pixels inward" trick), design at 2x, or just switch to a whole-number stroke.

If you want the underlying principles in depth, including grids, snapping, whole-pixel coordinates, and a clean viewBox, read our guide on the manual fundamentals of pixel-perfect SVG icons.

See it in the code

The same rules show up directly in the markup. Here's a 1px stroke, before and after:

<!-- Blurry: a 1px stroke centered on a whole pixel -->
<line x1="12" y1="4" x2="12" y2="20" stroke="currentColor" stroke-width="1"/>

<!-- Crisp: the same line nudged to a half-pixel -->
<line x1="11.5" y1="4" x2="11.5" y2="20" stroke="currentColor" stroke-width="1"/>

A 1px stroke is odd, so its centerline belongs on a half-pixel. On x=12 it splits across two pixels and goes grey; on x=11.5 it fills one pixel and stays sharp.

A 2px stroke flips the parity:

<!-- Blurry: a 2px stroke centered on a half-pixel -->
<line x1="11.5" y1="4" x2="11.5" y2="20" stroke="currentColor" stroke-width="2"/>

<!-- Crisp: the same line snapped to a whole pixel -->
<line x1="12" y1="4" x2="12" y2="20" stroke="currentColor" stroke-width="2"/>

A 2px stroke is even, so its centerline belongs on a whole pixel. On x=11.5 each edge lands mid-pixel and softens; on x=12 both edges land on grid lines and stay crisp.

The easy way: Pixel-Align Selection

Doing this by hand on a real icon is tedious. A finished icon has many anchors, curves, and compound paths, and nudging each one to the right whole or half pixel is slow and easy to get wrong. IconVectors 1.70 adds Pixel-Align Selection to do it in one step: select the drawing, run the command, and IconVectors snaps the shape to the grid by its stroke edges automatically.

It's not Snap to Grid, which is a drawing mode that constrains new points. Pixel-Align analyzes the current selection once and applies a single geometry correction. It's stroke-aware, so 1px strokes are aligned around half-pixel centerlines and 2px strokes around integer centerlines, and it does a smart proportional remap (snapping key coordinates and fitting the geometry) rather than naively snapping every anchor, which would deform the icon. It doesn't change your stroke widths, it's fully undoable, and it leaves the artwork selected.

Get a pixel-perfect icon, step by step

1. Open or draw your icon at its target size
   Work at the size it will ship (for example a 24x24 viewBox), since alignment is meaningless at the wrong scale. Open existing art with File -> Open... (Ctrl+O).
2. Choose stroke widths with parity in mind
   Decide 1px vs 2px per shape using the rules above (even strokes on whole-pixel centerlines, 1px on half-pixels), and keep inner shapes on the same parity.
3. Select the artwork you want to align
   For a single icon, select everything.
4. Run Pixel-Align Selection
   Use Element -> Align -> Pixel-Align Selection, the Control Bar button, the X key, or Shift+Alt+P. IconVectors snaps the stroke edges to the grid and leaves the result selected; undo if you want to compare.
5. Check it at 100% and at a high zoom
   View at actual size to confirm crisp edges, then zoom in to confirm strokes sit on whole/half pixels as intended.
6. Export the SVG
   When it looks right, export with File -> Export -> Export Minified (Shift+Ctrl+M).

Ship crisp icons faster

Aligning icons by hand is worth doing once, because it teaches you the parity rules and why edges go soft. After that, Pixel-Align Selection handles the tedious part so you can ship crisp icons without counting half-pixels. The rules still apply; the command just enforces them for you.

Download IconVectors and try Pixel-Align Selection on your own icons.