How to Design an App Icon with Claude Design: App Store, Google Play and Android Sizes

To design an app icon with Claude Design, ask for a square 1024x1024 canvas with an opaque background that runs to every edge, square corners and no transparency, and keep the main symbol in the centre. Export that as a PNG and it is your App Store icon. Google Play wants the same design at 512x512 as a 32-bit PNG under 1024 KB, and Android launcher icons are built from 108 dp layers in which only the central 66 dp is guaranteed to show.

What size should an app icon be in 2026?

Mac and Vision Pro apps start from the same 1024 x 1024 size, and Apple TV is the odd one out at 800 x 480. Since iOS 26, Apple icons can also be layered files made in Icon Composer, which ships with Xcode, so people can choose default, dark, clear or tinted versions and the system adds the Liquid Glass effects. Developer guides say a single 1024 x 1024 PNG for the default look is still needed to submit. The sizes are from Apple's Human Interface Guidelines and Google's Play icon specification.

Why should an app icon be square, opaque and without rounded corners?

Both stores apply the corner shape themselves. Apple asks for square artwork "so the system can apply rounded corners" and warns that pre-rounded artwork ends up with jagged edges and wrong highlights. Backgrounds should be "full-bleed and opaque". Google Play also asks for a full square, then rounds the corners and adds a drop shadow, so corners or a shadow you draw yourself end up doubled.

Transparency is the other trap. Apple's App Store Connect specification for store artwork rules out alpha channels and transparency, and developers report the same for the 1024 x 1024 icon, so give the icon a solid background that fills the whole square. Google Play adds one more rule: no text or graphics about rankings, prices, deals or Play programmes in the icon.

How do you keep an icon inside Android's safe zone?

Android launcher icons are adaptive. Each layer is 108 x 108 dp, the outer 18 dp on every side can be masked away, and only the central 66 x 66 dp is never clipped. Phone makers use different shapes (circles, squircles, rounded squares), so anything outside the safe zone can disappear on some phones.

On a 1024 x 1024 canvas, the safe zone is the central 626 x 626 px, and Google's guidance of a logo between 48 and 66 dp works out at 455 to 626 px. Keep the symbol inside that box and the same artwork survives Apple's corners, Play's rounding and Android's masks, so one master serves every store. From Android 13, people can tint icons to match their wallpaper using a one-colour monochrome layer, and from Android 16 QPR2 the system themes icons that lack one automatically. A simple, bold silhouette survives both.

What prompt should you give Claude Design for an app icon?

The structure from the Claude Design prompts for social posts works here too: size first, one hero, concrete style, and a list of things to leave out. Ask for several variations at once, because icons are judged side by side.

Design an app icon on a 1024x1024 canvas, three variations as separate 1024x1024 artboards side by side.

Subject: [a simple symbol for my app, e.g. a leaf inside a speech bubble for a plant care app called Sprout].

Rules:
- An opaque background in [#1F6F4A] (or a subtle two-colour gradient) that fills the whole square, edge to edge.
- Square corners. Do not round the corners or add a border, drop shadow or device frame: the app stores do that.
- One bold symbol, centred, inside the central 626x626px. Nothing important outside it.
- No text and no app name. It must still read when the icon is tiny.
- Flat shapes, at most three colours, no fine detail or thin lines.

Leave out: photos, outlines around the whole icon, small decorative elements.

When you have a favourite, ask for one extra artboard that shows it at small sizes on a phone home screen next to other icons. Most people see an icon at about the size of a fingertip, and that preview shows at once whether the symbol still reads. If it does not, simplify: fewer shapes, thicker lines, stronger contrast.

How do you export the icon as a 1024x1024 PNG?

Claude Design can export an artboard as a PNG at 1x or 2x from the artboard's download menu. At 1x a 1024 x 1024 artboard should give a 1024 x 1024 file, but Anthropic does not document the exact pixel output, so check before you upload: the file must be exactly 1024 x 1024 (on a Mac, Preview > Tools > Show Inspector; on Windows, right-click > Properties > Details) with no transparent areas.

Renda's App icon preset is the alternative: it renders the HTML or zip export as a 1024 x 1024 PNG and hides any viewer controls, and its PNGs are always opaque, with no alpha channel at all, which is what the App Store wants. For other image sizes and routes, see Claude Design to PNG.

How do you make the 512x512 Google Play icon?

Google Play wants the same design at 512 x 512 as a 32-bit PNG, which means a PNG with an alpha channel, under 1024 KB. Halving the 1024 master keeps it sharp. The icon itself stays fully opaque: the file just needs the alpha channel that Google's spec asks for, which an opaque App Store PNG does not have. Two free ways to do it:

• On a Mac: open the 1024 PNG in Preview, choose Tools > Adjust Size and set 512 x 512 pixels, then File > Export, pick PNG and tick Alpha.
• On any computer: in GIMP, use Image > Scale Image to set 512 x 512, then Layer > Transparency > Add Alpha Channel, then File > Export As with a .png name.

A 512 x 512 PNG is almost always far below 1024 KB. If a very detailed icon is not, that detail will not survive at phone size anyway, so simplify the artwork.

What do developers need for layered icons?

A flat PNG covers both store listings and the default look. Layered icons, meaning Android's adaptive launcher icon and Apple's Icon Composer icons with dark, clear and tinted versions, are built from separate parts, usually by whoever builds the app (Android Studio's Image Asset tool, for example, makes the Android layers). Hand them:

• The 1024 x 1024 master PNG.
• The background colour as a hex code.
• The symbol on its own on a transparent background, ideally as an SVG. An opaque PNG, including the App Store file, cannot be a foreground layer.
• A one-colour version of the symbol for Android's monochrome layer.

The easiest way to get the symbol alone is to ask Claude to recreate it as a standalone SVG file, with no background, then a second version in a single colour.

Frequently asked questions