App Guide: Icons & Splash

This guide covers how to create and configure both your App Icon and Splash Screen using the official Expo workflow and Figma template.

The Approach

We recommend using the official Expo Figma Template to design your assets. This template handles all the specific dimensions and safe zones for you.

Step-by-Step Generation Guide

1. Get the Template: Open the Expo Figma Template and click "Open in Figma" to duplicate it to your drafts.

   Step 1: Choose your app symbol (e.g., using SF Symbols or your own logo).

2. Edit Your Designs:

   • Icon Frame: Place your logo in the Icon frame. Keep the main element centered.
   • Splash Frame: Place your logo or branding in the Splash frame.
   • Tip: Use the "Safe Zone" guides (often hidden layers you can toggle) to ensure your logo isn't cut off on Android devices.

   Step 2: Configure your icon layers in Figma.

   Step 3: Overview of Icon, Adaptive Icon, and Splash Screen frames.

   Step 4: Designing the Splash Screen frame.

3. Export Assets:

   • Select the Icon frame and export as PNG (1x). Name it icon.png.
   • Select the Splash frame and export as PNG (1x). Name it splash.png.
   • Select the Adaptive Icon frame (if customizing for Android) and export as adaptive-icon.png.

   Step 5: Exporting the assets as PNG files from Figma.

4. Add to Project:

   • Move your exported files into your project's assets/ folder, replacing the existing files.
   • assets/icon.png (1024x1024)
   • assets/splash.png (1024x1024)
   • assets/adaptive-icon.png (1024x1024)

Configuration

Once your files are in assets/, ensure your app.json is configured to use them. P.S: it is already configured in the starter kit.

App Icon Config

In app.json:

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

Previews

Here is how your icons will look on a real device after configuration:

App icon appearing on the iOS Home Screen.

How the icon looks in iOS Dark Mode.

How the icon looks when using iOS Tinted mode.

Native Generation

You don't need to generate 20 different icon sizes manually. When you run:

npx expo prebuild

Expo automatically generates all the required native iOS and Android assets (mipmaps, huge/small icons) from your 1024x1024 source files.

Next Steps

Now that your app looks professional, it's time to run it:

1. First App Launch, Run your app on a simulator or device