Ask a designer what format an icon should be and the answer comes back before you finish the question: SVG. It scales to any size, it stays sharp on every screen, it weighs almost nothing, and you can restyle it with CSS. For flat icons that answer is correct often enough that it stops feeling like a decision.
Then you download a set of 3D icons and they are PNGs or WebPs, and the obvious next question is whether somebody was cutting corners.
Nobody was. The two things are built differently, and understanding why makes the format choice straightforward instead of a guess.
What an SVG actually stores
An SVG is not a picture. It is a set of instructions: draw a circle here with this radius, fill it with this colour, stroke this path with a 2px line. The browser reads those instructions and draws the result at whatever size you asked for, which is why an SVG is sharp at 16px and sharp at 1600px. There is no resolution in the file at all, only geometry.
That model is a superb fit for flat icons. A trash can is a handful of rectangles and a rounded path. Described as maths it is a few hundred bytes, it recolours with a single CSS property, and it never blurs.
What makes an icon read as 3D
Now look closely at a 3D icon and list what your eye is actually using to decide it has depth. A highlight along the top edge where a light source hits it. A soft shadow underneath that is darker directly below and fades outward. A subtle colour shift across a curved surface as it turns away from the light. Maybe a faint reflection, or the slightly translucent edge of a plastic-looking material.
Not one of those is a shape. They are the output of a renderer simulating how light behaves when it meets a surface, computed per pixel across the whole image. That is the actual difference: a flat icon is a drawing, and a 3D icon is a photograph of something that does not exist.
Why vectors cannot carry it
You can approximate some of this in SVG. Gradients give you a light-to-dark transition, and layered translucent shapes can suggest a shadow. For simple isometric illustrations that technique works well and is genuinely worth using.
It stops working when the shading is continuous rather than stepped. To reproduce a soft shadow faithfully you need a gradient mesh, and each one adds a dense block of coordinates to the file. Recreate a rendered icon that way and you routinely end up with an SVG several times larger than the PNG you were trying to replace, that renders more slowly because the browser is now solving all that geometry on every paint, and that still does not quite match the original.
At that point the vector has stopped being a vector in any useful sense. It is a raster image wearing a vector costume, and paying for the disguise.
So: PNG or WebP
Both store the image pixel by pixel, and both support transparency, which matters because an icon has to sit on whatever background you put it on. The difference is compression.
WebP compresses the same image far more efficiently than PNG. How much smaller is worth measuring rather than quoting. Taking five icons from the Thridy library and re-encoding each one both ways from identical pixels, lossless WebP came out 41% smaller than optimised PNG, ranging from 38% to 44% across the set. The figure usually quoted for lossless WebP is around 26%, but that average is drawn from photographs. Icons do better, because large flat regions and wide transparent areas are exactly what WebP compresses well. Same picture, four bytes in every ten saved, on a file type every current browser supports.
Two things are worth knowing before you switch everything over.
Use lossless WebP, not lossy. Lossy WebP is built for photographs, where a little smearing between neighbouring pixels is invisible. Icons are the opposite case: hard edges, flat regions of colour, and a transparent boundary that shows every artefact. Lossless keeps the file exact and still beats PNG comfortably.
Keep a PNG where something old is in the chain. Some email clients, a few older design tools and certain PDF pipelines still refuse WebP. That list gets shorter every year, but if your icon has to survive a trip through one of them, ship a PNG for that path and WebP everywhere else.
Export at twice the display size
Because the file has a fixed resolution, you have to decide the resolution. The rule is simple: export at twice the size you intend to display.
An icon shown at 64px should be a 128px file. Almost every phone and most laptops now have retina displays, which draw two device pixels for every CSS pixel, and an icon exported at its display size has half the detail those screens are asking for. It does not look obviously broken, it just looks slightly soft, in a way people register as cheap without being able to say why.
Going beyond 2x is usually wasted bytes. 3x has a real benefit on a handful of very high density phone screens and is hard to justify for a UI icon that occupies a small square.
The short version
SVG is not the universal right answer, it is the right answer for drawings. A 3D icon is not a drawing, so it ships as a raster file, and in 2026 that file should be a lossless WebP at twice its display size, with a PNG kept aside only for the places that still cannot read WebP.
That is not a compromise. It is the format matching what the image actually is.
Free 3D icons for this
Every icon on Thridy is free to download and use. A few that fit this piece:
- Blog Post 3D icon
- WebP File 3D icon
- Pig 3D icon
- Scarf 3D icon
- UX Designer 3D icon
- PLUS icon for UI 3D icon
Browse all 2,600+ free 3D icons or explore them by category.