{"id":15163,"library":"phosphor-react-native","title":"Phosphor Icons for React Native","description":"Phosphor React Native is a library providing a flexible, open-source icon family for React Native applications, compatible with both iOS and Android platforms. The current stable version is 3.0.4, with releases occurring semi-regularly, typically every few months for minor updates or bug fixes, and major versions (like v3.0.0) introducing breaking changes less frequently. Key differentiators include its extensive collection of icons available in six distinct weights (thin, light, regular, bold, fill, duotone), robust TypeScript support, efficient tree-shaking to minimize bundle size, and a powerful React Context API for applying global styling configurations. It's heavily inspired by the web-focused `phosphor-react` library, bringing the same aesthetic and functionality to the React Native ecosystem.","status":"active","version":"3.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/duongdev/phosphor-react-native","tags":["javascript","react-native","ios","android","typescript"],"install":[{"cmd":"npm install phosphor-react-native","lang":"bash","label":"npm"},{"cmd":"yarn add phosphor-react-native","lang":"bash","label":"yarn"},{"cmd":"pnpm add phosphor-react-native","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"React Native core dependency.","package":"react"},{"reason":"React Native core dependency.","package":"react-native"},{"reason":"Required for rendering SVG icons in React Native.","package":"react-native-svg"}],"imports":[{"note":"Since v3.0.0, all icon components are named with an 'Icon' suffix and are named exports. Default exports were removed.","wrong":"import Heart from 'phosphor-react-native/Heart';\nimport { Heart } from 'phosphor-react-native';","symbol":"HeartIcon","correct":"import { HeartIcon } from 'phosphor-react-native';"},{"note":"Used for providing global icon styling via React Context. CommonJS `require` generally hinders tree-shaking.","wrong":"const { IconContext } = require('phosphor-react-native');","symbol":"IconContext","correct":"import { IconContext } from 'phosphor-react-native';"},{"note":"Type definition for icon component props. Use `import type` for clarity and bundler optimization when importing only types.","wrong":"import { IconProps } from 'phosphor-react-native';","symbol":"IconProps","correct":"import type { IconProps } from 'phosphor-react-native';"}],"quickstart":{"code":"import React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { IconContext, HorseIcon, HeartIcon, CubeIcon } from 'phosphor-react-native';\n\nconst App = () => {\n  return (\n    <IconContext.Provider\n      value={{\n        color: 'limegreen',\n        size: 32,\n        weight: 'bold'\n      }}\n    >\n      <View style={styles.container}>\n        {/* Inherits context values: limegreen, 32px, bold */}\n        <HorseIcon />\n        {/* Overrides context: uses #AE2983, 32px, fill */}\n        <HeartIcon color=\"#AE2983\" weight=\"fill\" size={32} />\n        {/* Overrides context: uses teal, 32px, duotone */}\n        <CubeIcon color=\"teal\" weight=\"duotone\" />\n      </View>\n    </IconContext.Provider>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    flexDirection: 'row',\n    gap: 20,\n    backgroundColor: '#f0f0f0'\n  }\n});\n\nexport default App;","lang":"typescript","description":"Demonstrates basic icon usage, custom styling with individual props, and global styling via `IconContext.Provider`."},"warnings":[{"fix":"Update all icon imports from `import Heart from 'phosphor-react-native/Heart';` or `import { Heart } from 'phosphor-react-native';` to `import { HeartIcon } from 'phosphor-react-native';`.","message":"Version 3.0.0 introduced significant breaking changes: default exports for all icons were removed, and all exported icon components are now suffixed with 'Icon'. For example, an icon previously imported as `Heart` is now `HeartIcon`.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Ensure `react-native-svg` is installed in your project: `yarn add react-native-svg` or `npm install --save react-native-svg`. Follow `react-native-svg`'s linking instructions if necessary for older React Native versions.","message":"This library has a required peer dependency on `react-native-svg` for rendering SVG icons. Without it, icons will not display correctly and may lead to runtime errors or crashes.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add the following type augmentation to your `global.d.ts` file or a similar declaration file in your project:\n```ts\nimport type { SvgProps as DefaultSvgProps } from 'react-native-svg';\n\ndeclare module 'react-native-svg' {\n  interface SvgProps extends DefaultSvgProps {\n    className?: string;\n  }\n}\ndeclare module 'phosphor-react-native' {\n  interface IconProps extends DefaultIconProps {\n    className?: string;\n  }\n}\n```","message":"TypeScript users might encounter errors like `Property 'className' does not exist on type '...'` when attempting to pass a `className` prop directly to icons or `Svg` components.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Apply the type augmentation provided in the `Warnings` section to your project's `global.d.ts` or a similar type declaration file.","cause":"The TypeScript compiler indicates that the `className` prop is not defined on the `SvgProps` or `IconProps` interfaces by default within `react-native-svg` or `phosphor-react-native`.","error":"Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Svg> & Pick<Readonly<SvgProps>, \"children\" | \"style\" | ... 144 more ... | \"fontVariationSettings\"> & InexactPartial<...> & InexactPartial<...>'."},{"fix":"Install `react-native-svg` (`yarn add react-native-svg` or `npm install --save react-native-svg`) and ensure it is properly configured and linked according to its documentation, especially for older React Native versions that may require manual linking.","cause":"The `react-native-svg` library, a peer dependency for `phosphor-react-native`, is either not installed or not correctly linked with your React Native project.","error":"Invariant Violation: requireNativeComponent: \"RNSVGPath\" was not found in the UIManager."}],"ecosystem":"npm"}