ICON OOP converts any icon in the library from SVG to a transparent PNG at 1x, 2x, 4x, 8x or a custom pixel size. The conversion runs on your own device using the browser's canvas, so no file is uploaded and nothing is stored.
The one decision that matters
Export at two to three times the size you will display it. A PNG shown at 32px should be exported at 64 or 96px. Scaling a PNG up is destructive and there is no fixing it later. Scaling one down is harmless.
How to convert
- Open the tool and find the icon you want.
- Set the colour before exporting. A PNG cannot be recoloured afterwards with CSS.
- Switch the download format to PNG and pick a resolution, or type an exact pixel size.
- Download. You get a transparent PNG, ready for slides, documents or anywhere SVG is refused.
Choosing the export size
| Setting | From a 24px icon | Use it for |
|---|---|---|
| 1x | 24 by 24 | Almost never. Will look soft on any modern display |
| 2x | 48 by 48 | The practical minimum for screens |
| 4x | 96 by 96 | Safe default. Sharp on high-density displays |
| 8x | 192 by 192 | Print, large display, or when you are unsure |
| Custom | Anything | Favicons, app icons, exact platform requirements |
The reason 1x is nearly always wrong: most phones and many laptops have device pixel ratios of 2 or 3, meaning a 24 CSS pixel box is 48 or 72 physical pixels. Supply a 24px PNG and the browser stretches it, so the icon looks blurry next to crisp text.
Common exact sizes worth knowing: favicons at 32 and 180 for Apple touch icons, Android app icons at 192 and 512, and Open Graph images at 1200 by 630. The favicon guide goes through the full set.
When PNG is the right call
- Presentation software. PowerPoint and Google Slides handle SVG inconsistently across versions and platforms.
- Email. Most email clients strip SVG entirely. PNG is the only reliable option.
- Social platforms. Profile images, cover images and most upload fields reject SVG.
- App store assets and app icons. Platform requirements are PNG at specified pixel sizes.
- Older CMS and marketplace uploaders that whitelist raster formats only.
- Anywhere SVG is blocked for security reasons. SVG can contain script, so some platforms refuse it as policy. This is a legitimate concern rather than an arbitrary restriction.
What you give up
Worth being explicit, because it is easy to convert everything out of habit.
| SVG | PNG | |
|---|---|---|
| Scaling | Any size, one file | Fixed. Enlarging degrades it |
| Recolour with CSS | Yes, via currentColor | No |
| Animate | Yes | No |
| File size for a simple icon | Often under 1KB | Several KB, grows with resolution |
| Sizes needed for a responsive site | One | Two or three |
| Works everywhere | Modern browsers, not all tools | Everywhere |
For anything rendered in a browser, SVG is almost always better. Convert when the destination forces it, not by default. Fuller comparison in SVG vs PNG.
Set the colour first, not after
This is the mistake people make once. A PNG is a grid of pixels, so there is no currentColor to inherit and no CSS property that will change it. Once exported, the colour is baked in.
If you need the same icon in three colours, export it three times. If you need it to change on hover, you need two files and a swap, which is a reasonable argument for keeping it as SVG. And if you are exporting a white icon for a dark background, remember it will be invisible on the white preview in your file browser, which alarms people every time.
How the conversion actually works
Useful to understand, because it explains the failure modes. The browser loads the SVG into an image, draws it onto an HTML canvas at the target pixel dimensions, then exports the canvas as a PNG. Rasterisation happens at the size you chose, which is why choosing well matters: the vector detail is discarded at that moment.
Because it is the browser doing the drawing, the output matches what the browser renders. It also means the conversion is bounded by what canvas allows, notably that external references inside the SVG, remote fonts or remote images, will not be included.
None of this involves a server. The file never leaves your device, which matters if you are working with anything under an NDA.
Common problems
- The PNG has a white background instead of transparency. Something in the SVG has an opaque background rectangle. Remove it, or export from a source that does not include one.
- The PNG looks blurry. Exported too small and scaled up. Re-export at 2x to 4x the display size.
- The icon is invisible. It is white on a white preview. Open it against a dark background to check.
- Edges look jagged at very small sizes. Fine detail cannot survive 16 pixels. Use a simpler icon for that size rather than a smaller export of a complex one.
- Text in the SVG did not render. Canvas cannot resolve an external font. Convert text to paths before exporting.