> [!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 ➜](https://github.com/phosphor-icons/react/tree/legacy)

# @phosphor-icons/react Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at [phosphoricons.com](https://phosphoricons.com). [![NPM](https://img.shields.io/npm/v/@phosphor-icons/react.svg?style=flat-square)](https://www.npmjs.com/package/@phosphor-icons/react) [![Travis](https://img.shields.io/github/actions/workflow/status/phosphor-icons/react/main.yml?branch=vite&style=flat-square)](https://travis-ci.com/github/phosphor-icons/react) [![GitHub stars](https://img.shields.io/github/stars/phosphor-icons/react?style=flat-square&label=Star)](https://github.com/phosphor-icons/react) [![GitHub forks](https://img.shields.io/github/forks/phosphor-icons/react?style=flat-square&label=Fork)](https://github.com/phosphor-icons/react/fork) [![GitHub watchers](https://img.shields.io/github/watchers/phosphor-icons/react?style=flat-square&label=Watch)](https://github.com/phosphor-icons/react) [![Follow on GitHub](https://img.shields.io/github/followers/rektdeckard?style=flat-square&label=Follow)](https://github.com/rektdeckard) ## Installation ```bash npm i @phosphor-icons/react ``` ## Usage 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 { Horse, Heart, Cube } from "@phosphor-icons/react"; const App = () => { return (

); }; ``` ### React Server Components and SSR 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](https://nextjs.org/) Server Component, for example), import icons from the `/dist/ssr` submodule: ```tsx import { Fish } from "@phosphor-icons/react/dist/ssr"; const MyServerComponent = () => { return ; }; ``` > [!NOTE] > These variants do not use React Context, and thus cannot inherit styles from an ancestor `IconContext`. ### Props 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. ### Context 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, Horse, Heart, Cube } from "@phosphor-icons/react"; const App = () => { return (

{/* 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 `aria-label`s, `classNames`, etc. > [!NOTE] > React Context is not available in some environments. See [React Server Components and SSR](#react-server-components-and-ssr) for details. ### Composability

Components can accept arbitrary SVG elements as children, so long as they are valid children of the `

c	File Name	Size	files	T	Date
zip	dist/	28974185	9092	---	2025-10-15 10:09:18
-	LICENSE	1071		%	2025-10-15 10:07:28
-	README.md	11593		md	2025-10-15 10:07:28
-	package.json	2575		json	2025-10-15 10:07:28

🌲 / linkwarden node_modules @phosphor-icons react

control-panel