Phosphor Icons
Phosphor Icons is a flexible icon family designed for interfaces, diagrams, and presentations. With over 1,500 icons available in 6 different weights, it offers the most style variety of any major open-source icon library. The 6 weights — thin, light, regular, bold, fill, and duotone — give designers and developers extraordinary control over visual hierarchy and tone. You can use thin icons for elegant, minimal UIs, bold icons for high-contrast accessibility needs, and duotone icons for a modern two-color effect. The collection is licensed under MIT; review the icon license guide for commercial-use details.
Phosphor Icons Specifications & Framework Compatibility
| Property | Specification Details |
|---|---|
| Total Icons | 10,731 vector SVG icons |
| License | MIT (Commercial & Personal Use) |
| TypeScript Support | Native .d.ts definitions included |
| Framework Support | React, Next.js, Vue, Svelte, Tailwind CSS |
| Primary NPM Package | @phosphor-icons/react |
| Source Repository | Official GitHub Repository → |
How many icons does Phosphor Icons have?
Phosphor Icons currently includes 10,731 vector icons indexed in the IconSearch catalog. Every icon is available in clean SVG format with customizable stroke widths, colors, and direct multi-framework code exports for modern web applications.
Is Phosphor Icons free for commercial use?
Yes, Phosphor Icons is distributed under the MIT license. This permissive open-source license allows unrestricted commercial and personal usage in proprietary software, SaaS platforms, client websites, and digital products without licensing fees.
How do you install and use Phosphor Icons in React, Next.js, and Vue?
Install the package using npm install @phosphor-icons/react, then import icons directly into your JSX, TSX, or Vue components. Alternatively, copy raw customized SVG markup directly from IconSearch with zero client-side JavaScript overhead.
// Install package
npm install @phosphor-icons/react
// React & Next.js App Router usage
import { Acorn } from '@phosphor-icons/react'
export default function Header() {
return <Acorn className="w-5 h-5 text-indigo-500" />
}Phosphor Icons FAQ & Technical Guide
What is a duotone icon?
A duotone icon uses two colors — a primary color and a lighter secondary color applied to different parts of the icon. In Phosphor, the secondary layer uses 20% opacity of the primary color by default, creating a subtle two-tone effect.
How do I change the weight of a Phosphor icon?
Use the weight prop on any icon component. Available values are thin, light, regular, bold, fill, and duotone. For example: <House weight='duotone' />.
Is Phosphor Icons free for commercial use?
Yes. Phosphor Icons uses the MIT license which allows free use in any commercial project without attribution.
How does Phosphor compare to Lucide Icons?
Phosphor offers 6 weight variants vs Lucide's single outline style. Lucide has a slightly more active community and is more commonly seen in React projects. Phosphor wins on style flexibility, Lucide wins on community support and simplicity.
Does Phosphor Icons work with Tailwind CSS?
Yes. Pass className with Tailwind utilities for sizing. For color, use the color prop instead of text color utilities since Phosphor icons use fill and stroke rather than just currentColor.