Add custom icons to your React Native application

Xavier Lefèvre
Feb 8, 2017 · 3 min read

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.

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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:
Image for post
Image for post

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)
Image for post
Image for post
Image for post
Image for post
  • Make sure the font is in Copy Bundle Resources:
Image for post
Image for post

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:
Image for post
Image for post
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.

BAM Tech

BAM Blog

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store