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.
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:
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}
/>
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.
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.
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!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.