Skip to content

role presentation

Icon draft v0.1.0

A glyph of the system's icon set, decorative or named.

An icon draws one glyph of the icon set (Material Symbols, the Iconography foundation) at a size and in a color of the system. Next to text it is decoration and says nothing to assistive technology; alone, it must be named by what it means, and is then exposed as an image. Icons inside the other components (buttons, alerts, selects) are those components' parts, styled by their tokens; this component is for icons placed by a product in its own content.

Decisions

From decisions in packages/components/specs/components/icon.spec.json, newest first. Every active decision is implemented by the spec, the tokens, the web implementation and the guidelines.

Typography

  • An icon is a glyph of the icon font (Iconography foundation: Material Symbols Outlined, fill off, weight 300, grade 0, optical size 20) at 16, 20 or 24 px (small, medium, large).

    icon-font-glyph · 2026-10-03 · v0.1.0

    icon.container.font-familyicon.container.font-weighticon.container.fillicon.container.gradeicon.container.optical-sizeicon.container.size.*

Color

  • By default an icon inherits the surrounding text color (no token: currentColor); the other options read the Figma library's on-base icon roles: neutral (secondary), brand, success, warning, error, info.

    colors · 2026-10-03 · v0.1.0

    icon.container.color.*

Accessibility