Icons
9,198Icons
MITLicense
SixStyle
24×24Grid

Phosphor Icons

9,198 MIT-licensed six weights icons on a 24×24 grid. That makes Phosphor unusually good for design systems.

Browse Phosphor icons by category Compare libraries

About Phosphor Icons

What Phosphor is

Phosphor is built around a single idea: one icon family that works at every weight. Each of its 9,198 icons is available in six weights — Thin, Light, Regular, Bold, Fill, and Duotone — so you can express hierarchy, hover state, and emphasis without ever leaving the library.

That makes Phosphor unusually good for design systems. A single concept (home, user, settings) has six consistent expressions, which means your icon set stays coherent from a 16px table row to a 96px empty state. The Regular weight reads close to Lucide, while Fill and Duotone carry much more visual weight.

IconStash indexes the complete Phosphor Icons collection. You can search it alongside 27 other libraries, preview any icon at any size and colour, and export SVG, PNG, React JSX, Vue, CSS, or an SVG sprite without installing a package or creating an account.

Install and use Phosphor

React

npm install phosphor-react

The official package ships each icon as a tree-shakeable component, so bundlers only include the icons you actually import. Open any Phosphor icon on IconStash and the Code tab shows that icon's exact import statement and JSX.

Plain SVG and other frameworks

You do not have to install anything. Every Phosphor page lets you copy the raw SVG markup and paste it inline, which avoids a dependency entirely and gives you full control over colour, size, and stroke width.

IconStash also exports PNG at six sizes, Vue and CSS snippets, and SVG sprites — all generated in the browser from the original vector.

When to choose Phosphor

Good fit

Design systems, products with strong visual hierarchy, and teams that want one library to cover every context. The weight range also solves the common problem of outline icons disappearing on coloured or photographic backgrounds.

Consider alternatives

If you only need one weight, the six-weight structure is overhead you will not use — Lucide or Tabler are simpler. If you want duotone plus a premium aesthetic, compare Solar and Huge Icons.

Licensing

MIT. All 9,198 icons including every weight are free for commercial use with no attribution required, which is unusual for a library with this much range.

Phosphor compared to other libraries

Popular Phosphor icons

Browse Phosphor by category

Frequently asked questions

What is Phosphor Icons?

Phosphor is built around a single idea: one icon family that works at every weight. Each of its 9,198 icons is available in six weights — Thin, Light, Regular, Bold, Fill, and Duotone — so you can express hierarchy, hover state, and emphasis without ever leaving the library.

Is Phosphor Icons free for commercial use?

Yes. Phosphor Icons is released under the MIT license, which permits unrestricted commercial use, modification, and distribution. No attribution is required, though it is appreciated. This makes Phosphor one of the safest icon libraries to use in commercial SaaS products, client work, and proprietary applications.

How do I use Phosphor icons in React?

Install the package with npm install phosphor-react, then import icons as components. Every Phosphor page on IconStash shows the exact import statement and usage snippet for that specific icon in the Code tab, so you can copy working code without checking the docs. Tree-shakeable packages mean your bundler only includes the icons you actually import.

Can I download Phosphor icons as PNG?

Yes. Open any Phosphor icon on IconStash and use the Download PNG button to export at 16, 32, 64, 128, 256, or 512 pixels. The PNG is generated client-side from the original vector, so it stays crisp at every size. You can also copy the raw SVG markup, export a React component, or build an SVG sprite without installing anything.

What weights does Phosphor include?

Six: Thin, Light, Regular, Bold, Fill, and Duotone. Every icon in the set is drawn in all six, so switching weight is a prop change rather than a search for a different icon. Bold and Fill work well for active navigation states; Thin and Light suit dense tables and secondary actions.

When should I use Phosphor Duotone icons?

Duotone adds a second, lighter colour pass to each icon, which reads well in empty states, onboarding screens, and feature cards where a plain outline looks too thin. It is heavier visually, so avoid it in dense toolbars. IconStash previews all six weights so you can compare before exporting.

Explore other icon libraries