Icon

Lucide-style outline. 1.75 stroke width, rounded caps. The stroke defaults to the theme foreground token and tracks light and dark automatically; pick other hues with the semantic color booleans (primary, destructive, success, warning, muted).
iOS
Android
Web
tsx
<Icon shield />

Props

Prop
Description
primary
boolean
Color axis: pass one (default foreground). First match wins.
primaryForeground
boolean
Contrast color for a glyph on a primary surface (e.g. a primary button).
destructive
boolean
—
success
boolean
Positive/green status (matches Alert's success tone, scheme-aware).
warning
boolean
Caution/amber status (the warning token, scheme-aware; matches Alert/Toast warning).
muted
boolean
—
size
number
Single-glyph size in px (default 24).
accessibilityLabel
string
Accessible name for a MEANINGFUL standalone icon (one that conveys information not repeated in adjacent text, e.g. an icon-only button's glyph). Marks the glyph `role="img"` with this label on web and native.
decorative
boolean
Mark a DECORATIVE/ornamental glyph (one paired with a text label, a separator chevron, an empty-state illustration) so assistive tech skips it. Hides it via aria-hidden on web and importantForAccessibility on native.
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

Stroke coherence

Don’t
Mixed stroke weights and a stray filled glyph make a set look incoherent.
Do
One outline style at 1.75 stroke across the whole set.

foreground

Don’t
Hard-coding a hex stroke pins the icon to one theme; it stays black on a dark surface and disappears.
Do
Leave the stroke at its default: it paints the theme foreground and follows light and dark on its own, no color prop needed.

primary

Don’t
Painting a whole toolbar primary spends the accent on everything, so nothing reads as emphasized.
Do
Reserve text-primary for the one active or selected icon; keep the rest muted.

destructive

Don’t
A red download icon implies danger on a perfectly safe action and trains users to ignore the warning color.
Do
Keep text-destructive for genuinely destructive actions like delete, so red always means consequence.

muted

Don’t
New project
A muted icon inside a solid primary button reads as disabled and clashes with the high-contrast label.
Do
Optional, used only for recovery
Use the muted tone for secondary, inline hint icons where its color matches the helper text.
← Grid
Image →