JSN UI Icons

# JSN UI — Icons

JSN UI ships **80+ hand-rolled icons** in a single barrel:
`import { Brain, Bot, ... } from "@/components/icons"`.

## Design rules

- 24×24 viewBox
- 1.5px stroke
- `strokeLinecap="round"`, `strokeLinejoin="round"`
- `currentColor` — color via Tailwind class on the parent
- `size` prop defaults to 16

## Usage

```tsx
import { Sparkles, ArrowRight } from "@/components/icons";

<Sparkles size={14} className="text-primary" />
<ArrowRight size={16} className="ml-1" />
```

## Groups

| File | Group | Examples |
|---|---|---|
| `brand.tsx` | Brand / AI | Brain, Bot, Sparkles, Wand, Atom, Chip, Circuit, Cpu, Network, Robot |
| `agents.tsx` | Agents / Tools | Wrench, Hammer, Code, Terminal, Webhook, Plug, Function, Database, Globe, KeyRound |
| `ui.tsx` | UI / Nav | ArrowRight, ArrowLeft, ChevronDown, Menu, Search, Bell, User, Settings, Mail, Plus, Clock, Calendar, Users, MapPin, Lock, Layers, Boxes, Eye |
| `status.tsx` | Status | Check, X, AlertCircle, Info, Loader, Circle, Square, Triangle, Zap, Flame, CircleCheck, Star, Shield, TrendingUp, ChartLine |
| `media.tsx` | Media | Play, Pause, Image, Camera, Mic, Video, Music, Volume |
| `communication.tsx` | Communication | MessageSquare, MessageCircle, Messages, Phone, VideoCall, Send, At, Link |
| `arrows.tsx` | Arrows | ChevronUp, ChevronLeft, ChevronRight, ArrowUp, ArrowDown, ArrowUpRight, ArrowDownLeft, Move |
| `files.tsx` | Files | File, Folder, Download, Upload, Save, Copy, Clipboard, Trash, FileText, GitBranch, Briefcase |

## Image icon name collision

The barrel exports `Image` from `media.tsx` AND aliases it as
`ImageIcon` to avoid the collision with `next/image`. If you need a
non-conflicting name, import as:

```tsx
import { Image as ImageIcon } from "@/components/icons";
```

## MCP integration

For AI agent use, the `@jsn-ui/mcp` server exposes:
- `search_icons` — fuzzy search by name / keyword / description
- `list_icons` — all icons, filterable by group
- `get_icon` — metadata + ready-to-paste `import` statement
- `suggest_icons` — context-aware suggestions from a phrase
- `get_library_stats` — counts, top keywords

## Adding a new icon

1. Open the relevant group file (e.g. `src/components/icons/status.tsx`)
2. Add a new exported component following the same pattern as the others
3. Re-export it from `src/components/icons/index.ts` (or the group export)
4. If you add a "files" icon, also add it to `jsn-ui-mcp/src/catalog.ts`

Always:
- Use `IconProps` from `./types`
- 1.5px stroke
- `currentColor` strokes
- Provide a JSDoc comment