# Phosphor Icons — Flexible Icon Family for Web and Native Apps

> A clean, consistent icon family with over 1,500 icons in six weights: thin, light, regular, bold, fill, and duotone. Provides official packages for React, Vue, Svelte, Flutter, Elm, and vanilla JS with full tree-shaking support.

## Install

Save as a script file and run:

# Phosphor Icons — Flexible Icon Family for Web and Native Apps

## Quick Use
```bash
npm install @phosphor-icons/react
```
```jsx
import { Horse, Heart, Cube } from "@phosphor-icons/react";

function App() {
  return (
    <div>
      <Horse size={32} color="#333" weight="duotone" />
      <Heart size={32} color="red" weight="fill" />
      <Cube size={32} weight="bold" />
    </div>
  );
}
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-ed155dad
Author: Script Depot