How to add custom Icons in the React Native IOS Project.

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

Problem Statement

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

Solution

1. There are a bunch of libraries which helps 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 listed commands in the 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 Above setup done, now we will go through how to add Custom Icons and what is use of Icomoon. Lets start>
5. Below screenshot is from the Icomoon App webpage, from where we can add our Custom Icon. https://icomoon.io

6. Open Above Page in the browser, Click on the Icomoon App top right side button is there,
7. It will open below page with the some existing free icons.

8. Firstly, we need to remove all the existing icon from the right three line icons, On Press of Icon there is one option will come as remove set, It will remove all the free icons. Now It will show like 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 our custom Icon. I am adding like button icon as thumps-up.
11. Once added the icon, it will show as unselected, we need to select the icon from top arrow icon which is together with 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 download we can change the font name, if we press on the font name, there font name change option will come.
15. Once downloaded, it will download as icomoon.zip file.
16. It has below files in the zip, In which we need to use icomoon.ttf file and selection.json file.

17. Now we need to add the .ttf file in the fonts folder where our all the existing app font will be there, If fonts are not there, then we need to drag and drop .ttf file in the resource folder from the Xcode.
18. We need to add an icomoon.ttf font in UIAppFonts section in the info.plist file of inside the ios folder.
19. Once linking will be done, We will keep selection.json file in our JS code folder. We can create one of the fonts folder inside our Project JS file folder.
20. Now lets create one file as Custom.App.Icon.js. Add 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 article, please feel free to give any feedback or comment.