Expo App Icon Generator (icon, adaptiveIcon, iOS dark)

Drop your icon artwork or tap to browse

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

Appearance

Background color

Artwork size100%

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

iOSAppIcon.appiconsetAndroidmipmap + adaptiveExpoapp.json iconsFlutterlauncher_icons

iOS

Icon formatOne 1024px icon (Xcode 14+)

Dark iconiOS 18, transparent background

Tinted iconiOS 18, grayscale

Android

Themed iconAndroid 13+ monochrome layer

Themed glyphoptional

Upload themed glyph

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

Transparent legacy iconsAndroid 7 and older only

upload artwork to see your icon here

▸ app-icons.zip

Upload artwork to generate the icons.

How Expo app icons work

Expo generates the native iOS asset catalog and Android mipmaps from app.json during prebuild. You provide a 1024px icon, the foreground image and background color for Android's adaptive icon and, optionally, a monochrome image for Android 13 themed icons and dark/tinted images for iOS 18.

Set it up

Copy expo/assets/images from the ZIP into your project's assets/images.
Merge the icon fields into your app.json or app.config.js. Replace the whole android.adaptiveIcon object: the default Expo template has a backgroundImage that would hide the background color.

app.json

{
  "expo": {
    "icon": "./assets/images/icon.png",
    "ios": {
      "icon": {
        "light": "./assets/images/icon.png",
        "dark": "./assets/images/icon-dark.png",
        "tinted": "./assets/images/icon-tinted.png"
      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "monochromeImage": "./assets/images/monochrome-icon.png",
        "backgroundColor": "#ffffff"
      }
    }
  }
}

Rebuild the native app:

Terminal

npx expo prebuild --clean
# or
eas build --profile development

Frequently asked questions

Which app.json fields does this fill in?+

icon (the 1024px icon), android.adaptiveIcon with foregroundImage, backgroundColor and monochromeImage, and ios.icon, either a single path or an object with light, dark and tinted images.

Why doesn't my new icon show up?+

App icons are part of the native app. Expo Go always shows its own icon, so make a development build or production build (EAS Build or npx expo prebuild --clean) to see yours.

Does the adaptive icon need padding?+

Yes. Android shows only the inner 72dp of the 108dp layer, so SquareOne keeps your artwork inside that area of the 1024px foreground image. Use the size slider if the circle mask cuts anything off.

Do iOS dark and tinted icons work in Expo?+

Recent Expo SDKs accept an object for ios.icon with light, dark and tinted images. If your SDK only accepts a string, keep the light icon path and drop the other two.