Emblem

A tinted rounded square (or circle) that holds a single Icon or a short monogram, the recurring "icon on a soft background" used in cards, media objects, empty states, and feeds. Emblem owns the surface and the icon color: pick a tone and it tints the square and paints the glyph to match, so a call site never hand-composes borderRadius + backgroundColor to build an icon background.
iOS
Android
Web
tsx
<Emblem>
<Icon shield />
</Emblem>

Props

Prop
Description
children
ReactNode
A single `<Icon />` element; Emblem tints it to match the tone.
label
string
A monogram letter (or two) instead of an icon, painted in the tone color.
primary
boolean
Tone (pick one; default `muted`). Sets the tinted surface and the icon color.
destructive
boolean
Tone (pick one; default `muted`). Sets the tinted surface and the icon color.
success
boolean
Tone (pick one; default `muted`). Sets the tinted surface and the icon color.
warning
boolean
Tone (pick one; default `muted`). Sets the tinted surface and the icon color.
muted
boolean
Tone (pick one; default `muted`). Sets the tinted surface and the icon color.
small
boolean
Size (pick one; default medium).
large
boolean
Size (pick one; default medium).
circle
boolean
Circle instead of the default rounded square.
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
For layout composition only (not styling): the tint, radius, and size come from props.

Do & Don’t

Surface

Don’t
Hand-compose the tinted square with raw borderRadius, backgroundColor, and padding.
Do
Use Emblem so the tint and icon color stay in sync from one tone prop.
← Dropdown
Grid →