The set
Grid and rules
Every icon is drawn to the same numbers. Most of them are checked by the build, so an icon that breaks one never reaches dist/.
The grid
| Item | Value | Why |
|---|---|---|
| Canvas | 24 × 24, viewBox="0 0 24 24" | |
| Pixel grid | 16 cells of 1.5 | At 16px, 1.5 is exactly one pixel. |
| Stroke | 1.5 | One pixel at 16px. |
| Straight lines | Centered on 0.75 + 1.5k (2.25, 3.75 … 21.75); the middle axis 12 is allowed | Both edges of the line land on pixel edges at 16px and at 24px on 2x screens. |
| Circles | Center ± (radius + 0.75) is a multiple of 1.5 | The top, bottom and sides land on pixel edges. |
| Diagonals | 45°, otherwise steps of 15° (short lines under 1 and shapes with fivefold symmetry excepted) | Edges blur evenly. No 15° steps give fivefold symmetry, so a shape whose lines all match after a fifth of a turn (a regular star, a pentagon, five spokes) keeps its own angles. |
| Live area | 1.5 to 22.5, a padding of 1.5 | The ink of every style stays inside. |
| Keylines | Circle 21 across, square 18, wide 21 × 15, tall 15 × 21 | A square of 18 and a circle of 21 have about the same area, so they look the same size. |
| Gaps | 1.5 or more between shapes that do not touch, and inside a shape | One stroke of space keeps parts apart at 16px. |
| Numbers | Three decimals at most | |
| Bold stand-off and cut | 1.5 | |
| Duotone opacity | 0.5 only | |
| Surface tint | 0.2 | The inside of a single-object icon in Line Duotone. |
| Color | currentColor only | Icons follow the text color. |
At 20px a 1.5 cell is 1.25 pixels, so this grid does not line up there. 16px and sharp 24px came first.
Corners
Square corners are rounded with radii on a 1.5 scale at the outer edge (0.75, 2.25, 3.75 and 5.25 at the stroke’s center). Small parts that turn sharply, such as handles, use 0.75; most parts use 2.25; large frames shaped like containers, such as copy, folder, speech bubble, bookmark, trash and tray, use 3.75.
The drawings use plain arcs. The build smooths every rounded corner the way Figma does at 100%, so the curve eases out of the straight line instead of starting as a circle. A corner whose sides are too short to take even half of the smoothing stops the build: use a smaller radius or a longer side.
Names and tags
- A name describes what the icon shows, not what it is for:
gear, not settings;magnifier, not search. - Names are lowercase American English joined by hyphens. With several parts, the largest comes first; members of one family share a start (
circle-info,message-text). - The use goes into the tags. Tags are lowercase and never repeat the name or say “icon”.
What the build refuses
- A source that breaks the format, a color other than
currentColor, an attribute that is not allowed, or a number with four or more decimals. - A straight line or circle off the pixel grid, a diagonal off the 15° steps (other than in a shape with fivefold symmetry), or a corner radius off the scale.
- A corner with room for less than half of its smoothing.
- Shapes closer than 1.5 that do not touch.
- A tag that is not lowercase or repeats the name.
- Ink of any style outside the live area.
- A style that is missing, a duotone without both tones (icons made only of open lines excepted), or a surface tone on a shape that is not a closed outline.
- A filled file that does not match the area it was computed from.
A separate report, pnpm compare, checks every icon for likeness to other open icon sets and measures sharpness and visual weight at small sizes. Icons it flags are looked at again by hand.