Phosphor React Native

Install phosphor-react-native along with react-native-svg using your preferred package manager. If you are using Expo, use the npx expo install command to ensure compatible versions.

# Using yarn
yarn add phosphor-react-native react-native-svg

# Using npm
npm install --save phosphor-react-native react-native-svg

# Using Expo
npx expo install phosphor-react-native react-native-svg

Because Metro does not tree-shake by default, importing icons from the main barrel import (import { ... } from 'phosphor-react-native') may include all 1512 icons in your bundle. To avoid this and keep your bundle small, import icons directly from their specific file path.

import { StarIcon } from 'phosphor-react-native/src/icons/Star';

If you encounter TypeScript errors regarding the className property on SvgProps or IconProps, add the following module augmentation to your global.d.ts file to widen the interfaces.

import 'react-native-svg';
import 'phosphor-react-native';

declare module 'react-native-svg' {
  interface SvgProps {
    className?: string;
  }
}
declare module 'phosphor-react-native' {
  interface IconProps {
    className?: string;
  }
}

Import specific icons from phosphor-react-native and use them in your React Native components. You can customize the appearance using props like color, weight, and size.

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

const App = () => {
  return (
    <View>
      <HorseIcon />
      <HeartIcon color="#AE2983" weight="fill" size={32} />
      <CubeIcon color="teal" weight="duotone" />
    </View>
  );
};

You can import all icons at once using the * as Icon syntax. Warning: Without tree-shaking enabled, this will pull every icon into your bundle. Use this pattern only if you have tree-shaking configured (e.g., via Expo).

import * as Icon from "phosphor-react-native";

<Icon.SmileyIcon />
<Icon.FolderIcon weight="thin" />
<Icon.BatteryHalfIcon size="24px" />
<Icon.AirplaneTakeoffIcon size="24px" mirrored={true} />

Use IconContext.Provider to apply a default style to all icons within a specific part of your component tree. Individual icon props will override the context values.

import React from 'react';
import { View } 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>
        <HorseIcon /> {/* lime-green, 32px, bold */}
        <HeartIcon /> {/* lime-green, 32px, bold */}
        <CubeIcon /> {/* lime-green, 32px, bold */}
      </View>
    </IconContext.Provider>
  );
};

Icons are styled using the following props. Note that IconProps is a closed type; props outside this list are forwarded to the underlying Svg at runtime but will be rejected by TypeScript unless you use module augmentation.

// Available IconProps:
// color?: string (Default: '#000')
// size?: number | string (Default: 24)
// weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' (Default: 'regular')
// mirrored?: boolean (Default: false)
// style?: StyleProp<ViewStyle | Omit<TextStyle, 'cursor'>>
// title?: string
// titleId?: string
// testID?: string
// duotoneColor?: string (Defaults to 'color')
// duotoneOpacity?: number (Default: 0.2)

The IconWeight type specifies the stroke weight or style of the icon. Supported values are:

• thin
• light
• regular
• bold
• fill
• duotone

export type IconWeight =
  | 'thin'
  | 'light'
  | 'regular'
  | 'bold'
  | 'fill'
  | 'duotone';

The IconProps interface defines the configuration options available for every icon component in the library. You can use these props to control the visual appearance, size, and accessibility of the icon.

export interface IconProps {
  color?: string;
  duotoneColor?: string;
  duotoneOpacity?: number;
  mirrored?: boolean;
  size?: string | number;
  style?: StyleProp<ViewStyle | Omit<TextStyle, 'cursor'>>;
  testID?: string;
  title?: string; // SVGRProps
  titleId?: string; // SVGRProps
  weight?: IconWeight;
}

The IconContext allows you to provide default props (like color, size, and weight) to all icons within a specific component tree. This is useful for maintaining a consistent icon style throughout your application without passing props to every individual icon.

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

// The default context values are:
// color: '#000'
// size: 24
// weight: 'regular'
// mirrored: false
// duotoneOpacity: 0.2