Phosphor Icons React

Phosphor Icons for React packages the entire Phosphor icon family — over 1,500 icons — as individually importable React components, each rendered as an inline SVG so it inherits currentColor and can be styled with plain CSS. Every icon is available in six visual weights (thin, light, regular, bold, fill, duotone) selectable via a weight prop, letting a single icon set cover both minimal line-art UIs and heavier, higher-contrast designs without swapping icon libraries.

The library is built around a small shared runtime (IconBase/SSRBase) that every generated icon component wraps, plus an IconContext provider for setting default size, color, and weight across an entire app instead of repeating props on every icon. It ships both a client-side-rendering build (csr) and a server-side-rendering-safe build (ssr) so icons render correctly during Next.js/Astro-style SSR without hydration mismatches, and each icon is exported individually so bundlers can tree-shake unused icons out of the final bundle.

What You Get

• Over 1,500 individually importable icon components, each rendered as an inline, style-able SVG
• Six visual weights per icon (thin, light, regular, bold, fill, duotone) selectable via a weight prop
• An IconContext provider for setting default size, color, weight, and mirrored across all icons in an app
• Separate client-side-rendering and server-side-rendering-safe builds so icons work correctly in SSR frameworks
• Full TypeScript type declarations generated per-icon for autocomplete and type-checked props

Common Use Cases

• Populating a design system’s icon set with a single consistent, weight-flexible icon family
• Building admin dashboards and marketing sites that need thousands of icons available without hand-authoring SVGs
• Using duotone or fill weights for higher-emphasis icons (e.g. empty states, feature callouts) alongside regular-weight navigation icons
• Server-rendered React apps (Next.js, Astro with React islands) that need icons to render correctly without hydration flicker
• Swapping icon styles app-wide (e.g. thin to bold) via the shared IconContext instead of editing every call site

Under The Hood

Architecture The published package is almost entirely generated: a small hand-written runtime in src/lib (IconBase.tsx, SSRBase.tsx, context.ts, types.ts — under 130 lines total) defines how any icon renders (forwarding refs, merging context defaults with local props, choosing the right weight’s SVG paths), and a scripts/ build step generates one component file per icon under src/csr and src/defs (1,512 files each) from the underlying Phosphor SVG icon definitions. Each generated icon component is a thin wrapper that passes its specific SVG path data into the shared IconBase, so the actual per-icon logic is a single source of truth rather than duplicated across 1,500+ files.

Tech Stack Written in TypeScript, built with Vite (vite.config.ts) to emit both dist/index.es.js and dist/index.cjs.js builds plus per-icon subpath exports (./dist/icons/*, ./dist/csr/*), and packaged with pnpm. The only meaningful runtime dependency is React itself (as a peer dependency); the icon rendering logic has no other runtime dependencies.

Code Quality Testing is comparatively thin for a package of this size — test/index.test.tsx covers the shared IconBase rendering behavior and context propagation rather than exhaustively testing all 1,500+ generated icon components individually, which is a reasonable trade-off given the icons are mechanically generated from the same base component and share identical rendering logic. Because most of the source tree is generated rather than hand-authored, code quality is best assessed via the shared runtime files, which are small, typed, and easy to review in full.

API Design Every icon is imported by name (import { Acorn } from '@phosphor-icons/react') and accepts a small, consistent prop set (size, color, weight, mirrored) shared across all 1,500+ icons via the same IconBase — so learning one icon’s API means knowing all of them. The IconContext.Provider pattern lets teams set app-wide icon defaults once, avoiding repetitive prop-drilling, while still allowing any individual icon instance to override those defaults locally.