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

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

React native vector icons

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″ />

PropDescriptionDefault
sizeSize of the icon can also be passed as fontSize in the style object.12
nameWhat icon to show, see Icon Explorer app or one of the links above.None
colorThe 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}>

  Login with Facebook

</Icon.Button>

PropDescriptionDefault
colorText and icon color, use iconStyle or nest a Text component if you need different colors.white
sizeIcon size.20
iconStyleStyles applied to the icon only, good for setting margins or a different color. Note: use iconStyle for margins or expect unstable behaviour.{marginRight: 10}
backgroundColorBackground color of the button.#007AFF
borderRadiusBorder radius of the button, set to 0 to disable.5
onPressA 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
React native vector icons

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
React native vector icons
  • 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”
React native vector icons
  • 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
React native vector icons

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. 

React native vector icons

And finally, once succeed, it will look like this

React native vector icons

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’)}>

              Login with Facebook

            </Icon.Button>

          </View>

        </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

guide
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

guide
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

vector
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
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.

eva

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 ArrowHitech.

ArrowHitech 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

Tags

Share