Requirement
Icons give INTO Consulting collateral fast, quiet orientation without becoming decoration.
Constraints
- Icons must work in Cool Light and Blueprint Dark.
- Icons must inherit color through
currentColor. - Icons must support commands, navigation, labels, and diagrams.
- Icon choices must be license-safe for client and public collateral.
Bet
Phosphor regular is the single icon source because its outline geometry, rounded terminals, and even stroke language fit the editorial system, and because one family removes the stroke-weight and corner drift that a primary plus fallback pair always produces. Phosphor is MIT licensed, covers the command, navigation, state, and diagram vocabulary INTO needs, and ships for web, React, and static SVG from one set.
There is no fallback family. If Phosphor lacks the concept, use a word.
Failure Modes
- Icons become ornamental filler.
- Mixed icon sets create inconsistent stroke weights and corner language.
- A non-regular Phosphor weight (thin, light, bold, fill, duotone) is used and breaks stroke parity with the rest of the set.
- Filled or multi-color icons compete with typography and evidence.
- Agents choose unlicensed or unclear icon sources.
- Agents treat the favicon as a generic app icon instead of compact identity.
Sources
- Phosphor: https://phosphoricons.com/
- Web (documents, static HTML):
https://unpkg.com/@phosphor-icons/web - React:
@phosphor-icons/react
Rules
- Single source: Phosphor, regular weight only. There is no second family and no license-checked fallback set.
- Style: outline, no fill,
currentColor, rounded caps and joins. Never filled, never duotone. - Stroke: Phosphor regular ships a 1.5px stroke on a 16px grid. Do not re-stroke it; scale proportionally for deck, document, print, and video outputs.
- Size: 14-18px inline in digital review contexts; convert proportionally at the medium boundary.
- Loading: load the web set once per page
(
<script src="https://unpkg.com/@phosphor-icons/web"></script>) or import the named React component. Never hand-draw an inline SVG substitute, and never use emoji or a PNG icon in place of a glyph. - Scale: icons support text. They do not replace a clear label unless the medium or platform convention makes the icon obvious.
- Color: inherit nearby text color. Petrol is allowed only for active command, signal, or selected state.
- Diagrams: icons may clarify roles, tools, channels, or objects. They should not be used as pattern, texture, or decoration.
- Favicons: do not use this icon system. Favicons use the INTO square mark
from
assets/favicon.svgor an export from that exact mark.
Canonical Uses
| Use | Rule |
|---|---|
| Command button | Title Case label with optional trailing icon. |
| Navigation | Icon allowed only if it speeds recognition. |
| Metadata label | Use sparingly; mono labels often do the work better. |
| Diagram node | Use a single icon per node when it clarifies the entity. |
| Social post | Use one or two icons maximum; never a decorative icon field. |
| Favicon | Use assets/favicon.svg; never a Phosphor glyph, emoji, or a feature icon. |
Agent Rule
When generating collateral, first decide whether the icon reduces reading
time. If it does not, remove it. Use Phosphor regular, never a second family,
and preserve currentColor inheritance.
Retired
Lucide was the primary source and Iconify the license-checked fallback until 2026-09-18. Both are retired. Existing collateral carrying Lucide glyphs is provenance, not a pattern to extend; convert on the next edit of that asset.