Give Your React Native App a dynamic App Icon

Setting up a dynamic app icon for react native application using react-native-change-icon

Author

Sakshya AroraTech Lead - I

Date

Dec 19, 2022

Give Your React Native App a dynamic App Icon

Book a call

Table of Contents

Today, many apps change their app icons programmatically from within the app. This adds to their interactive UI and helps enhance user experience.

In this blog, we'll try to change the app icon on the fly easily using this awesome npm package - react-native-change-icon.

Demo

Installing the Package

You don't need to worry about the native code for changing the app icon as react-native-change-icon handles all of that for you.

Run this command in your CLI inside your project directory:

Creating App Icons for Your App

Go to appicon.co to generate your app icons by uploading a 1024x1024 resolution image.

Just like above, you can create your other app icons as well.

Note: Icon names must contain only lowercase a-z.

Setting up The Dynamic App Icon

For Android

1. Adding The App Icons

As you now have your app icons, Go to android ->app -> src -> main -> res -> mipmap-* directories: and add all the icons you need.

Once you are done adding the icons, your folder will look similar to this.

2. Updating AndroidManifest.xml file

For each of your app icon, you'll be adding an activity-alias like this.

name in this should be the package + MainActivity + {icon name}.

In the end, your AndroidManifest.xml file will look like this:

You can create more <activity-alias> tags to make more alternate icons.

For iOS

First, go to the ios/ folder and do pod install.
Open your app in Xcode and add an AppIcons group to your app.
Add all your 120x120 resolution image as image@2x.png and 180x180 resolution image as image@3x.png.
Open the Info.plist file.
Add Icon files (iOS 5) to the Information Property List.
Add CFBundleAlternateIcons as a dictionary to the Icon files (iOS 5) as it is used for the alternative icons.
Add dictionaries under CFBundleAlternateIcons named as your icon names in the AppIcons group.
For each dictionary, these two properties UIPrerenderedIcon and CFBundleIconFiles need to be configured.
Set the type of UIPrerenderedIcon to String and its value to NO.
Set the type of CFBundleIconFiles to Arrayand set its first key,Item 0toString` with the value of the icon name.
set the default icon name in Primary Icon and Newsstand Icon -> Icon files -> Item 0.

Here's how:

In the end, your Info.plist icon changes will look like this:

How To Use This In Your App?

Use the following code:

Conclusion

We discussed how to change app icons dynamically in react-native without worrying about native code implementation.

Adding dynamic app icons is easy to conclude with

Feel free to check out the working example.

I hope this article helped you to learn something new! Please share your thoughts in the comment box.

Happy Learning!! 🙂

SHARE ON

More from the engineering frontline.

Dive deep into our research and insights on design, development, and the impact of various trends to businesses.

How to Build an AI MVP That Can Scale to Enterprise Production

Article

Apr 17, 2026

How to Build an AI MVP That Can Scale to Enterprise Production

Most enterprise AI MVPs fail before production. See how to design scalable AI systems with the right architecture, data, and MLOps strategy.

How to De-Risk AI Product Investments Before Full-Scale Rollout

Article

Apr 17, 2026

How to De-Risk AI Product Investments Before Full-Scale Rollout

Most AI pilots never reach production, and the reasons are more preventable than teams realize. This blog walks through the warning signs, the safeguards, and what structured thinking before the build actually saves.

Business Cost of Shipping an AI Prototype Too Early

Article

Apr 17, 2026

Business Cost of Shipping an AI Prototype Too Early

85% of AI projects fail to deliver ROI. Explore the hidden costs of early prototypes and how to move from demos to production-ready AI systems.

Scroll for more

View all articles

Give Your React Native App a dynamic App Icon

Demo

Installing the Package

Creating App Icons for Your App

Note: Icon names must contain only lowercase a-z.

Setting up The Dynamic App Icon

For Android

For iOS

How To Use This In Your App?

Conclusion

More from the engineering frontline.

How to Build an AI MVP That Can Scale to Enterprise Production

How to De-Risk AI Product Investments Before Full-Scale Rollout

Business Cost of Shipping an AI Prototype Too Early

The Right Conversation Can Save You Six Months.

Demo

Installing the Package

Creating App Icons for Your App

Note: Icon names must contain only lowercase a-z.

Setting up The Dynamic App Icon

For Android

For iOS

How To Use This In Your App?

Conclusion