Icon export
SVG to PNG for icons
SVG to PNG for icons works best when you choose the final pixel size first, then export with transparency and enough scale for the place where the icon will appear.
For icon work, the important choice is not the file format. It is the final size. A 24 px SVG can become a 24 px PNG, a 48 px PNG for 2x screens, or a 96 px PNG for places that need extra room. PDFSVG shows the estimated PNG size before download so you can avoid tiny, blurry exports.
Recommended icon export settings
| Use case | PNG scale | Background |
|---|---|---|
| Small UI icon | 2x or 3x | Transparent |
| Logo mark | 3x or 4x | Transparent unless the destination needs white |
| Slide or document icon | 2x | White if the app handles transparency poorly |
| App store or profile image | Export at the required pixel size | Match the platform requirement |
Keep transparent PNGs when the icon sits on color
Transparent PNG is usually the right choice for SVG icons, logos, badges, and overlays. It lets the icon sit on dark, light, or patterned backgrounds without a visible box. Use white background only when the destination app shows transparent pixels badly or when you need a simple document image.
Use scale to prevent blurry PNG icons
PNG is a fixed pixel image. If you export a 24 px PNG and display it at 48 px, the browser has to stretch pixels. Export at 2x or 3x for high density screens, then display the PNG at the intended CSS size.
Check the SVG before export
If the SVG uses external images, missing fonts, filters, masks, or CSS from another file, the PNG may not match your design tool. Preview the SVG first, then export once it looks right in the browser.
Common questions
What scale should I use for SVG icons to PNG?
Use 2x or 3x for most UI icons. Use 4x when the icon may be displayed larger or cropped by another app. Check the estimated PNG size before downloading.
Should SVG icons export as transparent PNG?
Yes for most icons, logos, badges, and overlays. Use a white background when the destination app does not display transparent pixels well.
Why does my PNG icon look blurry?
The PNG probably does not have enough pixels for its display size. Export a larger PNG, then display it at the intended CSS size.
Does SVG to PNG for icons upload my file?
The PDFSVG SVG to PNG tool runs in your browser. It renders the SVG locally and downloads the PNG without uploading the SVG file.