Subscribe

React Native Vector Icons: Set the Tone for your App

Reading time: 5 minutes

React Native Vector Icons

Icons

Icons are part of our culture, especially in the digital era as they play a key role from a UI point of view, providing guidance and information for any user interacting with your product.

Now, thanks to React Native dependencies we are able to implement as many icons as desired or needed, and in most cases, you won’t even have to add any native code at all to use them. 

React Native vector icons

Here is a react native vector icons list that you might want to check out before you start: 

  • Entypo by Daniel Bruce (411 icons)
  • EvilIcons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)
  • Feather by Cole Bemis & Contributors (v4.21.0, 279 icons)
  • FontAwesome by Dave Gandy (v4.7.0, 675 icons)
  • FontAwesome 5 by Fonticons, Inc. (v5.7.0, 1500 (free) 5082 (pro) icons)
  • Fontisto by Kenan (v3.0.4, 615 icons)
  • Foundation by ZURB, Inc. (v3.0, 283 icons)
  • Ionicons by Ben Sperry (v4.2.4, 696 icons)
  • MaterialIcons by Google, Inc. (v3.0.1, 932 icons)
  • MaterialCommunityIcons by MaterialDesignIcons.com (v3.6.95, 3695 icons)
  • Octicons by Github, Inc. (v8.4.1, 184 icons)
  • Zocial by Sam Collins (v1.0, 100 icons)
  • SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)
  • AntDesign by AntFinance (297 icons)

Needless to say, there are some cool options for you to choose from. You may implement some popular bundle sets such as FontAwesome or Github, or any other of the listed above. React Native allows you to add any of them to your projects.

Also, popular UI libraries like React Native Paper and React Native Elements use React Native Vector Icons, so it’s definitely a package worth checking out!

React Native Vector Icons

First things first

By using the icon prop react-native-vector-icons library, it will allow you to import icons quickly by simply following a couple of steps: 

  1. Create a new React Native project
  2. Install the Dependency (react-native-vector-icons)
  3. Install CocoaPods
  4. Importing Icon Files in Android
  5. Importing Icon Files in iOS
  6. Import icon component in your project and start using it

Once you’ve created your new project, you must install react-native-vector-icons library and dev dependency in order to start using the icon component. 

npm install react-native-vector-icons 

Once it’s done, the next thing you want to do will be installing the CocoaPods for IOs and afterward navigate back to your IOs project folder.

cd ios && pod install && cd ..

React native vector icons in android

In an Android environment 

Follow the next steps to import react-native vector icons in Android.

  • Create assets/fonts directory in android/app/src/main
  • The copy all the font files from node_modules/react-native-vector-icons/Fonts into it.


What about the IOs environment? 

Importing the Icon files here is a bit more complex but pretty straightforward nonetheless.

  • Once you’ve created a Fonts directory, you want to copy all the font files from node_modules/react-native-vector-icons/Fonts into it.
  • Open YourProject -> ios -> YourProject.xcworkspace your project in Xcode.
  • Now open options and select Add files to “YourProjectName”, select the Fonts directory you’ve created (and select Create Folder references beneath destination), and click add.
  • Select YourProjectName on the left top, select its name on Targets and click on the info tab on the top menu to see Info.plist. 
  • Lastly, add both Fonts provided by the application and Font files under it. 

 

The React-native-vector-icons dependency will provide two components:

1-Icon Component

The first one is used for creating icons. Prop “name” will render the icon in Android and IOs.

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

As seen right above, props “size” and “color” are customizable. 

2-Icon.Button Component 

The Icon.Button Components grants you the opportunity to create buttons with an icon on its left side. 

<Icon.Button

  name=“facebook”

  backgroundColor=“#3b5998”

  onPress={this.loginWithFacebook}>

  Login with Facebook

</Icon.Button>

In this case, we find many more props we can work with besides color and size; let’s take a look:

  • iconstyle (we can set margins or a different color) suggested to avoid unstable behavior.
  • backgroundColor
  • borderRadius (set it to 0 to disable)
  • onPress (call out for a specific function if needed)

More Vector Icons Types in React Native

React Native Vector Icons

Besides such, there are other types of vector icons React Native available, for instance:

1-Ionicons: after installing react-native-ionicons dependency, you’ll have to link the library. Then, install the pods. Lastly, open App.js in any code editor, and replace them with this code. 

2-Social Icons: in order to use ScialIcons, first you need to install react-native-elements plus react-native-vector-icons. You can dive into further detail here.

3-React Native Card Views: it’s mandatory to install react-native-elements and later on react-native vector icons dependencies. On the other hand, you may want to check the Card component by react-native-paper, same procedure: first, install react-native-paper and next React Native vector icons. Revise these steps here.

4-Vector Icon in Navigation Drawer/Sidebar: you can modify the Navigation Drawer or set your sidebar as it suits your needs. Make sure you have the node react-native init already installed, and go for installing react-native-cli command.

As far as dependencies go, you’ll need to add react-navigation and other supporting dependencies. Follow this step by step to pull this off. 

5-Vector Icon in Bottom Navigation: this is probably the more complex of them all: 

  • start by adding react-navigation
  • then, add other supporting libraries
  • continue with MaterialCommunityIcons
  • mandatoryreact-native-vector-icons, it’s mandatory. 
  • Of course, Stack Navigator if you care to go in-between screens. 
  • Lastly, don’t forget the pods! 

Take a peek at this guide for further instructions in order to avoid any important steps. 

Getting top-notch bundle icons

We have taken a glance at the advantages of using react-native vector icons, and rest assured that this is most likely just the beginning of new features yet to come that will allow developers a quick solution to improving product design.

Working with these vector icon libraries in React-Native will provide you with some top-notch bundle icons ready to get the most out of your app.

Just make sure to follow the steps towards accomplishing your specific goal after deciding what type of vector icons you will be needing. You are just a few steps away from delivering a more appealing UI/UX to your future users.

Read more on React Native