Phosphor Icons for React

Use IconContext.Provider to apply default styles (color, size, weight, etc.) to all icons within a specific part of your component tree. Icons will use the nearest IconContext provider above them.

import { IconContext, HorseIcon, HeartIcon, CubeIcon } from "@phosphor-icons/react";

const App = () => {
  return (
    <IconContext.Provider
      value={{
        color: "limegreen",
        size: 32,
        weight: "bold",
        mirrored: false,
      }}
    >
      <div>
        <HorseIcon /> {/* I'm lime-green, 32px, and bold! */}
        <HeartIcon /> {/* Me too! */}
        <CubeIcon /> {/* Me three :) */}
      </div>
    </IconContext.Provider>
  );
};

Icon components can accept arbitrary SVG elements as children. These children are placed below the normal icon contents within the icon's viewBox (which is 256x256). This allows for adding background layers, filters, or animations.

const RotatingCube = () => {
  return (
    <CubeIcon color="darkorchid" weight="duotone">
      <animate
        attributeName="opacity"
        values="0;1;0"
        dur="4s"
        repeatCount="indefinite"
      ></animate>
      <animateTransform
        attributeName="transform"
        attributeType="XML"
        type="rotate"
        dur="5s"
        from="0 0 0"
        to="360 0 0"
        repeatCount="indefinite"
      ></animateTransform>
    </CubeIcon>
  );
};

In environments that do not support the React Context API (such as Next.js Server Components or SSR), import icons from the /dist/ssr submodule.

Note: These SSR variants do not use React Context and cannot inherit styles from an ancestor IconContext.

import { FishIcon } from "@phosphor-icons/react/ssr";

const MyServerComponent = () => {
  return <FishIcon weight="duotone" />;
};

Install the Phosphor Icons React package using npm:

npm i @phosphor-icons/react

To prevent bundlers from eagerly transpiling all 9,000+ icons during development, you can import icons directly from their specific file paths:

import { BellSimpleIcon } from "@phosphor-icons/react/dist/csr/BellSimple";

Next.js Optimization

If using Next.js 13+, you can use optimizePackageImports in your next.config.js to allow direct imports from the main module without performance penalties:

module.exports = {
  experimental: {
    optimizePackageImports: ["@phosphor-icons/react"],
  },
}

The @phosphor-icons/react package exports a vast collection of icon components. You can import any icon directly from the main entrypoint. Each icon is a React component that can be used in your application.

To use an icon, import it using its PascalCase name (e.g., PencilSimpleSlash, User, WifiHigh) from the package.

Import specific icons from @phosphor-icons/react and use them as React components. The library supports tree-shaking to ensure only the icons you import are included in your bundle.

import { HorseIcon, HeartIcon, CubeIcon } from "@phosphor-icons/react";

const App = () => {
  return (
    <main>
      <HorseIcon />
      <HeartIcon color="#AE2983" weight="fill" size={32} />
      <CubeIcon color="teal" weight="duotone" />
    </main>
  );
};

Icon components accept all standard SVG props (like style, onClick, aria-label, etc.). The primary styling props are:

• color? (string): Icon stroke/fill color (hex, rgb, hsl, named colors, or currentColor).
• size? (number | string): Icon height & width (e.g., 32 or `

When building applications that use React Server Components (RSC) or Server-Side Rendering (SSR), you should import icons from the src/ssr entrypoint to ensure compatibility with server environments. This entrypoint exports the same icon components as the standard package but is optimized for server-side execution.

Commonly used icons available in this entrypoint include User, Shield, Wifi, ArrowUp, Check, and many others. The specific list of exported icons is exhaustive and mirrors the main library's icon set.

The AnchorSimpleIcon (and other Phosphor icons) supports the following weight options:

• regular
• thin
• light
• bold
• fill
• duotone