Iconography draft v0.2.1
The icon font, the one style every icon is drawn in, its sizes and colors, and when an icon needs a name.
Icons are glyphs of Material Symbols Outlined, an icon font: a component names an icon by its ligature name and the font draws it. The font is variable; the system fixes its axes (fill, weight, grade, optical size) to a single style, so every icon looks the same in every component. The Figma library has no icon tokens: the font and its axes (font.icon.*) are the design system's additions, read directly by components. Icons take their size from the size scale and their color from the text next to them.
Tokens
Semantic tokens owned by the foundation (tokens in packages/components/specs/foundations/iconography.spec.json). They live in packages/tokens/src/semantic/ (recreated from the Figma library) or tokens/additions/semantic/ (added by the design system), with their other values in tokens/modes/, tokens/additions/modes/ and tokens/platforms/.
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
font.icon.family
|
fontFamily |
["Material Symbols Outlined"]
|
"Material Symbols Outlined"
|
--font-icon-family
|
font.icon.weight.light
|
fontWeight |
300
|
300
|
--font-icon-weight-light
|
font.icon.fill.off
|
number |
0
|
0
|
--font-icon-fill-off
|
font.icon.grade.normal
|
number |
0
|
0
|
--font-icon-grade-normal
|
font.icon.optical-size.20
|
number |
20
|
20
|
--font-icon-optical-size-20
|
Components following it
Derived from the component tokens aliasing the foundation's tokens.
| Component | Component tokens aliasing the foundation |
|---|---|
| Accordion |
|
| Alert |
|
| Breadcrumb |
|
| Button |
|
| Dropdown |
|
| Icon button |
|
| Icon |
|
| Pagination |
|
| Search field |
|
| Select |
|