What the 24 by 24 icon grid is actually for
What is the 24 by 24 icon grid?
It is a coordinate space, not a pixel size. Every icon is drawn inside a 24 by 24 box and rendered at whatever size you need. The number 24 is chosen because it divides by 2, 3, 4, 6, 8 and 12, so common strokes, gaps and halves all land on whole numbers.
A new designer joins and asks why the icons are 24 pixels. They are not. They are 24 units, and the set renders at 16, 20, 32 or 64 pixels without changing a coordinate.
The grid is a shared coordinate space. Its value is that every icon in the set agrees on it.
Why 24 and not 20 or 32
Pick the number that divides well, because every decision inside the box is a division.
| Divisor | 24 gives | 20 gives | 32 gives |
|---|---|---|---|
| 2 | 12 | 10 | 16 |
| 3 | 8 | 6.67 | 10.67 |
| 4 | 6 | 5 | 8 |
| 6 | 4 | 3.33 | 5.33 |
| 8 | 3 | 2.5 | 4 |
| 12 | 2 | 1.67 | 2.67 |
24 is the smallest number that gives a whole result for all six. That matters because a stroke of 2, a gap of 4, a third of the box and a quarter of the box are all things you place constantly. On a 20 grid, thirds and sixths are decimals, and decimals accumulate into misalignment.
The safe area
The box is 24 units. The drawing area is not.
A 2 unit stroke centred on a path extends 1 unit each side. A path at x=23.5 puts half its stroke outside the viewBox, where it is clipped. So the usable range is 1.5 to 22.5 on both axes.
That leaves a 21 unit square to draw in, with a 1.5 unit margin the renderer never touches. The margin is not wasted. It is what stops icons from touching each other when they sit in a row.
Span is what makes a row look even
Two icons drawn correctly can still look wrong beside each other, because one fills the box and one does not.
An icon whose drawing spans 10 units next to one that spans 20 units reads as half the size, even though both are 24 unit icons. The fix is a floor on the span:
The longer axis of the drawing should span at least 13 of the 24 units.
We check this in the build. It catches the timid icon before it reaches the set, which is the only reliable moment, because a designer looking at one icon on a white page cannot see the problem. It only appears in a grid.
Optical size beats measured size
The span rule is a floor, not a target. Some shapes need to break it.
A circle that spans 20 units looks larger than a square that spans 20 units, because the square has more area near the corners where the eye measures. Sets that care about this shrink circles by about one unit and let squares run full width.
The same applies to weight. A solid triangle looks heavier than an outlined one of the same span. If your set mixes them, the solid shapes want to be slightly smaller.
These are judgements, not rules, and they are the reason an icon set drawn by one hand looks better than one assembled from several. Our 3000 icon set is drawn to one contract for exactly this reason.
The whole contract
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<!-- shape elements only, coordinates 1.5 to 22.5 -->
</svg>The icon file holds the shapes. The wrapper holds everything else. That means a change to stroke width, colour or cap style is one edit for the whole set, not 3000 edits.
Read more on choosing the stroke width.
Questions people ask
Can I mix 24 unit and 16 unit icons in one set?
Only if you rescale one of them to the other. Two coordinate spaces in one set means two stroke ratios, and the mismatch is visible in any row that shows both.
Does the grid mean icons must align to whole units?
No. It means the common measurements land on whole units. Curves and diagonals use whatever coordinates the shape needs. Snapping every point to a whole unit produces stiff drawings.
What if my icon genuinely needs the full 24 units?
Then it will be clipped. Redraw it inside the safe area. An icon that touches the edge also collides with its neighbours in a dense grid, so the constraint is protecting more than the stroke.
Should the viewBox ever be non square?
No. A non square viewBox breaks every layout that assumes icons are square, which is nearly all of them. Draw a wide object inside the square and accept the space above and below.