Component
Isometric 3D Icons in Framer
This is a set of isometric 3D icons recreated in Framer, inspired by Seb’s original work. Feel free to remix the project and explore how it was built—all without writing a single line of code.
Created by
About the resource
To create this isometric 3D icon, I started with the body by setting up a bottom frame—gave it a linear fill, rotated it 90° on the X-axis, and added some nice drop shadows inside and out. Then I wrapped that frame, rotated it in 3D (30° on the X and 45° on the Y), and pinned it to both sides so it stays in place.
Next, I wrapped it again, pinned it to the bottom and sides, and set overflow to hidden. The top frame follows the same steps, but this time the wrapper is pinned to the top.
To get that soft edge blur and light glow, I added two more frames—rim 1 and rim 2. Same setup, but rim 2 has a mask applied, and I layered them using z-index (rim 1 on top). Both are pinned to the top. Then I added another layer for shadows, wrapped it, followed by a blur layer, and finally, dropped in the actual icon.
Once the default version was ready, I added a hover state—just increased the height of the body and widened the shadows to give it that subtle floating effect.
About the resource
To create this isometric 3D icon, I started with the body by setting up a bottom frame—gave it a linear fill, rotated it 90° on the X-axis, and added some nice drop shadows inside and out. Then I wrapped that frame, rotated it in 3D (30° on the X and 45° on the Y), and pinned it to both sides so it stays in place.
Next, I wrapped it again, pinned it to the bottom and sides, and set overflow to hidden. The top frame follows the same steps, but this time the wrapper is pinned to the top.
To get that soft edge blur and light glow, I added two more frames—rim 1 and rim 2. Same setup, but rim 2 has a mask applied, and I layered them using z-index (rim 1 on top). Both are pinned to the top. Then I added another layer for shadows, wrapped it, followed by a blur layer, and finally, dropped in the actual icon.
Once the default version was ready, I added a hover state—just increased the height of the body and widened the shadows to give it that subtle floating effect.
About the resource
To create this isometric 3D icon, I started with the body by setting up a bottom frame—gave it a linear fill, rotated it 90° on the X-axis, and added some nice drop shadows inside and out. Then I wrapped that frame, rotated it in 3D (30° on the X and 45° on the Y), and pinned it to both sides so it stays in place.
Next, I wrapped it again, pinned it to the bottom and sides, and set overflow to hidden. The top frame follows the same steps, but this time the wrapper is pinned to the top.
To get that soft edge blur and light glow, I added two more frames—rim 1 and rim 2. Same setup, but rim 2 has a mask applied, and I layered them using z-index (rim 1 on top). Both are pinned to the top. Then I added another layer for shadows, wrapped it, followed by a blur layer, and finally, dropped in the actual icon.
Once the default version was ready, I added a hover state—just increased the height of the body and widened the shadows to give it that subtle floating effect.
The default and hover variant of the block component.
The default and hover variant of the block component.
The default and hover variant of the block component.
