React Native App Icon Generator

A React Native app icon generator creates one 1024×1024 master and exports it for both stores at once. React Native ships to the App Store and Google Play from a single codebase, so the icon must satisfy Apple's squircle mask and Android's adaptive icon system. IconikAI generates that master from a text description in under 10 seconds.

React Native Icon Generator vs Expo Icon Generator: Same Job, Different Config

People search for a react native icon generator, an expo icon generator, and a react native app icon generator and mean the same deliverable: a square master image plus the platform files each build system expects. What differs is where the file goes.

What you searched	What you actually need	Where it goes
React Native icon generator	1024×1024 PNG master	Depends on Expo vs bare
Expo icon generator	1024×1024 PNG master	icon field in app config
Expo app icon generator	Same, plus adaptive layers	android.adaptiveIcon.*
React Native app icon generator	Master + iOS asset catalog + Android mipmaps	Both native directories
React Native logo generator	Same square artwork	App icon slot, not a wordmark
Bare React Native icon generator	Every raster size, generated yourself	Images.xcassets + res/mipmap-*

One rule covers all of them: generate the 1024×1024 first, then let the build system fan it out. Never start from a small icon and scale up.

Generate the master with the App Icon Generator — 2 credits produces 2 variants, and every platform size exports in one click.

What Sizes Do React Native Apps Need?

React Native needs one 1024×1024 PNG as the source. Expo and EAS Build derive everything else. Bare React Native projects have to produce the raster sizes themselves and drop them into the iOS asset catalog and the Android mipmap folders.

Target	Size	Location
Master source	1024×1024 PNG	assets/images/icon.png
iOS app icon	1024×1024	ios/<App>/Images.xcassets/AppIcon.appiconset/
Android legacy mdpi → xxxhdpi	48, 72, 96, 144, 192 px	android/app/src/main/res/mipmap-*/ic_launcher.png
Android adaptive layers	108dp foreground + background	res/mipmap-anydpi-v26/ic_launcher.xml
Play Console store icon	512×512	Google Play Console upload
App Store Connect	1024×1024	App Store Connect upload

Apple requires the icon to be exactly square — a 1023×1024 file is rejected — and to fill the whole square with no rounded corners and no transparent pixels. The OS applies the mask.

How Do You Set an App Icon in Expo?

Point the icon field in your app config at a 1024×1024 PNG in assets/images. Expo uses icon.png as the default filename. EAS Build generates every smaller size at build time; 1024×1024 is the largest size it produces, so that is what your generator should output.

{
  "expo": {
    "icon": "./assets/images/icon.png"
  }
}

For finer control, override per platform. On iOS you can supply separate artwork for the system appearances:

{
  "expo": {
    "ios": {
      "icon": {
        "light": "./assets/images/ios-light.png",
        "dark": "./assets/images/ios-dark.png",
        "tinted": "./assets/images/ios-tinted.png"
      }
    }
  }
}

From SDK 54 onward, ios.icon also accepts an Icon Composer .icon directory, which handles dark mode internally so you do not supply variants separately. If you are shipping the iOS 26 glass look, read the Liquid Glass app icon guide and generate the base art with the Liquid Glass Icon Generator.

One catch worth knowing before you debug for an hour: if your project does not use Expo Prebuild to generate the native android and ios directories, changes to the app config have no effect. Edit the native files directly instead.

Expo Adaptive Icon: The Android Half Most Guides Skip

Android's adaptive icon is two layers — a foreground image plus a background color or image — so the OS can mask it into a circle, squircle, or rounded square depending on the launcher. Setting android.adaptiveIcon overrides both the top-level icon and android.icon.

{
  "expo": {
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "monochromeImage": "./assets/images/adaptive-icon-mono.png",
        "backgroundColor": "#0C7CFF"
      }
    }
  }
}

Four things to get right:

• foregroundImage carries your mark. Keep it inside the centre — the outer ring gets masked away on most launchers.
• monochromeImage drives Android 13+ themed icons, where the launcher recolours your icon to match the device wallpaper theme. Skip it and your app keeps a full-colour icon while everything around it goes monochrome.
• backgroundColor defaults to white. Set it, or use backgroundImage — which must have the same dimensions as the foreground.
• android.icon is your fallback for older devices that predate adaptive icons. It should be a flattened combination of both layers.

Google's adaptive icon guidance recommends supplying at least 512×512. Generating from a 1024×1024 master keeps you clear of that floor.

How Do You Set an Icon in Bare React Native?

