iOS App Icon Squircle Generator

This tool creates a mathematical superellipse for iOS-style mockups and web UI. It is a useful visual approximation, not Apple's official app-icon mask. For a shipping app, provide square artwork and let Apple platforms apply the production mask.

Open the squircle generator →

Tip: click the "iOS app icon" preset (square size, smoothing n = 5) for a visual starting point, then copy the CSS or download the SVG.

Why use a superellipse approximation?

A plain border-radius uses circular corner arcs. A superellipse lets the outline flow more gradually between its edges and corners, which makes it useful for icon mockups that need an iOS-style appearance.

Mathematically the generated shape follows |x/a|ⁿ + |y/b|ⁿ = 1. For a square icon, n ≈ 5 is a practical visual starting point. Apple does not publish its production mask as this simple equation, so do not treat that value as an official specification.

How to make an iOS app icon squircle

Open the generator and click the iOS app icon preset.
Keep width = height (icons are square). Set the size you need.
Leave smoothing near n = 5 for an iOS-style approximation.
Pick your fill color, then copy the CSS clip-path for the web or download the SVG to use as a mask in Figma, Sketch, or your image pipeline.

For production app icons

Use this generator for mockups, web elements, and design studies. For an App Store submission, follow the current Apple Human Interface Guidelines: provide square artwork and avoid pre-applying the final rounded mask, because the system applies it.

CSS example

For a web element with an iOS-style appearance, clip it with the generated mathematical superellipse path:

.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 */
}

Browsers with experimental corner-shape support can use the one-line output from the generator. Its CSS parameter is converted from the geometry exponent; the two numbers are not interchangeable. Check MDN compatibility data before production use.

Common mistakes

Using border-radius. It produces circular-arc corners, not a superellipse — the #1 reason custom icons look "off".
Treating a preset as an official mask. The n = 5 preset is a visual approximation for mockups; Apple applies the shipping app-icon mask.
Non-square dimensions. iOS icons are square; stretching the shape breaks the look.

FAQ

Is the iOS icon really a squircle?

“Squircle” is a useful informal description of the icon's visual character, but Apple does not specify the production mask as the simple superellipse generated here.

What smoothing value matches iOS?

Around n = 5 is a useful visual starting point. It is not an official Apple value.

Can I export the shape for Figma or Sketch?

Yes — download the SVG from the generator and drop it in as a mask or shape layer.