The iOS app icon is not a rounded rectangle — it is a squircle, a superellipse with continuous curvature. If you mask an icon with plain border-radius, the corners look subtly wrong next to real iOS icons. This page explains the exact shape and lets you generate a pixel-accurate mask.
Tip: in the generator, click the "iOS app icon" preset (square size, smoothing n = 5) to start from the right shape, then copy the CSS or download the SVG.
Apple switched from simple rounded rectangles to a superellipse-based icon shape so that the curvature flows continuously into each corner instead of jumping from a straight edge to a circular arc. The result reads as smoother and more "settled" to the eye. Because the whole Home Screen is built on this shape, an icon masked with an ordinary rounded rectangle will look slightly off when placed beside system apps — the corners are too tight and the edges too straight.
Mathematically the shape is a superellipse: |x/a|n + |y/b|n = 1. For a square icon the closest simple approximation to Apple's mask sits around n = 5. Lower values look more like an ellipse; higher values approach a rounded rectangle.
n = 5 for the Apple-style corner.The App Store master icon is 1024×1024; the system downsizes it for the Home Screen, Settings, Spotlight, and notifications. You usually only need to design the squircle once at the master size — keep width and height equal at whatever resolution you export.
| Use | Size (pt @1x) |
|---|---|
| App Store | 1024 × 1024 |
| Home Screen (iPhone) | 60 × 60 |
| Spotlight | 40 × 40 |
| Settings | 29 × 29 |
Sizes are points; export @2x/@3x for retina. iOS applies its own mask to App Store uploads — the squircle here is mainly for in-app, web, and design-tool use where you mask the shape yourself.
For a web element that mimics an iOS icon, clip it with the exact superellipse path (the generator gives you the full string):
.app-icon {
width: 120px;
height: 120px;
background: url(icon.png) center/cover;
clip-path: path("M 120.00 60.00 L … Z"); /* from the generator */
}
On newer Chromium browsers you can also try the experimental one-liner: border-radius: 50%; corner-shape: superellipse(5); — but the clip-path approach works everywhere today.
Yes. Since iOS 7 the icon grid uses a superellipse-based shape with continuous corner curvature, not a fixed-radius rounded rectangle.
Around n = 5 is the closest simple superellipse. Use the "iOS app icon" preset as a starting point and adjust to taste.
Yes — download the SVG from the generator and drop it in as a mask or shape layer.