Plus UI Design · Practical guides

Design an icon tile using a squircle

Use the shape as a consistent container while giving the icon enough room to remain recognizable.

Choose the container before the icon

Set the tile’s proportions and curvature first. Keep padding around the icon rather than scaling its paths to touch the edge. A container system should make different icons feel related without forcing them into identical visual bounds.

Compare several contents

Test a circular symbol, a wide symbol and a narrow symbol inside the same tile. Adjust their optical sizes independently if needed. Keep the squircle geometry consistent so the set reads as one family.

Review small-size use

Check the tile at the size used in a toolbar, card or directory. Thin strokes and complex artwork can disappear when reduced. If the tile is an action, put its accessible name on the actual link or button in the finished interface.