← Back to Chapters

Change App Icon — React Native

? Change App Icon — React Native

? Quick Overview

Changing the app icon in React Native involves configuring platform-specific assets for Android and iOS. The app icon is the first visual identity of your application and must follow strict size and format rules defined by each platform.

? Key Concepts

  • Android uses mipmap folders for launcher icons
  • iOS uses AppIcon.appiconset inside Assets.xcassets
  • Icons must be square and high resolution
  • Adaptive icons are required for modern Android

? Syntax / Theory

React Native does not provide a JavaScript API to change app icons at runtime. Icons are defined at build time and bundled with the app. You must replace or regenerate icon assets in native folders.

? Code Example(s)

? View Code Example 
// Android icon location inside the project
android/app/src/main/res/mipmap-hdpi/ic_launcher.png
android/app/src/main/res/mipmap-mdpi/ic_launcher.png
android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
? View Code Example 
// iOS AppIcon set location
ios/YourAppName/Images.xcassets/AppIcon.appiconset

? Live Output / Explanation

What Happens After Build?

After rebuilding the app, the new icon appears on the device home screen and app drawer. Old icons may be cached, so uninstalling the app before reinstalling is recommended.

? Interactive Visual: Icon Masking

The diagram below explains how a single source icon is converted into multiple platform-specific assets:

1024x1024 Icon Android iOS

? Interactive Simulator: Platform Shapes

In React Native, you provide a square image, but the OS (Operating System) crops it differently. Use the controls below to see how your "App Icon" would look on different devices.

?
Android (Adaptive)
?
iOS (Round Square)
?
Store (Square)

? Use Cases

  • Brand redesign or logo update
  • White-label applications
  • Seasonal or event-based app releases
  • Multiple app flavors

? Tips & Best Practices

  • Always start with a 1024x1024 PNG icon
  • Use transparent background carefully
  • Clear app cache or reinstall when testing
  • Use automated icon generators to avoid mistakes

? Try It Yourself

  1. Create a 1024x1024 app icon
  2. Generate Android and iOS assets
  3. Replace existing icon files
  4. Rebuild and reinstall the app