How to create and use custom icon font in React Native

How to create and use custom icon font in React Native

Recently I have had to implement a very unique icon set in a React Native app and wired it up with dark mode and colour themes. It got me thinking if fellow developers would be interested in my way of getting around this.

Using a custom icon font is the way to go in my opinion for many reasons.

Why a font?

It is equally possible to use pngs or svgs as icons in a mobile app. Why would we want to go down the hassle of creating an all new font just to hold our icons? Both png and svg formats have their limitations.

  • PNG: even though it supports alpha channel (transparency), it also comes with its own colours. Png icons also need to be stored at a rather large resolution to be crisp on larger pixel densities. Plus your icons need to be stored as individual files and imported individually.
  • SVG: at least svg-s are vector based, so no probs with resolution, however the other 2 points on png-s also apply to the svg format as well.

When using a custom font, it is no different than using regular text.

You can apply size and colour attributes while your icon characters remain crisp no matter the size.

What we’ll be doing

  1. Creating the font using individual svg icons
  2. Creating a blank React Native project
  3. Exporting the font and copying it in our project
  4. Installing a few packages
  5. Implementing the font and using the icons

Let’s dive in

Get your icons ready

I have used flaticon to get some awesome free icons

You may create your own icon set or get someone to do it for you. For simplicity, I have picked an icon set on Flaticon and saved 5 icons at random. Make sure that you save them as SVG.

Import the icons and create the font

I have used Icomoon as I believe it to be the very best free online tool available

If you haven’t used icomoon.io before, then no worry. It is incredibly simple! You simply create a project, name it and start dragging icons into it. It takes care of the mapping and all. Once you are done, simply export it.

Once you are done, simply export your font.

It downloads a zip file. We are only interested in the .ttf file as it is supported by all platforms. This is not true to all other formats, so be careful.

We’ll use the .ttf file as it is supported by all platforms.

Let’s create the project

For simplicity, we’ll be using expo for this example. If you have either ejected your project or not using expo at all, most of the content in this article still applies to you, however you need to take a few extra steps to link your fonts up to your application.

These extra steps are nicely summarised in this article, so I see no reason of duplicating its content.

It is also assumed that you have your react native dev environment setup including the expo cli.

so let’s create the project using the following command:

expo init [YourProjectName]

Once you run the command, you should see something similar to this:

Let’s create a project using expo

Run your blank project to make sure it works

To verify that the project was successfully created, run the npm start command and run the project in simulators and/or real devices.

Nothin fancy, just a clean slate at this point.

Version control

This step is not essential, but for the sake of completeness, this is the best time to set up your github repository to version control your project.

  • Create a .gitignore file and add /node_modules in it.
  • Commit and push

Install some packages

To make it work that way I did, you’ll need a few packages.

You may notice that I have used styled components for this demonstration. I am a big fan of styled components and I’d highly recommend you using it as well.

npm i styled-components
npm i expo-app-loading
npm i expo-font

Copy the icon font into you project

You decide on your folder structure. Here is my recommended structure.

React Native does not have a proprietary folder structure, so you can build it the way you like. There are standards however. The application code as well as config and assets usually reside under the src directory.

Use the font

I’ll include the full code to use the font first and then explain it in parts:

The top section is probably obvious where we import the required packages.

Let’s focus on the icons object

On the ‘generate font’ tab in icomoon.io, you’ll see your icons listed. When you hover over each of them, you’ll see the “Get Code” link appear.

Get the character and the html entity from your icomoon.io project

Click on each of them and copy the character into your project.

Copy over the character from your icomoon.io project

The best place for them is an object that holds your icons. It may be placed in a separate file once the project grows, but for our purposes it is perfectly fine in App.js like so:

Construct the icons object

The next thing to do is, to load the font file. Expo has its way of doing it, so please refer to the official documentation on using custom fonts in expo.

In short, the font file is loaded asynchronously, so you can only show the actual content once it is loaded.

Add some styled component magic

As I have mentioned earlier, I like styled components very much. Just look at how easy on the eye the below code is. Isn’t it beautiful?

Styled components

Display the content

Once the font is loaded, the packages are included and the styled components are in place, the only thing left to do is to display the content by simply returning it.

Display the content by returning it

Et voilà

The end result should look like this.

Conclusion

I hope you have enjoyed this tutorial on how to create and use your very own custom icon font in your React Native application. It was certainly lots of fun creating it :)

Find the github repository of the project at https://github.com/rolandtreiber/rn-custom-icon-font-tutorial

If you have any questions, please feel free to comment or reach out. You are more than welcome to check my website on http://thecaringdeveloper.com or drop me an email.

Have a nice day!

Hello. I am The Caring Developer. Web and mobile application developer, specialised in e-commerce, Laravel, React and React Native. I am naturally curious. :)