Use Native Icons in React Native

Sooner or later comes the time to add vector icons to your application. You may have built your own on SVG that you load on components, created your own icon library using Icomoon or used any of the well-known icon libraries like Bootstrap.

But maybe you want to use the platform-specific native icons, so that if you run your app on Android you see Material Design icons and the iOS icons on its platform.

Good news! There is an easy way to achieve that by using react-native-vector-icons.

Create a Platform-Specific Icon Component

Let’s start by installing react-native-vector-icons and auto-configure the native projects using react-native link:

$ npm install react-native-vector-icons --save
$ react-native link

react-native-vector-icons is a set of icon libraries including Entypo, FontAwesome and more. They’re installed natively on each platform assets.

The cool part is that it also includes Ionicons, a great set of icons that implements the Material Design and iOS designs.

It has its own naming convention, using the ios- and md- prefixes to specify the platform for a given icon. Here’s an example for the add icon:

For example, if we want to use the iOS version of the add icon, we could import the Icon component and set the respective name:

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

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

Here’s the trick: we can use Ionicons naming convention to create platform-specific icons automatically. For that, we can use React Native’s Platform module in order to check which platform we’re targeting and add the corresponding name:

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

Even better, we can make it more reusable by creating our own Icon component that has this logic included, so that you don’t have to repeat every time you use it:

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

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

We’re taking the name out of the props and adding the corresponding prefix, as well as passing down the rest of the props.

Then, to use it’s as easy as importing the Icon component we’ve just created and use the base name of the icon:

import Icon from "./components/Icon";

// ...
<Icon
  name="add"
  color="#ccc"
  size={25}
/>

Wrapping Up

We’ve seen how to use the naming convention of the Ionicons library, included in react-native-vector-icons, to create our own Icon component that makes it easy to use the platform’s specific icons.

Hope it helps in your project!