/// Data Display
ThemeIcon
An icon in a sized, sharp square container with a filled / light / outline / ghost treatment.
import { ThemeIcon } from "@protocore/pds";Variants
ThemeIcon frames an icon in a sharp square. Four treatments: filled (solid), light (tint wash), outline (hairline border), and ghost (bare). The default filled with no tone uses the brand accent.
Tones
Set a tone to recolour the container to a status family — a red filled square for a failure, an amber light wash for a warning. Every variant honours the tone.
Sizes & labels
Three sizes — sm 24 · md 32 · lg 40 — scale both the box and the icon. A ThemeIcon is decorative by default (aria-hidden); pass a label to make it an announced role="img" when the icon carries meaning on its own.
When to use it
ThemeIcon gives an icon a visible container — for feature rows, menu leading marks, callout headers, empty-state glyphs. It is the framed cousin of Icon, which only sizes a bare glyph. When you need a *status word*, use a Badge; when you need a *user's picture*, use an Avatar.
The container is decorative brand chrome, so its accent/tone fill is fine — but the meaning must live in adjacent text or the label. Keep the icon child a 1em currentColor SVG so the variants' foreground colours apply.
Usage
Do
- Feed it a 1em `currentColor` SVG so variant colors apply.
- Add a `label` when the icon alone conveys meaning.
- Match the `tone` to the meaning of the row it leads.
Don't
- For a status word, use a Badge.
- Give a meaningful icon a label or accompanying text.
- Keep the corners square; the square is the brand.
Accessibility
- Decorative by default: without a `label` the container is `aria-hidden` so it adds no noise to the accessibility tree.
- With a `label` it becomes `role="img"` with that accessible name — use this only when the icon alone conveys meaning.
- Colour is never the sole signal — pair a toned icon with a text label in the surrounding layout.
ThemeIcon props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The SVG icon to render (drawn at 1em, `currentColor`). |
className | string | — | |
label | string | — | Accessible label. When set the container becomes `role="img"` and announces this text; omit it for a purely decorative icon (then `aria-hidden`). |
size | enum | md | Box size: sm 24 · md 32 · lg 40. |
style | CSSProperties | — | |
tone | enum | — | Colour family — omit for the brand accent, set a status tone to recolour. |
variant | enum | filled | Visual treatment. |