Importing and using react-native-vector-icons the right way in a React Native project

Photo by Caspar Camille Rubin on Unsplash

Installing vector icons in a bare React Native application requires some few steps to follow in order to set it up correctly for both android and ios platforms.

If you’re using expo, react-native-vector-icons is installed by default on the template project that get through expo init. It is part of the expo project.

For a bare React Native project, some additional steps need to be followed after running the command npm install react-native-vector-icons depending on the platform you are running.

Android Devices

If you want to properly install react-native-vector-icons on an android platform, follow the steps below:

  1. Open and Edit build.gradle file:
android/app/build.gradle (NOT app/build.gradle)

2. Add the code below in the file opened (build.gradle):

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

3. Stop the development server and restart the server again by running:

npx react-native run-android

iOS Devices

Installing react-native-vector-icons on an ios platform requires more steps as compared to the android platform. Follow the steps below to add the icon library to ios.

  1. Using XCode, open the file in the path ios/project_name.xcworkspace file.
Selecting the .xcworkspace file
.xcworspace file finally opened in Xcode

2. Create a Fonts folder

creating a Fonts folder

3. Open the node_modules folder.

4. Locate the react-native-vector-iconsfolder. Open the folder and copy the files within the fonts folder.

5. Drag the files copied into the Fonts folder created inside of the ios/project_name folder in XCode.

6. Open the info.plist file and add the fonts copied in there by creating Fonts provided by application under Information Property List

7. Add all or the selected icon you will need in your project

Adding the necessary icon font names

8. Clean build the folder. Product -> Clean build folder

9. Inside vscode or any text editor you’re using to build your application, cd /ios and run pod install

10. Start the development server and run:

npx react-native run-ios

Final Result

ios device(on your left hand) and android device (on your right hand)


I hope you will find this tutorial useful. If you have any feedback, kindly comment in the comment section below. Thank you.




A Frontend and Mobile Developer. I share my learning experience through writing based on what I will want to read when learning a new concept to help others.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Different ways to fetch Data from API

React Fiber in simple terms

Building a Cross-Platform Mobile Team

Download In ^PDF HTML, CSS & JavaScript Web Publishing in One Hour a Day, Sams Teach Yourself…

Everything you need to know about JavaScript Array

FCC Speedrun: Wikipedia Viewer

Frida-trace usage

Big O notation made easily digestible.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Victor Bruce-Crabbe

Victor Bruce-Crabbe

A Frontend and Mobile Developer. I share my learning experience through writing based on what I will want to read when learning a new concept to help others.

More from Medium

The missing guide to React Native app variants — Part 1

Google Map Integration Into React- Native Project on Android

Handling custom layouts on Device orientation changes in React Native

Working with AuthStack — Part II: Creating a Login Screen