# Design System - Icon Library
## Overview
Consistent icon set using stroke-based SVG icons. All icons use a 24x24 viewBox with stroke-based rendering for visual consistency across the design system.
---
## Icon Specifications
| Property | Value |
|----------|-------|
| ViewBox | 0 0 24 24 |
| Default Size | 16px, 20px, or 24px |
| Stroke Width | 2px (default), 1.5px (small) |
| Stroke Color | currentColor (inherits from parent) |
| Fill | none (stroke-based) |
| Line Cap | round |
| Line Join | round |
### Size Scale
| Size Name | Dimensions | Use Case |
|-----------|------------|----------|
| **xs** | 12px | Inline with caption text |
| **sm** | 16px | Buttons, cards, metadata |
| **md** | 20px | Navigation, headers |
| **lg** | 24px | Primary actions, empty states |
| **xl** | 32px | Feature highlights |
---
## Icon Categories
### Navigation
| Icon | Name | SVG Path | Usage |
|------|------|----------|-------|
| ← | `arrow-left` | `M19 12H5M12 19l-7-7 7-7` | Back navigation |
| → | `arrow-right` | `M5 12h14M12 5l7 7-7 7` | Forward navigation |
| ↑ | `arrow-up` | `M12 19V5M5 12l7-7 7 7` | Scroll to top, upload |
| ↓ | `arrow-down` | `M12 5v14M19 12l-7 7-7-7` | Dropdown, download |
| ☰ | `menu` | `M3 6h18M3 12h18M3 18h18` | Hamburger menu |
| ✕ | `close` | `M18 6L6 18M6 6l12 12` | Close, dismiss |
| ⌂ | `home` | `M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z` | Home navigation |
| ⋮ | `more-vertical` | Three circles at y=5, 12, 19 | More options |
| ⋯ | `more-horizontal` | Three circles at x=5, 12, 19 | More options |
---
### Actions
| Icon | Name | SVG Path | Usage |
|------|------|----------|-------|
| ✎ | `edit` | `M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7` + `M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z` | Edit item |
| 🗑 | `trash` | `M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2` | Delete item |
| ⧉ | `copy` | `M9 9h13v13H9z` (rect) + `M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1` | Duplicate |
| + | `plus` | `M12 5v14M5 12h14` | Add new |
| − | `minus` | `M5 12h14` | Remove, collapse |
| ⟳ | `refresh` | `M23 4v6h-6` + `M1 20v-6h6` + `M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15` | Refresh, sync |
| ↗ | `external-link` | `M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3` | Open in new tab |
| ⬇ | `download` | `M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3` | Download file |
| ⬆ | `upload` | `M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12` | Upload file |
| ⚙ | `settings` | Circle + path for gear teeth | Settings, preferences |
| 🔗 | `link` | `M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71` + mirror | Link, URL |
---
### Communication
| Icon | Name | SVG Path | Usage |
|------|------|----------|-------|
| ✉ | `mail` | `M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z` + `M22 6l-10 7L2 6` | Email, messages |
| 💬 | `message` | `M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z` | Chat, comments |
| 🔔 | `bell` | `M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0` | Notifications |
| 📞 | `phone` | `M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07...` | Call, contact |
| 📎 | `paperclip` | `M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48` | Attachment |
| ➤ | `send` | `M22 2L11 13M22 2l-7 20-4-9-9-4 20-7` | Send message |
---
### User & Profile
| Icon | Name | SVG Path | Usage |
|------|------|----------|-------|
| 👤 | `user` | Circle at (12, 7) r=4 + `M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2` | Single user |
| 👥 | `users` | Two user shapes | Multiple users, team |
| ⊕ | `user-plus` | User icon + plus | Add user, invite |
| ⊖ | `user-minus` | User icon + minus | Remove user |
| ✓ | `user-check` | User icon + checkmark | Verified user |
---
### Media
| Icon | Name | SVG Path | Usage |
|------|------|----------|-------|
| 🎤 | `mic` | `M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z` + `M19 10v2a7 7 0 0 1-14 0v-2` + `M12 19v4M8 23h8` | Voice input |
| 🎤✕ | `mic-off` | Mic icon + diagonal line | Mute |
| 📷 | `camera` | `M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z` + circle | Camera, photo |
| 🖼 | `image` | `M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z` + circle + polyline | Image, gallery |
| ▶ | `play` | `M5 3l14 9-14 9V3z` | Play media |
| ⏸ | `pause` | Two rects | Pause media |
---
### Status & Feedback
| Icon | Name | SVG Path | Usage |
|------|------|----------|-------|
| ✓ | `check` | `M20 6L9 17l-5-5` | Success, complete |
| ✕ | `x` | `M18 6L6 18M6 6l12 12` | Error, close |
| ⚠ | `alert-triangle` | `M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z` + line + dot | Warning |
| ℹ | `info` | Circle + `M12 16v-4M12 8h.01` | Information |
| ⊘ | `alert-circle` | Circle + `M12 8v4M12 16h.01` | Error state |
| ◷ | `clock` | Circle + `M12 6v6l4 2` | Time, pending |
| ◉ | `loader` | Circle with gap | Loading |
---
### Content & Files
| Icon | Name | SVG Path | Usage |
|------|------|----------|-------|
| 📄 | `file` | `M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z` + `M14 2v6h6` | Document |
| 📁 | `folder` | `M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z` | Folder |
| 📋 | `clipboard` | Rect with clip top | Copy to clipboard |
| 🔍 | `search` | Circle at (11, 11) r=8 + `M21 21l-4.35-4.35` | Search |
| 👁 | `eye` | `M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z` + circle at (12, 12) r=3 | View, visibility |
| 👁🗨 | `eye-off` | Eye + diagonal line | Hide, invisible |
| ⊞ | `grid` | `M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z` | Grid view |
| ☰ | `list` | `M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01` | List view |
---
### Interface
| Icon | Name | SVG Path | Usage |
|------|------|----------|-------|
| ⊕ | `plus-circle` | Circle + plus | Add with emphasis |
| ⊖ | `minus-circle` | Circle + minus | Remove with emphasis |
| ≡ | `filter` | `M22 3H2l8 9.46V19l4 2v-8.54L22 3` | Filter |
| ⇅ | `sort` | Arrows up/down | Sort |
| ⋮⋮ | `grip` | Six dots (2x3 grid) | Drag handle |
| ◧ | `sidebar` | Rect with left divider | Toggle sidebar |
| ⤢ | `maximize` | Corner arrows outward | Fullscreen |
| ⤡ | `minimize` | Corner arrows inward | Exit fullscreen |
---
### Social & Interaction
| Icon | Name | SVG Path | Usage |
|------|------|----------|-------|
| ♡ | `heart` | `M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z` | Like, favorite |
| ☆ | `star` | `M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z` | Favorite, rating |
| ↗ | `share` | `M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13` | Share |
| 🔖 | `bookmark` | `M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z` | Save, bookmark |
| 👍 | `thumbs-up` | Thumb up shape | Approve, like |
| 👎 | `thumbs-down` | Thumb down shape | Disapprove, dislike |
---
### Decorative
| Icon | Name | SVG Path | Usage |
|------|------|----------|-------|
| ✦ | `sparkle` | `M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z` | AI, magic, highlight |
| ✦✦ | `sparkles` | Multiple sparkle shapes | AI feature, special |
| ☀ | `sun` | Circle + rays | Light mode |
| ☾ | `moon` | `M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z` | Dark mode |
---
## Code Reference
### HTML Usage
```html
```
### CSS Classes
```css
/* Base icon styles */
.icon {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
}
/* Size variants */
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }
/* Color variants */
.icon-primary { color: #1a1a2e; }
.icon-secondary { color: #383737; }
.icon-muted { color: #9a9a9a; }
.icon-white { color: #ffffff; }
.icon-orange { color: #FB923C; }
.icon-pink { color: #F472B6; }
.icon-blue { color: #93C5FD; }
/* Interactive states */
.icon-btn {
padding: 8px;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.icon-btn:hover {
background-color: rgba(0, 0, 0, 0.05);
}
```
---
## Complete SVG Reference
### Navigation Icons
```html
```
### Action Icons
```html
```
### Communication Icons
```html
```
### User Icons
```html
```
### Media Icons
```html
```
### Status Icons
```html
```
### Content Icons
```html
```
### Social Icons
```html
```
### Decorative Icons
```html
```
---
## Design Tokens
```css
:root {
/* Icon Sizes */
--icon-xs: 12px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
/* Icon Stroke */
--icon-stroke-width: 2;
--icon-stroke-width-thin: 1.5;
/* Icon Colors */
--icon-color-primary: #1a1a2e;
--icon-color-secondary: #383737;
--icon-color-muted: #9a9a9a;
--icon-color-white: #ffffff;
--icon-color-orange: #FB923C;
--icon-color-pink: #F472B6;
--icon-color-blue: #93C5FD;
}
```
---
## Usage Guidelines
1. **Consistency**: Always use icons from this library. Don't mix icon styles.
2. **Size**: Use appropriate size for context (sm for buttons, md for nav, lg for empty states)
3. **Color**: Icons inherit `currentColor` - set color on parent element
4. **Touch targets**: Icon buttons should be minimum 44x44px
5. **Accessibility**: Always include `aria-label` for icon-only buttons
6. **Stroke width**: Use 2px default, 1.5px for smaller icons (xs, sm)
### Accessibility Example
```html
```