Exporting an SVG icon to PNG at every size

An icon drawn as SVG is exact at every size. The platforms mostly want PNGs, so the last step of every icon job is conversion. Done well, every size is crisp; done badly, you get blurry small icons and missing gradients.

Render each size from the SVG

Do not export one 1024 PNG and shrink it. Render each size from the vector, so edges land on whole pixels at that size. The four reliable ways:

sharp, in Node

import sharp from "sharp";
for (const size of [1024, 512, 192, 180]) {
  await sharp("icon.svg", { density: 384 })
    .resize(size, size)
    .png()
    .toFile(`icon-${size}.png`);
}

rsvg-convert, on the command line

rsvg-convert -w 1024 -h 1024 icon.svg -o icon-1024.png

Inkscape

inkscape icon.svg --export-width=1024 --export-filename=icon-1024.png

Headless Chrome

Open the SVG in a page sized to the icon and take a screenshot. Slower, but it renders filters, blend modes and web fonts exactly as a browser does, which the others sometimes do not.

Settings that matter

• Flatten for iOS. Remove the alpha channel on the App Store icon; see iOS icons and transparency.
• Keep alpha for macOS and Android foregrounds. Those need transparency.
• Convert text to paths before exporting, or fonts may not render.
• Check the smallest sizes by eye. Some icons need a simpler version below 32 pixels.

For the list of sizes to render, see app icon sizes.

App Icon Foundry handles this with no packages to install: it uses sharp if your project has it, rsvg-convert, or Chrome for PNGs, and without any of them you still get every SVG.