Icons

The icon system is powered by Feather Icons — a collection of simply beautiful open-source icons. Each icon is designed on a 24×24 grid with an emphasis on simplicity, consistency, and readability.

Click any icon to copy its JSX tag. All icons accept size, color, and strokeWidth props from react-feather.

Icon styles

Icons adapt to a range of container styles across five semantic color themes.

LightTinted background with a colored icon stroke
Brand
Gray
Error
Warning
Success
Light + ringLight background with an inset ring in a lighter shade
Brand
Gray
Error
Warning
Success
Filled + ringSaturated fill with a white icon and a darker inset ring
Brand
Gray
Error
Warning
Success
SquareRounded-square containers for card and feature contexts
Soft
Mid
Dark
Outlined

Arrows & navigation (32)

Actions (48)

Media & playback (26)

Communication (16)

User & people (11)

Files & folders (11)

Data & charts (16)

Layout & interface (21)

Nature & weather (17)

Maps & location (7)

Devices & hardware (15)

E-commerce & shopping (6)

Alerts & status (10)

Brands & logos (17)

Text & formatting (5)

Misc (23)