Icons in this system are marks: a single 1.5px ink stroke on a 24×24 grid, no fill, square caps, miter joins. They sit beside type at the same weight as a body word. If a mark needs explanation, it isn't a mark — write the word. Click any mark below to copy its <use> markup.
0 0 24 24 · always · padding lives inside the path, not in the boxcurrentColor · width 1.5 · linecap square · linejoin miternone — the only fills permitted are inside icon-circle-dot and icon-spinner14 inline · 16 buttons · 20 alerts & nav · 24 default · 32+ empty statescurrentColor — the icon inherits text color, never declares its own<svg class="ic"><use href="icons.svg#icon-run"/></svg>aria-hidden="true" · meaningful → role="img" + <title>One stroke. Every mark is drawn at 1.5px. We never have a 2px outline with a 1px detail.
One tone. No two-tone duotone marks. They become illustrations, and we have illustrations elsewhere.
Square caps · miter joins. The marks share the geometry of the type — Exposure caps and Söhne mono ends are not rounded, and neither are these.
Inherit color. An icon is the color of its surrounding text, always. The only exception is the red signal channel.
Filled icons (Material-style)
Two-tone or duotone marks
Rounded corners or rounded caps
Hand-drawn / sketchy variants
Emoji as system iconography
Color icons that don't inherit currentColor
An icon used without (or as a substitute for) a label, except close · search · live
icons.svg · single sprite · <use href="icons.svg#icon-NAME"/> ·
Color always currentColor · the icon is the same red as its label, or the same ink ·
A11y aria-hidden="true" when redundant with text · role="img" + <title> when alone ·
If you need a 33rd ask · we'd rather grow the set deliberately than have two marks for one idea