icon-design

# Icon Design

Select the right icon for the job. Maps concepts to icons, provides templates, prevents common mistakes.

## Quick Reference (Top 20 Concepts)

| Concept | Lucide | Heroicons | Phosphor |
|---------|--------|-----------|----------|
| Award/Quality | `Trophy` | `trophy` | `Trophy` |
| Price/Value | `Tag` | `tag` | `Tag` |
| Location | `MapPin` | `map-pin` | `MapPin` |
| Expertise | `GraduationCap` | `academic-cap` | `GraduationCap` |
| Support | `MessageCircle` | `chat-bubble-left-right` | `ChatCircle` |
| Security | `Shield` | `shield-check` | `Shield` |
| Speed | `Zap` | `bolt` | `Lightning` |
| Phone | `Phone` | `phone` | `Phone` |
| Email | `Mail` | `envelope` | `Envelope` |
| User/Profile | `User` | `user` | `User` |
| Team | `Users` | `user-group` | `Users` |
| Settings | `Settings` | `cog-6-tooth` | `Gear` |
| Home | `Home` | `home` | `House` |
| Search | `Search` | `magnifying-glass` | `MagnifyingGlass` |
| Check/Success | `Check` | `check` | `Check` |
| Close/Cancel | `X` | `x-mark` | `X` |
| Menu | `Menu` | `bars-3` | `List` |
| Calendar | `Calendar` | `calendar` | `Calendar` |
| Clock/Time | `Clock` | `clock` | `Clock` |
| Heart/Favourite | `Heart` | `heart` | `Heart` |

## Library Selection

| Library | Best For | Package |
|---------|----------|---------|
| **Lucide** | General use, React projects | `lucide-react` |
| **Heroicons** | Tailwind projects, minimal style | `@heroicons/react` |
| **Phosphor** | Weight variations needed | `@phosphor-icons/react` |

**Default recommendation**: Lucide (1,400+ icons, excellent React integration)

See `references/library-comparison.md` for detailed comparison.

## Icon Style Rules

### Sizing

| Context | Tailwind Class | Pixels |
|---------|----------------|--------|
| Inline with text | `w-4 h-4` or `w-5 h-5` | 16-20px |
| Feature cards | `w-8 h-8` | 32px |
| Hero sections | `w-10 h-10` or `w-12 h-12` | 40-48px |
| Large decorative | `w-16 h-16` | 64px |

### Consistency Rules

1. **Never mix style