What it does
Phosphor is a free icon family with thin, light, regular, bold, filled and duotone styles. It supplies SVG assets and official libraries for development frameworks and design tools.
The weight options can express interface states without changing icon families. A rating control, for example, can use regular stars for empty positions and filled stars for selected ones. React components also expose size, color and horizontal mirroring.
For React, install @phosphor-icons/react and import the icons you need. Use its SSR entry for server components; those icons cannot inherit defaults from IconContext. Some development bundlers process the entire main module eagerly, so the documentation also shows individual-file imports.
For a custom icon picker, the core package provides SVGs grouped by weight and catalog records containing names, tags, categories and version information. Custom SVG imports may need build-tool configuration. The core assets use the MIT licence, which permits commercial work while requiring preservation of its notices.
Strengths
- Six visual weights include filled and duotone treatments.
- Catalog metadata includes searchable tags, categories and release information.
Watch out for
- Custom SVG imports can require build-tool configuration.
- Server-side React icons cannot inherit IconContext styling defaults.
Best for
- Product interfaces using several icon weights
- Developers building an icon picker or framework integration
Sources
- @phosphor-icons/core (Oct 27, 2026)
- @phosphor-icons/react (Oct 27, 2026)
- Phosphor Icons MIT License (Oct 27, 2026)