Phosphor Duotone Icons
1,512 icon elements1,512 free icons from the Phosphor family in the duotone variant. Each icon uses two layers: a solid foreground stroke and a softer background fill at reduced opacity. This creates a sense of depth and visual richness that single-color icons can't achieve. MIT licensed SVGs.
Duotone is where Phosphor gets interesting. Instead of one flat layer, each of these 1,512 icons uses two distinct visual layers. The primary strokes define the icon's shape with full opacity. A secondary fill layer sits behind them at reduced opacity, adding depth, dimensionality, and a subtle sense of volume that flat icons lack.
The two-layer advantage
Single-color icons are workhorses. They do the job. But duotone icons do the job with style. The secondary layer creates natural visual weight distribution within each icon, guiding the eye to the most important element. A folder icon doesn't just show a folder shape. It shows the folder body as a filled area with the tab and details rendered as crisp foreground strokes. You perceive depth without any gradients or shadows.
Where duotone shines
Marketing websites where icons need to feel premium, not utilitarian
App onboarding flows where richer visuals improve comprehension
Feature comparison grids where icons need to carry visual weight
Dashboard sidebar menus where the active state can use full opacity and inactive states use the reduced layer
Presentation slides where icons need to read from a distance
Technical details
1,512 icons with consistent two-layer treatment
Background layer uses 20% opacity by default (easily adjustable in SVG)
Same icon shapes as all other Phosphor weights
Clean SVG markup with clearly separated layers
MIT licensed for unrestricted use
The opacity of the background layer is a single attribute change in the SVG. Set it to 10% for a subtle hint, or 40% for a bolder effect. This gives you fine-grained control over the visual intensity without needing separate icon files.
For the simplest Phosphor expression, use Phosphor Regular. For maximum impact, try Phosphor Bold. Compare all variants in our icon packs collection, or adjust colors with the Free SVG Color Editor.
