Add custom icons to your React Native application

React Native


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.


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

  1. iOS:

    • Copy you.ttf inside the ./ios folder of your RN project.
    • Add the font to your project in xCode (by drag and drop in ./Resources) x-code-1.pngx-code-2.png  
      • Make sure the font is in Copy Bundle Resources: x-code-3.png
  2. 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:



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