API and Development
Icon from @prepared911/ui/icon paints a glyph with currentColor. Import the glyph from @prepared911/ui/icons/<name> or from the @prepared911/ui/icons barrel. There is no SVGAsset enum and no color prop. size is IconSize (ExtraSmall, Small, Medium, Large). A meaningful icon takes label; a decorative icon omits it and is hidden from assistive tech. rotation is IconRotation (None, Quarter, Half, ThreeQuarter). There is no morph prop.
Import a glyph from its own subpath, or by name from the @prepared911/ui/icons barrel. Both give the same Glyph constant.
import * as glyphs from "@prepared911/ui/icons") keeps all of them, about 42 KB brotli. Module Federation remotes may import either form, and a remote bundles none of it. The tradeoff: the shell shares the barrel, so it ships every glyph eagerly and does not load glyphs lazily. A glyph whose name is a reserved word ends in Glyph, such as deleteGlyph, exportGlyph and publicGlyph.
Lucide glyphs are centerlines (glyph.stroke). Icon paints those with fill="none", stroke="currentColor", round caps and joins, and stroke-width="1.5" in the 24 viewBox, so the stroke scales with the icon: 1.5px at 24px, 1.25px at 20px, 1px at 16px, and 0.75px at 12px. Figma fallbacks and custom glyphs stay fills (fill="currentColor", no stroke).
| Name | Type | Default | Description |
|---|---|---|---|
glyph | Glyph | — | The glyph to render. Import from @prepared911/ui/icons/<kebab-name>. |
className | string | — | Optional module class from colocated CSS. |
foreground | Foreground | Foreground.Inherit | Paint color, from the same {@link Foreground} enum as Text. Members with an icon rung bind --color-icon-*
(Default, Subtle, Muted, Disabled, OnAccent and the Transient* members); Link, Accent,
AccentStrong and the status members bind the same --color-fg-link, --color-accent-fg* and
--color-status-*-fg tokens Text uses. {@link Foreground.Inherit} sets no color, so the glyph takes the
surrounding text color. |
id | string | — | Element id. |
label | LocalizedMessage | — | Accessible name. Omit for a decorative icon, which gets aria-hidden="true" and no name.
A control that uses an icon as its only content still needs its own label; this prop does not supply one.
Callers pass a {@link LocalizedMessage}. |
ref | Ref<SVGSVGElement> | — | Ref to the rendered svg. |
rotation | IconRotation | IconRotation.None | Clockwise rotation of the glyph on this svg. Uses the CSS transform property so it composes with the RTL
directional mirror (scale). Transitions use --motion-state-move and respect reduced motion (the system setting or data-motion="reduced"). |
size | IconSize | IconSize.Medium | Size token. |
spin | boolean | false | Turns the glyph continuously, clockwise in screen space, for a loading indicator. The one spin animation of the design
system: Button's loading state, ActionButton and ConfirmMorph use it. The turn is the individual rotate property,
which composes outside the RTL mirror, so it stays clockwise in a right-to-left subtree even for a directional glyph.
Under reduced motion (the system setting or data-motion="reduced") the glyph stops turning and stays visible. Spin is decorative: it adds no role
or name, so the owner announces the busy state. |
Icon and IconSize come from @prepared911/ui/icon. Glyphs come from @prepared911/ui/icons/<name> or from @prepared911/ui/icons. IconSize stops at large (24px). An empty-state graphic is EmptyState, the product mark is BrandMark (the default icon color in light appearance, the brand yellow in dark), and a picture (including an SVG file) is Image sized by a parent Box. Reduced motion for the page is useReducedMotion from @prepared911/ui. Icon itself does not take a morph prop; spin is the continuous loader rotation, and it is static under reduced motion.
There is no morph prop and no IconMorphTechnique. rotation is a quarter-turn step. spin is the loading rotation and stops under reduced motion.
foreground, an icon takes the surrounding text color. Set foreground to a member of Text's Foreground enum to color the glyph itself: members with an icon rung (Default, Subtle, Muted, Disabled, OnAccent, Transient*) bind --color-icon-*, and Link, Accent, AccentStrong and the status members bind the same tokens as Text. There is no raw color value and no className for color.
pr-voice-animation class (keyframes ship with @prepared911/ui icon styles).