01 Foundations · 06

Iconography

Icons are labels, not illustrations. They inherit color and disappear into the work.

Two tiers

Product icons come from the Glass library in Nucleo — the official source. Each glyph is two layers: a solid shape plus a translucent overlapping layer. Depth without shadows, consistent with the elevation rule. Export at 24px; use at 20–24px. Glass lives in module navigation, feature icons, empty states, and onboarding. It is licensed per seat — request access from the design team.

Utility glyphs inside controls — close, arrow, search, plus — use the in-code stroke set below. Never mix the two styles in the same row or group.

Construction — the utility set

• 16×16 grid, 1.5px stroke.
• Rounded caps and joins, fill="none".
• Outline-first. Solid fills only for active states.
• Two sizes: 16px inside controls and navigation, 20px standalone.

Color

Always currentColor. At rest: muted ink. Hover: ink. Active or selected: brand ink — or white on the dark rail. Never decorative colors on icons.

The isotype is not an icon

Never use the brand mark inside icon slots, nav glyph rows, or button icons. It is the mark — reserved for brand moments: logo lockups, the agent avatar, stamps.