Icon Grids & Keylines Demystified

Purpose, anatomy, and in-depth examples

Helena Zhang
Mar 16 · 9 min read
Image for post
Image for post
More in the iconography series:

If you’re a digital designer, you’ve probably encountered an icon grid before. Perhaps you were tasked to create an app icon for iOS or Android, or you contributed to a set of UI icons. Perhaps—like me—you weren’t sure how to use it.

Though the lines can look like cryptic mumbo jumbo, 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, keyshapes, orthogonals, mask, and safe area
Pixel grid, keyshapes, orthogonals, mask, and safe area

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.

Material’s Volume Up icon sits snugly on their 24 x 24px system icon grid, using 2px strokes:

Material’s Volume Up icon sits snugly on their system icon grid
Material’s Volume Up icon sits snugly on their system icon grid

Pixel-snapping helps render icons sharp on lower resolution screens but has become much less of a requirement as hardware rendering has improved. More investigation on pixel-snapping in a future article.

Keyshapes

Keyshapes provide template shapes to start from. Four basics are common: a circle, square, portrait rectangle, and landscape rectangle.

IBM uses these 4 keyshapes to draw icons for Play, Save, Delete, and HD:

IBM icons for Play, Save, Delete, and HD reference keyshapes
IBM icons for Play, Save, Delete, and HD reference keyshapes

Think of keyshapes as a starter kit, providing just enough to set the standard while leaving room for flexibility and creativity. The intention is not for every icon to map perfectly to a basic shape.

IBM icons for bee, cut, microscope, and eye reference keyshapes
IBM icons for bee, cut, microscope, and eye reference keyshapes

Orthogonals

Orthogonals—borrowed from perspective drawingrefer to keylines that intersect the center point of the icon and create additional vertices to use. These lines commonly slice the canvas at 90° and 45°. When further angles are needed increments of 15° and 5° are the next steps.

Material’s Volume Off aligns its slash to a 45° orthogonal:

Material’s Volume Off icon references orthogonals
Material’s Volume Off icon references orthogonals

Mask

A mask customizes the container of an icon from the default square canvas. Masks may be embedded in the asset itself or applied afterwards. The Play Store applies a rounded rectangle mask across all its icons:

Play Store icons, like this Google Sheets icon, are masked in a rounded rectangle
Play Store icons, like this Google Sheets icon, are masked in a rounded rectangle

For launcher icons (which live on the home screen and app drawer), different Android OEMs apply different masks on their icons.

Different OEMS apply different icon masks in their devices
Different OEMS apply different icon masks in their devices

Safe Area & Trim Area

The safe area or live area shows where the important content of the icon should live, while the inverse— the trim area—shows the area to avoid.

In some cases the safe area is a soft guidance, but when the content will get cropped, the safe area is strict.

The Google Apps Device Policy icon minds the trim area:

Important content in the Google Apps Device Policy icon stays within the safe area
Important content in the Google Apps Device Policy icon stays within the safe area

Examples

Now that we are familiar with the components of an icon grid, let’s examine construction and usage in more detail.

iOS App Icon Grid

Apple’s app icon grid aids the creation of app icons displayed in the App Store and iOS system. It’s derived from golden ratio proportions and inscribed shapes, taking the length of one side as a starting point. Its ‘squircle’ mask is an adaptation of a —or Lamé curve—calculation.

Image for post
Image for post
iOS app icon grid construction

Apple’s circular icons—like Safari, Clock, Compass, and Settings—follow their circular keylines directly.

Apple compass faces, clock faces, and gears follow their circular keylines
Apple compass faces, clock faces, and gears follow their circular keylines

Non-circular icons have a harder construction to trace, but presumably use a combination of further golden ratio calculations and eyeballing:

Non-circular iOS app icons don’t strictly reference the grid
Non-circular iOS app icons don’t strictly reference the grid

I find this grid very pleasing, but not the most intuitive to use. It’s not apparent what kinds of further calculations to make or rules to follow.

Material’s Icon Grids

The main difference between iOS and Material grids is an addition of keyshapes in Material. Four basic shapes are templated—a circle, square, portrait rectangle, and lanscape rectangle:

The Play Store grid’s keyshapes: circle, square, portrait rectangle, and landscape rectangle
The Play Store grid’s keyshapes: circle, square, portrait rectangle, and landscape rectangle
The ’s keyshapes

Gmail uses the landscape rectangle keyline:

The Gmail icon uses the landscape rectangle keyline from Material’s Play Store grid
The Gmail icon uses the landscape rectangle keyline from Material’s Play Store grid

Google Apps Device Policy uses the circular keyline:

The Google Apps Device Policy icon uses the circular keyline from Material’s Play Store grid
The Google Apps Device Policy icon uses the circular keyline from Material’s Play Store grid

Google specifies a few variants of this grid, adapted to fit different contexts. The launcher icon grid, for example, has a generous trim area to allow different Android OEMs to apply their own shape mask. Though proportions vary, these grids are spiritually the same:

3 Material grid variants — the Play Store, adaptive launcher, and system icon grid — are constructed based on context
3 Material grid variants — the Play Store, adaptive launcher, and system icon grid — are constructed based on context

Here’s a breakdown of the system icon grid, used to create icons for product interfaces:

Image for post
Image for post
grid construction

A Note on Key Dimensions

Note that the key canvas size for this icon grid is 24 x 24px, which means that icons are created at this size. In usage, however, Material system icons may be scaled to a range of sizes:

Four scales of Material’s play icon-18, 24, 36, and 48 pixels
Four scales of Material’s play icon-18, 24, 36, and 48 pixels

