{"id":11552,"library":"phosphor-react","title":"Phosphor React Icons","description":"Phosphor React is a comprehensive icon library for React applications, providing a flexible and visually consistent icon family. The current stable version is 2.1.10, actively maintained with frequent minor and patch releases that add new icons, features, and bug fixes. Key differentiators include six distinct weights (thin, light, regular, bold, fill, duotone) for stylistic versatility, robust support for React Context to manage global icon styling, and full compatibility with standard SVG properties. The library is tree-shaking friendly, ensuring optimal bundle sizes, and offers official support for React Server Components (RSC) and server-side rendering (SSR) via a dedicated submodule. It also integrates JSDoc icon previews for enhanced developer experience.","status":"active","version":"1.4.1","language":"javascript","source_language":"en","source_url":"https://github.com/phosphor-icons/phosphor-react","tags":["javascript","react","icons","svg","phosphor","design","interface","UI","UX","typescript"],"install":[{"cmd":"npm install phosphor-react","lang":"bash","label":"npm"},{"cmd":"yarn add phosphor-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add phosphor-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React component functionality.","package":"react","optional":false}],"imports":[{"note":"Since v2.1.8, new icons and the recommended way to import are suffixed with 'Icon' (e.g., `HeartIcon`). Older, non-suffixed names (e.g., `Heart`) are deprecated but still functional. The package was also renamed from `phosphor-react` to `@phosphor-icons/react` in v2.","wrong":"import { Heart } from 'phosphor-react'","symbol":"HeartIcon","correct":"import { HeartIcon } from '@phosphor-icons/react'"},{"note":"Used to provide default styling (color, size, weight, mirrored) to all Phosphor Icons within a React tree via `IconContext.Provider`.","wrong":"import { IconContext } from 'phosphor-react'","symbol":"IconContext","correct":"import { IconContext } from '@phosphor-icons/react'"},{"note":"For use within React Server Components (RSC) or environments that don't support React Context (e.g., Next.js Server Components), import icons from the `/ssr` submodule. These SSR variants do not inherit styles from `IconContext`.","wrong":"import { FishIcon } from '@phosphor-icons/react'","symbol":"FishIcon","correct":"import { FishIcon } from '@phosphor-icons/react/ssr'"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { IconContext, HorseIcon, HeartIcon, CubeIcon } from '@phosphor-icons/react';\n\nconst App = () => {\n  return (\n    <IconContext.Provider\n      value={{\n        color: 'limegreen',\n        size: 32,\n        weight: 'bold',\n        mirrored: false,\n      }}\n    >\n      <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>\n        <h1>My Awesome Icons</h1>\n        <p>Icons inheriting context defaults:</p>\n        <HorseIcon /> {/* Will be lime-green, 32px, and bold! */}\n        <HeartIcon /> {/* Me too! */}\n        <CubeIcon /> {/* Me three :) */}\n\n        <p>Icons with overridden props:</p>\n        <HeartIcon color=\"#AE2983\" weight=\"fill\" size={48} />\n        <CubeIcon color=\"teal\" weight=\"duotone\" mirrored={true} />\n      </div>\n    </IconContext.Provider>\n  );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(<App />);","lang":"typescript","description":"Demonstrates importing individual icons, using `IconContext.Provider` for global styling, and overriding props on specific icons."},"warnings":[{"fix":"Update your `package.json` and imports to use `@phosphor-icons/react`. Run `npm uninstall phosphor-react && npm install @phosphor-icons/react` or `yarn remove phosphor-react && yarn add @phosphor-icons/react`.","message":"The package name was changed from `phosphor-react` to `@phosphor-icons/react` in v2. Importing from the old package name will result in using an older, unmaintained version and will not receive new icons or updates.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Update your imports and JSX usage to use the `Icon` suffix, e.g., `import { UserIcon } from '@phosphor-icons/react'` and `<UserIcon />`.","message":"As of `v2.1.8`, all exported icon components are suffixed with the word 'Icon' (e.g., `UserIcon`). While old names (e.g., `User`) are still valid, they are marked as deprecated to improve readability and prevent name collisions.","severity":"deprecated","affected_versions":">=2.1.8"},{"fix":"For RSC usage, change imports from `import { IconName } from '@phosphor-icons/react'` to `import { IconName } from '@phosphor-icons/react/ssr'`.","message":"When using Phosphor Icons within React Server Components (RSC) or environments that do not permit the Context API (like Next.js Server Components), icons must be imported from the `@phosphor-icons/react/ssr` submodule. These SSR variants do not support `IconContext` inheritance.","severity":"gotcha","affected_versions":">=2.0.11"},{"fix":"Upgrade to `@phosphor-icons/react@^2.1.10` or later, which explicitly adds `\"type\": \"module\"` to `package.json` for more predictable bundler behavior. Ensure your bundler is correctly configured for ESM.","message":"Early v2 versions (before `v2.1.10`) sometimes encountered module resolution issues, especially in mixed ESM/CJS environments, potentially leading to errors like `ReferenceError: exports is not defined` or `SyntaxError: Cannot use import statement outside a module`.","severity":"gotcha","affected_versions":"<2.1.10"},{"fix":"If targeting `react@16`, ensure you are using `@phosphor-icons/react@2.1.5` or newer. Alternatively, if locked to affected versions, configure your build system (e.g., Babel, TypeScript) to use the `classic` JSX runtime.","message":"`v2.1.0` through `v2.1.4` briefly switched to a modern JSX runtime, causing compatibility issues with `react@16` applications. This was reverted in `v2.1.5` to restore React 16 support.","severity":"gotcha","affected_versions":"2.1.0 - 2.1.4"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure your project's bundler is configured to correctly handle ES Modules. If encountering this in Node.js, ensure your package.json has `\"type\": \"module\"` or use a transpiler. Sometimes `import pkg from '@phosphor-icons/react'; const { Envelope } = pkg;` can be a workaround for specific bundler issues, but it's not the recommended long-term solution. Upgrade to `@phosphor-icons/react@^2.1.10`.","cause":"Attempting to import named exports from `@phosphor-icons/react` in a context where the bundler or runtime treats it as a CommonJS module, or an older bundler struggles with its ESM nature.","error":"Named export 'Envelope' not found. The requested module '@phosphor-icons/react' is a CommonJS module, which may not support all module.exports as named exports."},{"fix":"Update `@types/react` to the latest compatible version using `npm install @types/react@latest` or `yarn upgrade @types/react`. This specific issue was addressed and fixed in `v2.1.7`.","cause":"Type incompatibility between `@phosphor-icons/react`'s internal types and an outdated `@types/react` dependency in your project.","error":"Property 'children' does not exist on type 'IntrinsicAttributes & SVGProps<SVGSVGElement> & IconProps'"},{"fix":"Verify the package is installed with `npm install @phosphor-icons/react` or `yarn add @phosphor-icons/react`. Double-check the import statements to ensure they use `@phosphor-icons/react` as the package name, not `phosphor-react`.","cause":"The package `@phosphor-icons/react` is not installed, or the import path is incorrect, or the old package name `phosphor-react` is still being used.","error":"Module not found: Can't resolve '@phosphor-icons/react'"}],"ecosystem":"npm"}