SVGPulseExporting sharp transparent PNG icons
Transparent PNG is useful when the destination cannot use editable vectors. The goal is not simply to export the largest possible image. It is to choose an appropriate resolution, preserve the intended transparency, and make sure the icon remains readable against the backgrounds where it will actually appear.
Start from the destination size
Measure the intended display box in the website, slide, or document. If an icon will appear at 32 pixels, exporting a 64-pixel version can be a reasonable starting point for a high-density display. Keep larger source artwork available for future uses. Do not repeatedly resize an already small PNG and expect it to become sharper. Return to the vector source when a different resolution is needed.
Check what is transparent
A checkerboard preview represents transparent space, but an enabled badge or background shape may be part of the artwork itself. Decide whether you want a bare symbol or an icon on a colored tile. Test the exported PNG on a white surface, a dark surface, and a colored section. This catches accidental opaque backgrounds and pale edges that were difficult to notice in the editor.
Make the stroke survive rasterization
Very thin lines can become inconsistent when converted into a small pixel grid. Preview the PNG at its actual display size, not only enlarged. If important details merge or fade, try a slightly heavier stroke or simpler icon. A complex outline that looks elegant at 128 pixels may not be appropriate for a 16-pixel toolbar. Choose the symbol and its resolution together.
Avoid unnecessary file weight
A 1024-pixel icon used in a tiny navigation button can waste bytes without improving the result. Export according to the destination's needs and compare the output file size. Keep transparency when it is required, but avoid unnecessary large shadows or oversized canvases. If the website supports SVG safely and the artwork is simple, a vector export may be a better fit for that particular use.
Deliver predictable files
Use filenames that identify the purpose and resolution, such as account-menu-64.png. State the intended display size in the handoff so a future editor does not display it at its full export dimensions. Retain the editable SVG and relevant notices in the project folder. Check the final published page, because image optimization plugins or automatic resizing can alter the asset after upload.
Plan a practical set of export sizes
Suppose an icon is displayed at 24 CSS pixels in a website toolbar and also appears at 96 pixels in a presentation. Treat those as separate destinations. You might prepare a raster export with enough pixels for the intended screen density of the toolbar, plus a larger version for the presentation. The appropriate dimensions depend on the destination and its scaling behavior; exporting everything at a huge resolution is not a substitute for checking that behavior. Put the chosen dimensions in the filename or delivery notes so that another person does not accidentally use a small toolbar asset in a large slide. Keep an editable vector source for later changes. If the artwork contains fine detail, compare a simplified version at the smaller size. More raster pixels cannot make a crowded design understandable when the final visible symbol remains tiny.
Verify the alpha channel visually
Place the exported PNG on white, dark gray, and a saturated color. These backgrounds reveal different problems: a pale fringe may disappear on white, a dark fringe may hide on gray, and an opaque rectangle becomes obvious on a colored surface. A checkerboard in an editor is a preview convention, not proof that the downloaded file contains transparency. Confirm that the pattern itself was not included in the artwork. Also distinguish transparency outside the icon from a deliberate filled badge or background shape inside it. If you want only the symbol, remove the badge in the source or export settings rather than expecting the PNG format to erase it automatically. Review edges at the final size and at moderate enlargement. Very high zoom is useful for diagnosis, but normal-size appearance is the relevant test for the person using the interface.
Avoid repeated lossy workflow decisions
PNG compression preserves the encoded pixel values, but resizing a PNG repeatedly still resamples the image. Keep the original export and generate new sizes from the editable source when practical instead of shrinking and enlarging the same raster file through several tools. If an image optimization service changes the format or palette, compare the resulting transparency and gradients before replacing the approved asset. Check the published file as well as the local one, because a content-management or delivery pipeline may generate alternate sizes. Keep filenames descriptive and remove obsolete variants from the handoff folder so the recipient can identify the approved version. Include a short note stating the intended display size and background assumptions. This turns a transparent PNG from an isolated download into an asset that can be used reliably across the destinations you actually tested.
Continue reading: Icon licensing: a practical project checklist
Try it with an icon
Browse a collection, customize an icon in the studio, and review the result in your actual project.
Browse icon collections →