What size should an app icon be?

For iOS, you typically supply one 1024 by 1024 pixel square image and the system generates the smaller sizes. For Android, adaptive icons use 108 by 108 dp layers, and the Google Play listing needs a 512 by 512 pixel icon. Specs change with platform releases, so check Apple's and Google's current documentation before exporting final files.

Can my app icon have a transparent background?

Not on iOS, where the icon needs a full, opaque background. On Android, the foreground layer of an adaptive icon can be transparent, but the background layer fills the masked shape. In practice, design every icon with a solid or subtle gradient background in your brand color, so it looks intentional on any wallpaper or theme.

Should I use a gradient in my app icon?

A subtle gradient can add depth and help an icon stand out on a home screen, and it's more acceptable in an icon than in a logo. Make sure the icon still reads well in dark and tinted modes, where colors are changed by the system. If the icon only works because of the gradient, simplify the mark until it works without it.

How do dark mode app icons work?

On recent iOS versions, users can choose dark or tinted home screen icons, and the system uses your dark variant or applies a tint to a grayscale version of your design. If you don't supply variants, the system adjusts your icon automatically, sometimes poorly. Designing the dark and tinted versions yourself keeps the icon recognizable in every mode.

Do I need a different app icon for iOS and Android?

You can use the same design, but you'll need different files. Android adaptive icons split the design into foreground and background layers, and devices mask them into various shapes. iOS uses a single rounded-square mask. Start from one master design and export platform-specific versions, checking that the mark stays inside each platform's safe zone.

All posts

Branding

App Icon Design: Turning Your Logo Into an App Icon

App icon design from your logo: iOS and Android grids, adaptive and tinted icons, small-size legibility and how to plan the mark with the icon in mind.

By Mehdi HassanOct 29, 20267 min read

The short answer

App icon design starts by taking the simplest, most recognizable part of your logo, usually the symbol or one letter, and redrawing it for a square canvas. Center it inside the platform's safe zone, give it a solid background, test it at small sizes and on busy home screens, then create the dark, tinted and Android adaptive versions.

Key takeaways

An app icon is a redrawn symbol on a square, not your full logo shrunk down.
Never put the full wordmark in the icon; the app name already sits underneath.
Design for the smallest size first: Settings, Spotlight and notifications.
Android adaptive icons need separate foreground and background layers with a safe zone.
Plan the icon while designing the logo, or you may have nothing that fits a square.

Part of Logo Design for Startups: The Complete Guide

How do you turn a logo into an app icon?

You turn a logo into an app icon by isolating its most distinctive element, simplifying it for small sizes and placing it on a square background that the operating system will mask into its own shape. The app icon isn't a copy of your logo. It's a version of your brand designed for one job: being found quickly among dozens of other icons.

Most founders discover this the hard way. The logo looks great on the website, then gets dropped into a square for the App Store and turns into a tiny, unreadable word or a cramped symbol with too much empty space. This guide covers the platform rules, the design process and how to plan your logo so the icon is easy later. For the wider context, see our logo design guide for startups.

What are the iOS and Android app icon guidelines?

iOS and Android both ask for a square source image that the system masks into its own shape, but they handle layers and variants differently. Apple applies a rounded-square mask and now supports dark, tinted and layered icons. Android uses adaptive icons with separate foreground and background layers that different devices can mask into circles, squircles or other shapes.

	iOS	Android
Source size	1024 x 1024 px square	108 x 108 dp adaptive layers; 512 x 512 px for the Play Store listing
Corner shape	Applied by the system; don't add your own	Applied by the device mask, which varies
Layers	Layered icons supported in Apple's Icon Composer	Separate foreground and background layers
Safe zone	Keep key content away from the edges	Keep key content inside the central 66 dp circle
Variants	Light, dark and tinted appearances	Monochrome layer for themed icons
Transparency	No transparent background	Foreground can be transparent; background fills the shape

Platform specs change with each major release, so check Apple's Human Interface Guidelines and Android's adaptive icon documentation before you export. Our guide to iOS vs Android design guidelines covers where the two platforms differ beyond the icon.

What makes a good app icon design?

A good app icon is recognizable at a glance, readable at its smallest size and clearly different from the other icons people keep near it. It uses one idea, few colors and a strong silhouette. It doesn't need to explain what the app does. It needs to be easy to find again.

One focal shape. A symbol, a letter or a simple mark, filling a healthy part of the square without touching the edges.
Strong contrast. The mark should stand out from the background in light mode, dark mode and tinted mode.
No text. The app name is shown under the icon, so words inside it are repetition, and they can't be read anyway.
A background that belongs to you. A solid brand color or a subtle gradient, not white, which disappears on light wallpapers.
Consistency with the brand. It should feel like the same company as your website and product, even if it's simplified.

