The anatomy of an icon
Great icon sets don't happen by accident. They're built on a shared grid, keyline shapes and padding rules so that a circle, a square and an arrow all feel like they belong to the same family.
The grid
Most sets design on a fixed pixel grid — 24×24 is the most common. Everything aligns to it, which keeps strokes crisp and sizes predictable.
Live area and padding
Inside the grid is a smaller “live area” with padding around the edge (often 1–2px on a 24px grid). Keeping artwork inside the live area stops icons from touching their bounding box and from looking cramped next to text.
Keyline shapes
Keylines are reference shapes — a circle, a square, a portrait and a landscape rectangle — sized so they feel optically equal. A designer fits each icon to the appropriate keyline so a round icon and a square icon read as the same weight, even though their raw areas differ.
Frequently asked questions
What grid size should icons use?
24×24 is the most common baseline; 16, 20 and 48 are also used depending on context.
What are keyline shapes?
Reference shapes (circle, square, rectangles) that help size different icons so they look optically balanced together.