When you download an icon you usually get a choice: SVG or PNG. They are not interchangeable, and picking the wrong one is the most common reason an icon looks blurry or behaves oddly. This guide explains the difference in plain terms and gives you a clear rule for choosing.
The core difference
A PNG is made of pixels - a fixed grid of coloured dots, like a photograph. A 200-pixel PNG has exactly 200 pixels of detail. Stretch it larger and the browser has to invent the missing dots, which makes it look soft and blurry.
An SVG is different. It does not store pixels at all. It stores instructions - “draw a line from here to here, curve it like this.” The browser follows those instructions fresh every time it draws the icon, at whatever size is needed. That is why an SVG stays perfectly sharp at any size, from a tiny 16-pixel button to a giant banner.
The one-sentence summary
SVG is a set of drawing instructions that stays sharp at any size; PNG is a fixed grid of pixels that only looks perfect at the size it was made.
Side by side
| Quality | SVG | PNG |
|---|---|---|
| Stays sharp at any size | Yes | No |
| File size for a simple icon | Very small | Larger |
| Can be recoloured with code | Yes | No |
| Supports transparency | Yes | Yes |
| Good for photographs | No | Yes |
| Works everywhere with no effort | Mostly | Yes |
When to choose SVG
Choose SVG for almost anything that is a drawn shape rather than a photograph:
- Icons and logos on a website or in an app.
- Anything that needs to look crisp on high-resolution screens.
- Any icon you might want to recolour, resize or animate later.
- Interface elements where small file size and sharpness both matter.
When to choose PNG
Choose PNG when SVG is not practical:
- You are placing the icon somewhere that does not accept SVG files - many email clients, some older document tools, and certain social media uploads.
- You need a quick image for a slide deck, a printed handout or a thumbnail.
- The artwork is a photograph or has complex shading, which SVG is not designed for.
This is why ICON OOP lets you export both. You can download an icon as SVG for your website, and the same icon as a transparent PNG at 2x or 4x resolution for a presentation - whichever the job needs.
A quick note on PNG resolution
If you do need a PNG, export it at a higher resolution than the size you will display it. A PNG meant to appear at 100 pixels looks much crisper on modern screens if you export it at 200 or 400 pixels. In ICON OOP this is the 2x, 4x and 8x option. It costs a slightly larger file, but the sharpness is worth it.
Ready to use your file? See how to use SVG icons on a website.