How to Add and Manage App Icons to React Native App on IOS & Android

In this article, we are going to discuss the in and outs of the React Native App Icon for both iOS and Android. The app icon is a critical component of a mobile app since it’s always exposed to users. 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.

To create app icon you need:

• PNG icon for IOS and Android (I highly recommend using an icon with a size of at least 1024x1024 pixels)
• You can also create Adaptive Icon for Android, which can display a variety of shapes across different device models (Learn More). To create it you need a foreground image and a background color or image. There is also a good article on how to design such icons.

In this guide we’re going to use the following assets, which can be found in GitHub repository:

First you need to install ⭐ ️icon-set-creator:

$ npm install -g icon-set-creator
# OR
$ yarn global add icon-set-creator

After installation, you will have access to the iconset binary in your command line. You can verify that it is properly installed by simply running iconset, which should present you with a help message listing all available commands.

Now you can create config file for icon-set-creator. Create iconset.config.js file in root of your app (where package.json is located) and set options for our assets:

• imagePath — The location of the icon image file which you want to use as the app launcher icon. e.g. ./assets/icon.png
• android/ios (optional): true — Override the default existing Flutter launcher icon for the platform specified, false — ignore making launcher icons for this platform, icon_name — this will generate a new launcher icons for the platform with the name you specify, without removing the old default existing Flutter launcher icon.
• imagePathAndroid — The location of the icon image file specific for Android platform (optional — if not defined then the imagePath is used)
• imagePathIos — The location of the icon image file specific for iOS platform (optional — if not defined then the imagePath is used)

The next two attributes are only used when generating Android launcher icon:

• adaptiveIconBackground — The color (E.g. "#ffffff") or image asset (E.g. "assets/images/dark-background.png") which will be used to fill out the background of the adaptive icon
• adaptiveIconForeground — The image asset which will be used for the icon foreground of the adaptive icon

In our example we will use one icon for both platforms and also an adaptive icon for android. This is how the our config file will look:

/*iconset.config.js*/
module.exports = {
  imagePath: './assets/app-icon/icon.png',

  adaptiveIconBackground: './assets/app-icon/background.png',
  adaptiveIconForeground: './assets/app-icon/foreground.png'
};

🎉 Enter the command below and you’re done!

$ iconset create

If you want, you can add the package in the dev dependencies and the scripts to the package.json:

{
  "scripts": {
    "create-appicon": "iconset create"
  },
  "devDependencies": {
    "icon-set-creator": "latest"
  }
}

Next time you can just enter the npm run create-appicon command.

🙌 Thanks for reading! If you like what I do, you can follow me on GitHub