SVG vs PNG vs JPG vs PDF: Which Icon Format Should You Use?
A plain guide to icon file formats. When to use SVG, PNG, JPG or PDF for websites, apps, slides, social posts, print and cutting machines.
Every icon on this site downloads in four formats. They look the same on screen, but they behave very differently once you resize them, place them on a colored background or send them to a printer.
The short answer
- SVG for websites, apps, design tools and cutting machines.
- PNG when a tool does not accept SVG and you need a transparent background.
- JPG when the tool accepts nothing else and a white background is fine.
- PDF for print shops and page layout software.
SVG: the one to use when you can
An SVG stores the icon as shapes, not pixels. It stays sharp at any size, from a 16 pixel button to a banner. The file is tiny, usually under one kilobyte for an icon, and you can change its color and line thickness after downloading.
Use SVG in HTML and CSS, Figma, Illustrator, Inkscape, Canva, PowerPoint, Word and Cricut Design Space.
Its one weakness is support. Google Slides, Google Docs and many social and email tools will not accept an SVG upload.
PNG: transparent and accepted almost everywhere
A PNG is a grid of pixels with a transparent background, so the icon sits cleanly on any color. Nearly every program opens it.
The catch is size. A PNG has a fixed number of pixels, and stretching it makes it blurry. Export it at the size you need or larger. On each icon page you can choose from 32 to 1024 pixels. If you are unsure, take 512 and scale it down.
Use PNG for Google Slides and Docs, email, messaging apps, social media posts and older software.
JPG: only when you must
A JPG has no transparency. The icon comes on a solid white rectangle, and the format slightly softens sharp edges. For icons it is the weakest choice.
It exists here because some upload forms, marketplaces and printing kiosks accept only JPG. Use it on white backgrounds and export it large.
PDF: for print
The PDF download is a vector file, like the SVG, so it prints sharply at any size. Printers and layout programs such as InDesign, Affinity Publisher and Keynote handle PDF more reliably than SVG.
Use PDF for flyers, menus, signs, packaging and anything you hand to a print shop.
Quick comparison
- Stays sharp when enlarged: SVG yes, PDF yes, PNG no, JPG no.
- Transparent background: SVG yes, PDF yes, PNG yes, JPG no.
- Color can be changed later: SVG easily, PDF in a vector editor, PNG and JPG not easily.
- Works in Google Slides and Docs: PNG and JPG only.
- Works on a cutting machine: SVG.
Outline or solid?
Format and style are separate choices. Each icon here comes as an outline and a matching solid version. Outline icons stay light and suit menus and lists. Solid icons read better at very small sizes and are the right choice for cutting machines. There is more on this in outline vs solid icons.
Questions
Which format is best for a website?
SVG. It is the smallest file, it is sharp on every screen and it can take its color from your CSS. See how to add SVG icons to a website.
What size PNG should I download?
Take at least twice the size it will be shown at, so it stays sharp on high resolution screens. For a 64 pixel icon on a slide, download 128 or 256. The icon sizes guide lists common sizes.
Can I turn a PNG back into an SVG?
Not cleanly. Tracing software can guess the shapes, but the result is rougher than the original. Download the SVG instead. It is free for every icon here.
Every icon on this site is free to download. If this guide helped, you can say thanks by buying a pack from the LinearAndLoom Etsy shop.
