# Iconography

> The icon system: Phosphor icons in Regular weight, colored CRAFTSMAN BLACK, CRAFTSMAN WHITE, or one of the approved gradients.

Canonical: https://brand.craftsmanplus.com/foundations/iconography

## The library

CRAFTSMAN+ uses [Phosphor](https://phosphoricons.com), an open-source icon family whose even stroke weight and geometric construction sit naturally beside Inter. One library everywhere: product, site, decks, and statics. Do not mix icon sets on a surface, and do not draw one-off icons; if a concept is missing, choose the nearest Phosphor glyph.

Phosphor ships for web, React, Figma, and as raw SVGs, all under the MIT license. The browser below carries the full set: search it, pick a treatment, and export any icon as SVG or PNG without leaving this page.

> Interactive IconLab component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## Weight

**Regular is the system weight.** Its stroke sits comfortably next to Inter at 400 and 500. **Fill** is the accepted alternative where a glyph must read at very small sizes or carry selected-state emphasis. The other Phosphor weights (Thin, Light, Bold, Duotone) are not part of the system.

Never mix Regular and Fill in the same icon row; a Fill glyph beside Regular glyphs reads as a state, not a style.

## Color

Icons take exactly four treatments:

- **CRAFTSMAN WHITE** on dark grounds. The default almost everywhere.
- **CRAFTSMAN BLACK** on light grounds.
- **The CRAFTSMAN+ GRADIENT** as an accent, for a featured icon or an active state. Use it the way gradient text is used: one glyph among many, never a whole row.
- **The INTELLIGENCE gradient**, on AI surfaces only, carrying the same reservation Purple does everywhere else.

Nothing else. No solid Orange or Pink icons, no product-palette colors, no invented gradients. Gradient treatments need at least 24px of glyph; below that the stops band and the icon reads as noise.

## Size

Icons align to the spacing system: 16px inline with text, 20px in controls, 24px standalone, 32px featured. At every size the icon aligns optically to the text cap height beside it, not to the baseline.