Expo Icon Generator for React Native

Generate Expo and React Native image assets from one source image. This small Bash tool creates the default Expo app icon, Android adaptive icon layers, Android themed icon layer, splash icon, web favicon, and Expo starter image replacements using ImageMagick.

It is designed for Expo projects that use the default assets/images filenames created by create-expo-app.

Generated Assets

generate-expo-icons.sh writes these files to assets/images by default:

File	Size	Purpose
icon.png	1024x1024	Expo app icon for iOS, Android, and Expo Go
android-icon-background.png	1080x1080	Android adaptive icon background layer
android-icon-foreground.png	1080x1080	Android adaptive icon foreground layer
android-icon-monochrome.png	1080x1080	Android 13+ themed icon layer
splash-icon.png	1024x1024	Expo splash screen icon
favicon.png	48x48	Expo web favicon
react-logo.png	100x100	Expo starter UI image replacement
react-logo@2x.png	200x200	Expo starter UI image replacement for high-density screens
react-logo@3x.png	300x300	Expo starter UI image replacement for high-density screens
partial-react-logo.png	518x316	Expo starter UI header image replacement

Quick Start

./generate-expo-icons.sh ./logo.png

Customize the output directory and colors:

./generate-expo-icons.sh ./logo.png \
  --out ./assets/images \
  --brand-color '#111827' \
  --splash-bg '#ffffff' \
  --foreground-size 660

The script works best with a large transparent PNG logo. Avoid using a finished full-bleed app icon as the source if you want a useful Android adaptive icon and monochrome themed icon.

Install ImageMagick

ImageMagick is the only required dependency. ImageMagick 7 with the magick command is preferred, but ImageMagick 6 with convert and identify is also supported.

macOS:

brew install imagemagick

Ubuntu or Debian:

sudo apt-get install imagemagick

Fedora:

sudo dnf install ImageMagick

Arch Linux:

sudo pacman -S imagemagick

CLI Options

Option	Default	Description
-o, --out DIR	assets/images	Directory where generated files are written
-b, --brand-color HEX	#000000	Background color for icon.png and Android adaptive icon background
-s, --splash-bg HEX	#ffffff	Background color used when flattening favicon.png
-f, --foreground-size PX	660	Logo size inside the 1080x1080 Android foreground and monochrome layers
-q, --quiet	off	Reduce output
-h, --help	n/a	Show help

--foreground-size accepts an integer from 1 to 1080. The default is conservative so the logo is less likely to be clipped by Android launcher masks. Increase it if your source logo has built-in padding or you intentionally want a larger foreground.

Expo Configuration

After generating assets, point your Expo config at the generated files:

{
  "expo": {
    "icon": "./assets/images/icon.png",
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/android-icon-foreground.png",
        "backgroundImage": "./assets/images/android-icon-background.png",
        "monochromeImage": "./assets/images/android-icon-monochrome.png"
      }
    },
    "web": {
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": [
      [
        "expo-splash-screen",
        {
          "image": "./assets/images/splash-icon.png",
          "backgroundColor": "#ffffff",
          "imageWidth": 200
        }
      ]
    ]
  }
}

You can use backgroundColor instead of backgroundImage for Android if you prefer to keep the app config smaller:

{
  "android": {
    "adaptiveIcon": {
      "foregroundImage": "./assets/images/android-icon-foreground.png",
      "backgroundColor": "#111827",
      "monochromeImage": "./assets/images/android-icon-monochrome.png"
    }
  }
}

Source Image Recommendations

Use a source image that is:

• PNG format.
• Large enough to scale cleanly, ideally 1024x1024 or larger.
• Transparent around the logo.
• Square or close to square.
• Simple enough to remain recognizable at small icon sizes.

The script trims transparent padding, normalizes the source to a square canvas, and then creates the platform assets. The Android monochrome icon is generated from transparency, so review android-icon-monochrome.png manually before publishing.

Troubleshooting

Missing dependency: ImageMagick

Install ImageMagick with the command for your operating system above, then run the script again.

The Android themed icon is a white square

Your source image is probably opaque. Use a transparent PNG logo. The monochrome icon is derived from the source alpha channel.

The Android icon looks clipped

Use a smaller foreground size:

./generate-expo-icons.sh ./logo.png --foreground-size 600

Android adaptive icons are masked into different shapes by launchers, so always check the result on a device or emulator.

The splash screen does not update in Expo Go

Splash screen changes require a native build to test accurately. Create a preview or production build to verify the splash screen.

React logo files are used by the starter app UI

Expo starter projects can import react-logo.png, react-logo@2x.png, react-logo@3x.png, and partial-react-logo.png from the sample screens. This script replaces those filenames too, so the starter UI no longer shows the default React logo. If you remove or rename those files later, update the matching imports in your app code.

References

• Expo splash screen and app icon documentation
• Expo app config documentation
• Android adaptive icon guidelines
• Apple app icon guidelines

License

Choose a license before publishing this repository on GitHub.