Pixel-snapping in icon design

A rendering test.

More in the iconography series:
• Foundations of Iconography
• 7 Principles of Icon Design
• 5 Ways to Create a Settings Icon
• Icon Grids & Keylines Demystified
• 3 Classic Icon Families

We all want our designs to display sharp on all platforms, for all our users. To achieve this goal for digital icons, a best practice has held the standard: it is recommended to pixel-fit or pixel-snap icons to sit precisely on a pixel grid. This means that all strokes and shapes snap to 1px increments and are positioned on the pixel.

Most icon guides and design systems advocate this in their specs — Google Material, Adobe Spectrum, IBM Carbon, and Firefox Photon to name a few.

The rationale is that because digital images are rendered to a matrix of pixels on screen, aligning elements to whole pixels produces sharper results; placing elements on subpixels or half pixels leads to fuzzier results.

Though curved and angled lines can’t perfectly conform to a square pixel, the idea is to get as close as possible.

Makes sense, but I wanted to dig a little deeper. With today’s high resolution screens and potential non-integer scaling (e.g., from density-independent pixels), does this guidance still hold true? How important is pixel-snapping in practice? What effects do device, browser, file type, design software, and display magnification have on an icon’s render?

To answer these questions, I conducted a test.

Procedure

I created 4 test icons on a 48 x 48px canvas, using a 2px stroke and a range of straight lines and curves.