Setup icons to react native

When we start building our react native application we can choose to use a UI toolkit, the framework used by me is React Native Elements . I like this one because is simple and has a nice look and feel. So you can choose to use the basic elements from this module or if you have a custom design you need to implement it. Let’s setup icons for our react native application!

On a new design you need to use icons and a nice pack of react native icons is react-native-vector-icons

So on our react-native let’s add this module and let’s see how to use it. First step is to install the package: yarn add react-native-vector-icons and then link the module into react-native app react-native link

install react-native-vector-icons

React-Native-Vector-Icons is a set of icon libraries including Entypo, FontAwesome and more. It also has Ionicons a great set of icons that shares Material Design and IOS design.

react-native-vector-icons directory

For example if we need to add a phone icon we can search the name in react-native-vector-icons directory and we choose from different categories what icons we need. Let’s make the import of the icon category in our react-native component.

import Icon from "react-native-vector-icons/Ionicons";

As you can see we import Ionicons category and we need to use the icons from this category. There are two prefixes, one for IOS (ios-<name>) and one for Android(md-<name> devices. For IOS we have:

// ...
<Icon name="ios-phone" color="#ccc" size={25} />

And for Android:

// ...
<Icon name="md-phone" color="#ccc" size={25} />

If we decide to use a single Icon component we have Platform helper from react native:

import { Platform } from "react-native";
import Icon from "react-native-vector-icons/Ionicons";

<Icon name={Platform.OS === "ios" ? "ios-add" : "md-add"}
  color="#ccc"
  size={25}
/>

We can make it more reusable and create a custom component where you send the name of the icon and other props, then depending where you need to use a custom Icon you can import component created.

import React from "react";
import { Platform } from "react-native";
import Icon from "react-native-vector-icons/Ionicons";

const Icon = ({name, ...props}) => {
  <Icon
    name={Platform.OS === "ios" ? `ios-${name}` : `md-${name}`}
    {...props}
  />
}
export default Icon;

Sharing is caring!


2 Comments

  • Hello, Ⲛeat post. There’s a problem along with your web site
    in internet exρlorer, may test this… IE nonetheless is the market
    leader аand a large part of pеople wiill omit your wonderful writing duе to this problem.

  • Tһankѕs fߋr sharing suρerb informations. Your webbsite is soo cool.
    I am impгessed by the details that you have on this website.
    It reveaals hoᴡ nicely yoou understand thіs ѕubject.

    Bookmarked this weƄsite page, will come bacқ for extra articles.
    You, my friend, ROCK! I found just the іnf I already searched
    everywhere and just couldn’t cme aϲross.
    Ꮃhat a great website.

Leave a Reply

Your email address will not be published. Required fields are marked *