Phosphor Icons

Overview

Phosphor Icons sets itself apart with a unique multi-weight system. Each of the 1,000+ icons comes in six distinct weights: Thin, Light, Regular, Bold, Fill, and Duotone. This flexibility makes Phosphor ideal for design systems that require subtle visual hierarchy — use lighter weights for decorative elements and heavier weights for primary actions.

Key Features

• 6 weight variants: Thin, Light, Regular, Bold, Fill, Duotone
• 1,000+ icons × 6 weights
• Single package — switch weights with a prop
• TypeScript support
• Consistent design across all weights
• Perfect for mobile-first interfaces

Installation

npm install phosphor-react

Usage Example

Basic React usage with Phosphor Icons

import { House, MagnifyingGlass, Gear } from 'phosphor-react';

export default function App() {
  return (
    <div>
      {/* Regular weight (default) */}
      <House size={24} />

      {/* Bold weight */}
      <MagnifyingGlass size={24} weight="bold" />

      {/* Duotone weight */}
      <Gear size={32} weight="duotone" color="#8b5cf6" />
    </div>
  );
}

Best For