Add custom icons to your React Native application

With Fontello/Icomoon and react-native-vector-icons

With this article you will be able to add and use handmade icons inside your React Native application in no time.

I- Create your icon(s)

With a vector editing tool (like Illustrator), create your custom icon.

A nice Toad for our app !

Then export it as a normal SVG but make sure you export each icon with the same squared art-board size.

II- Upload your SVG in Fontello or Icomoon

Drag and drop your new SVG in Fontello or Icomoon: or

This step can be tricky, the SVG your created might get badly converted and have shape or color fill issues. For some help you can go to the Fontello Wiki :

If you like the result, select your new icon(s) and download the webfont from the webtools. You will receive a ziped file including your new font .ttf and a config.json (Fontello) or a selection.json (IcoMoon) file. Those config files already include the mapping between the characters (icons) of your font and how your code can find and use them.

III- Install react-native-vector-icons in your RN project

Install react-native-vector-icons. This library is a must-have for using classical ready to use icons or adding custom ones:

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

You can see if it worked by importing an already packaged font-awesome icon in your app:

  • In your code:
import Icon from 'react-native-vector-icons/FontAwesome';
export default () => <Icon name="rocket" size={80} color="#bf1313" />;
  • The result:

IV- Put your icons in your app

It’s time to use the custom font we created earlier. You have two solutions to add your font to Android and iOS:

A- With React Native link

  1. Put your .ttf in a ./resources/fonts folder at the base of your project
  2. Add this piece of code at the first level of your package.json :

"rnpm": { "assets": [ "resources/fonts" ] },

3. In your terminal: react-native link

B- By hand


  • Copy your .ttf inside the ./ios folder of your RN project.
  • Add the font to your project in xCode (by drag and drop in ./Resources)
  • Make sure the font is in Copy Bundle Resources:

Android: Copy your .ttf inside the ./android/app/src/main/assets/fonts folder of your RN project.

And finally

1. Add the config.json or selection.json in your project (here simply in the ./src)

2. Link the config to react-native-vector-icons.

  • In your code:
import { createIconSetFromFontello } from 'react-native-vector-icons';
import fontelloConfig from './config.json';
const Icon = createIconSetFromFontello(fontelloConfig);
export default () =>  <Icon name="toad" size={80} color="#bf1313" />;
  • The result:
This Toad looks good in here!

Here you go! You now know how to important any custom icons in your applications. Please comment and ask questions if needed.