In some icon families, designers draw custom alternate sizes to optimize performance. For example, ’s compass icon gracefully reduces detail for clarity and readability as the icon gets smaller:

Nucleo’s compass icon employs different levels of detail from 64px to 16px
Nucleo’s compass icon employs different levels of detail from 64px to 16px
Nucleo’s compass icon employs different levels of detail from 64px to 16px

This is a sophisticated move but time consuming to maintain across many icons. With more nuance comes more complexity. Consider if it’s necessary.

IBM Icon Grid

IBM’s icon grid is very close to Material’s, offering a similar palette of keyshapes:

IBM’s keyshapes: circle, square, portrait rectangle, and landscape rectangle
IBM’s keyshapes: circle, square, portrait rectangle, and landscape rectangle
IBM’s keyshapes

It’s elegantly constructed on a 32 x 32px key canvas, with clean, even measurements:

Image for post
Image for post
IBM icon grid construction

You’ve seen these above:

IBM icon against their grid (left to right, top to bottom): Play, Save, Delete, HD, Bee, Cut, Microscope, and Eye
IBM icon against their grid (left to right, top to bottom): Play, Save, Delete, HD, Bee, Cut, Microscope, and Eye
against their grid (left to right, top to bottom): Play, Save, Delete, HD, Bee, Cut, Microscope, and Eye

Phosphor Icon Grid

Last year, and I launched , an icon family created for Android users to theme their home screens with a minimal aesthetic. Phosphor adapts Material’s grid to support its distinct flavor.

Image for post
Image for post
Phosphor icon grid construction

Its keyshapes are roughly based on area calculations to strike visual balance. We reference the circle to draw Daylio and New York Times, a square to draw LinkedIn and a calculator, a portrait rectangle for Google Docs and Microsoft Word, and a landscape rectangle for AliExpress and NBC:

Phosphor keyshapes and example icons
Phosphor keyshapes and example icons
keyshapes and example icons

In some cases (second row) we use the mold directly and in others (last row) it’s just a general guide.

It’s important to note that Phosphor’s grid wasn’t set in stone from the beginning. Over time, we stripped away the pieces that didn’t prove helpful (extra orthogonals for example), we clarified and emphasized the trim area, and we modified keylines as the rules of our icon family took shape.

A few iterations of the Phosphor icon grid
A few iterations of the Phosphor icon grid
A few iterations of the Phosphor icon grid

A Grid is a Guide

As with any grid, icon grids are meant to be used as guides, not hard rules. Drop them when they stop working for you.

Optics > Grids

Always check for optical balance. In the example below, referencing the circle keyshape directly doesn’t feel quite right.

Using the 28 x 28px circular keyshape for the Google “G” feels a bit too big
Using the 28 x 28px circular keyshape for the Google “G” feels a bit too big

The “G” feels a bit big in context. When scaled down a bit, it feels more balanced to the set.

Scaling the Google “G” down 4px in diameter help balance it visually with the set
Scaling the Google “G” down 4px in diameter help balance it visually with the set

It’s often necessary to deviate from the grid for visual balance. Follow what looks optically right versus strict metric values.

For more about optical effects, read this wonderfully illustrated article by Slava Shestopalov: .

Testing > Grids

Test your icons in context to check for consistency and efficacy. If you’re creating an iOS app icon, how does it sit with others on the home screen? Inside a folder, inside a notification, in the Settings view? In the App Store? Test in native contexts (versus design software) for the highest accuracy.

For Phosphor, we developed a rigorous QA procedure, using ‘test sheets’ that place each new icon next to its siblings at different sizes and colors. We preview directly on Android devices to proof for clarity, readability, and stylistic fit.

A test sequence for the Curiosity icon:

Test sheets set the icon against others in the family
Test sheets set the icon against others in the family

Grids + Principles + Rules

Icon grids provide a handy visual trailhead, but don’t communicate all the technical rules and design principles that each icon should follow. Pair icon grids with clear documentation to paint the full picture.

In my own practice, icon grids are more of a background reference while the principles and rules are top of mind:

Example principles from the Phosphor icon family:• Clarity. Be clear first and foremost. Make the icon recognizable and readable. Never sacrifice clarity of what the icon represents.• Brevity. Use as few details as possible. Phosphor’s style is reductive. Be concise and intentional with every stroke to communicate the essence of what’s being represented.• Character. Be quirky. Add unique details sparingly to bring a little warmth and play to what may otherwise be a very austere set.Example technical rules from the Phosphor icon family:Use a 48 x 48px canvasUse a 1.5px centered strokeUse rounded end capsUse contiguous strokes unless broken segments are helpful for comprehensionUse straight segments, perfect arcs, and 15° angle increments where possible• Adjust curves when necessary to maintain the design principlesUse whole, even number increments for measurements where possible; fold down to 1px and .5px if necessaryStart with the following shape keylines: 28 x 28px circles, 25 x 25px squares, 28 x 22px landscape rectangles, 22 x 28px portrait rectanglesKeep a 6px thick trim area

These are living guidelines that evolve as we learn what works and what breaks. Be okay with iteration, and update your documentation accordingly.

Final Thoughts

When used consistently, icon grids promote harmony within a family of icons and speed up the design process. They are quite a beautiful artifact, but make sure the tools and processes in place are working for you. Over time, they can become outdated or misused—evaluate if your grid is useful, if you should set it aside, or if it’s time to make a revision.

Image for post
Image for post
icons against the Phosphor grid

Icon Grid Specifications

Apple

  • : Official templates that include canvas dimensions for App Store icons (but unfortunately no vector grids)

Google

IBM


🎶 Written to the sounds of:

🙏 Thanks to: Toby Fried, Monica Chang, Tate Chow, and Christine Lee

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store