Phosphor Icons

Overview

Phosphor Icons is a flexible icon family for interfaces, diagrams, and presentations. With over 1,500 distinct glyphs across 6 cohesive weights (Thin, Light, Regular, Bold, Fill, and Duotone), it delivers unmatched visual consistency.

Key Features

• 6 Unified Weights: Seamlessly switch between Thin, Light, Regular, Bold, Fill, and Duotone styles.
• Multi-Framework Ecosystem: Native packages for React, Vue, Svelte, Flutter, Elm, and Figma.
• Strict 24x24 Pixel Grid: Engineered for razor-sharp visual balance across all screen densities.
• Zero-Dependency SVGs: Tree-shakeable vector icons with full TypeScript support.

Installation & Quick Start

npm install @phosphor-icons/react

import { Heart, Cube, Rocket } from '@phosphor-icons/react';

export default function IconDemo() {
  return (
    <div className="flex items-center gap-3">
      <Heart size={24} weight="bold" color="#ef4444" />
      <Cube size={24} weight="duotone" />
      <Rocket size={24} weight="fill" />
    </div>
  );
}

Why Choose Phosphor Icons?

• Best for: Modern SaaS applications, design systems, and apps needing multi-weight icon variations.
• Not suitable for: Legacy font-icon workflows requiring raw .ttf or .eot files.