Skip to content

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.

Specimens

The tokens this foundation is built from, drawn from packages/tokens/src/: raw primitives and the semantic decisions on top of them. A token added to one of these groups appears here with no site change; values that differ per mode or per platform are shown next to each other.

Icon style

Every icon the component examples use, drawn in the system style, and the axis values.

font.icon.* · 5 tokens · The icons the components use, drawn with the icon font tokens, and the axis values.

  • arrow_forward
  • close
  • add
  • content_copy
  • edit
  • download
  • delete
  • share
  • settings
  • verified
  • schedule
  • check_circle
  • warning
  • error
  • info
  • more_vert
TokenValueAlias
font.icon.family "Material Symbols Outlined" —
font.icon.weight.light 300 —
font.icon.fill.off 0 —
font.icon.grade.normal 0 —
font.icon.optical-size.20 20 —

Icon sizes

An icon at each size the controls use.

size.2 size.3 size.4 · 3 tokens · An icon drawn at that size.

  • size.2
    16px
  • size.3
    20px
  • size.4
    24px

Examples

Components following this foundation, rendered by their web templates, once per mode. States are forced with data-state, so what you see is exactly what the CSS defines, without a keyboard.

light
dark