KDCDesignSystem/assets/icons/README.md

Icons

The KDC icon system is built on Phosphor Icons (MIT licensed, ./LICENSE). Phosphor's geometric, even stroke weight pairs cleanly with Manrope.

Folder layout

Folder	Phosphor weight	Use
regular/	Regular (1.5px stroke)	Default. All UI icons unless a specific case calls for another weight.
fill/	Fill	Solid version — used for active/selected states (filled vs. outlined toggle), avatars over photography, dense compositions.
bold/	Bold (2px stroke)	Status icons at small sizes (≤ 16px) where Regular looks faint. Curated set only.
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

<!-- 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>

/* 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 (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.
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.