Use the free Squircle Shape Maker below: everything runs in your browser, with no sign-up and no upload.
What is a squircle?
A squircle is a shape that lives between a square and a circle. It has the flat sides of a square and the soft corners of a circle, but it is neither. The name is simply square plus circle, and the shape comes from a family of curves called superellipses. App designers know it well: many phone home screens use squircles for icons because the shape feels friendly like a circle but packs neatly in a grid like a square.
The mathematics is simple to describe. A superellipse follows the rule that the x distance raised to a power, plus the y distance raised to the same power, equals one. When the power is 2, you get a circle. As the power grows, the sides flatten and the corners sharpen, and by a power of 8 or 10 the shape is almost a square with gently rounded corners. The tool above lets you slide that power and watch the shape change in real time.
How to use the squircle shape maker
Set the smoothness slider first. A value near 2 gives a near-circle, good for avatars and badges. Values around 4 to 5 give the classic app-icon squircle, balanced and modern. Values near 8 to 10 give a rounded square, useful for buttons, cards, and tiles where you want a strong shape with soft corners.
Then set the size and colours. The fill colour is the shape itself, and the background colour is the square behind it, so you can preview how the squircle will look on a light or dark surface. When you are happy, copy the SVG code or download the file. The SVG is a single path, so it drops into any design tool, website, or slide deck without extra work.
Why squircles look modern
Design trends move in cycles between sharp and soft. Pure squares feel technical and strict. Pure circles feel playful but waste space in grids. The squircle splits the difference, which is why operating systems and app stores adopted it for icons. It also photographs well at small sizes: the flat sides keep the shape readable, while the curved corners stop it from looking harsh.
That balance makes squircles useful far beyond app icons. Use them for profile pictures, product badges, pricing cards, social avatars, and logo containers. A row of squircles in matching colours looks like a considered system rather than a set of random boxes.
Squircle versus rounded rectangle
A rounded rectangle is made by cutting circular arcs off the corners of a rectangle. A squircle is a single smooth curve, so its sides are never perfectly straight and its corners are never a separate arc. The difference is subtle at a glance but visible in the feel: a squircle looks more organic, like a shape that grew, while a rounded rectangle looks engineered. For icons and badges, that organic feel is usually the goal.
Another advantage is scaling. Because the tool exports a true vector path, the squircle stays perfectly smooth at any size, from a 32-pixel favicon to a poster. A rounded rectangle drawn as a bitmap would blur at large sizes; the SVG never does.
Practical tips
Match the smoothness across a set of icons so they feel like a family. If one icon is a near-circle and the next is a near-square, the set looks accidental. Keep the fill colour bold and simple: squircles show gradients and flat colours equally well, but busy patterns fight the clean outline. Finally, leave breathing room around the shape. A squircle placed edge to edge in a grid looks cramped; a small margin lets the curve speak.
Experiment with the slider, find the smoothness that fits your project, and export the shape. It is a small tool, but the squircle is one of those quiet design choices that makes a whole interface feel more polished.
Pingback: Creador de Formas Squircle - Figuras Suaves tipo Icono de App