Guide · Open source

How to use react-native-vector-icons: install, render and style icons

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

react-native-vector-icons is an MIT-licensed, TypeScript library that lets React Native apps display vector icons from popular icon sets, such as those used in buttons, tab bars and logos. This guide shows you how to install only the icon sets you need, render an icon, style it like text and convert it to an image when a component requires one. You need a React Native project and Node.js to follow along.

React Native Vector Iconsoblador/react-native-vector-icons · ★ 17.9k · MIT Install options & downloads

Quick start

1Check your setup. Confirm you have Node.js and a React Native project, and note whether you use Expo, React Native, or Web.
2Install icon set packages. Run the npm install command for the icon sets you need, such as the FontAwesome Free Solid and Lucide packages.
3Follow the platform guide. Open the Expo, React Native or Web setup guide in the repository docs and complete the steps for your target platforms.
4Import an icon component. Import the component for your icon set from its package, using the static path if you want the font embedded at build time.
5Render and style the icon. Add the component with a name, size and color, then apply standard style properties such as padding or borderRadius.
6Convert to an image if needed. If a component requires an image source, use getImageSource or getImageSourceSync after installing the required Expo or get-image setup.

What the library includes

The project is a set of separate packages. Each icon set is published as its own package, so you install only the sets your app uses. The README lists actively maintained sets such as Feather, Ionicons, Lucide and Octicons, along with several sets it marks as no longer maintained upstream, which may stop receiving updates.

Pick only the icon sets you use, each installed as a separate package
Check the README's list of maintained sets before you start a new project
For native .svg file support, the README points to react-native-vector-image instead

Install the icon set packages

Install the packages for the icon sets you plan to use with your package manager. The README example installs two sets, FontAwesome Free Solid and Lucide.

Setup differs by platform. The README says to follow the guide for Expo, React Native or Web, and to follow the iOS, Android or Windows steps that match your target.

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

Render an icon with the Icon component

Import the component for the icon set from its package and give it a name. Each set exports its own component, and the README's example uses the static import path to embed the font at build time instead of loading it at runtime.

The name prop chooses the icon. The README points to the Icon Explorer app or the set links to find names.

size sets the icon size and defaults to 12; fontSize in a style object also works
name selects the icon and has no default
color sets the icon color and is inherited from the parent if omitted

import { FontAwesomeFreeSolid } from "@react-native-vector-icons/fontawesome-free-solid";
// or use the static version to embed the font at build time instead of loading it at runtime
import { FontAwesomeFreeSolid } from "@react-native-vector-icons/fontawesome-free-solid/static";

<FontAwesomeFreeSolid name="rocket" size={30} color="#900" />;

Style icons like text

Because Icon builds on the Text component, it accepts Text props and most standard style properties. You can combine them to give an icon a background, border, or spacing, which is useful for icon buttons.

backgroundColor
borderWidth and borderColor
borderRadius
padding and margin
color and fontSize

Use icons as images when needed

Some components need a bitmap image rather than a scalable icon. The library can create one, but the README says you need either Expo with expo-font installed or the @react-native-vector-icons/get-image package. Both methods return an ImageResult object with uri, width, height and scale that you can pass as an Image source.

Icon.getImageSourceSync is blocking and may slow your app, although later calls use a cache. Icon.getImageSource is the async alternative.

Use getImageSourceSync for simple synchronous cases, knowing it can block
Use getImageSource when you can await the result

const source = Icon.getImageSourceSync('user', 20, 'red');
// or with an options object:
const source = Icon.getImageSourceSync('user', { size: 20, color: 'red', lineHeight: 28 });

return <Image source={source} />;

Create your own icon font package

If none of the bundled sets fit, the README recommends its icon generator to build your own icon package. The source says the full steps are in the CREATE_FONT_PACKAGE guide in the docs folder. For Fontello and Icomoon fonts, the README points to their own package guides, and for fonts you supply, such as FontAwesome Pro, the default font folder is rnvi-fonts and can be changed with fontDir in package.json.

{
  "reactNativeVectorIcons": {
    "fontDir": "src/rnvi-fonts"
  }
}

What people use it for

Icons inside buttons, with color, padding and borders applied like text
Tab bar and navigation items that need common UI icons
Logos or decorative icons drawn from popular icon sets
Image-based components that need a bitmap source created from an icon
Custom icon packages built with the provided generator

Frequently asked questions

How do I install react-native-vector-icons?

The README installs icon sets as separate packages. For example, run npm install @react-native-vector-icons/fontawesome-free-solid @react-native-vector-icons/lucide, then follow the Expo, React Native or Web setup guide for your platform.

Is react-native-vector-icons free to use?

The project is licensed under MIT, as stated in the item details. Check the LICENSE file in the repository for the full terms before you ship.

What are the requirements for react-native-vector-icons?

The source lists Node.js and a React Native project as prerequisites. Setup steps vary for iOS, Android, Windows, Expo and Web, so follow the guide for your target.

Can I use react-native-vector-icons with Expo?

Yes, the README links a dedicated Expo setup guide. For bitmap image sources, the README says Expo with expo-font installed is one of the two supported options.

Does react-native-vector-icons support SVG files?

Not natively. The README says that for native .svg file support you should use react-native-vector-image.

What are the alternatives to react-native-vector-icons?

The comparable projects listed are react-native-vector-image, @expo/vector-icons and react-native-svg. Choose react-native-vector-image if you need SVG files, and check each project's docs to compare icon sets and setup.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Choose react-native-vector-icons if you are building a React Native app and want common UI icons that you can style like text, while installing only the sets you use. Pick another option if you need native SVG files, if you depend on an icon set the README marks as no longer maintained, or if you are new to React Native and not ready to handle platform-specific setup.

Install options & downloads