Phosphor Icons, created by Tobias Fried and Helena Zhang, is a flexible icon family of roughly 1,500 icons released under the MIT licence. The count understates it: each icon exists in six weights, so the set contains around 9,000 individual files.
That structure is the whole point of Phosphor, and it is why choosing it is a design system decision rather than just an icon choice.
The short version
Six weights: thin, light, regular, bold, fill and duotone. Icons are drawn on a 256 by 256 grid rather than 24 by 24, which is why the stroke numbers do not look like Lucide's. Licence is MIT, no attribution needed. Pick one weight as your default and use the others for state, not decoration.
The six weights and what each is for
| Weight | Character | Use it for |
|---|---|---|
| Thin | Hairline, delicate | Large decorative icons, 48px and up. Disappears below 24px |
| Light | Airy, editorial | Content-heavy pages, marketing, spacious layouts |
| Regular | Neutral default | Standard UI at 16 to 24px. Start here |
| Bold | Assertive | Small sizes, low-contrast backgrounds, primary actions |
| Fill | Solid silhouette | Active and selected states, status indicators |
| Duotone | Solid shape plus outline | Feature cards, empty states, illustrative moments |
The useful mental model: thin through bold are one dial, fill and duotone are a different thing entirely. The first four vary the stroke. Fill and duotone change the rendering approach. Treating all six as points on one scale is the fastest route to an inconsistent interface.
Choosing a default weight
Pick one weight for the whole product and treat every other weight as a deliberate exception. Regular is the right default for the large majority of interfaces.
The exception worth knowing: if your interface runs icons at 16px or smaller, or places light icons on a mid-tone background, bold is often a better default than regular. Thin strokes lose contrast quickly at small sizes and against anything other than a high-contrast background, and the icon becomes decoration rather than information.
Once the default is set, the legitimate uses of a second weight are narrow: fill for an active state that pairs with your regular outline, and occasionally light or thin for icons displayed at 48px or larger where regular would look heavy.
Duotone, and how to colour it
Duotone renders each icon as a solid background shape at reduced opacity plus a foreground outline. It is the most distinctive thing Phosphor offers and the easiest to misuse.
Technically, duotone SVGs contain two groups: the fill layer, usually set at around 20 percent opacity, and the stroke layer at full opacity. Both inherit currentColor by default, which is why duotone icons look monochromatic out of the box: one colour at two opacities. To get a genuine two-colour icon you override the fill layer's colour explicitly.
/* Two true colours rather than one at two opacities */
.icon-duotone {
color: #1F6FEB; /* the outline layer */
}
.icon-duotone [opacity="0.2"] {
fill: #FFB020; /* the fill layer */
opacity: 1;
}Where duotone works: feature grids, empty states, onboarding, pricing tables, anywhere the icon is the focus rather than a label for something else. Where it fails: dense UI. In a toolbar or table row, the extra layer reads as visual noise and the icon becomes harder to identify at a glance, which is the opposite of what an icon is for.
The 256 grid and what it means for stroke
Phosphor icons use a viewBox="0 0 256 256" rather than the 24 by 24 that Lucide, Tabler and Material use. Nothing renders differently, SVG scales regardless, but two practical consequences follow.
- Stroke numbers are not comparable. A stroke of 16 in Phosphor's coordinate space is roughly equivalent to 1.5 in a 24-grid set. If you are hand-editing SVGs from two libraries, do not copy stroke values between them.
- Mixing with 24-grid sets is harder. Optical weight, corner radii and the amount of padding inside the box all differ. Phosphor next to Lucide usually looks slightly off even when both are at the same pixel size.
None of this affects you if you use Phosphor on its own, which is the recommendation. It affects you a lot if you are mixing sets, which is the recommendation against.
Installing Phosphor
| Stack | Package |
|---|---|
| React | @phosphor-icons/react |
| Vue 3 | @phosphor-icons/vue |
| Web components | @phosphor-icons/webcomponents |
| Raw SVG files | @phosphor-icons/core |
The React package supports a context provider, which is genuinely useful with a multi-weight set: set weight, size and colour once at the app root and every icon below inherits it. That turns "change the whole product from regular to bold" into a one-line change rather than a find and replace across hundreds of components.
If you only need a few icons, skip the package. Export the SVGs you need from the tool in the weight you want and paste them inline.
When Phosphor is the right choice
Choose Phosphor when at least one of these is true:
- You are building a design system and want icon weight as a token alongside type weight.
- Your product needs matched outline and filled states across a lot of components.
- Your brand is soft or friendly and Lucide's geometric restraint reads as too severe.
- You have both a dense app UI and a spacious marketing site and want one icon family for both.
Choose something else when you want fewer decisions. A single-weight set removes an entire category of debate from your design reviews, and for a small team that is worth more than flexibility. Compare the options on the icon sets page.
Common mistakes with a multi-weight set
- Using weight decoratively. If two icons in the same row are different weights for no functional reason, the interface looks broken rather than expressive.
- Thin at small sizes. Thin below about 32px is close to invisible on anything but a white background.
- Duotone in dense UI. Two layers in a 16px space is noise.
- Mixing Phosphor with a 24-grid set. The mismatch is subtle enough to survive review and obvious enough to feel wrong.
- Not setting a default. Without a documented default weight, every developer picks their own.
Licence in plain English
Phosphor Icons is MIT licensed. Commercial use, modification, redistribution and inclusion in paid products are permitted. Keep the licence notice with the source if you redistribute the files. No visible attribution required.