You don’t round an app icon’s corners yourself: you give iOS, Android and Google Play a full-bleed square (artwork that runs to all four edges), and each platform applies its own rounded mask. Apple’s guidelines say to provide square layers so the system can apply rounded corners, and Google’s Play icon specification asks for a full square that Google Play rounds with a radius of 30% of the icon size. In AI Icon Creator’s check of the 100 top free iPhone apps in the US App Store, all 100 icons were square images with no rounded or transparent corners.
This guide shows which shape each platform applies, which corner radius numbers are real and which are out of date, what goes wrong when you round the icon yourself, and three tested ways to preview rounded corners for a mockup or your website.
Do app icons need rounded corners?
App icons don’t need rounded corners, because every major platform takes a square image and rounds it itself. Apple’s Human Interface Guidelines say that in iOS, iPadOS and macOS the icons are square and the system applies masking to produce rounded corners that match the curvature of other rounded interface elements and of the device’s bezel. Google’s Play icon specification lists the shape as a full square and says Google Play handles the masking.
We also checked what the biggest apps do. On 9 October 2026 we downloaded the artwork Apple serves for the 100 top free iPhone apps in the US App Store, at 1,024 px. All 100 files were 1,024 × 1,024 px images without an alpha channel, and in all 100 the corner pixels continued the colour of the edge beside them, so none had been rounded or flattened onto a matte. Apple’s own App Store pages round those squares in CSS: on current iPhone app pages the icons have border-radius: 25%. We publish only the counts, no icons and no app names.
What shape does each platform apply?
Each platform applies its own shape to the square you provide: a rounded rectangle on iPhone, iPad and Mac, a circle on Apple Watch and Apple Vision Pro, a rounded rectangle with a 30% radius on Google Play, and a shape chosen by the device maker on Android.
| Platform | You provide | The platform applies |
|---|---|---|
| iOS, iPadOS, macOS | Square layers, 1,024 × 1,024 px | A rounded rectangle that matches the device’s curvature; Apple publishes no radius |
| watchOS, visionOS | Square layers | A circle |
| tvOS | Rectangular layers, 800 × 480 px | A rounded rectangle |
| Google Play listing | A full-square 512 × 512 px 32-bit PNG | Rounded corners with a 30% radius, plus a shadow |
| Android launcher | Adaptive icon layers, 108 × 108 dp | A mask the device maker picks, such as a circle, a squircle or a rounded square |
Android’s adaptive icon documentation says each device maker must provide a mask that the system uses to draw all adaptive icons in the same shape, so one icon can look like a circle on one phone and a squircle (a shape between a square and a circle) on another. Keep the logo inside the 66 × 66 dp safe zone that no mask clips; our Android adaptive icons guide covers the layers, and our macOS app icon guide covers the Mac.
On the web, a browser shows a favicon the way you draw it, so rounded corners there are a design choice. Our favicon sizes guide and PWA icon guide cover those files, including the maskable safe zone.
What is the app icon corner radius on iOS?
Apple doesn’t publish a corner radius for iOS app icons, so every number you see is an estimate: developers most often use about 22.5% of the icon’s width, and Apple’s own App Store pages round icons with a CSS radius of 25%. What Apple does say is that the corners match the curvature of the device. Its frameworks offer two kinds of rounded corner, a quarter circle and one with continuous curvature (RoundedCornerStyle), and a continuous corner eases into the straight edge more gradually. A CSS border-radius can only draw the quarter-circle kind, so any single radius is an approximation.
These are the four numbers you will meet:
| Radius | Where it comes from | Use it for |
|---|---|---|
| 17.5% | The 10 ÷ 57 rule, from a 2012 blog post about the older icon shape | Nothing: it predates iOS 7 |
| 22.5% | Developers’ estimate of the iOS shape, and the CSS this site uses | iOS-style previews |
| 25% | The CSS on Apple’s current App Store pages | Web pages that should match the App Store |
| 30% | Google Play’s specification | The Google Play listing only |
The 17.5% rule is the one to ignore. A 2012 blog post repeated a Stack Overflow answer, “Apple starts with the 57px icon and a radius of 10”, and it still turns up in searches for the exact radius, but it describes the icon shape before iOS 7 changed it in 2013. Measured along the diagonal of a 1,024 px icon, the corner of a 22.5% shape sits 95 px in from the corner of the square; at 17.5% it is 74 px, at 25% it is 106 px and at 30% it is 127 px.
What goes wrong when you round the corners yourself?
If you round an app icon’s corners yourself, the platform’s mask can’t restore what you cut away, and your pre-made edge can leave gaps, jagged edges or a doubled shadow.
- Rounding more than the platform leaves gaps. In our simulation, a 30% corner sits deeper than a 22.5% mask, so four wedge-shaped gaps show whatever the platform puts behind the icon. It happens when you reuse a rounded icon taken from the Google Play listing on iOS, or crop a logo to a circle.
- Rounding less is hidden, but still not advised. In the same simulation a 17.5% corner disappears under a 22.5% mask. Apple still says that providing layers with pre-defined masking hurts the specular highlight effects and makes edges look jagged.
- Transparent corners cause trouble on their own. Expo’s documentation says the iOS icon should fill the square with no rounded corners or transparent pixels; our Expo app icon guide has the details.
- Baked-in shadows double up. Google Play’s specification says to omit rounded corners and drop shadows from your asset, because Google Play renders both itself.
Some AI image tools export icons that are already rounded, on a white or transparent background. Check the corners of any generated icon before you upload it; if they are white or transparent, regenerate it or crop it to the square. AI Icon Creator’s studio shows a rounded preview mask and keeps the source square. If you don’t have an icon yet, try one:
How do you preview rounded corners for a mockup or your website?
To preview rounded corners, mask a copy of your square icon with a rounded rectangle whose radius is about 22.5% of its width (25% matches Apple’s own web pages), and keep the original square for the stores. Here are three ways, each tested.
CSS, for web pages:
.app-icon {
width: 180px;
aspect-ratio: 1;
border-radius: 22.5%;
overflow: hidden;
}
.app-icon img {
display: block;
width: 100%;
height: 100%;
}
Chromium browsers from version 139 can also draw a smoother, squircle-style corner with corner-shape: squircle, but MDN’s compatibility data lists Firefox and Safari as preview only, so treat it as an enhancement and keep border-radius as the fallback.
SVG, for vector mockups:
<svg viewBox="0 0 1024 1024" width="180" height="180">
<clipPath id="icon-mask">
<rect width="1024" height="1024" rx="230" ry="230" />
</clipPath>
<image
href="icon-1024.png"
width="1024"
height="1024"
clip-path="url(#icon-mask)"
/>
</svg>
Python with Pillow, for PNG previews in a script:
from PIL import Image, ImageDraw
icon = Image.open("icon-1024.png").convert("RGBA")
size = icon.width
scale = 4 # draw the mask four times larger, then shrink it for smooth edges
mask = Image.new("L", (size * scale, size * scale), 0)
ImageDraw.Draw(mask).rounded_rectangle(
(0, 0, size * scale - 1, size * scale - 1),
radius=size * scale * 0.225,
fill=255,
)
icon.putalpha(mask.resize((size, size), Image.LANCZOS))
icon.save("icon-preview.png")
In AI Icon Creator’s test we rendered the three snippets on the same icon in Chrome 154. The four corners of each were identical, and the corner area cut away by the SVG and Pillow versions was within 0.3% of the CSS version.
Use these previews for showing the icon on a site or in a mockup. The file you upload to the App Store and Google Play stays the square; our app icon sizes guide lists every size.
Why does my app icon have a white edge, border or circle around it?
A white edge, border or circle around an app icon usually means the icon was rounded or given a transparent background before the platform’s own mask was applied, or that art sitting too close to the edge was cropped by the mask.
- A light rim or wedge-shaped corners on iOS. The cause is usually a pre-rounded icon. Export the full-bleed, opaque square again and upload that.
- A cropped logo or a circle on Android. Launchers mask adaptive icons with shapes such as circles, so keep the important part inside the 66 × 66 dp safe zone. For a web app, web.dev says a transparent PWA icon appears inside a white circle on Android unless you provide a maskable icon; see our PWA icon guide.
- A border or shadow on Google Play. Your asset has a shadow or border baked in. Remove it, because Google Play adds its own shadow.
Frequently asked questions
What is the rounded corner radius of app icons?
Apple doesn’t publish a corner radius for iOS app icons; developers most often use about 22.5% of the icon’s width, and Apple’s App Store pages use a CSS radius of 25%. Google Play’s specification is official: a radius of 30% of the icon size. Use those numbers only for previews, because you upload a square to both stores.
Do I need to round my app icon before uploading it to the App Store?
You shouldn’t round your app icon before uploading it to the App Store: upload a 1,024 × 1,024 px full-bleed square without rounded or transparent corners, and the system applies the rounded corners. Apple’s guidelines say pre-defined masking hurts the specular highlight effects and makes edges look jagged, and all of the 100 top free iPhone apps we checked use a square.
Why does my app icon have a white border or circle around it?
An app icon usually has a white border or circle around it because it was rounded before the platform rounded it, or because transparent corners show a matte behind them. Export the icon again as a full-bleed, opaque square and keep the logo clear of the edges. On Android, keep the logo inside the 66 × 66 dp safe zone so a circular launcher mask doesn’t cut it.
Do Android icons have rounded corners?
Android icons have rounded corners only if the launcher’s mask has them: Android lets each device maker provide a mask, so an adaptive icon can appear as a circle, a squircle or a rounded square. The Google Play listing icon is rounded by Google Play with a 30% radius. In both cases you supply a square.
How do I make rounded app icons for a mockup or my website?
To make rounded app icons for a mockup or website, mask a copy of your square icon with a radius of about 22.5% of its width, using CSS border-radius, an SVG clip path or Pillow’s rounded_rectangle, as in the snippets above. Use the rounded copy only for the mockup or page, and keep the square master for the App Store and Google Play.
Ready to make your icon?