Tutorial

Use Native Icons in React Native

Published on August 8, 2018
author

Alex Jover Morales

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

Keep in mind that if you’ve created your application using create-react-native-app, you’ll need to eject it since we’re using a native dependency.

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:

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:

components/Icon.js
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!

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Alex Jover Morales

author

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more