In a bare project there is no prebuild step, so both native directories are yours to maintain. On iOS, drop the 1024×1024 into ios/<App>/Images.xcassets/AppIcon.appiconset/ — recent Xcode versions accept the single large asset and derive the rest. On Android, Android Studio's Image Asset tool (Asset Studio) takes your master and writes every mipmap-* density plus the adaptive ic_launcher.xml for you: right-click res → New → Image Asset.

If you would rather skip Asset Studio entirely, export the Android set directly from the Android Icon Generator and copy the density folders in.

React Native Icon Generator: The 60-Second Workflow

1. Describe the app. Plain language — "meal-planning app, leafy green mark, warm background". No prompt engineering.
2. Pick a style. Flat, gradient, glassmorphism, 3D, isometric, minimal — 15+ curated styles.
3. Generate. 2 credits, 2 variants, under 10 seconds per run.
4. Refine in chat. Ask for a darker background or a simpler mark in natural language instead of regenerating from scratch.
5. Export. All 13 iOS sizes, Android adaptive layers, and web favicons in one click.
6. Wire it up. Expo: set icon and android.adaptiveIcon. Bare: asset catalog plus mipmaps.

Designing an Icon That Survives Both Masks

A React Native icon has a harder job than a single-platform one: it gets a squircle on iOS and anything from a circle to a teardrop on Android.

• Keep the mark within the centre ~66% of the canvas. Android's adaptive safe zone is 72dp of a 108dp layer, and corners disappear on both platforms.
• Test at 48dp. If the shape reads as a smudge on an Android launcher, simplify it — detail is the most common failure.
• Avoid platform cues. An iOS-style glyph looks foreign on a Pixel and vice versa.
• No transparency on the iOS asset. Fill the square edge to edge.
• Check it against a light and a dark wallpaper before you ship.

More on what is working visually this year in app icon design trends, and prompt patterns that produce clean marks in the app icon prompts guide.

Shipping to Both Stores From One Codebase

Your icon is one of several assets each store checks. Screenshots are the other big one — generate those with the App Screenshot Generator, which covers iOS and Android device frames in a single workflow.

If you want the submission handled for you, iOS App Publishing is $30 and takes 2–3 days; Android App Publishing is $50 and takes 2–3 weeks, including the 12-testers-for-14-days requirement. Full cost breakdown in how much it costs to publish an app.

Building on Flutter instead? The Flutter Icon Generator covers flutter_launcher_icons. Shipping to iOS only? Use the iOS App Icon Generator.

Frequently Asked Questions

What is the best React Native app icon generator?

The right generator produces a true 1024×1024 master and exports both the iOS asset catalog sizes and the Android adaptive layers. IconikAI generates the master from a text description in under 10 seconds and exports every platform size in one click, so the same run covers Expo and bare React Native.

How do I change the default React Native app icon?

In Expo, point the icon field in your app config at your new 1024×1024 PNG and rebuild. In a bare project, replace the asset in ios/<App>/Images.xcassets/AppIcon.appiconset/ and regenerate the res/mipmap-* files with Android Studio's Image Asset tool.

What is the best icon size for React Native?

1024×1024 PNG. It is the largest size EAS Build generates and the size both App Store Connect and Apple's asset catalog expect. Every smaller size derives from it cleanly; nothing derives well from a small source.

Does Expo generate app icon sizes automatically?

Yes. EAS Build generates the smaller iOS and Android sizes from the single icon you configure. Existing bare React Native projects do not get this — you generate the sizes yourself.

Can I use different icons for iOS and Android in React Native?

Yes. Set ios.icon and android.adaptiveIcon separately in the app config. In a bare project each native directory is independent. Consistent branding across both is still the safer default.

What is monochromeImage in an Expo adaptive icon?

It is the layer Android 13 and later use for themed icons, where the launcher recolours your icon to match the wallpaper theme. Without it, your app stays full colour while themed icons around it adapt — which reads as unfinished.

Why did my Expo icon change do nothing?

Almost always because the project does not use Expo Prebuild to generate the native directories. When the android and ios folders are checked in and managed by hand, the app config is ignored — edit the native files directly.

Can I generate a React Native app logo instead of an icon?

For a shipping app they are the same deliverable: one square mark that works at 48dp. A wide wordmark will not survive the launcher mask. See the app logo generator guide for the distinction.

How much does a React Native app icon cost with IconikAI?

Each generation is 2 credits and returns 2 variants. Credits start at $5 for 200 credits plus 100 bonus, with no subscription — you pay only for what you generate.

Generate Your React Native App Icon

One master, both stores, every size exported. Start with the App Icon Generator — describe your app, pick a style, ship the icon.