Change App Icon in React Native for Android and iOS

App Icon for Android and iOS

Application Icon is the Unique identification of the App. Application Icon is the main thing that the user always remembers. In most cases, the user remembers the application icon instead of the application name. App Icon can be your brand logo or anything else but should define the purpose of your application.

In this example, we will see how to change the Application Icon in React Native. This example will cover the updating of the icon for both Android and iOS. Please note after setting the application icon if you are recreating/updating the platform (Android / iOS directory in the project) then you have to set up the icon again.

To change the application icon here is an example below. Let’s get started.

First of all, we have to create an App.

Look at the Old Icon

If you are developing an app (either in Native or Hybrid) you will be provided a default App Icon for both the platform. If you can run the application then have a look at the current icon.

To run the application in the Android

react-native run-android

To run the application in the iOS

react-native run-ios

How to Make the Multiple Size Icon?

To change this default icon we need our own application icon in different sizes for the different devices. You should create an App Icon by your self or you can download it from the Google Images only when it is free with no copyright.

We are going to set this Icon as our App Icon

(Please use 1024px * 1024px size image)

Once you have your App Icon Ready then you have to make multiple size Icon for both Android and iOS.

makeappicon.com will also help you to provide App Icon for Both. These guys are doing a great job. You just need to upload your Icon on their website and they will provide multiple sized icons arranged in a proper folder structure.

Other than that you can also explore:

1. Icon Set Creator for iOS

2. Android Asset Studio for Android.

3. resizeappicon.com for both Android and IOS.

Setting App Icon for Android Applications

To change the Android application icon copy all the minmap-* directory from the android directory of downloaded makeappicon zip.

Now navigate to res directory of your project (YourProject -> android -> app -> src -> main -> res) and replace the default icons with newly downloaded icons.

Now open the terminal again and run the project again using

react-native run-android

Here we can see the Application Icon has been changed

Setting App Icon for iOS Applications Directly

To change the application icon for the iOS copy all the content of AppIcon.appiconset from the ios>AppIcon.appiconset directory of downloaded makeappicon zip.

After copying all the icons from the downloaded icons paste the same in your projects AppIcon.appiconset directory (YourProject -> ios -> YourProject -> Images.xcassets -> AppIcon.appiconset) if it ask to replace the JSON then click yes to replace.

Open the terminal again and run the project again using

react-native run-ios

Here we can see the Application Icon has been changed

Setting App Icon for iOS Applications using XCode

You can also do the same for the iOS from the Xcode you just need to open the project in Xcode by clicking -> Your_Project -> ios -> YourProject.xcworkspace file in.

After opening the project expand the project and find the Images.xcassets click onto it

You will see a new window with some empty icon slots.

Now according to 2x, 3x size in PT simply opens your downloaded icon folder -> ios ->  AppIcon.appiconset and with the same PT size with the same 2x and 3x size drag the icons here.

Open the terminal again and run the project again using

react-native run-ios

This is how you can change the Icon of your React Native Application for Android and iOS both.

Alternate Way to Change App Icon in React Native Using Command Line Interface

If you are using MAC or Ubuntu you can also see the alternate way below. If you are the windows user then you have to use the above method only.

Motivation

In an Ionic App development process, we can use a single command to change the Icon so why not in React Native also? So I started finding different ways to do that and finally I got some success in RN ToolBox. Let’s see how to change the App Icon using Command Line Interface.

Installation of RN ToolBox

RN ToolBox will help you to set up your App Icon using Command Line Interface but for that, you need node > version 6.  If you are using correct node version then you can install the generator using

npm install -g yo generator-rn-toolbox

To generate your icons, the generator-rn-toolbox uses ImageMagick. Ubuntu user can skip this but for Mac users run

brew install imagemagick

Set the Icon for Android and iOS Application

After the installation of the required tools, we need an application icon. Min 200px x 200px size is recommended.

Now after making the icon, we have to run the following command to set up the icon for our application

yo rn-toolbox:assets --icon <path to your icon>

You will be asked for the name of your react-native project, just copy and paste the name of your application.

You will be asked to replace Contents.json file, input y and hit enter

Congratulation!! you have successfully updated your App Icon from the command line.

Android

iOS

This is how you can change the App Icon using Command Line Interface. If you have anything else to share please comment below or contact us here.

Hope you liked it:)