Phosphor Icons
Flexible icon family with 6 weights for interfaces and more
STATS
OVERVIEW
Phosphor Icons is a flexible icon family designed for interfaces, diagrams, and presentations. With over 1,200 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.
Phosphor ships as a React package with full TypeScript support. Icons are tree-shakable and accept size, color, weight, and mirrored props. The weight prop makes it trivial to switch between all 6 variants without changing your import. A Figma plugin is available with all weights.
// VERDICTPhosphor is the best choice when your design requires multiple icon styles within the same library. The duotone weight in particular is unique among free icon libraries and gives applications a premium, modern feel that is difficult to achieve otherwise.
INSTALLATION
npm install @phosphor-icons/react
npm install @phosphor-icons/react // Note: Compatible with Next.js App Router. Works in both Server and Client Components.
npm install @phosphor-icons/vue
// No official Svelte package. Use the SVG files directly from phosphoricons.com
npm install @phosphor-icons/web
CODE EXAMPLES
import { House, Gear, User } from '@phosphor-icons/react'
export default function App() {
return (
<div>
<House size={24} />
<Gear size={24} weight="bold" />
<User size={24} weight="duotone" />
</div>
)
}import { Heart } from '@phosphor-icons/react'
export default function WeightShowcase() {
const weights = ['thin', 'light', 'regular', 'bold', 'fill', 'duotone']
return (
<div className="flex gap-4">
{weights.map(weight => (
<Heart key={weight} size={32} weight={weight} />
))}
</div>
)
}// Duotone icons support custom color for the secondary layer
import { ShieldCheck } from '@phosphor-icons/react'
export default function Badge() {
return (
<ShieldCheck
size={48}
weight="duotone"
color="#6366f1"
/>
)
}