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.
