How to add icons to React Native app

I would use a service to scale the icon correctly. http://makeappicon.com/ seems good. Use a image on the larger size as scaling up a smaller image can lead to the larger icons being pixelated. That site will give you sizes for both iOS and Android.

From there its just a matter of setting the icon like you would a regular native app.

https://help.apple.com/xcode/mac/8.0/#/dev10510b1f7

Set icon for Android application

iOS Icons

• Set AppIcon in Images.xcassets.
• Add 9 different size icons:
  • 29pt
  • 29pt*2
  • 29pt*3
  • 40pt*2
  • 40pt*3
  • 57pt
  • 57pt*2
  • 60pt*2
  • 60pt*3.

Images.xcassets will look like this:

Android Icons

• Put ic_launcher.png in folders [ProjectDirectory]/android/app/src/main/res/mipmap-*/.
  • 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.

Update 2019 Android

The latest versions of react native also supports round icon. For this particular case, you have two choices:

A. Add round icons: In each mipmap folder, add additionally to the ic_launcher.png file also a round version called ic_launcher_round.png with the same size.

B. Remove round icons: Inside yourProjectFolder/android/app/src/main/AndroidManifest.xml remove the line android:roundIcon="@mipmap/ic_launcher_round"and save it.

Otherwhise the build throws an error.

I wrote a generator to automatically generate icons for your react native app from a single icon file. It generates your assets and it also adds them correctly to your ios and android project:

Update (04/09/2019)

We revamped our generator to be up to date with the ecosystem standards. You can now use @bam.tech/react-native-make.

You can install it using: yarn add @bam.tech/react-native-make in the react-native project

To use it react-native set-icon --path <path_to_png> --background <icon_background_color> --platform <android|ios>

And... that's it! Hope it can be useful for others :)

Recommendations:

• 1024x1024 base image
• No transparent background for iOS
• An icon which follows adaptive icons guidelines for Android

Here are some improvements over the previous tool: 🥳

• No Yeoman dependency, it is now a react-native-cli plugin
• No Image Magick dependency
• Creates Adaptive icons for Android
• Adds missing icons sizes for iOS