Phosphor Icons — Flexible Icon Family for Web and Native Apps

Introduction

Phosphor Icons is a flexible, open-source icon family designed for clarity and consistency at every size. Each of its 1,500+ icons comes in six distinct weights, giving designers and developers fine-grained control over icon density and emphasis without mixing icon sets.

What Phosphor Icons Does

• Provides 1,500+ icons each available in six weights: thin, light, regular, bold, fill, and duotone
• Ships official packages for React, Vue, Svelte, Elm, Flutter, React Native, and vanilla web
• Supports runtime weight and color changes through component props or CSS without swapping assets
• Enables tree-shaking so only the icons you import are included in the final bundle
• Offers a searchable web catalog with live previews of all weights and copy-paste code snippets

Architecture Overview

Each icon is designed on a 256x256 SVG canvas with consistent stroke widths and optical alignment across weights. The build pipeline generates per-framework packages from a single source-of-truth SVG directory. In the React package, each icon is a component that accepts size, color, weight, and mirrored props, rendering the appropriate SVG path at runtime. The duotone weight uses a secondary opacity layer for depth.

Self-Hosting & Configuration

• Install the framework-specific package via npm (e.g., @phosphor-icons/react, @phosphor-icons/vue)
• Import individual icons by name for automatic tree-shaking in modern bundlers
• Set default size, color, and weight at the provider level using IconContext in React
• Use the @phosphor-icons/web package for vanilla HTML projects with CSS class-based insertion
• Access the raw SVG files from @phosphor-icons/core for custom tooling or static site generators

Key Features

• Six weights per icon enable visual hierarchy without mixing icon families
• Duotone weight adds a secondary color layer for distinctive, modern iconography
• Runtime-switchable weights via component props allow dynamic UI states
• Consistent 256-unit grid ensures pixel-perfect alignment at common sizes (16, 24, 32, 48 px)
• MIT licensed with no attribution required for commercial or personal use

Comparison with Similar Tools

• Lucide — two weights (outline, filled); Phosphor offers six weights including duotone for richer expression
• Bootstrap Icons — larger total count but fewer weight options; Phosphor provides more stylistic flexibility per icon
• Heroicons — two styles (outline, solid); Phosphor's six weights cover a wider range of visual density
• Font Awesome — freemium with some icons paywalled; Phosphor is fully free and open source
• Tabler Icons — outline-focused single weight; Phosphor's multi-weight system suits more diverse design needs

FAQ

Q: Can I use Phosphor Icons without React? A: Yes. Official packages exist for Vue, Svelte, Elm, Flutter, and vanilla web. You can also use the raw SVGs from the core package.

Q: How do I change the default icon size across my app? A: In React, wrap your app in an IconContext.Provider with default values for size, color, and weight.

Q: What is the duotone weight? A: Duotone icons use two layers with different opacities, creating a subtle depth effect. The secondary layer opacity is customizable via the component props.

Q: Are the icons accessible? A: Phosphor icon components render with aria-hidden="true" by default for decorative use. Add an aria-label prop for meaningful icons.

Sources

• https://github.com/phosphor-icons/homepage
• https://phosphoricons.com/