Icon Grids & Keylines Demystified

Purpose, anatomy, and in-depth examples

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

Overview

Anatomy

Pixel grid, keyshapes, orthogonals, mask, and safe area

Pixel Grid

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

Keyshapes

IBM icons for Play, Save, Delete, and HD reference keyshapes
IBM icons for bee, cut, microscope, and eye reference keyshapes

Orthogonals

Material’s Volume Off icon references orthogonals

Mask

Play Store icons, like this Google Sheets icon, are masked in a rounded rectangle
Different OEMS apply different icon masks in their devices

Safe Area & Trim Area

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

Examples

iOS App Icon Grid

iOS app icon grid construction
Apple compass faces, clock faces, and gears follow their circular keylines
Non-circular iOS app icons don’t strictly reference the grid

Material’s Icon Grids

The Play Store grid’s keyshapes: circle, square, portrait rectangle, and landscape rectangle
The Play Store grid’s keyshapes: a circle, square, portrait rectangle, and lanscape rectangle
The Gmail icon uses the landscape rectangle keyline from Material’s Play Store grid
The Google Apps Device Policy icon uses the circular keyline from Material’s Play Store grid
3 Material grid variants — the Play Store, adaptive launcher, and system icon grid — are constructed based on context
Material system icon grid construction
Four scales of Material’s play icon-18, 24, 36, and 48 pixels
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

IBM Icon Grid

IBM’s keyshapes: circle, square, portrait rectangle, and landscape rectangle
IBM’s keyshapes
IBM icon grid construction
IBM icon against their grid (left to right, top to bottom): Play, Save, Delete, HD, Bee, Cut, Microscope, and Eye
IBM icons against their grid (left to right, top to bottom): Play, Save, Delete, HD, Bee, Cut, Microscope, and Eye

Phosphor Icon Grid

Phosphor icon grid construction
Phosphor keyshapes and example icons
Phosphor keyshapes and example icons
A few iterations of the Phosphor icon grid
A few iterations of the Phosphor icon grid

A Grid is a Guide

Optics > Grids

Using the 28 x 28px circular keyshape for the Google “G” feels a bit too big
Scaling the Google “G” down 4px in diameter help balance it visually with the set

Testing > Grids

Test sheets set the icon against others in the family

Grids + Principles + Rules

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

Final Thoughts

Phosphor icons against the Phosphor grid

Icon Grid Specifications

Apple

Google

IBM

Designer/writer. Brand, product, systems. • helenazhang.comdribbble.com/minoraxisphosphoricons.com