patterntypescriptreact-nativeTip

App Icon Generation for iOS and Android with Expo

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

app iconadaptive iconexpo iconiOS iconAndroid iconmonochromedark mode icon

Error Messages

Icon must not be transparent (iOS)

Problem

iOS and Android require app icons in dozens of different sizes and formats (PNG, adaptive icons, monochrome icons). Managing these manually is tedious and error-prone.

Solution

Provide a single 1024x1024 PNG (assets/icon.png) in app.json. Expo CLI generates all required sizes automatically during build. For Android adaptive icons, provide a foregroundImage and backgroundColor (or backgroundImage) under expo.android.adaptiveIcon.

Why

Expo's @expo/prebuild-config uses jimp to resize and format icon images for all required slots. Android adaptive icons separate foreground and background layers so the OS can apply its own shape mask (circle, squircle, etc.).

Gotchas

iOS app icons must have no transparency (alpha channel) — use a solid background
Android adaptive foreground should have the subject centered in the middle 66% of the canvas
Dark mode icons (iOS 18+) require expo.ios.darkIcon in app.json
Notification icons on Android must be monochrome — use expo.android.notification.icon (white-on-transparent PNG)

Code Snippets

Expo icon configuration for iOS and Android

// app.json
{
  "expo": {
    "icon": "./assets/icon.png",
    "ios": {
      "icon": "./assets/icon.png"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    }
  }
}

Revisions (0)

No revisions yet.