The library
CRAFTSMAN+ uses Phosphor, 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.
Loading the Phosphor library...
Click an icon to export it as SVG or transparent PNG with the selected treatment baked in.
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.