# 08 · Icons

Recruitment-domain functional icons. Stroked, rounded, 1.5px weight on a 24px grid.

## Style specifications

| Property | Value |
|---|---|
| Grid | 24 × 24 px |
| Stroke width | 1.5 px |
| Caps & joins | Rounded |
| Fill | None — strokes only |
| Corner radius | 2 px (internal corners) |
| Default color (on light) | Talentix Dark `#1E1B2E` |
| Default color (on dark) | Soft Match `#E9D5FF` |
| Source library | Lucide Icons (MIT licensed) |
| Total in system | 120+ (32 in sample library) |

## Source

We use Lucide Icons (https://lucide.dev) as the foundation. Open-source, MIT licensed.

For consistency, always pick from Lucide first. Only commission custom icons when no Lucide equivalent exists.

## Sample library · 32 icons

Recruitment domain coverage:

| Action | Object | State |
|---|---|---|
| Search, Brief, Approve, Refresh, Export | Candidate, Message, Calendar, Module, Profile | Alert, Verified, Done, Time, Activity |
| Add, Remove, Close, Next, Back | Settings, Dashboard, List, Info, Pipeline | Pulse, Match, Trend up, Fast |
| Location, Contact, Team | | |

## Usage rules

- Icons are functional, not decorative — only use when they add information
- Pair icons with labels for accessibility (don't rely on icon-only navigation)
- Maintain 24px container even for smaller-rendered icons (preserve grid alignment)
- Color: never use signal colors (Blueprint Blue, Scout Purple etc.) for plain UI icons — those belong to module-specific surfaces
- Multi-state icons: use opacity (0.4 for inactive, 1.0 for active), not color change

## Implementation in React

```tsx
import { Search } from "lucide-react";

<Search size={24} strokeWidth={1.5} className="text-dark" />
```

Tailwind setup:

```tsx
<Search className="w-6 h-6 stroke-[1.5] text-dark" />
```

## Module-specific icons

When indicating a module visually, optional accent icons:

| Module | Lucide icon |
|---|---|
| Blueprint · Direction | `compass` or `layout-grid` |
| Scout · Intelligence | `search` or `sparkles` |
| Reach · Activity | `send` or `message-circle` |
| Meet · Human | `calendar` or `users` |

Apply the module's signal color as fill background in a rounded square (8 px radius), not as icon stroke color.