Quick Links

How to Change React Native App Icon for iOS and Android

Mridul Panda

Mridul Panda

Jan 22, 2023


4 Min Read

How to Change React Native App Icon for iOS and Android
Change React Native App Icon

The Application Icon provides the App’s unique identifier. The primary thing that users usually remember is the application icon. Most of the time, a user can recall an application’s symbol rather than its name. The objective of your application should be defined by the app icon, which might be your brand’s logo or anything else. So in this article, we will learn How to Change React Native App Icon for iOS and Android and give your app a unique look.

This tool helps you change the React Native application icon for iOS and Android. You must set up the icon again if you are creating or changing the platform (Android / iOS directory in the project).

Let’s create a React Native App First. To create a React Native project run the command below.

npx react-native init CustomIconApp

And then we will run the project for both ios and android.

// To run the application in the Android
npx react-native run-android

// To run the application in the iOS
npx react-native run-ios

How to make a new Icon for React Native?

We need our own application icon in various sizes for the various devices in order to replace this default icon. You should design your own app icons, or you can only obtain them from Google Images if they are completely free and copyright-free. We are going to use our website logo as our React Native App icon.

Note: Please use 1024px * 1024px size image.

To create our app icon in different sizes we will use This website will help us to create app icons in different sizes for both IOS and Android.

  1. First, visit and click on chose file button. Now Choose your app icon from there.
Icons Upload on easyappicon.comto Change React Native App Icon
Icons Upload on

Also Read: How to add Grid Layout in React Native

2. Now You can change some settings. I have also highlighted the points in the image.

  1. You can add or reduce the padding of the icon. In my case, I have reduced the icon padding by -31%.
  2. After that, you can change the background for the icon. I have kept it the default.
  3. Now you can preview your icon in an IOS app for a demo
  4. You can also check it in the android app.
  5. Finally, if everything is good for you click on the download button to download your app icon.
Change React Native App Icon in
2. App Icon Preview in

3. A zip will be downloaded. And when you extract that you will get two folders inside – android and ios.

Change React Native App Icon on iOS

4. In the ios folder in the zip you will get a folder named AppIcon.appiconset. This is the folder we needed. Here is the folder in the zip file we need.

IOS Icons Folder in the ZIP File
3. IOS Icons Folder in the ZIP File

5. Now in your React Native Project navigate to AppIcon.appiconset folder. Here is the exact path for the folder (YourProject -> ios -> YourProject -> Images.xcassets -> AppIcon.appiconset). And you will see files with the same names. So copy and paste the icons from the ZIP file and your icon will be updated for IOS

4. Path to Icons in IOS

6. Now open your terminal again and run the command. And You will see your new app icon for IOS.

npx react-native run-ios

Also Read: How to add Grid Layout in React Native

Change React Native App Icon on the Android

7. For the Android icons in the app go to the ZIP file again and go to the Android folder. In that folder, you will get some folders named mipmap. We need these folders.

Android Icons Folder in the ZIP File
5. Android Icons Folder in the ZIP File

8. Now navigate to the res directory of your React Native project. You can get it in the following path – YourProject -> android -> app -> src -> main -> res. And now replace the default icons with newly downloaded icons. Make sure you have replaced the folder that you already had in the res folder. Don’t comply extra folder from the zip.

Path to Icons Android
Path to Icons Android

9. Now we will run our react native app for android. And we will notice that the icon is now changed.

npx react-native run-android


So this is how you can change your React Native app icon for both android and IOS. Hope you like this article.

Do you want more articles on React, Next.js, Tailwind CSS, and JavaScript?

Subscribe to my newsletter to receive articles straight in your inbox.

If you like my work and want to support me, consider buying me a coffee.

Buy Me A Coffee

Contact Me ☎️

Discuss A Project Or Just Want To Say Hi?
My Inbox Is Open For All.

Mail :

Connect with me on Social Media

Send me a Response