Icons
One icon set, Lucide, drawn with one component by name. Lucide is open source (ISC), drawn on one grid with one stroke, and at a 1.5 stroke it is the nearest open match to the outline icons the visual direction follows. Apps never import a glyph; a missing one is added to the system first.
Examples
activity
alert-circle
alert-triangle
arrow-down
arrow-right
arrow-up
arrow-up-down
bell
book-open
calendar
calendar-clock
check
check-circle
chevron-down
chevron-left
chevron-right
chevron-up
chevrons-up-down
circle
circle-help
clock
copy
download
external-link
eye
eye-off
file
file-text
filter
folder
home
inbox
info
layout-dashboard
lightbulb
list-checks
loader
log-out
maximize
menu
minus
more-horizontal
palette
panel-left
pencil
plus
redo
refresh-cw
search
settings
sliders-horizontal
sprout
star
trash
undo
upload
user
users
workflow
x
x-circle
Props
Icon
An icon from the system's one set, drawn at a token size in the current text colour.
| Prop | Type | Default | Description |
|---|---|---|---|
name | IconName | — | |
size? | "sm" | "md" | "lg" | "sm" | sm beside text.sm and in controls, md beside body text, lg standing alone. |
label? | string | — | What the icon means, for an icon that carries meaning on its own. Leave it out for an icon beside its words, which is then hidden from screen readers; prefer labelling the control that holds an icon over labelling the icon. |
directional? | boolean | false | Mirror it in right-to-left text: for arrows and chevrons that point along the line. |
Accessibility
- An icon beside its words is hidden from screen readers. One that carries meaning alone takes a label and becomes an image with that name; better still, label the control that holds it. IconButton requires its label.
- Directional icons, such as arrows and chevrons that point along the line, take directional and mirror in right-to-left text.