# Icons

The KDC icon system is built on **[Phosphor Icons](https://phosphoricons.com)** (MIT licensed, [`./LICENSE`](./LICENSE)). Phosphor's geometric, even stroke weight pairs cleanly with Manrope.

## Folder layout

| Folder | Phosphor weight | Use |
|--------|------------------|-----|
| [`regular/`](./regular/) | Regular (1.5px stroke) | **Default.** All UI icons unless a specific case calls for another weight. |
| [`fill/`](./fill/)       | Fill | Solid version — used for active/selected states (filled vs. outlined toggle), avatars over photography, dense compositions. |
| [`bold/`](./bold/)       | Bold (2px stroke) | Status icons at small sizes (≤ 16px) where Regular looks faint. Curated set only. |
| [`social/`](./social/)   | — | Third-party brand marks (GitHub, LinkedIn, X, etc.). Subject to each brand's own usage rules — *not* MIT. |

## Specs

- **viewBox**: `0 0 256 256` (Phosphor's native — scales perfectly to any size).
- **Color**: every path is `currentColor`. Set the icon's color via `color: …` on the parent.
- **Default render size**: 24×24 in UI; 20×20 in dense lists; 16×16 only for inline metadata.
- **Naming**: `kebab-case`, no `icon-` prefix, no weight suffix in the filename (the folder *is* the weight).

## Usage

```html
<!-- inline SVG, color follows currentColor -->
<button style="color: var(--color-brand-primary)">
  <svg width="20" height="20" viewBox="0 0 256 256">
    <use href="/assets/icons/regular/check.svg#icon" />
  </svg>
  Save
</button>
```

```css
/* mask-image trick when you want CSS-only theming */
.i-check {
  width: 20px; height: 20px;
  background: currentColor;
  mask: url("/assets/icons/regular/check.svg") center / contain no-repeat;
}
```

For React/Vue/Solid projects, prefer the official [`@phosphor-icons/react`](https://www.npmjs.com/package/@phosphor-icons/react) (or framework equivalent) — it ships the same SVGs with a typed component API and tree-shakeable imports, and stays in sync with this folder.

## Curated set

This repo doesn't ship Phosphor's full ~1500-icon library — only ~80 icons we actually use, organized by purpose:

**Navigation** — arrow-{left,right,up,down}, caret-{left,right,up,down}, arrow-square-out, house, list, dots-three
**Actions** — plus, minus, check, x, pencil-simple, trash, copy, download-simple, upload-simple, share-network, floppy-disk, arrows-clockwise
**Search & sort** — magnifying-glass, funnel, arrows-down-up
**Status** — info, check-circle, warning, warning-circle, x-circle, question, spinner, clock *(also in `bold/` for small-size legibility)*
**Objects** — file, folder, image, link, paperclip, tag, bookmark-simple, star, heart, envelope, calendar, bell, globe, map-pin
**People & access** — user, users, user-plus, lock, lock-open, key, shield
**Data** — chart-bar, chart-pie, trend-up, trend-down, package, credit-card, currency-dollar
**Devices** — monitor, device-mobile, wifi-high
**Editor** — text-b, text-italic, text-align-left, list-bullets, code, quotes
**Toggles** — eye, eye-slash, play, pause
**Theme & settings** — sun, moon, gear, sliders

## Adding a new icon

1. Find it on [phosphoricons.com](https://phosphoricons.com).
2. Add the **regular** SVG to `regular/<name>.svg`.
3. If a fill counterpart exists upstream, add it to `fill/<name>.svg` with the same name (no `-fill` suffix).
4. If the icon will be used at ≤16px in a status context, also add the **bold** SVG to `bold/<name>.svg`.
5. Update this README's curated set list.

## Don't

- Don't mix icon families (Lucide + Phosphor + custom). Pick Phosphor and stay consistent.
- Don't hardcode hex colors inside the SVG — `currentColor` only.
- Don't use Duotone, Light, or Thin weights in product UI — they read as low-contrast at small sizes.
- Don't pluck icons from Figma without re-running them through Phosphor's source set; manual exports drift.