React native vector icons: How to use it and top 5 icons libraries in React native

AHT Tech

In React native, React-native vector icons are one of the most popular elements. Then, in this guideline, we will show you how to use it, examples and top 5 icon libraries for you to choose

Vector icons – React-native vector icons

Vector icons are the ideal solution for buttons, logos and nav/ tab bars. They are quite easy to use, extend as well as integrate into your projects. If you want to find React-native vector icons to use, simply click here to go to react-native-vector-icon-directory. Then, you’ll find a lot of icons to choose

Once you visit this link, you’ll find many lists of icons categories. For example, AntDesign by AntFinance, Entypo by Daniel Bruce or EvilIcons by Alexander Madyankin & Roman Shamin

How to use Vector Icon in React Native

Here’s how to use react native icon

Firstly, create a new React Native project
Then, choose and install the Dependency, which is React-native vector icons in this case
Install CocoaPods
After that, install Icon Files in Android and iOS
Finally, import the Icon component in your project. Then, you can start using it

>>> Read more

React native video: 10 best libraries to play video in Android and IOS

React Native image: How to use to display different types of images

How to use the Icon Component?

Now, we will show you how to use React-native vector icons. But first, you need to import react – native – vector – icons dependency. This will provide two components

Icon component

You can create React-native vector icons with this Icon component. Prop “ name” will render the icon in Android and iOS

<Icon name=”rocket” size={30} color=”#900″ />

Prop	Description	Default
size	Size of the icon can also be passed as fontSize in the style object.	12
name	What icon to show, see Icon Explorer app or one of the links above.	None
color	The color of the icon.	Inherited

Icon.Button Component

This icon component will allow you to create buttons with a react native icon on the left side

<Icon.Button

name=”facebook”

backgroundColor=”#3b5998″

onPress={this.loginWithFacebook}>

</Icon.Button>

Prop	Description	Default
color	Text and icon color, use iconStyle or nest a Text component if you need different colors.	white
size	Icon size.	20
iconStyle	Styles applied to the icon only, good for setting margins or a different color. Note: use iconStyle for margins or expect unstable behaviour.	{marginRight: 10}
backgroundColor	Background color of the button.	#007AFF
borderRadius	Border radius of the button, set to 0 to disable.	5
onPress	A function called when the button is pressed.	None

Making a React Native App – React-native vector icons

Now, let’s consider some examples to understand more about React Native App. We are going to use react – native init to create React Native App. Suppose you installed node, then, you can use npm to install the react – native – cli command line utility.

Firstly, open the terminal to go to the workspace. Then, run the following command

npm install -g react-native-cli

Then, create a new project with these commands

react-native init ProjectName

In case you want to create the New Project with a specific React Native version, then, you can use the –version argument. Here’s an example for you

react-native init ProjectName –version X.XX.X

Dependency installation

You need to install react-native vector icons dependency to use Icon component

First, open the terminal and go to your project

cd ProjectName

Then, use this following command to copy all the dependencies into your node_module directory

npm install react-native-vector-icons –save

In this example, you can either use –save or not. It is used only for updating the react – native – vector – icons dependency in your package.json file

CocoaPods Installation – react native icon

If you want to install react-native vector icons in iOS, you need to install pods. Here’s the command

cd ios && pod install && cd ..

Importing Icon Files in Android

You’ll need to import the icons from react-native vector icons to use Vector Icon in Android. Here’s how to do that

Firstly, create assets/ fonts directory in android/app/src/main
Then, copy all the font files node_modules/react-native-vector-icons/Fonts and paste them into the assets/ fonts directory

Importing Icon Files in iOS – react-native vector icons

To use vector icons in iOS, follow these steps below

Firstly, create a fonts directory in iOS. After that, copy all the fonts file node_modules/react-native-vector-icons/Fonts and paste those to that fonts directory

Open the project YourProject -> ios -> YourProject.xcworkspace in Xcode.
Once you open it, click on the project in the left sidebar to open the option selections. Then, choose Add Files to “YourProjectName”

