How to make pixel-perfect icons

Blurry small icons usually come from artwork that lands between pixels. Pixel-perfect icons align their edges and strokes to whole pixels so they render sharp at their target size.

Why icons blur

When an edge or a stroke's center falls on a half-pixel, the renderer anti-aliases it across two rows of pixels — soft, fuzzy edges. At 16–24px that's very visible.

The fixes

Design at the target size (don't just shrink a big icon).
Snap key edges to whole pixels on the grid.
Use whole, even stroke widths so strokes straddle pixels cleanly.
Align horizontal/vertical strokes to the pixel grid; keep diagonals consistent.

SVG reality check

SVG scales to any size, so a single icon can't be pixel-perfect at every size. Optimize for the sizes you actually ship (often 16/20/24), and consider separate optical sizes for the extremes.

Frequently asked questions

Why do my icons look blurry?

Their edges or strokes land on half-pixels, causing anti-aliasing. Snap them to whole pixels at the target size.

Can an SVG be pixel-perfect at all sizes?

Not simultaneously — tune it for the sizes you ship, and use separate designs for very small vs very large.