| name | restrained-iconography |
| description | Use when adding icons to a layout. Luxury brands use minimal, custom-feeling iconography. Avoid generic icon-set look.
|
Restrained Iconography
Custom or curated icon set, monoweight (one stroke width), in brand colors only. Never use multi-color icon sets — they read as casual.
Icon family choice
Pick ONE icon family:
- Lucide React (clean, monoweight, free)
- Phosphor (versatile, weight variants)
- Heroicons (Tailwind ecosystem)
- Iconoir (open source, premium feel)
- Custom SVG set — for the highest brand value
Never mix families. Even subtle stroke-width differences break brand cohesion.
Icon scale and weight
| Use case | Size | Weight |
|---|
| Inline body | 16px | regular |
| Nav | 20px | regular |
| Buttons | 16-20px | regular |
| Feature icons | 24-32px | regular or bold |
| Hero | 40-64px | thin or regular |
Color discipline
Icon color options:
- Current text color (inherit)
- Brand accent for emphasis
- Reduced opacity (60-70%) for secondary
Never:
- Multi-color icons (red+green checkmarks, etc.)
- Gradient fills
- Drop shadows on icons
- Different colors per icon (rainbow effect)
Where this fits in the X3 empire
Used across CardPrepAI for consistent iconography.