Next, choose the fonts directory that you’ve created. Don’t forget to tick Create Folder references in the Added folders section. Then, click Add
Now, choose the Project name on the top left of your window and click on that in TARGETS section. In this example, our Project name is Demo. Then, choose info on the top menu to see Info.plist. After that, add Fonts provided by application and font files under

You can add or remove as many fonts as you like. Also, if you like, you can add all font files that we copied previously

This next method will be more suitable for iOS developers, or those who have understanding about info.plist. In this method, they can add the following lines directly into info.plist.

And finally, once succeed, it will look like this

How to use Vector Icon in React Native

Now, we’ll show you how to use react-native vector icons. Firstly, open App.js in any code editor and change the code into the following one

const App = () => {

return (

<SafeAreaView style={{flex: 1}}>

<View style={{flex: 1, padding: 16}}>

<View style={styles.container}>

<Text style={styles.heading}>

Example to Use React-native vector icons

</Text>

<View style={styles.iconContainer}>

<Text>

<Icon name=”rocket” size={30} color=”#900″ />

</Text>

{/* Icon Component */}

<Icon name=”rocket” size={30} color=”#900″ />

</View>

<View style={{marginTop: 16, marginBottom: 16}}>

{/* Icon.Button Component */}

<Icon.Button

name=”facebook”

backgroundColor=”#3b5998″

onPress={() => alert(‘Login with Facebook’)}>

</Icon.Button>

</View>

<Text style={styles.footerTitle}>Vector Icons</Text>

<Text style={styles.footerText}>www.aboutreact.com</Text>

</View>

</SafeAreaView>

);

};

const styles = StyleSheet.create({

container: {

flex: 1,

alignItems: ‘center’,

justifyContent: ‘center’,

heading: {

fontSize: 20,

textAlign: ‘center’,

marginBottom: 20,

iconContainer: {

marginTop: 16,

marginBottom: 16,

justifyContent: ‘center’,

alignItems: ‘center’,

textAlign: ‘center’,

footerTitle: {

fontSize: 18,

textAlign: ‘center’,

color: ‘grey’,

footerText: {

fontSize: 16,

textAlign: ‘center’,

color: ‘grey’,

});

export default App;

Running the React Native App – react native icon

Open the terminal and go to your project using the following command

cd ProjectName

If you want to run the React Native App on Android Virtual Device, here’s the code for this

react-native run-android

On the other hand, in case you need to run it on iOS Simulator, you can use the following command

react-native run-ios

Top 5 react-native vector icons libraries in React Native

We have shown you how to use React Native Vector Icons. Then, in this part, we’ll deliver you our top 5 icons library in React Native for you to choose

React Native Icon Badge

With React Native Icon Badge, you will be able to create icon badges on some elements. For example, avatar, icon or image. Depending on your purposes and needs, you can use badges to give some alert to users

React Native Fontawesome

React Native Fontawesome is one of the best react-native vector icons libraries out there. It contains no bloatware, just one package with one icon set. Moreover, it minimizes the memory footprint. Thanks to that, this icon library is extremely fast. Also, to improve the performance even more, it uses the OS to render icons

React Native Vector Icon – React-native vector icons

This icon library is highly customizable. You can easily customize icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling

React Native Fontawesome Pro

Looking for an easy – to – use, well – functioning react-native vector icons library to use. Then, you must take a look at React Native Fontawesome Pro

React Native Eva Icons

This is such a clean and powerful icon library for you. Moreover, its implementation for React Native is based on react-native-svg elements.

In conclusion

We hope to deliver you the fundamental knowledge of react-native vector icons. However, working effectively with React is not easy. Therefore, if you still have some unanswered questions or uncertainty about React, don’t hesitate to contact AHT Tech.

AHT Tech is the leading IT outsourcing company in Vietnam. We have 14+ years of experience working on different development projects, including React JS development. Thus, working with our dedicated developers, you surely get your demands met. Contact us here