The system uses Lucide Icons — a consistent open-source set. 56 icons are built into the Figma library across 5 sizes.
| Size | Pixels | Use Cases |
|---|
| xs |
12×12px |
Inline with small text, micro badges |
| sm |
16×16px |
Buttons (SM), form field icons, badges |
| md |
20×20px |
Default — buttons (MD/LG), nav items, alerts |
| lg |
24×24px |
Section headers, empty states, feature icons |
| xl |
32×32px |
Illustrations, onboarding, large empty states |
Usage Rules
- Always use the size matched to surrounding text — sm with 12–13px, md with 14–16px
- Icon color inherits sibling text color by default
- Semantic colors:
#FF4242 error · #529604 success · #FF8505 warning · #1FA4B6 info
- In buttons: icon inherits button label color automatically
- Decorative icons: always add
aria-hidden="true"
- Standalone icons: must have a visible label or
aria-label
- Stroke weight: 2px on all icons — never change this
- Minimum size: xs (12px) — never render icons smaller
⚠
trash-2 must always appear with danger styling (red color, Danger button, or destructive confirmation). Never use it with neutral or brand colors.
Navigation
| Icon Name | Figma Component | Common Uses |
|---|
| home |
_icon/home/md |
Home nav, breadcrumb home |
| menu |
_icon/menu/md |
Mobile nav toggle, hamburger |
| chevron-right |
_icon/chevron-right/md |
Breadcrumb separator, expand indicator |
| chevron-left |
_icon/chevron-left/md |
Back navigation, carousel previous |
| chevron-up |
_icon/chevron-up/md |
Collapse, sort ascending |
| chevron-down |
_icon/chevron-down/md |
Dropdown trigger, expand, sort descending |
| arrow-right |
_icon/arrow-right/md |
Proceed, next step |
| arrow-left |
_icon/arrow-left/md |
Back, previous, undo direction |
Actions
| Icon Name | Figma Component | Common Uses |
|---|
| plus |
_icon/plus/md |
Add, create new, expand |
| minus |
_icon/minus/md |
Remove, collapse, subtract |
| x |
_icon/x/md |
Close, clear, dismiss |
| check |
_icon/check/md |
Confirm, success, checkbox tick |
| search |
_icon/search/md |
Search input prefix |
| filter |
_icon/filter/md |
Filter panel toggle |
| edit-2 |
_icon/edit-2/md |
Edit inline, edit mode trigger |
| trash-2 |
_icon/trash-2/md |
Delete — always pair with danger styling |
| copy |
_icon/copy/md |
Copy to clipboard |
| download |
_icon/download/md |
Download file |
| upload |
_icon/upload/md |
Upload file |
| share-2 |
_icon/share-2/md |
Share action |
| refresh-cw |
_icon/refresh-cw/md |
Reload, sync, retry |
| settings |
_icon/settings/md |
Settings page link |
| sliders |
_icon/sliders/md |
Advanced settings, filter controls |
| more-horizontal |
_icon/more-horizontal/md |
Overflow menu trigger (horizontal) |
Communication
| Icon Name | Figma Component | Common Uses |
|---|
| bell |
_icon/bell/md |
Notifications indicator |
| mail |
_icon/mail/md |
Email, message |
| phone |
_icon/phone/md |
Phone number, call |
| message-circle |
_icon/message-circle/md |
Chat, comments |
| send |
_icon/send/md |
Submit message |
| at-sign |
_icon/at-sign/md |
Email address, mention |
| link |
_icon/link/md |
Copy link, hyperlink |
| external-link |
_icon/external-link/md |
Opens in new tab |
User & Auth
| Icon Name | Figma Component | Common Uses |
|---|
| user |
_icon/user/md |
Single user, profile |
| users |
_icon/users/md |
Team, group, multiple users |
| log-in |
_icon/log-in/md |
Sign in action |
| log-out |
_icon/log-out/md |
Sign out action |
| lock |
_icon/lock/md |
Locked, private, secured |
| unlock |
_icon/unlock/md |
Unlocked, public |
| key |
_icon/key/md |
API key, password, credentials |
| shield |
_icon/shield/md |
Security, permissions |
Content
| Icon Name | Figma Component | Common Uses |
|---|
| file-text |
_icon/file-text/md |
Document, report, text file |
| folder |
_icon/folder/md |
Directory, project, collection |
| image |
_icon/image/md |
Image file, media |
| bookmark |
_icon/bookmark/md |
Save, favorite |
| star |
_icon/star/md |
Rating, featured |
| heart |
_icon/heart/md |
Like, love |
| calendar |
_icon/calendar/md |
Date, schedule, event |
| clock |
_icon/clock/md |
Time, duration, history |
Status
| Icon Name | Figma Component | Common Uses |
|---|
| alert-circle |
_icon/alert-circle/md |
Error alert, critical warning |
| alert-triangle |
_icon/alert-triangle/md |
Warning, destructive action indicator |
| info |
_icon/info/md |
Info tooltip, help context |
| check-circle |
_icon/check-circle/md |
Success state, complete |
| x-circle |
_icon/x-circle/md |
Error state, remove |
| loader |
_icon/loader/md |
Loading spinner, processing |
| eye |
_icon/eye/md |
Show, visible |
| eye-off |
_icon/eye-off/md |
Hide, password reveal |
Layout
| Icon Name | Figma Component | Common Uses |
|---|
| grid |
_icon/grid/md |
Grid view toggle |
| list |
_icon/list/md |
List view toggle |
| layout |
_icon/layout/md |
Page layout |
| sidebar |
_icon/sidebar/md |
Sidebar toggle |
| maximize-2 |
_icon/maximize-2/md |
Expand, fullscreen |
| minimize-2 |
_icon/minimize-2/md |
Collapse, exit fullscreen |
| more-vertical |
_icon/more-vertical/md |
Overflow menu (vertical) |
| help-circle |
_icon/help-circle/md |
Help tooltip, support link |