Icon Grids & Keylines Demystified

Purpose, anatomy, and in-depth examples

Helena Zhang
9 min readMar 16, 2020
More in the iconography series:Foundations of Iconography7 Principles of Icon Design5 Ways to Create a Settings IconPixel-Snapping in Icon Design3 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.


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.