Add custom icons to your React Native application

Add custom icons to your React Native application  by @xavier_lef

  • IV- Put your icons in your app
  • III- Install react-native-vector-icons in your RN project
  • With a vector editing tool (like Illustrator), create your custom icon.
  • The config files already include the mapping between the characters (icons) of your font and how your code can find and use them.

Learn how to add custom icons to your React Native application on Android and iOS with React Native Vector Icons and Fontello or Icomoon

@bam_lab: Add custom icons to your React Native application by @xavier_lef

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

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.

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.

(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.

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

It’s time to use the custom font we created earlier.

Add custom icons to your React Native application