05 · Design / Iconography
One icon system. No exceptions.
Phosphor Icons is the only icon set we use. It is friendly, geometric, and enormous, so there is always a right glyph. Mixing icon families is the fastest way to make work feel off-brand.
The rule
Phosphor, and only Phosphor.
No Lucide. No Heroicons. No Material, Feather, or Font Awesome. No emoji. No Unicode symbols as decoration. No hand-drawn SVGs. When you need an icon, it comes from phosphoricons.com.
Two weights, two jobs
Duotone in layouts. Bold in buttons and dense UI.
DuotoneIn layouts
The default for page bodies, cards, list items, and feature rows. The two-tone fill gives warmth and presence. Load @phosphor-icons/web/src/duotone.
BoldIn dense UI
For buttons, inputs, toolbars, and tight UI. The bold stroke matches DM Sans Medium's weight. Load @phosphor-icons/web/src/bold.
Sizes
Stick to the 8-point steps.
24px
Card headers, features
Color
Current text color, or one named brand color. Never multi-color outside duotone.
Default to currentColor so icons inherit the text around them. Reach for a named brand color only when the icon is a deliberate accent. Duotone's built-in second tone is the only multi-color allowed.
A starter set
Common glyphs for Planetary Talent surfaces. Click to copy the name.
Product & navigation
house
magnifying-glass
users-three
briefcase
chat-circle
bell
gear
user-circle
calendar-blank
check-circle
arrow-right
dots-three-outline
Brand & universe
rocket-launch
planet
star
shooting-star
compass
binoculars
globe
moon-stars
sun-horizon
circles-three
lightbulb
confetti
What we never do
The fast ways to break the system.
Do
- One family, Phosphor, everywhere
- Duotone in layouts, Bold in buttons
- Sizes on the 8-point scale
- currentColor or one brand color
Don't
🚀
★
→
- No emoji, ever, in product or marketing
- No Unicode symbols as decorative icons
- No mixing Lucide, Material, Feather, etc.
- No hand-drawn SVGs in place of icons
Drop-in usage
For mocks and prototypes, load from CDN.
<!-- Load both weights once, in the head -->
<link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2/src/duotone/style.css"/>
<link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2/src/bold/style.css"/>
<!-- In layouts: duotone -->
<i class="ph-duotone ph-rocket-launch" style="font-size:24px; color:var(--pt-rocket-flame);"></i>
<!-- In buttons: bold -->
<i class="ph-bold ph-arrow-right" style="font-size:18px;"></i>
For production, the app uses @phosphor-icons/react and marketing installs the CSS package. Same glyphs, same weights.