SVG vs PNG for icons: which should you use?
For interface icons, SVG wins almost every time: it's sharper, smaller and recolorable. PNG still has its place for complex, photo-like imagery. Here's how to choose.
Head-to-head
| SVG | PNG | |
|---|---|---|
| Scaling | Infinite, always sharp | Fixed; blurs when enlarged |
| File size (icons) | Usually smaller | Larger, and you need multiple sizes |
| Recolor with CSS | Yes | No (baked-in pixels) |
| Animation | Yes (CSS/SMIL/JS) | No (except APNG) |
| Retina / HiDPI | Free | Needs @2x, @3x exports |
| Best for | Icons, logos, line art | Photos, complex textures |
When PNG still makes sense
Reach for PNG when an image has photographic detail, soft gradients across many colours, or effects that don't translate to clean vector shapes. Some legacy email clients also handle PNG more reliably than SVG.
The practical answer
Ship your icons as SVG and let CSS handle colour and size. Only fall back to PNG where you genuinely need raster — and even then, export the PNG from the SVG so you keep a single source of truth. IconStash lets you download either format from the same icon.
Grab icons in SVG or PNG
Search 311,000+ icons, recolor them, and export SVG or PNG in one click — free.
Browse icons →Frequently asked questions
Which is smaller, SVG or PNG?
For flat icons, SVG is almost always smaller — and one SVG replaces the multiple PNG sizes you'd otherwise export.
Can I convert PNG to SVG?
You can trace a PNG into SVG, but the result is only as clean as the tracing. It's far better to start from a real vector icon.
Does SVG work in email?
Support is patchy in email clients, so PNG is the safer choice for HTML email.