Custom React Native Icons? YESSSSS

https://github.com/oblador/react-native-vector-icons

Check out the repo above. It goes through how to use the icons in that library, but wait…what if I have my own custom icons?

GREAT question! Follow the ‘Basic Installation Process’ for using this library first, then the step by step process for using your own icons is outlined below.

Basic Installation Process

npm install react-native-vector-icons — save

  1. Browse to node_modules/react-native-vector-icons and drag the folder Fonts (or just the ones you want) to your project in Xcode. Make sure your app is checked under “Add to targets” and that “Create groups” is checked if you add the whole folder.

2. Edit Info.plist and add a property called Fonts provided by application (or UIAppFonts if Xcode won’t autocomplete/not using Xcode) and type in the files you just added. It will look something like this:

Step 1

Create your icons in Sketch or Illustrator and save them each as svgs.

Step 2

Go to http://fontello.com/ and upload your custom fonts. You can also select from theirs to add as well to keep them all in the same font.

Step 3

Download the font file from Fontello and open it up. Copy folder (everything in it) and head over to your react-native project. Go into the directory where you keep your assets and create a folder called fonts and paste that folder into it. I would recommend renaming the file to ‘fontello’. Next, open up Xcode and do that same insert process as ‘Basic Installation Process’ describes but with your new font file. Once that is done, head back over to your text editor where your project is.

Step 4

Create a file called `icon.js`. After creating the file add the code below.

Step 5

Then in the component needing the icons you will be able to do something like this:

Hope this helps anyone who was struggling like I was.

Cheers!