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: http://fontello.com/ or https://icomoon.io/app

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 : https://github.com/fontello/fontello/wiki/Help.

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: https://github.com/oblador/react-native-vector-icons.

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

iOS:

• 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 import any custom icons in your applications. Please comment and ask questions if needed.