Make a 3D app icon from a flat SVG
Drop your icon SVG into MeshShot, pick an extrusion style (flat, rounded, chamfer or puffy), light it and export a PNG. It runs in the browser and the file never leaves your computer.
- Runs in your browser
- Files never uploaded
- Free to start
How to do it
- Export your icon from Figma as an
.svg, keeping it as filled shapes rather than strokes. - Open the MeshShot web app and drop the SVG onto the canvas. Each filled path is extruded in its own colour.
- Under Extrusion, choose a style. Rounded suits a classic app icon; Puffy gives the inflated, soft-plastic look.
- Set depth and bevel, then light it. A key light plus a rim light reads best on a small mark.
- Use the 1:1 canvas ratio and export a PNG with a transparent background.
An app icon is a good first 3D project because the artwork is already vector, already simple and already square. Extruding an SVG keeps the shapes you drew, so the 3D version still reads as the same mark at 48px. What makes it look expensive is not the geometry but the lighting: a single flat light gives a cardboard cut-out, while a key light to one side and a cooler rim light on the other gives the edges something to catch.
Good to know: Keep the silhouette simple. Fine details disappear at icon sizes, and a deep extrusion on thin shapes reads as mush. If a shape is thinner than it is deep, reduce the depth.
Questions
Does my SVG need to be flattened?
Filled shapes extrude cleanly. Outline any strokes first, because a stroke has no area to extrude.
Can I keep the transparent background?
Yes. PNG and WebP export keep real transparency, so the icon drops onto any background.
Can I put it straight into Figma?
Yes, with the MeshShot Figma plugin, which places the render on your canvas without leaving Figma.