Icon Grids & Keylines Demystified
Purpose, anatomy, and in-depth examples
--
More in the iconography series:• Foundations of Iconography• 7 Principles of Icon Design• 5 Ways to Create a Settings Icon• Pixel-Snapping in Icon Design• 3 Classic Icon Families
If you’re a digital designer, you’ve probably encountered an icon grid before—perhaps while contributing to a set of product icons or creating an app icon for iOS or Android. Perhaps—like me—you weren’t sure how to use the grid. Though the lines can look cryptic, there’s a purpose behind each one. Let’s investigate.
Overview
Icon grids represent an icon set’s rules visually, laying a canvas to draw from. They delineate the icon’s dimensions, the underlying pixel grid, and additional key gridlines — or keylines — to follow.
An icon grid is a tool for speed and consistency. When one designer draws icons, they know the rules intimately because they invented them. But over time these can get lost. Across larger icon sets and larger teams, an icon grid provides the same starting point for multiple contributors.
Anatomy
The necessary parts of an icon grid are determined by context—where the icons will be displayed, how they will be masked, and what shapes will be useful as templates.
Ingredients may include a pixel grid, keyshapes, orthogonals, mask, and safe area / trim area, each providing reference points to draw against. As with any recipe, the creator of the grid chooses what to use and what to omit.
Pixel Grid
A pixel grid helps you draw in specific increments if you are snapping to a grid. A 1px increment has long held the standard in digital and a .5px increment has more recently become adopted.
