SVG vs PNG icons: which should you use?

SVG scales infinitely and can be recolored with CSS; PNG is a fixed bitmap that works everywhere. Here’s how to pick.

Choose SVG when…

• The icon appears at several sizes

• You want to recolor it with CSS (fill: currentColor)

• File size matters — most UI icons are under 1 KB as SVG

Choose PNG when…

• The destination doesn’t accept SVG (some email clients, older office apps)

• You need a fixed raster for app stores or social cards

Tip

Export PNG at 2× the display size for crisp results on high-density screens. The IconVaults editor exports up to 1024px.

Get it as an icon

Recolor, resize and export this icon as SVG or PNG — free.

Open in editor