React Native Set Change App Icon in iOS Android Example Tutorial

App Icon is the main application icon shows on the Application ICON tray known as menu bar, The app icon is used to open the specific application and each application has its unique app icon. There are already a pre-define application ICON present in both android and iOS applications and according to developer need they can be changeable. So in this tutorial we would going to remove the old App icon with newly created icon and Set Change App Icon in iOS Android React Native App Example Tutorial, So let’s get started .

App Icon Used in this project:

Contents in this tutorial Set Change App Icon in React Native iOS Android App Example:

Setting App ICON in Android applications:

1. As you can see above i have created a sample app icon myself using Photoshop. You can crate your own ICON according to your requirement and also can download our icon for testing purpose.

2. After creating ICON goto MakeAppIcon.com website, Guys this website is amazing website i have been using this site for long time, it will automatically crop your icon into multiple sizes according to device sizes and make icon for both Android and iOS devices. So open this site and upload your ICON on it and it will mail you the cropped icons and from there you can download them like i did. After downloading the icons zip file just extract them and you can find a folder named as android inside it you’ll find all of your icons according to Android sizes.

3. Goto -> Your_React_Native_Project_Folder -> android -> app -> src -> main -> res folder and replace the default icons with Newly downloaded icons like i did in below screenshot.

Here you go not your new app icons is setup and ready to use. Just uninstall the previously installed app from your real device or emulator and execute the
react–native run–android command to see the magic.

Screenshot of Android device after setting up the App icon :

Setting App ICON in iOS applications:

1. Follow the above setting up android icons 1st and 2nd step to generate the right sized icons for your iOS application.

2. Open the downloaded icon folder and goto ios -> AppIcon.appiconset and you’ll see all of iOS app icons were there, See the below screenshot.

3. Goto -> Your_React_Native_Project_Folder -> ios and open the Xcodeproj file in Xcode.

4. After successfully loading the project in Xcode double click on Images.xcassets .

5. Now you will see a new window will prompt on your Xcode screen where you can see some empty icon slots.

6. Now according to 2x, 3x size in PT simply open your downloaded icon folder -> ios -> AppIcon.appiconset and with same PT size with same 2x and 3x size drag the icons here like i did in below screenshot.

Here you go now just save the current project in Xcode and uninstall the previously installed app from emulator and execute the
react–native run–ios command to see the effect.