Icons are the hardest isometric art to get right because there is so little room. At small sizes one of the three faces usually has to go, so we pick the two that best describe the object. A book keeps its cover and spine; a box keeps its top and front. Deciding early saves a lot of redrawing.
At a glance
| Page type | Transformed elements | Notes |
|---|---|---|
| Article | Up to 12 | Hero and inline figures |
| Landing page | Up to 40 | Flatten static scenery |
| Dashboard | Up to 8 | Charts only |
Testing on real devices
Shadows on the floor sell the idea that a block has weight. A blurred ellipse, skewed to match the grid and placed slightly offset from the light, is usually enough. Real shadows would change with the height of the block, and adding that detail makes towers and stairs look much more convincing.
Download
Questions
Is isometric art accessible?
Decorative art is fine when hidden from assistive technology. Informative art needs a text alternative.
How many cubes are too many?
Once the Layers panel shows more than about forty layers, flatten the static parts into SVG.
Why does my cube look flat?
Something on an ancestor, such as overflow: hidden or a filter, is flattening the 3D context.
Which angle should I use?
Use true isometric for CSS and the 2:1 ratio for pixel art. Readers will not notice the difference.
Farah Aziz
Bookmarked. The table alone is worth it.
Rosa Medina
Thanks! A follow-up is already in the drafts.
Soren Dahl
Our designer drew the scene in Figma and I rebuilt it with your approach in an afternoon.
Nina Ahlberg
Agreed, this is the part most tutorials skip.
Ivo Petrov
Yes, container queries work well; we will cover them soon.
Omar Haddad
Great write-up. Would love a follow-up on doing the same thing with SVG.
Bea Kowalski
Love the palette. Could you share the exact lightness values?
Lena Vogel
Thanks for covering reduced motion. It is so often an afterthought.
Dana Ortiz
How would you handle text that needs to wrap on one of the faces?
Pia Jensen
This finally made the order of rotations click for me. I had them the wrong way round for weeks.
Gus Lindgren
The part about layer counts was eye-opening. Our landing page had over a hundred.