Icon
One box, one size, one accessible name. The glyph is passed in as a value, so a page that uses two icons ships two.
import { Icon } from "@dede-style/ui/icon" and the glyph from @dede-style/ui/icons, then <Icon glyph={iconStar} />. There is no name string and no registry to populate — see /icons for the set.
| Prop | Description | Default | Control |
|---|---|---|---|
| glyph | the icon. In code, import it by its full name: icon plus this (Star is iconStar)AlertAlertFillArrowDownArrowLeftArrowRightArrowUpBagBell+90 more | Star |
|
| size | a size step (16, 20, 24px…), or text to match the surrounding type, or fill to fill the container345681012textfill | 6 |
|
| label | leave empty for a decorative icon. Set it only when the icon is the content; an icon button takes its name on the button |
Tokens
What a theme can move, where the props above are what an instance can move.
Icon has none, and that is a decision rather than an omission. Every value it renders already resolves through a foundation token or a role, so a theme moves it by moving those. A component token earns its place only when a theme needs to change one component without changing the role beneath it.
These are public and overridable — there is no private custom property, because anything on :root is reachable by any stylesheet. What replaces privacy is a stability contract: primitives may move, roles are the guarantee, and these are the per-component escape from both.