IconTile
Hero example
When to use
IconTile is the leading glyph on inline cards — the lightning-bolt on
the option-grant card, the document icon on a filing card, the bank
icon on banking. Use a tone that matches the card's status: neutral
for drafts, amber for pending, sage for active, rose for alerts,
blue for informational.
For an icon without a tile background (inside Row chrome, beside text),
prefer the Icon primitive.
Anatomy
A display: inline-flex span sized by size:
| Size | Box | Icon | Radius |
|---|---|---|---|
| sm | 24 | 14 | 6 |
| md | 32 | 16 | 8 |
| lg | 40 | 20 | 10 |
Tone tokens resolve via the CK tone palette (amber / sage / blue / rose / violet / graphite / gold) plus a default neutral.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | — | — |
| tone | IconTileTone | "neutral" | — |
| size | IconTileSize | "md" | — |
| className | string | — | — |
In Dynamic Cards
This primitive's type is "IconTile". Use it as the first child of the
card's header Row:
{
"type": "Row",
"gap": 12,
"children": [
{ "type": "IconTile", "icon": "bolt", "tone": "neutral" },
{ "type": "Stack", "gap": "xs", "children": [
{ "type": "Kicker", "text": "OPTION GRANT — DRAFT" },
{ "type": "Heading", "text": "Aaron Khan — ISO", "level": "h2" }
]}
]
}Available icon names: marker, bolt, idea, box, spark, terminal, copy, chevron-left, chevron-right, arrow, check, bell, list, chart, doc, shield, folder, people, bank, pulse, building, envelope.