App Icon Generator

Install

  1. 1Export the .zip (top right) and unzip it.
  2. 2Copy assets/ into your project root (merge with the existing folder).
  3. 3Merge the snippet below into app.json (or app.config.js).
  4. 4Rebuild the native projects.
{
  "expo": {
    "icon": "./assets/images/icon.png",
    "ios": {
      "icon": {
        "light": "./assets/images/ios-light.png",
        "dark": "./assets/images/ios-dark.png",
        "tinted": "./assets/images/ios-tinted.png"
      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/android-icon-foreground.png",
        "backgroundImage": "./assets/images/android-icon-background.png",
        "monochromeImage": "./assets/images/android-icon-monochrome.png",
        "backgroundColor": "#F2542D"
      }
    },
    "web": {
      "favicon": "./assets/images/favicon.png"
    }
  }
}

Expo icon generator

Get an assets/images folder and an app.json snippet that wires up ios.icon, android.adaptiveIcon and web.favicon. Run prebuild or build with EAS and you're done.

What you get · Expo

  • icon: 1024×1024 PNG, square, opaque
  • ios.icon: { light, dark, tinted } variants, 1024×1024
  • android.adaptiveIcon: foreground / background / monochrome at 1024×1024 (108dp grid)
  • web.favicon: 48×48 PNG · app.json snippet included

Official guidelines

FAQ

How do I use the export in my Expo project?

Copy assets/ into your project, merge app.json.snippet.json into app.json, then run npx expo prebuild --clean or build with EAS.