Figma Squircle

Figma can create smooth corners with its corner smoothing control. If you need a shape that follows a specific mathematical superellipse exponent, import a generated squircle SVG. Neither method should be presented as Apple's official production icon mask.

Generate a squircle for Figma →

Set the shape, download the SVG, and drag it into Figma — or copy the markup and paste it on the canvas.

Option 1 — Figma's corner smoothing

Select a rectangle, set a corner radius, then open the corner smoothing control and raise it toward iOS (60%). Figma documents 60% as its iOS-style smoothing preset. It is tied to a corner radius rather than a chosen superellipse exponent, so it will not always match a specific n value. See Figma's corner smoothing guide.

Option 2 — import a generated superellipse SVG

Open the generator and set width / height / smoothing (n ≈ 5 for iOS-style).
Click Download .svg (or copy the SVG markup).
In Figma, drag the file onto the canvas, or paste the markup — it arrives as a vector shape.
Use it directly, or as a mask: place it above your image, select both, and choose "Use as mask".

The SVG preserves the selected mathematical outline at any size, which is useful when design and web code need the same explicitly chosen shape.

Corner smoothing vs SVG import

Fast UI mockups, flexible radius? Use Figma's corner smoothing.
A specific mathematical exponent or the same shape across design and code? Import the SVG.

Tips

Keep width = height for icon shapes; stretch only for buttons or cards.
Need the same shape on the web too? Grab the matching CSS clip-path from the generator so design and code stay identical.
For an iOS app icon specifically, see the iOS app icon squircle guide.

FAQ

Does Figma have a built-in squircle?

Figma has corner smoothing. To use a specific superellipse exponent consistently across design and code, import a generated SVG.

What corner smoothing matches iOS?

Figma's documented iOS-style preset is 60%. A generated n ≈ 5 SVG is another approximation, not an official Apple mask.

How do I mask an image to a squircle in Figma?

Place the squircle shape above the image, select both, and choose "Use as mask".