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. No arbitrary interpolation — if a context doesn't fit a scale level, use the next size up.
Default: SM (16px) for standard interactive elements. No intermediate sizes — if a context doesn't fit, use the next size up.
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 Icons
Colored status icons (success / warning / error) are product-UI only — they live in the product design system, not the brand kit. On brand surfaces, icons stay monochrome via currentColor, and state is shown by weight (Regular → Fill), not color.
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
✗ 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.