Phosphor Icons for React Native

3.0.4 · active · verified Tue Apr 21

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.

Common errors

```
Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Svg> & Pick<Readonly<SvgProps>, "children" | "style" | ... 144 more ... | "fontVariationSettings"> & InexactPartial<...> & InexactPartial<...>'.
```
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`.

fix Apply the type augmentation provided in the `Warnings` section to your project's `global.d.ts` or a similar type declaration file.
```
Invariant Violation: requireNativeComponent: "RNSVGPath" was not found in the UIManager.
```
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.

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.

Warnings

breaking 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`.
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';`.
gotcha 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.
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.
gotcha 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.
Fix: Add the following type augmentation to your `global.d.ts` file or a similar declaration file in your project: ```ts import type { SvgProps as DefaultSvgProps } from 'react-native-svg'; declare module 'react-native-svg' { interface SvgProps extends DefaultSvgProps { className?: string; } } declare module 'phosphor-react-native' { interface IconProps extends DefaultIconProps { className?: string; } } ```

Install

npm install phosphor-react-native npm
yarn add phosphor-react-native yarn
pnpm add phosphor-react-native pnpm

Imports

HeartIcon

wrong:

import Heart from 'phosphor-react-native/Heart';
import { Heart } from 'phosphor-react-native';

correct:

import { HeartIcon } from 'phosphor-react-native';

Since v3.0.0, all icon components are named with an 'Icon' suffix and are named exports. Default exports were removed.

IconContext
wrong:
```
const { IconContext } = require('phosphor-react-native');
```
correct:
```
import { IconContext } from 'phosphor-react-native';
```
Used for providing global icon styling via React Context. CommonJS `require` generally hinders tree-shaking.
IconProps
wrong:
```
import { IconProps } from 'phosphor-react-native';
```
correct:
```
import type { IconProps } from 'phosphor-react-native';
```
Type definition for icon component props. Use `import type` for clarity and bundler optimization when importing only types.

Quickstart

Demonstrates basic icon usage, custom styling with individual props, and global styling via `IconContext.Provider`.

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { IconContext, HorseIcon, HeartIcon, CubeIcon } from 'phosphor-react-native';

const App = () => {
  return (
    <IconContext.Provider
      value={{
        color: 'limegreen',
        size: 32,
        weight: 'bold'
      }}
    >
      <View style={styles.container}>
        {/* Inherits context values: limegreen, 32px, bold */}
        <HorseIcon />
        {/* Overrides context: uses #AE2983, 32px, fill */}
        <HeartIcon color="#AE2983" weight="fill" size={32} />
        {/* Overrides context: uses teal, 32px, duotone */}
        <CubeIcon color="teal" weight="duotone" />
      </View>
    </IconContext.Provider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    gap: 20,
    backgroundColor: '#f0f0f0'
  }
});

export default App;

view raw JSON →