App icons

Learn about configuring the app's icon and best practices for Android and iOS.

An app's icon is what your app users see on their device's home screen and app stores. Android and iOS have different and strict requirements.

Configure an app's icon

The most straightforward way to provide an icon for your app is to provide a local path or a remote URL as a value to the icon property in app.json.

However, with Expo, you can also provide platform-specific values for each platform. For example, you can provide a different icon for Android, you will use android.icon and for iOS, ios.icon. If any of these properties are provided, they will take priority over the base icon for each platform.

Most production-quality apps will probably want to provide something slightly different between Android and iOS.

Create an app icon

To create an app icon, you can use this Figma template. It provides a bare minimum design for an icon and splash images for Android and iOS.

For an in-detail walkthrough, see the video below:

Customization and best practices

Android

Further customization of the Android icon is possible using the android.adaptiveIcon property, which will override both of the previously mentioned settings.

The Android Adaptive Icon is formed from two separate layers — a foreground image and a background color or image. This allows the OS to mask the icon into different shapes and also supports visual effects. For Android 13 and later, the OS supports a themed app icon that uses a wallpaper and theme to determine the color set by the device's theme.

The design you provide should follow the Android Adaptive Icon Guidelines for launcher icons. You should also:

Use .png files.
Use the android.adaptiveIcon.foregroundImage property to specify the path to your foreground image.
Use the android.adaptiveIcon.monochromeImage property to specify the path to your monochrome image.
The default background color is white; to specify a different background color, use the android.adaptiveIcon.backgroundColor property. You can instead specify a background image using the android.adaptiveIcon.backgroundImage property. Make sure that it has the same dimensions as your foreground image.

You may also want to provide a separate icon for older Android devices that do not support Adaptive Icons. You can do so with the android.icon property. This single icon would be a combination of your foreground and background layers.

You may still want to follow some of the Apple best practices to ensure your icon looks professional, such as testing your icon on different wallpapers and avoiding text beside your product's wordmark. Provide something that's at least 512x512 pixels. Since you already need 1024x1024 for iOS.

iOS

For iOS, you app's icon should follow the Apple Human Interface Guidelines. You should also:

Use a .png file.
1024x1024 is a good size. If you have an Expo managed project, EAS Build will generate the other sizes for you. If you have a bare workflow project, you should generate the icons on your own. The largest size EAS Build generates is 1024x1024.
The icon must be exactly square. For example, a 1023x1024 icon is not valid.
Make sure the icon fills the whole square, with no rounded corners or other transparent pixels. The operating system will mask your icon when appropriate.

Next step

Safe areas

Learn more about creating a safe area is a great way to ensure that your app's content is appropriately positioned around notches, status bars, home indicators, and other device and operating system interface elements.