Iconography
Download Icon KitProduct.ai uses Phosphor Icons exclusively — a rigorously tested system of 6,000+ icons built with geometric precision that mirrors our brand. We use the Regular weight as default and Fill for active states, creating a clear visual hierarchy through form rather than color alone.
Scope & Application
This document governs icon usage in brand and marketing contexts. UI/Product design uses different specifications optimized for data density and typography harmony.
Brand Contexts (This Document)
- Marketing websites and landing pages
- Brand presentations and pitch decks
- Social media and advertising creative
- Print collateral and brand materials
- Hero sections and feature showcases
UI/Product Contexts (Separate Spec)
- Application interfaces
- Data-dense dashboards
- Form elements and controls
- Navigation systems
- Status indicators
Brand & Marketing Contexts
These guidelines govern icon usage in marketing sites, presentations, social content, and brand materials. Product UI follows separate specifications optimized for interface density. Both systems use Phosphor to maintain family consistency.
Both systems use Phosphor Icons to maintain family consistency while serving different functional needs.
The Foundation
Icon Library
A sample of Phosphor icons shown in both approved weights — Regular (outline) and Fill (solid). These represent the visual language across Product.ai brand materials.
Full library available at phosphoricons.com — filter by "Regular" or "Fill" weight only.
Weight System
Brand contexts use two weights only. This constraint ensures visual consistency and clear state communication.
Forbidden Weights
Size Scale
Icons exist at five sizes plus a specialized status tier for product UI. No arbitrary interpolation — if a context doesn't fit a scale level, use the next size up.
Default: SM (16px) for standard interactive elements and status indicators. No intermediate sizes — if a context doesn't fit, use the next size up. The 14–16px status tier is for product UI only.
SVG Technical Specification
All icons must conform to this technical spec. Custom icons must match Phosphor's geometry exactly — stroke-width: 16 in 256×256 viewBox, round caps and joins.
Custom icon rule: If a custom icon is required, it must match Phosphor's technical geometry — stroke-width: 16 in a 256×256 viewBox, stroke-linecap: round, stroke-linejoin: round. No exceptions.
Diamond Motif
The violet diamond is the brand's signature section marker. It has one job: marking the top level of a page's structural hierarchy.
The diamond + section label pattern is for top-level page sections only. It does not replace the existing .label class (11px, semibold, zinc-400, wide tracking) used for card headers, severity badges, metadata, stat labels, and all other small labels. Do not use the diamond for sub-section titles or content-level hierarchy.
Status Icon Hierarchy
A two-tier system for colored icons alongside status elements — product pages only. Inspired by Linear. The key rule: one tier per element, never stacked.
Never stack both tiers on the same element. If a row has a Tier 1 colored icon, its text stays zinc. If a badge has Tier 2 vivid treatment, no additional colored icon. One signal per element — icon or badge, never both.
Visual Principles
Application
- Marketing hero sections use Regular outline icons
- Feature callouts leverage Regular → Fill state changes
- Presentation slides default to Regular weight
Why
Product.ai communicates structural certainty. Icons should feel intentional and precise, not decorative.
Why
In sophisticated interfaces, color serves data signals (status, value). State changes use form transformation for clarity without noise.
Application
- Asymmetric icons (play buttons, arrows) may need micro-adjustments
- Test in context—what looks centered isn't always mathematically centered
- Use translate-x-[0.5px] or similar when visual balance is off
Usage Examples
✓ Correct Usage
Hero Feature Icons
Landing pages, keynote slides, primary features
Section Headers
Marketing sections, feature showcases, card features
Interactive Elements
Navigation, toggles, CTAs
Status Icons (Tier 1)
Colored icon + zinc text — icon signals, text stays neutral
✗ Incorrect Usage
Bold Weight in Brand
Bold weight is too heavy for brand expression
Color Applied to Icon
Don't apply color directly to SVG
Mixed States Without Fill
Using color change only for active state
Quality Checklist
Before releasing brand materials with icons:
On Brand vs. UI Design
This system prioritizes visual clarity and brand precision. UI/product design requires different optimization for typography harmony and information density. Both systems use Phosphor to maintain family consistency while serving different functional needs.
On Restraint
Regular weight icons should enhance—not overwhelm—content. The Glass Box Design System values intelligent restraint. Every icon should have clear purpose.
On Evolution
As the brand matures, icon usage may expand. These principles provide the foundation for consistent, authoritative icon application across all Product.ai brand touchpoints.
Curated Icon Kit
A selection of the most commonly used Product.ai icons, exported as individual SVGs in both Regular and Fill weights. For the complete Phosphor library, access it via Figma or phosphoricons.com.