squareone_ MCP

~/squareone ❯ React Native · iOS + Android

React Native app icon generator

Generate drop-in icon files for the ios and android folders of a bare React Native app, including Android adaptive and themed icons. Using Expo? Go to the Expo app icon generator.

Drop your icon artwork or tap to browse

Square PNG or SVG, ideally 1024×1024px or larger

Appearance

100%

100% fits the icon. Logos usually look best at 70–85%; Android keeps the artwork inside the 72dp visible area of its 108dp layers.

Platforms

iOS

Icon formatOne 1024px icon (Xcode 14+)
Dark iconiOS 18, transparent background
Tinted iconiOS 18, grayscale

Android

Themed iconAndroid 13+ monochrome layer
optional

A transparent one-color glyph. Leave empty to derive it from your artwork.

Transparent legacy iconsAndroid 7 and older only
@mipmap/…

upload artwork to see your icon here

▸ app-icons.zip

Upload artwork to generate the icons.

Where React Native keeps the app icon

  • iOS: ios/YourApp/Images.xcassets/AppIcon.appiconset
  • Android: android/app/src/main/res/mipmap-* and mipmap-anydpi-v26

Replace the icons

  1. Replace the contents of AppIcon.appiconset with ios/AppIcon.appiconset from the ZIP.
  2. Delete android/app/src/main/res/mipmap-*/ic_launcher*, then copy the generated res folder into android/app/src/main/res.
  3. Uninstall the app and rebuild:
Terminal
npx react-native run-ios
npx react-native run-android

The manifest of the React Native template already uses @mipmap/ic_launcher and @mipmap/ic_launcher_round, so no code changes are needed unless you renamed the icon resource.

Frequently asked questions

Do I need a library to change the React Native app icon?+

No. App icons are native files in the ios and android folders. Replace them with the generated ones and rebuild the app.

Should I use this or the Expo generator?+

If your project has an app.json with Expo config and you use prebuild or EAS, use the Expo generator. If you edit the ios and android folders directly, use this page.

Why doesn't the new icon appear?+

Icons are cached and only change after a native rebuild. Uninstall the app, then run npx react-native run-ios or run-android again (or build from Xcode / Android Studio).

Why does the Android build fail after copying icons?+

The React Native template may have ic_launcher files in another format. Two files with the same resource name (ic_launcher.png and ic_launcher.webp) break the build, so delete the old ones first.

Other platforms and guides