Skip to content
Home » Add App Icons to React Native Apps

Add App Icons to React Native Apps

Every mobile application has an app icon, and it provides the first impression. An app icon is displayed in various places, such as on an app store, on the device’s app drawer, etc. A great app icon can improve your app install numbers and can boost daily active users if it’s attractively designed. Anyone who is building a React Native app will eventually need to solve the issue of adding a React Native app icon to their mobile apps, prior to publishing them to the app stores.
So I decided to document the process, to help out React Native developers who are still ramping up with app development.

Adding an App Icon to iOS

Uploading an app logo for iOS in React Native follows the exact same process as for the apps developed in Swift. There’s an existing default AppIcon image in the asset catalog already created for you in the Image.xcassets folder. Open your React Native app (the iOS version) in Xcode and locate the aforementioned Image.xcassets folder. Then drag and drop your app logo over the AppIcon image.

All of the necessary icon sizes.

As you can see, there are about 20 different image sizes that you need to specify. Not all of them are mandatory, but Apple highly recommends you add everything.

What it’ll look like when you’re done

Tip: Use a free app icon generator that you can find online to generate all the different image sizes for you. Make sure your initial app logo is 1024x1024px since you’ll also need to submit this on iTunes Connect when you’re publishing your React Native app to the App Store. I found an online tool https://appicon.co generate app icons. It is very handy if you are a sole developer.

Adding an App Icon to Android

Similarly, on Android, you need to specify multiple images for different sizes. Add multiple folders into the android/app/src/main/res folder, containing ic_launcher.png images with the right size. The different sizes are as follows:

  • 72*72 ic_launcher.png in mipmap-hdpi.
  • 48*48 ic_launcher.png in mipmap-mdpi.
  • 96*96 ic_launcher.png in mipmap-xhdpi.
  • 144*144 ic_launcher.png in mipmap-xxhdpi.
  • 192*192 ic_launcher.png in mipmap-xxxhdpi
Default ic_launcher icon in mipmap-xxxhdpi

To change the icon you just need to replace the current icons in the mipmap folder named ‘ic_launcher’ and ‘ic_launcher_round’ with the newly generated icons.
The same trick of using an app icon generator will work here as well. Also, make sure your initial image is 512x512px since this size is required when you upload the .ipa binary to the Play Store.

Conclusion

Once you get the hang of this process, it doesn’t take much time. These are all the necessary steps to add an app icon to a React Native app.