Icon

A named glyph from the system's set, sized with the text and colored by it. Decorative unless given a label.

Basic usage

Install the package:

pnpm add @design-schema/react @design-schema/tokens

Import the stylesheet once for the app, then the component:

import '@design-schema/tokens/calm-precise/css';
import '@design-schema/react/index.css';
import { Icon } from '@design-schema/react';

Examples

import { Icon } from '@design-schema/react';

<Icon name="check" />

Props

5 rows
PropTypeDefaultDescriptionPlatforms
name requiredcheck | dash | chevron-right | chevron-down | chevron-up | chevron-left | close | plus | minus | info | success | warning | danger | external | ellipsis | search | arrow-right | arrow-left | calendar | menu | list | grid | play | pause | folder | file—

Which glyph. The set is deliberately small and grows only when a component needs a shape; `info`, `success`, `warning` and `danger` are the four status shapes (circle-i, circle-check, triangle-!, octagon-x) so tone is never carried by color alone. `name` has no default; the Default story renders `check`. Enum stories for hyphenated names capitalise each segment and join them: `NameChevronRight`, `NameArrowLeft`.

web, lit, rn, swiftui
sizexs | sm | md | lg | xlmd

Rendered size, from the font-size scale so icons line up with text of the same size.

web, lit, rn, swiftui
inlinebooleanfalse

Size the glyph at 1em of the surrounding text and align it to the text baseline, ignoring `size`. For icons inside Text, Link and Button labels. On web and Lit `font-size: inherit` always has a surrounding size to read, so there is no fallback there. The fallback is React Native only: an inline icon that is not inside a Text has nothing to inherit and renders at font.size.md, so `inline` still ignores `size` in that case.

web, lit, rn, swiftui
labelstring—

Accessible name. When set (non-empty), the icon is meaningful and exposed as an image with this name; when omitted or empty, it is decorative and hidden from assistive technology — an empty string is the decorative case, not an authoring error. Most icons sit next to text and should have no label.

Accessibility: With label: role=img + aria-label (accessibilityRole image + accessibilityLabel, importantForAccessibility auto). Without: aria-hidden / accessibilityElementsHidden + importantForAccessibility no.

web, lit, rn, swiftui
colorstring—

React Native only: the color the parent passes, because there is no currentColor. Falls back to `color.foreground` when the icon is not nested in a Text (a nested Text glyph inherits its parent's color and the fallback is not applied).

rn

Accessibility

Decisions this component leaves to you

Supply an accessible name. This component has no text of its own to fall back on, so without one a screen reader announces its role and nothing else.

Implicit ARIA role: img.

Anatomy

glyph

What generation guarantees

Accessible name — Every instance carries a programmatic name. Where the component has no text of its own to use, the name is a prop the consumer supplies.

This component declares no contrast pair of its own — it inherits the colour of whatever it is placed in — and it does not animate.