When is a Circle a Square: Why You Might Care?

If you're a web designer, you may one day find yourself in need of a squircle. What is a squircle? It's the mathematical intermediate between a circle and a square. Squircles are not rectangles with rounded corners; there is a smoother transition in squircles between the straight line and the curve.

Apple used to use a shape similar to a squircle in their shape of app icons in iOS icons, but they did not match the squircle equation exactly. Later, Apple ditched the rounded rectangles in favor of squircles. Fibit's new smartwatch and Samsung phone screens are squircles too.

There is a difference between a good shape and a perfect one in design. Squircle's nice rounded corners are easier on the user's eyes than the sharp lines of a rectangle. It's also easier to focus on the content inside a squircle than it is in a rectangle. The eye focuses on the outside of rectangles, but rounded corners draw the eye into the inside of the shape. As UI designers, we know we want users to make sense of controls quickly and rounded corners help users accomplish this while being aesthetically pleasing.

In 1930, a student at Canisius College in New York claimed a circle can also be a square, and coined the term squircle. In 1960, the first application of a squircle appear as an architect and mathematician created a squircle-shaped traffic roundabout in Sweden. By 2007, the squircle started appearing in consumer tech products.

Squircley's SVG Squircle Maker makes it easy for UI designers to make squircles for your designs. You receive SVG files for icons or logos. After you design your squircle and choose your fill color, you can download the image or insert it directly into your CSS or HTML. You can also get ready-made squircle icons from the Noun Progect and squircle vectors from the Freepik Company. For more information click here https://squircley.app/.