Giving Our Icons a Body

The unexpected design problems of turning a flat icon family into objects you could almost pick up

A flat icon is a promise made from one angle. For years our icon family lived happily in two dimensions: a pot was a silhouette, a flame was three curves, and nobody asked what either looked like from behind.

Then our product grew a canvas you can orbit. Suddenly every icon needed a back, a base and a believable weight. This is the story of how we gave a hundred and forty icons a body — without giving them the uncanny gloss of a product render.

Of course, adding a third dimension solves one problem and introduces several more. It is easy to make a teapot look impressive at full size. It is much harder when that same teapot has to shrink to eighteen pixels and still feel warm.

Expressive, not photoreal

When a renderer can do subsurface scattering and ray-traced caustics, the temptation is to use all of it. We resisted. A photoreal kettle reads as a stock photo; a kettle with a slightly exaggerated spout and a soft rim light reads as ours.

Our job wasn't to scan the world into the product. It was to keep the feeling of the drawing and give it somewhere to stand.

We kept materials matte, limited every object to three colours, and allowed ourselves exactly one highlight per form. Those constraints did more for consistency than any style guide paragraph ever had.

Less detail, more feeling

Research from our own usability sessions surprised us: the more anatomical detail an icon carried, the slower people recognised it. Stripping away seams, screws and textures made the set faster to read, not just prettier.

The 360-degree reality check

In two dimensions you solve for one vantage point. In three, there is nowhere to hide. What does the back of a smiling face look like? (Round. Very round.) What about a flame? We built a turntable review into every critique so nobody could hide a missing side.

The set ships next month in the canvas, and the source files are open for anyone to remix.