Requirement
Icons give INTO Consulting collateral fast, quiet orientation without becoming decoration.
Constraints
- Icons must work in Warm 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
Lucide is the primary icon source because its outline geometry, rounded caps, and simple stroke language fit the editorial system. Iconify remains a fallback for concepts Lucide does not cover. This keeps the system broad without allowing random icon styles.
Failure Modes
- Icons become ornamental filler.
- Mixed icon sets create inconsistent stroke weights and corner language.
- 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
- Lucide: https://lucide.dev/
- Iconify: https://iconify.design/
- Iconify icon sets: https://icon-sets.iconify.design/
Rules
- Primary source: Lucide.
- Fallback source: Iconify only when Lucide lacks the concept.
- Style: outline, no fill,
currentColor, rounded caps and joins. - Stroke: 1.5-1.75px in digital review contexts; convert proportionally for deck, document, print, and video outputs.
- 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 Lucide, Iconify, 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 Lucide first, Iconify second, and preserve
currentColor inheritance.