React Native Vector Icons

To use FontAwesome 6 Pro, you must first install the Pro fonts into your repository using your FontAwesome npm token (available in your FontAwesome account under the Services tab).

Using the CLI upgrade tool

Run the following command and enter your token when prompted:

npx fa-upgrade6

By default, this installs fonts into the rnvi-fonts/fontawesome6-pro directory. You can customize the destination directory by providing a path to the command:

npx fa-upgrade6 [destination]

Note: If you change the destination, you must also update the fontDir field in your package.json to match.

Manual Installation

If the shell script fails, you can manually add the Pro font files to the rnvi-fonts/fontawesome6-pro directory.

This package does not include the actual font files. You must provide your own .ttf font file. Place the font file in the following directory structure so it can be automatically copied during the build process for iOS and Android:

rnvi-fonts/fontawesome-pro-sharp-duotone-solid/fa-sharp-duotone-solid-900.ttf

Install the Fontawesome Pro Sharp Duotone Light icon set package using npm.

npm install @react-native-vector-icons/fontawesome-pro-sharp-duotone-light

To use this package, you must manually provide the .ttf font file. Place your font file in the following directory structure so it can be automatically copied during the build process for iOS and Android:

rnvi-fonts/fontawesome-pro-sharp-solid/fa-sharp-solid-900.ttf

To use Fontawesome Free Brands icons in your React Native project, install the package via npm:

npm install @react-native-vector-icons/fontawesome-free-brands

To use this package, you must manually provide the .ttf font files. Place your font file in the following directory structure so they are automatically copied during the build process for iOS and Android:

rnvi-fonts/fontawesome-pro-sharp-thin/fa-sharp-thin-100.ttf

This package does not include the font files. You must provide your own .ttf font file. Place the font file in the following directory structure so it can be automatically copied during the build process for iOS and Android:

rnvi-fonts/fontawesome-pro-sharp-duotone-regular/fa-sharp-duotone-regular-400.ttf

To use the Fontawesome Free Regular icon set, install the package via npm:

npm install @react-native-vector-icons/fontawesome-free-regular

The generator-react-native-vector-icons package is used to generate individual icon packages within the repository. To use the generator, you must first build the generator itself and its dependencies before running the generation command from the repository root.

Follow these steps:

1. Build the generator: Run pnpm run watch-tsc within the packages/generator-react-native-vector-icons directory.
2. Build dependencies: Run pnpm run watch-deps within the packages/generator-react-native-vector-icons directory.
3. Execute generation: Run pnpm run generate from the root of the repository to create the individual icon packages.

# 1. In packages/generator-react-native-vector-icons
pnpm run watch-tsc
pnpm run watch-deps

# 2. In the repository root
pnpm run generate

Install the Material Icons package using npm:

npm install @react-native-vector-icons/material-icons

To use this icon set, you must manually place your .ttf font file in the specific directory required by the build process. The font will then be automatically copied for both iOS and Android.

Required path: rnvi-fonts/fontawesome-pro-duotone-solid/fa-duotone-900.ttf

To use specific icon sets, install the individual packages for the icons you want. For example, to install FontAwesome Free Solid and EvilIcons:

npm install @react-native-vector-icons/fontawesome-free-solid @react-native-vector-icons/evil-icons

After installation, follow the platform-specific setup instructions for iOS, Android, or Windows.