How do you design an app icon step by step?

Design an app icon by working from the smallest size up, then building out the platform variants. The steps below assume you already have a logo with a symbol or a distinctive letter.

Pick the element
Choose the part of your logo people recognize most: the symbol, the first letter of the wordmark, or a distinctive detail. If nothing works at small sizes, that's a sign the logo needs a compact version. Our guide to logo variations covers how to create one.
Redraw it for the square
Don't just scale the existing artwork. Thicken thin strokes, open up tight gaps and adjust proportions so the mark sits well in a square. Optical balance matters more than mathematical centering.
Set it on a grid
Place the mark inside the safe zone so no device mask clips it. On Android, keep it within the central circle of the adaptive canvas. Leave enough breathing room that it doesn't feel cramped.
Choose the background
Use your primary brand color or a dark neutral. Test both against light and dark wallpapers and next to the icons your users most likely keep beside yours.
Test at small sizes
Preview the icon at the sizes used in notifications, Settings and search. If the mark blurs, simplify again. Then test it on a crowded home screen screenshot.
Build the variants
Create the dark and tinted versions for iOS, the foreground, background and monochrome layers for Android, and the store listing images. Export from one master file so they stay consistent.

For example, suppose a fintech startup has only a wordmark

Hypothetical example: a budgeting app launched with a lowercase wordmark and no symbol. For the app icon, the team first tries the full wordmark, which becomes unreadable at small sizes. Next they try the first letter alone, but in the chosen typeface it looks almost identical to two other finance apps.

The fix: the designer customizes the first letter with a distinctive cut that echoes a detail in the wordmark, thickens it for small sizes and sets it in white on the brand's deep green. The new letterform is added back into the logo system as an official symbol, so the website favicon and social avatars use it too.

How do you design a logo with the app icon in mind?

Design a logo with the app icon in mind by making sure the identity includes a compact mark that works inside a square from the start. Before approving any logo, place it as an app icon and a favicon. If it doesn't work there, the logo isn't finished, however good it looks on a website.

This matters most for consumer and mobile-first products, where the app icon may be seen more often than any other brand asset. A combination mark, with a symbol beside the name, usually gives you the most flexibility. Our guides to the types of logos and wordmark vs logomark explain the options, and our 10 tests for a good logo include the small-size checks.

Should your app icon match your logo exactly?

Your app icon should clearly belong to the same brand as your logo, but it doesn't need to match it exactly. Many strong app icons are simplified, recolored or cropped versions of the main mark, adapted for the square and the home screen. The goal is instant recognition, not perfect consistency.

Where companies go wrong is letting the icon drift too far, such as using an AI sparkle or a generic symbol unrelated to the logo. That weakens both. Our piece on the sparkle icon problem covers why generic AI symbols don't help an app stand out, and our mobile app design guide covers how the icon fits into the rest of the app's design.

Frequently asked questions

What size should an app icon be?: For iOS, you typically supply one 1024 by 1024 pixel square image and the system generates the smaller sizes. For Android, adaptive icons use 108 by 108 dp layers, and the Google Play listing needs a 512 by 512 pixel icon. Specs change with platform releases, so check Apple's and Google's current documentation before exporting final files.
Can my app icon have a transparent background?: Not on iOS, where the icon needs a full, opaque background. On Android, the foreground layer of an adaptive icon can be transparent, but the background layer fills the masked shape. In practice, design every icon with a solid or subtle gradient background in your brand color, so it looks intentional on any wallpaper or theme.
Should I use a gradient in my app icon?: A subtle gradient can add depth and help an icon stand out on a home screen, and it's more acceptable in an icon than in a logo. Make sure the icon still reads well in dark and tinted modes, where colors are changed by the system. If the icon only works because of the gradient, simplify the mark until it works without it.
How do dark mode app icons work?: On recent iOS versions, users can choose dark or tinted home screen icons, and the system uses your dark variant or applies a tint to a grayscale version of your design. If you don't supply variants, the system adjusts your icon automatically, sometimes poorly. Designing the dark and tinted versions yourself keeps the icon recognizable in every mode.
Do I need a different app icon for iOS and Android?: You can use the same design, but you'll need different files. Android adaptive icons split the design into foreground and background layers, and devices mask them into various shapes. iOS uses a single rounded-square mask. Start from one master design and export platform-specific versions, checking that the mark stays inside each platform's safe zone.

Mehdi Hassan · CEO & Design Director

Copywriter, designer and developer, and founder of Designify Studio. Over five years, 60+ projects across 14+ industries, for startups that have raised $300M+.

Want this done for you? Brand & design sprint, $3,000.

A brand refresh or redesign, plus design explorations for your website and product. $3,000, one-time, fixed price. Book a free 30-minute call to see if it fits.

Schedule Call