generated_files.md

Generated images

All icon images are generated from a single source file, with an optional background, but are processed in different ways to produce optimal results for eacth platform and device.

This document describes how the different images are being produced.

Android

Android icons consist of the newer adaptive icons for Android 8.0+, and the legacy round and square icons for older versions of the platform.

Adaptive icon

Adaptive icons consist of a partially transparent foreground layer and solid background layer, which are rendered on top of each other to produce a final icon. This enables interesting parallax effects in Android launchers which support it.

This foreground and background layers are generated as vector drawable icons when possible, with fallback to PNG images in case the SVG source images contains incompatible content.

Regardless of the generated layer formats, the adaptive icon file is produced which specifies the correct background and foreground layers:

mipmap-anydpi-v26/ic_launcher.xml

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>

Vector drawable foreground

The foreground is generated as a vector drawable for simple SVG input where all the visual content can be represented as vector drawable elements. For a full list of supported elements in the vector drawable specification, see the reference documentation.

Vector drawable icons are generated using the svg2vectordrawable library. In case there are problems with the output vector drawable, please check for information in that library.

drawable-anydpi-v26/ic_launcher_foreground.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108">
    <path
        android:fillColor="#222"
        android:pathData="M0 0h108v108H0V0z"/>
    <path
        android:fillColor="#FFF"
        android:pathData="M58.83 53.83a4..."/>
    <path
        android:fillColor="#FFF"
        android:pathData="M80 53.83c0-3...."/>
</vector>

PNG fallback foreground

In case the input SVG contains elements not supported by vector drawable, such as <text>, then the foreground is rendered as a normal PNG images for each density, which would look like this:

Legacy icons

Traditional Android launcher icons have lacked enforced design guidelines, and are allowed to have basically any shape. Here, the icons are generated similarly to the Image asset studio with cropping and shading applied according to the Material design guidelines. This means that there is an appropriate transparent margin around the icons, with drop shadows added to mimic

PNG icons are generated for all different densities, from mdpi to xxxhdpi.

Square

Normal legacy icons supported by all Android versions.

mipmap-*dpi/ic_launcher.png

Round

Android 7.1 included support for defining specifically circular launcher icons. These are rendered separately from the square format for consistent style on all platforms.

mipmap-*dpi/ic_launcher_round.png

iOS

All iOS images follow the same square cropped shape without any transparency, with rounder corners produced by the platform. The source image is cropped according to the Android adaptive icon viewport (center 2/3), providing consistent icons across all platforms.

Launcher, settings and spotlight icons are generated for all devices supported by React Native, meaning iPhones and iPads running iOS 9 or later.

iPhone

iPad

Marketing icon