Material system icons
The reference public keyline grid — a 24 dp box, four keylines, a 2 dp stroke — that made the construction system a documented standard.
Design templates · keyline shapes · 16 / 24 / 48 px
The icon grid
A circle and a square at the same numerical size do not look the same size, and an icon set that ignores that fact always feels faintly uneven. The icon grid fixes it with a bounding box, an inset live area, and four keyline shapes tuned so that a square, a circle, and a rectangle each carry equal optical weight. Fit a new icon to the keyline that matches its silhouette and it slots into the family without a second thought. Here is what the overlay draws, the maths of optical sizing, the history from corporate pictograms through Susan Kare's pixels to Material and SF Symbols, and when the keyline is worth ignoring.
- Type
- Optical keyline grid
- Built from
- Bounding box + keylines
- Tradition
- System UI design
- Difficulty
- Intermediate
- Common sizes
- 16 · 24 · 48 px
- Also known as
- Keyline grid
See the keyline grid at five icon scales
‹›
At a 16px target, the live area is tiny and the keylines barely separate — here pixel snapping matters more than the keyline, because a half-pixel stroke turns to mush. Drag the handle to lay the grid over the artwork.
What the overlay shows
The overlay draws three things stacked on one centre. Outermost is the bounding box — the full nominal size of the icon, 16, 24, or 48px. Inset from it is the live area, the slightly smaller square the artwork should stay within so no icon ever touches its own edge; the gap between the two is the padding. Centred inside the live area are the four keyline shapes: a square, a circle, a vertical rectangle, and a horizontal rectangle, each sized so that an icon filling it reads at the same optical size as one filling any other.
The point of the keylines is not to trace around — it is to choose. When you draw a new icon you pick the keyline whose silhouette matches it: a square for a blocky file or folder, a circle for a clock or a record, the vertical rectangle for a tall document, the horizontal rectangle for a wide card. Sizing the artwork to that keyline rather than to the bounding box is what makes a round icon and a square icon sit at matching weight in a toolbar, which is the whole job of a system icon set.8
As an overlay the grid is also a diagnostic. Slide it across an existing icon set and the misfits announce themselves — the icon that crowds its live area and looks heavier than its neighbours, the one that hugs the square keyline when its shape is plainly round and so reads a touch small. The corner radius the keylines imply, and the padding the live area enforces, are both visible at a glance, which is faster than measuring each icon by hand.
The math, briefly
The arithmetic is the arithmetic of equal optical weight. On Google's Material system-icon grid — the canonical 24px icon grid — the bounding box is 24×24 dp with 2 dp of padding, leaving a 20×20 dp live area, and the four circle, square and rectangle keyline shapes are tuned within it:
box = 24 × 24 dp · padding = 2 dp · live = 20 × 20
square keyline = 18 × 18 · circle = ⌀20
vertical rect = 16 × 20 · horizontal rect = 20 × 16
The numbers look uneven on purpose. The circle is a full 20 dp across while the square is only 18, because a circle covers less area than its bounding square — about 78% of it — and its edge curves away from the corners, so a circle drawn to the square's 18 dp would read as visibly smaller.7 Bumping it to 20 dp restores the match. The same correction makes the vertical rectangle taller than the square and the horizontal one wider: equal optical weight, not equal measured size, is the target.2 The single rule that follows is to size to the keyline, never to the box, and to let the box only enforce padding.8
History — where it comes from
Verified
Corporate pictogram systems. The discipline of building a coherent set of small graphic symbols predates screens. Henry Dreyfuss's Symbol Sourcebook (1972) catalogued international graphic symbols and argued for a consistent visual language across them,6 and Adrian Frutiger's work on signage and his writing on signs and symbols established the case that a sign succeeds by being optically even and unobtrusive.5 Equal weight across a family of marks was the problem long before it had a keyline grid.
Kare and the pixel grid. In the early 1980s Susan Kare drew the original Macintosh icons literally on a pixel grid, plotting each glyph square by square so the trash can, the document, and the smiling Mac all read clearly at a handful of pixels across. It was icon construction reduced to its hardest case, where the grid and the artwork were the same thing.
Material and Apple formalise it. Google's Material Design (2014) published the keyline grid as a public specification — the 24 dp box, the live area, the four keyline shapes, the 2 dp stroke — and turned an internal craft habit into a documented system.8 Apple's Human Interface Guidelines describe a parallel construction for its system icons and SF Symbols, fitting glyphs to a consistent optical frame across weights and scales.7 The keyline grid is downstream of the same grid thinking that organised type and layout in the first place.1
Honest caveats
The keylines guide, they do not rule. They are a tool for optical balance, not a law of perception. Plenty of well-made icons sit slightly off every keyline because their particular silhouette reads better that way, and the grid is explicitly a starting point.4
Small sizes change the priority. At 16px the live area is only a dozen-odd pixels across, and whether a stroke lands on a whole pixel matters more than whether it touches a keyline. Pushed too hard the grid can also deaden an icon — over-regularised glyphs lose the small asymmetries that gave them character.3
When to use it (and when not)
| If you want to... | Use the icon grid | Don't use it for... | Difficulty |
|---|---|---|---|
| Build a coherent system icon set | The keylines give every silhouette equal optical weight | A single decorative illustration, not a UI glyph | Intermediate |
| Add one new icon to an existing family | Fitting it to the matching keyline keeps it on-weight | Logos that need bespoke compass-and-tangent construction | Intermediate |
| Audit a set for uneven weight | The overlay exposes the icons that crowd or float | Photographic or richly shaded raster artwork | Beginner |
| Keep edges crisp at 16 and 24px | The box and pixel snapping hold strokes on whole pixels | Large hero illustrations where pixels never show | Advanced |
| Lay out an app launcher icon | Switch to the platform app-icon grid, not the system one | Treating the squircle app icon like a 24px glyph | Advanced |
Where the icon grid does its work
Six contexts. The published systems are documented practice; the readings are analysis.
Apple SF Symbols
Thousands of glyphs fitted to one optical frame across weights and scales, so a symbol sits at the same weight as the text beside it.
Susan Kare's Mac icons
Icon construction at its hardest: each glyph plotted square by square on the pixel grid so it read clearly at a handful of pixels across.
Wayfinding pictograms
Airport and transit symbols built for equal optical weight so a row of them reads as one calm system at a glance, across languages.
The 16px favicon
At a dozen-odd pixels the keyline yields to the pixel grid: legibility comes from snapped strokes and a simplified silhouette, not optical finesse.
App launcher icon
A different, larger grid: a rounded square the platform masks, with its own safe zone — related to the keyline idea but a separate template.
Common mistakes
1
Sizing to the box, not the keyline
Fitting every icon to the same bounding square makes round and wide icons read smaller than blocky ones, so the set looks subtly uneven even though every icon is the same nominal size.
Fix: match each icon to the keyline shape closest to its silhouette and size the artwork to that, letting the box only set the padding.
2
Drawing large and shrinking
An icon drawn at 96px and reduced to 24 rarely lands its strokes on whole pixels at the small size, so the edges blur and the icon loses the crispness of its neighbours.
Fix: draw at the smallest target size first, with strokes on the pixel grid, then scale up only if you also ship larger sizes.
3
Inconsistent stroke weight
Letting the line weight drift from icon to icon breaks the family worse than any single off-keyline shape; a 2px and a 1.5px icon side by side never feel related.
Fix: fix one nominal stroke for the set — 2 dp at 24px is the common choice — and hold it across every glyph.
4
Obeying the keylines too rigidly
Forcing every glyph exactly onto a keyline can flatten the small asymmetries that give an icon its character, leaving a set that is even but lifeless.
Fix: treat the keylines as a default to return to; nudge an icon off them when its specific silhouette plainly reads better.
How different disciplines use it
For icon designers
This is the core tool of the trade. Set the box and live area, drop the keyline shapes, and build each glyph against the keyline that matches its form so the whole set reads at one weight. The real value shows when a library grows past fifty icons drawn over months: the grid is what lets a glyph added today sit cleanly beside one drawn last year. Keep one stroke weight, draw at the smallest target, and overlay the grid on the finished set to catch any icon that has drifted.
For UI & product designers
You usually consume an icon grid rather than author one, but knowing it makes you a better client of the icon set. When a sourced icon looks heavy next to the others, the overlay tells you whether it was sized to the box instead of the keyline. Pick icon sizes from the 8-point scale — 16, 24, 48 — so they drop into the layout without fractional gaps, and check that custom one-off icons match the family's keyline and stroke before they ship.
For brand designers
A brand icon set lives between the logo and the UI, and the keyline grid keeps it consistent with both. Use the keylines for the small functional icons, but reach for compass-and-tangent logo construction for the mark itself — the two grids do different jobs. The overlay is useful when extending a brand's icon language: build new icons on the same box, padding, and stroke the existing set used, so the family stays recognisable as it grows.
For developers & students
Developers shipping an icon set benefit from understanding why the keylines are uneven — it explains the seemingly odd numbers in a Material or HIG spec and stops well-meaning normalisation that would break the optics. For students, the icon grid is a compact lesson in optical versus measured size: overlay it on a system icon set, see why the circle is bigger than the square, and the principle transfers to type, logos, and layout alike.
"If you remember the shape of your spoon at lunch, it has to be the wrong shape. The spoon and the letter are tools; one to take food from the bowl, the other to take information off the page."
Adrian Frutiger, on signs and symbols5
Frequently asked questions
What is an icon grid?
An icon grid is a bounding box with an inset live area and a set of keyline shapes — a square, a circle, a vertical rectangle, and a horizontal rectangle — sized so that an icon filling any one of them reads at the same optical size. It gives a whole icon set equal visual weight despite the different silhouettes inside it.
Why is the circle keyline larger than the square?
Because of optical sizing. A circle of the same width as a square covers less area and its edge curves away from the corners, so it reads as smaller. To make the two feel equal the circle is drawn slightly larger — on Material's 24dp grid the square keyline is 18 wide and the circle is 20 in diameter.
What are the keyline shapes?
Four reference shapes centred in the live area: a square, a circle, a vertical rectangle, and a horizontal rectangle. Each is sized for equal optical weight, so a designer fits a new icon to whichever shape matches its silhouette and the icon sits consistently with the rest of the set.
What size should I draw system icons at?
Draw at the smallest target size, commonly 16, 24, or 48px, rather than drawing large and shrinking. A 24px icon with a 2px stroke holds up because every edge can be pixel-aligned; an icon drawn at 96px and reduced often blurs because its strokes no longer land on whole pixels.
Where does the icon keyline grid come from?
From corporate pictogram systems such as Henry Dreyfuss's Symbol Sourcebook and Adrian Frutiger's signage work, and from Susan Kare's early-1980s Macintosh icons drawn directly on a pixel grid. Google's Material keyline grid (2014) and Apple's Human Interface Guidelines formalised it into the modern system-icon grid.
Is the keyline grid a strict rule?
No. The keylines guide optical balance, they do not dictate it. Many icons sit slightly off the keyline because their specific silhouette reads better that way, and obeying the grid too rigidly can flatten an icon's character. The grid is a default for consistency, not a constraint to obey blindly.
Does the icon grid work for app icons too?
App launcher icons use a related but separate grid. Apple's app icon is a rounded-square — a squircle — at a large source size that the system masks, while Android adaptive icons separate foreground and background on their own grid with a safe zone. Those are platform app-icon grids, distinct from the small system-icon keyline grid.
How does the icon grid relate to the 8-point grid?
They agree by design. System icon sizes — 16, 24, 48 — are all multiples of 8, so icons drop cleanly into an 8-point spacing system without fractional gaps. Choosing icon sizes from the 8pt scale keeps icons aligned with the surrounding type and spacing in a layout.
Where can I get an icon grid 24px keyline template?
You can lay the keyline grid over your own artwork in the live tool — open the icon grid overlay, set a 24px target, and it draws the bounding box, the 20px live area, and the square, circle and rectangle keyline shapes for you. Because the overlay is browser-based and tool-agnostic, it works on a screenshot of any icon set, so you can audit existing icons against the same 24px keyline template you would draw new ones on.
References
- Müller-Brockmann, J. Grid Systems in Graphic Design. Verlag Niggli (1981). ISBN 3-7212-0145-0.
- Elam, K. Grid Systems: Principles of Organizing Type. Princeton Architectural Press (2004). ISBN 1-56898-465-0.
- Lupton, E. Thinking with Type. Princeton Architectural Press (2004). ISBN 978-1-56898-448-3.
- Samara, T. Making and Breaking the Grid. Rockport Publishers (2002). ISBN 1-56496-893-6.
- Frutiger, A. Signs and Symbols: Their Design and Meaning. Watson-Guptill (1989).
- Dreyfuss, H. Symbol Sourcebook: An Authoritative Guide to International Graphic Symbols. Van Nostrand Reinhold (1972).
- Apple Inc. "Human Interface Guidelines — App icons and system icons." Apple Developer Documentation. developer.apple.com/design/human-interface-guidelines.
- Google. "Material Design 3 — Icons / Layout grid." m3.material.io.
Other design template overlays
Notes from the studio · Three practitioners on the icon grid
Illustrative composites of how the tool gets used in practice — not quotes from named individuals.
The first thing I draw on a new set is the keyline shapes, not an icon. Get the circle bigger than the square and half the consistency battle is already won.
At 16px I throw the keyline away and listen to the pixel grid. A snapped stroke beats a perfect optical shape every single time at that size.
When a new hire's icon looks off, I just overlay the grid. Nine times out of ten they sized it to the box instead of the keyline.
Open the icon grid overlay
Set a target size, drop the box, the live area, and the four keylines, and build each icon to equal optical weight. Free, in your browser.
Launch Grid Maker Pro →