Creating Custom Lossless Scalable Icons for your React Native Apps

Let’s face it, no matter how good our app works we can’t really overlook the icons we use for our apps. UX and UI are different things but should get along at the time of creating an app. Offering a great UX, but unable to create an equally mesmerizing UI is a failure in itself. There are almost millions of apps on the App Store currently, be it Android or iOS. To make your app stand out from the other apps, you need to create an icon that is unique, but at the same time represents your app and the basic idea of it.

Why SVG?

Using React Native for creating iPhone and Android applications is constantly growing. With applications like Fontello and IcoMoon, creating app icons using images, texts, etc. creating a stunning UI has become fairly easy. Currently, SVG is one of the best options in order to render an app icon in a React Native application. There is a power that SVG icons have over other icons. Here are several reasons why SVG icons are better:

  1. They are easily scalable.
  2. They offer more flexibility for color change.
  3. They are smaller in size.
  4. They are written in XML syntax.

Recommended For You: Angular vs React vs Blaze: Choose the Best Framework for your Next Web and Mobile App

But does React Native support SVGs?

Unfortunately not. React Native doesn’t allow rendering SVGs the way they do in HTML/Web. You cannot use SVG as an image or neither can you copy paste SVG content in HTML. So React Native doesn’t support SVG out of the box. But there are a few plugins that allow you to render SVG. These plugins do not support all the elements of SVG. In addition to that, they are not really easy to use.

To be able to create app icons in SVG and get the power of SVG in a native environment you can use the library called react-native-vector-icons. This library offers a bunch of icon sets that you can use to create an app icon of your own.

1. Once you integrate it, using it will be as simple as adding the name, size, and color of the icon in the brackets. <Icon name=” ” size={ } color=” ” />

  1. You can also pass a custom style.

  2. Other components are also supported in it. For example, button with an icon.

<Icon.Button />

  1. The installation is a simple 2-step process.

    yarn add and react-native link

    >

This was about using the icons available in the library. You also get an option of adding your own custom icons, if you have any. For that, the process is a bit different.

1. First, you will need to install the npm module.

npm install –save react-native-vector-icons OR

yarn add react-native-vector-icons

  1. <

    Create a resources folder.

    3. Add react-native link react-native-vector-icons This will help you set up vector icons framework.
    4. Get the TTF file and place it in the resources/fonts folder you created.
    5. Open the IcoMoon application.
    6. Drag and drop your preferred SVG file.
    7. Select the files that you would want to export.
    8. Click on Generate Font. A zip file will be downloaded after that.
    9. There will be a selection.json file and a fonts folder with a .ttf at the end. You will only require these two files.
    10. Place the .ttf file in resources/fonts folder and add the following script to package.json.

“rnpm”: {

      “assets”: [
          “resources/fonts”
      ]
  }

  1. Put the selection.json file in your app.

import {createIconSetFromIcoMoon} from ‘react-native-vector-icons’;
import icoMoonConfig from ‘./selection.json’;
export default createIconSetFromIcoMoon(icoMoonConfig);

Need to build a mobile app with React Native? Contact Us

Nimblechapps, a mobile app development and website design company, has been providing value to their partners by offering a systematic and practical solution to their problems. We have built several Android and iOS applications, be it for smartphones, tablets, iPads, or smartwatches. If you have an idea for a mobile application, but not sure how to go ahead with it, feel free to contact us and our team can help you with it.

Keval Padia
Keval Padia is the founder & CEO of Nimblechapps, a fast-growing mobile game development company. The current innovation and updates of the field lures him to express his views and thoughts on certain topics.