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.
What you built
- A cube with three shaded faces
- A floor grid from gradients
- A hover state that lifts the block
June Park
The tip about naming faces instead of colours saved our design system a lot of pain.
Gus Lindgren
Bookmarked. The table alone is worth it.
Dana Ortiz
Great write-up. Would love a follow-up on doing the same thing with SVG.
Lena Vogel
Is there a way to do the shadow without a pseudo-element? Our CMS strips empty spans.
Hana Sato
Has anyone tried this with container queries? Feels like a good fit.
Soren Dahl
This finally made the order of rotations click for me. I had them the wrong way round for weeks.
Nina Ahlberg
Glad it helped. The values are in the colour ratios reference.
Jonah BergAuthor
Agreed, this is the part most tutorials skip.