Figma Squircle

Figma can approximate a squircle with its corner smoothing control, but for a pixel-exact superellipse — like a true iOS icon shape — the most reliable route is to import an exact squircle SVG. This page covers both, and when to use each.

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%). This bends the corners toward a squircle and is great for quick UI work. The limitation: it is a smoothing approximation tied to a radius, not a parameterised superellipse, so it won't always match an exact n value or a specific reference shape.

Option 2 — import an exact superellipse SVG (recommended for precision)

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".

Because the SVG is the precise mathematical outline, the corners are exactly right at any size — ideal for app icons and brand assets where the shape has to be perfect.

Corner smoothing vs SVG import

Fast UI mockups, flexible radius? Use Figma's corner smoothing.
Exact iOS icon / pixel-perfect brand shape / consistent across sizes? 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, which approximates a squircle. For an exact superellipse, import an SVG.

What corner smoothing matches iOS?

The "iOS" preset (~60%) gets close. For an exact match, import an SVG generated at n ≈ 5.

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".