> [!IMPORTANT] > As part of a major update, we will be replacing the existing phosphor-react package with @phosphor-icons/react. We recommend using this new version, as it has improved performance and a significantly smaller bundle size. No APIs have been changed, so drop-in replacement should be straightforward. The legacy package will continue to receive maintenance, but will not be updated with new icons upstream. Take me to the legacy version ➜
@phosphor-icons/react
Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at phosphoricons.com.
Simply import the icons you need, and add them anywhere in your render method. Phosphor supports tree-shaking, so your bundle only includes code for the icons you use.
`tsx import { HorseIcon, HeartIcon, CubeIcon } from "@phosphor-icons/react";
const App = () => { return (
); }; `
$3
When importing icons during development directly from the main module @phosphor-icons/react, some bundlers may eagerly transpile all 9,000+ modules exported by the package. This behavior can drastically increase compilation time. To avoid transpiling all modules, import individual icons from their specific file paths instead:
`tsx import { BellSimpleIcon } from "@phosphor-icons/react/dist/csr/BellSimple"; `
#### Next.js Specific Optimizations
If you're using Next.js 13+, consider using optimizePackageImports in your next.config.js to have Next.js only load the modules that you are actually using. With this approach, you can use @phosphor-icons/react directly without causing Next.js to compile all its modules:
When using Phosphor Icons in an SSR environment, within a React Server Component, or in any environment that does not permit the use of the Context API (Next.js Server Component, for example), import icons from the /dist/ssr submodule:
`tsx import { FishIcon } from "@phosphor-icons/react/ssr";
const MyServerComponent = () => { return ; }; `
> [!NOTE] > These variants do not use React Context, and thus cannot inherit styles from an ancestor IconContext.
$3
Icon components accept all props that you can pass to a normal SVG element, including inline style objects, onClick handlers, and more. The main way of styling them will usually be with the following props:
- color?: string – Icon stroke/fill color. Can be any CSS color string, including hex, rgb, rgba, hsl, hsla, named colors, or the special currentColor variable. - size?: number | string – Icon height & width. As with standard React elements, this can be a number, or a string with units in px, %, em, rem, pt, cm, mm, in. - weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone" – Icon weight/style. Can also be used, for example, to "toggle" an icon's state: a rating component could use Stars with weight="regular" to denote an empty star, and weight="fill" to denote a filled star. - mirrored?: boolean – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate. - alt?: string – Add accessible alt text to an icon.
$3
Phosphor takes advantage of React Context to make applying a default style to all icons simple. Create an IconContext.Provider at the root of the app (or anywhere above the icons in the tree) and pass in a configuration object with props to be applied by default to all icons:
`tsx import { IconContext, HorseIcon, HeartIcon, CubeIcon } from "@phosphor-icons/react";
{/ I'm lime-green, 32px, and bold! /} {/ Me too! /} {/ Me three :) /}
); }; `
You may create multiple Contexts for styling icons differently in separate regions of an application; icons use the nearest Context above them to determine their style.
> [!NOTE] > The context will also pass any provided SVG props down to icon instances, which can be useful E.G. in adding accessible
