Icon

Atom
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, subtle; that order is the precedence). muted is the third ink (subtle-foreground) and subtle the second (muted-foreground), the names Typography gives the same two inks. Inside a control that owns a label ink (a Button's iconLeft and iconRight slots) a glyph with no tone takes that ink instead, the way the hand-off's icons inherit currentColor: the primary's contrast ink on a primary button, the muted ink on a quiet one. The precedence is the explicit tone, then the host's ink, then the foreground, so a toned glyph keeps its tone anywhere.
src/atoms/icon
View in Foundations

Playground

Every control sets a real prop of IconProps. The JSX below updates as you go.
Props
glyph
icon
size
number
24
Tone
pick one
JSX · IconProps
<Icon sparkles size={24} />

Variants

7 examples from src/atoms/icon/icon.md, each rendered live from its own JSX.
Primary
<Icon shield primary />
Destructive
<Icon shield destructive />
Success
<Icon circleCheck success />
Warning
<Icon alertTriangle warning />
Muted
<Icon shield muted />
accessibility
activity
alarm-clock
alert-triangle
align-left
anchor
apple
app-window
archive
arrow-down
arrow-down-left
arrow-down-right
arrow-left
arrow-right
arrow-up
arrow-up-left
arrow-up-right
asterisk
at-sign
award
baby
badge
badge-check
banknote
bar-chart-2
battery
battery-charging
battery-full
battery-low
bell
bell-off
bell-ring
bike
binary
bird
blend
bluetooth
book
bookmark
book-open
book-open-text
bot
box
braces
brackets
briefcase
brush
bug
building
building-2
calculator
calendar
calendar-check
calendar-clock
calendar-days
camera
car
carrot
cast
cat
chart-area
chart-bar
chart-column
chart-line
chart-pie
check
check-square
chevron-down
chevron-left
chevron-right
chevrons-left
chevrons-left-right
chevrons-right
chevrons-up-down
chevron-up
circle
circle-alert
circle-check
circle-check-big
circle-dashed
circle-dot
circle-minus
circle-play
circle-plus
circle-question-mark
circle-user
circle-x
clapperboard
clipboard
clipboard-check
clipboard-copy
clipboard-list
clock
clock-3
cloud
cloud-download
cloud-lightning
cloud-rain
cloud-snow
cloud-sun
cloud-upload
code
code-xml
coffee
cog
coins
columns-2
command
compass
contact
copy
corner-down-right
cpu
credit-card
cross
crosshair
crown
database
diamond
disc
divide
dog
dollar-sign
download
drill
droplet
droplets
earth
ellipsis-vertical
equal
eraser
euro
expand
external-link
eye
eye-off
factory
fast-forward
feather
file
file-check
file-code
file-image
file-input
file-output
file-pen
file-plus
files
file-search
file-text
file-x
film
filter
fish
flag
flag-triangle-right
flame
flashlight
flower
folder
folder-check
folder-open
folder-plus
footprints
forward
frown
fuel
gauge
gem
gift
git-branch
git-commit-horizontal
git-compare
git-merge
git-pull-request
globe
graduation-cap
grip
grip-horizontal
grip-vertical
group
hammer
hand
hand-grab
handshake
hard-drive
hash
headphones
heart
heart-handshake
heart-pulse
hexagon
history
home
hourglass
id-card
image
images
inbox
info
keyboard
key-round
landmark
laptop
layers
layout
layout-dashboard
layout-grid
layout-list
leaf
library
life-buoy
lightbulb
link
link-2
list
list-checks
list-ordered
list-tree
loader
loader-circle
locate
lock
lock-open
log-in
log-out
mail
mail-open
mail-plus
map
map-pin
maximize
maximize-2
medal
megaphone
meh
memory-stick
menu
message-circle
message-square
message-square-text
message-square-warning
messages-square
mic
mic-off
milestone
minimize
minimize-2
minus
monitor
moon
more-horizontal
mouse
mouse-pointer-click
move
move-3d
move-horizontal
move-vertical
music
navigation
newspaper
notebook
octagon
paintbrush
palette
panel-right
paperclip
pause
pen
pencil
pencil-ruler
pentagon
pen-tool
percent
phone
phone-call
phone-off
piggy-bank
pill
pipette
plane
play
plug
plug-zap
plus
podcast
pointer
power
printer
qr-code
radio
rainbow
receipt
redo
redo-2
refresh-ccw
refresh-cw
repeat
reply
rewind
rocket
rotate-ccw
rotate-cw
route
rss
ruler
save
scale
scan
scan-line
scissors
scroll-text
search
send
server
settings
settings-2
share
share-2
shield
shield-alert
shield-check
ship
shopping-bag
shopping-cart
shrink
sigma
skip-back
skip-forward
sliders-horizontal
sliders-vertical
smartphone
smile
snowflake
sparkles
speaker
sprout
square
square-arrow-out-up-right
square-pen
square-play
square-plus
square-terminal
square-x
star
star-half
stethoscope
sticky-note
store
sun
sunrise
sunset
syringe
table
tablet
tag
tags
target
terminal
text-align-center
text-align-justify
text-cursor-input
thermometer
thumbs-down
thumbs-up
ticket
timer
toggle-left
toggle-right
train-front
trash
trash-2
tree-pine
trees
trending-down
trending-up
triangle
trophy
truck
type
umbrella
undo
undo-2
unlink
upload
usb
user
user-check
user-cog
user-plus
user-round
users
users-round
user-x
utensils
variable
video
volume
volume-1
volume-2
volume-x
wallet
wand
wand-sparkles
warehouse
watch
wifi
wifi-off
wind
wrench
x
zap
zoom-in
zoom-out
Gallery
ICON_NAMES lists every glyph in gallery order, each with its prop key and its typed label, for an icon picker or a catalog like this one.
<IconGallery />
Disclosure indicator
disclosure turns the glyph 180 degrees over the original Argus 180ms ease when expanded changes. Reduce Motion snaps to the target. The existing glyph, color and stroke props keep their usual meaning.
<Icon disclosure expanded decorative chevronDown muted heavyStroke size={14} />

Sizes

size 16
size 24
size 32

Anatomy

1
Glyph
2
Bounding box
Dimmed parts appear only in some states or variants.

Props

19 props on IconProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
6 props
disclosure
boolean
false
Rotate the glyph as an Argus disclosure indicator.
expanded
boolean
false
Open state of a disclosure indicator.
heavyStroke
boolean
false
Strong action/link stroke from the Argus reference.
boldStroke
boolean
false
Standard emphasized metadata stroke.
mediumStroke
boolean
false
The medium toolbar stroke.
regularStroke
boolean
false
The fine navigation stroke.
Color axis
8 props
primary
boolean
false
primaryForeground
boolean
false
Contrast color for a glyph on a primary surface (e.g. a primary button).
destructive
boolean
false
success
boolean
false
Positive/green status (matches Alert's success tone, scheme-aware).
warning
boolean
false
Caution/amber status (the warning token, scheme-aware; matches Alert/Toast warning).
muted
boolean
false
The third ink (subtle-foreground, the hand-off's --tx3): a glyph that recedes.
subtle
boolean
false
The second ink (muted-foreground, the hand-off's --tx2), as Typography's subtle.
cell
boolean
false
The glyph centred in a square cell that fills its parent (a Grid tile of a glyph gallery) at a 10 px corner. On the web a hovered cell takes the accent's soft wash and its glyph the accent ink.
Single-glyph size in px
5 props
size
number
–
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
false
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.

Accessibility and keyboard

Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
Roles
image
ARIA on web
aria-hidden
aria-label

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Web
control 10 · field 10 · card 16 · Instrument Sans
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Icon shield />

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--ft
--ln2
--tx

Related components