Custom Icons in the React Native IOS Project.

Icomoon App for the Custom Icon.

In React Native iOS App if we want to add custom icons, then we can follow the below steps to add a custom icons.

Problem Statement

If Our app has some custom icons, which are not available in the existing font libraries like FontAwesome or Roboto etc. And these icons are designed based on our App/Company branding then We need to add some code that supports custom icons, that We need to follow some steps which help to add any Custom icons.

Solution

1. There are a bunch of libraries that help to add Custom Icon, I am explaining here one library which supports Icomoon App, I will explain further about the Icomoon app in the next steps.
2. We will use React Native Vector Icons library which we can easier to integrate into our project. Here is the link https://github.com/oblador/react-native-vector-icons
3. We need to run the listed commands in our root project to set up the Vector Icons library.

npm install --save react-native-vector-icons
cd ios/
// If React Native version newer which support automatic linking otherwise need to do manual linking, For manual linking follow this link https://github.com/oblador/react-native-vector-icons.
pod install

4. Once the Above setup is done, now we will go through how to add Custom Icons and what is used by Icomoon. Let's start>

5. Below screenshot is from the Icomoon App webpage, from where we can add our Custom Icon. https://icomoon.io

Icomoon

6. Open Above Page in the browser, Click on the Icomoon App top right side button is there,

7. It will open the below page with some existing free icons.

8. Firstly, we need to remove all the existing icons from the right three-line icons, On the Press Icon there is one option that will come as a remove set, It will remove all the free icons. Now It will show like the below screenshot:

9. Now we need to import our Custom Icon from the Import Icons button or We can drag-drop our Custom Icon SVG file here,

10. Make Sure will add SVG as our custom Icon. Let’s take one example, will add one of our custom Icons. I am adding a like button icon as thumbs-up.

11. Once added the icon, it will show as unselected, we need to select the icon from the top arrow icon which is together with the delete icon.

12. Once selected it will show as highlighted then we need to press on the Generate Font Button below the screen,

13. Once Press on the Generate Font it will open below the screen.

14. Once generated the font, we can download the font, here before downloading we can change the font name, if we press on the font name, the font name change option will come up.

15. Once downloaded, it will download as an icomoon.zip file.

16. It has the below files in the zip, In which we need to use the icomoon.ttf file and selection.json file.

17. Now we need to add the .ttf file in the fonts folder where all the existing app fonts will be there, If fonts are not there, then we need to drag and drop the .ttf file in the resource folder from the Xcode.

18. We need to add an icomoon.ttf font in the UIAppFonts section in the info.plist file inside the ios folder.

19. Once linking will be done, We will keep the selection.json file in our JS code folder. We can create one of the fonts folders inside our Project JS file folder.

20. Now let's create one file as Custom.App.Icon.js. Add the below code in the file.

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from 'fonts/selection.json';

export const CustomAppIcon = createIconSetFromIcoMoon(icoMoonConfig);

21. Now we can use our CustomAppIcon in the App anywhere like below.

import { CustomAppIcon } from 'fonts/Custom.App.Icon'
return <CustomAppIcon name="thumb-up" size={size} style={any style we can add}/>; 
// Here thumb-up will be the Icon name whatever we have added to the Icomoon App.

That’s the way we can use our own icon in the React Native IOS App.

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

Thanks for reading

I hope you found this article beneficial and that it provided a good understanding in How to add Custom Icon in the React Native IOS App.

If you have any suggestions or any inputs regarding the article, please feel free to give any feedback or comment.