All tools
App Icon Generator
Build the iOS and Android app icon sets a React Native or Expo project needs
Build the iOS and Android app icon sets a React Native or Expo project needs
The App Icon Generator takes one logo and lays out the two icon systems a mobile app has to satisfy, which are less alike than they look. iOS wants a single opaque square with no alpha channel and no corner rounding, and masks it into a squircle itself. Android wants two layers of 108dp each, of which only the middle 72dp is ever visible, because the launcher supplies the mask and slides the layers against each other during a parallax animation. Feeding both the same resized PNG is why so many apps ship with an icon that is cropped on one platform and adrift in a wide margin on the other. Choose React Native CLI and you get an AppIcon.appiconset with its Contents.json alongside the five mipmap density folders, the adaptive-icon XML that Android 8 and later read, and the colour resource that sits behind the foreground layer. Choose Expo and you get the three images app.json refers to, plus the block to paste into it. The work is split in two so the page stays quick: moving a control redraws only the four images the preview shows, at 256 pixels, while the thirty-odd full-size files are rendered once, when you press download. Two details are handled properly rather than approximately. The opaque icons are drawn on a canvas created without an alpha channel, so they encode as 24-bit PNGs — App Store Connect rejects an app icon carrying an alpha channel even when every pixel in it is opaque, which is what an ordinary canvas export produces. And an SVG source is rasterized separately at each output size instead of being shrunk from one large bitmap, so the 48-pixel mdpi icon is drawn as 48 pixels of geometry.
The guide behind this tool
What iOS and Android Actually Do With Your App Icon
Apple masks the corners and rejects an alpha channel. Android hides a third of every layer and lets the launcher pick the shape. Two systems, one logo.
Drop in your logo. A square SVG, or a PNG of 1024 pixels or more, gives every file in the package something to work from.
Set the project type on the row underneath, because it decides the whole layout: React Native CLI gives you an asset catalog and mipmap folders, Expo gives you a handful of images and the app.json block that declares them. Untick iOS or Android there if you are replacing only one side.
Look at the two previews. The 60-pixel tile is the one that matters, since that is roughly how big the icon is on a phone, and the Android tile shows the crop a launcher applies before you install anything.
If it needs nothing, press Download the ZIP. The defaults produce a complete package for both platforms, and the iOS only and Android only buttons narrow it to one side.
Pick a background from the swatches or set your own colour. Both platforms need one, because iOS flattens the icon onto it and Android paints it as the bottom adaptive layer.
The rest of the controls are corrections rather than steps: padding for the iOS square, the separate Android foreground size that keeps artwork inside the safe circle, the legacy launcher shape, and the iOS 18 and themed-icon layers.
Unzip the package at the root of your project. Every path inside already matches where the build looks, and README.txt repeats the copy steps. Rebuild the native app afterwards, since a JavaScript reload will not change an icon.
App Store Connect checks whether the app icon PNG has an alpha channel at all, not whether anything in it is actually see-through, and returns ITMS-90717 when it finds one. Almost every browser-based generator trips this, because a canvas exported to PNG always carries alpha. The icons here are drawn on a canvas created with alpha turned off, which encodes as a 24-bit RGB PNG with no alpha channel to find. The Android files are unaffected by any of this and several of them are meant to be transparent.
36+ Free Tools
Explore all categories
From text processing to developer utilities, all free, all instant, no sign-up.