If you look closely at iOS app icons, you will notice they aren’t standard rounded corners. They are squircles—shapes with continuous curvature that transition perfectly into straight edges without a sudden change in rate.
What is a Squircle?
A standard rounded rectangle joins a straight line with a circular arc. At the exact point where the line meets the arc, there is a mathematical discontinuity in curvature. The human eye perceives this as a slight “sharp corner” or corner pinch.
A squircle uses a higher-degree superellipse equation, where the curvature starts at zero along the flat edges and smoothly ramps up toward the apex of the corner. This creates a soft, luxurious, organic appearance.
Implementing Squircle Outlines
When designing icons, using SVG paths with cubic Bézier curves allows you to model these continuous curves. Ensuring your workspace coordinates support custom curvature formulas elevates your digital assets from simple widgets to high-end design assets.