54
Total Icons
9
Categories
23
Component Mappings
Lucide
Library ≥>=0.460.0
⛔ Governance Rules
- NO emoji — CẤM dùng Unicode emoji thay thế icon trong UI. Phải dùng SVG từ
assets/icons/ - NO external libraries — CẤM import từ FontAwesome, Material Icons, Heroicons, Phosphor, Tabler, Ionicons, Feather, Bootstrap Icons. CHỈ dùng Lucide
- Add via script — Thêm icon mới: chạy
node design-system/icons.js add <name>để tải từ Lucide CDN
Navigation 10
Arrows, chevrons, menu controls for navigation patterns
Action 14
CRUD operations, search, share, and utility actions
Feedback 5
Status indicators: info, success, warning, error, notifications
Content 8
File, folder, clipboard, media, and layout icons
User 5
User account, authentication, and profile icons
Media 5
Favorites, social, and environmental icons
Utility 5
Time, location, communication, and overflow icons
Brand 1
Third-party brand logos
Misc 1
Additional icons used in specific contexts
Component Mapping
Required icon for each component context — these are enforced by the design system.
| Component Context | Icon Name | Preview |
|---|---|---|
alert-info | info | |
alert-success | circle-check | |
alert-warning | triangle-alert | |
alert-destructive | circle-x | |
toast-info | info | |
toast-success | circle-check | |
toast-warning | triangle-alert | |
toast-destructive | circle-x | |
close-button | x | |
accordion-expand | chevron-down | |
breadcrumb-separator | chevron-right | |
breadcrumb-home | house | |
input-search | search | |
input-password-toggle | eye | |
select-arrow | chevron-down | |
checkbox-check | check | |
navbar-search | search | |
navbar-notifications | bell | |
navbar-mobile-menu | menu | |
dropdown-edit | pencil | |
dropdown-copy | copy | |
dropdown-delete | trash | |
dropdown-share | share |