design basics, explained
SVG vs PNG icons: which one should you use?
SVG stays sharp at any size and changes colour easily. PNG works almost everywhere. Here is a plain-English guide to picking the right file for websites, slides, docs and email.
- Use SVG whenever your app accepts it: websites, PowerPoint, Word, Canva, Figma and newer Keynote. It stays sharp at every size and you can change its colour.
- Use PNG where SVG is not supported: Google Slides, Google Docs, Notion and email. Download it at least twice the size you will show it.
- An SVG is a recipe of shapes, so the computer redraws it perfectly at any size. A PNG is a fixed grid of pixels, so it goes blurry when you stretch it.
- For a single small icon, the file size difference is tiny. At big sizes, SVG wins easily: our home icon is about 0.4 KB as SVG and about 11.5 KB as a 512 px PNG.
- Icon fonts are an older trick. Today SVG is the better choice for most projects.
On this page 10 sections
If an icon will live on a website, in PowerPoint, Word, Canva or Figma, use SVG. It stays razor sharp at every size, it is tiny, and you can change its colour later. If the app does not accept SVG, like Google Slides, Google Docs or an email, use a PNG and download it at least twice as big as you need.
That is the whole answer in two sentences. The rest of this guide explains why, in plain words, with pictures and a table you can come back to whenever you are not sure which file to grab.
What is the difference between SVG and PNG?
Both are image files, but they store the picture in completely different ways.
- An SVG is a recipe. It says things like “draw a line from here to there, 1.75 units thick, with round ends”. When you show it, your computer follows the recipe and draws it fresh, at whatever size you need. SVG stands for Scalable Vector Graphics.
- A PNG is a mosaic. It stores a fixed grid of tiny coloured squares called pixels. A 64 px PNG is 64 squares wide and 64 squares tall, no more. PNG stands for Portable Network Graphics.
Both can have a transparent background, which matters for icons: you want the icon, not a white box around it. JPG cannot do that, which is why it is a poor choice for icons.
Why do PNG icons go blurry?
Because a mosaic cannot grow new tiles. If you take a 24 px PNG and stretch it to 96 px, every pixel just gets four times bigger, and the edges turn soft and smudgy. An SVG has no such limit: ask for 96 px and it simply redraws the shapes at 96 px.
There is a second, sneakier cause of blur: sharp screens. Phones, tablets and many laptops pack two or three real pixels into every “point” you see. Apple, for example, asks app makers for images at 2x and 3x for exactly this reason. A PNG made at exactly the size you show it can look a bit soft on those screens. An SVG never has this problem.
Which is smaller, SVG or PNG?
For icons, SVG is usually smaller, and it stays the same size no matter how big you show it. We measured a few with icons files to give you real numbers (PNGs exported straight from our renderer, without extra compression):
| Icon file | Size on disk |
|---|---|
| Home icon, line style, SVG (any display size) | 367 bytes (about 0.4 KB) |
| Home icon, line style, PNG at 24 px | about 0.6 KB |
| Home icon, line style, PNG at 48 px | about 1.1 KB |
| Home icon, line style, PNG at 512 px | about 11.5 KB |
To be honest, for one tiny icon the difference does not matter much: both are a fraction of a single photo. It matters when you have dozens of icons on a page, or when you need big, sharp icons for slides and print. That is where one 0.4 KB SVG beats a pile of large PNGs.
Decorative styles have more shapes, so their SVGs are bigger. Our gloss and sketch icons are roughly 1 to 1.5 KB each, still small.
- 0.4 KB
- line SVG at any size
- 11.5 KB
- same icon as a 512 px PNG
- 2x
- the PNG size you should download
- 3
- PNG sizes on every icon page
Can you change the colour of SVG and PNG icons?
SVG: yes, easily
An SVG’s colour is just a setting in the recipe, so you can change it any time. On a website, with icons SVGs use a colour called currentColor, which means “use the same colour as the text around me”. Make your link blue and the icon turns blue too. In PowerPoint and Word (Microsoft 365, 2019 and later) you can select an SVG and pick a new fill colour, and even break it into separate shapes. Canva and Figma let you recolour SVGs as well.
PNG: choose before you download
A PNG’s colour is painted into its pixels. Some apps offer a “recolour” option, but the results are hit and miss. The easiest fix is to choose the colour first: every icon page in with icons has a colour picker, so the PNG you download is already the colour you want.
Where can you use SVG, and where do you need PNG?
Here is the decision table. It reflects what each app accepted when we checked in October 2026.
| Where the icon goes | SVG | PNG | Our pick |
|---|---|---|---|
| Websites and web apps | Yes | Yes | SVG |
| PowerPoint (Microsoft 365, 2019+) | Yes, recolourable | Yes | SVG (guide) |
| Word (Microsoft 365, 2019+) | Yes, recolourable | Yes | SVG (guide) |
| Keynote | Newer versions | Yes | SVG if it works, else PNG 1024 px (guide) |
| Canva | Yes, upload it | Yes | SVG (guide) |
| Figma | Paste or drop it | Yes | SVG (guide) |
| Google Slides | Not accepted | Yes | PNG 256 px (guide) |
| Google Docs | Not accepted | Yes | PNG 256 px (guide) |
| Notion | Varies | Yes | PNG (guide) |
| Email and email signatures | Patchy support | Yes | PNG 64 px (guide) |
What size PNG should you download?
Use the “twice as big” rule: download a PNG at least twice the size you will show it. If the icon will appear at 32 px, grab a 64 px file. Showing it at 128 px on a slide? Get 256 px. Extra pixels never hurt an icon; missing pixels always do.
- 1Open the icon page
Find your icon in the library, for example by typing “calendar” or “money”.
- 2Choose style and colour
Pick one of the 20 styles and your colour. The PNG will be made in that colour.
- 3Pick a size
Choose 64 px for email and small spots, 256 px for slides and docs, or 1024 px for big slides and print.
- 4Download or copy
Click PNG download, or use Copy image to paste it straight into your slide.
For a deeper look at sizes, including slides and print, see our guide to icon sizes.
What about icon fonts?
An icon font is a font where each letter is secretly a picture. You load the font, type a special code, and a house or a heart appears. It was a clever trick in the early 2010s, and some big icon sets still offer one.
Today most teams prefer SVG, for a few practical reasons. Icon fonts can only be one colour. They are drawn like text, so they can look slightly blurry. And if the font fails to load, or someone uses their own font for easier reading, the icons can turn into empty boxes. GitHub described exactly these problems in 2016 when it moved its own icons from a font to SVG.
with icons does not ship an icon font. Developers can still use simple class names like <i class="with with-home">, but under the hood they are drawn with SVG. (Load them from npm or the jsDelivr CDN, or copy the SVG code from any icon page. Our guide to adding icons to a website walks through it.)
When is PNG actually the better choice?
SVG wins most of the time, but PNG is the right answer in a few real situations:
- The app does not accept SVG. Google Slides, Google Docs and most email apps.
- You want it to look identical everywhere. A PNG is a finished picture, so no app can draw it differently.
- You are sharing with people who will not edit it. A PNG opens in any image viewer, chat app or document.
- Someone else’s system blocks SVG uploads. WordPress, for example, blocks SVG uploads by default for safety, so a PNG is simpler there (or paste the SVG as code).
Use SVG on websites and in PowerPoint, Word, Canva and Figma. Use PNG for Google Slides, Docs and email, downloaded at twice the display size.
Take a tiny 24 px PNG and stretch it across a slide. It will look blurry on the big screen, and everyone in the room will see it.
The bottom line
SVG is the modern default for icons: sharp at any size, light, and easy to recolour. PNG is the reliable backup for apps that cannot handle SVG. Every icon in with icons comes in both, with copy and download buttons on every page, so you never have to convert anything yourself.
Frequently asked questions
Is SVG or PNG better for icons?
SVG is better for icons in most cases, because it stays sharp at any size, is usually smaller, and is easy to recolour. Use PNG only where SVG is not accepted, such as Google Slides, Google Docs and email.
Why do my PNG icons look blurry?
Usually because the PNG is smaller than the space it is shown in, so the app stretches the pixels. Modern screens also pack two or three real pixels into each “point”. Download the PNG at least twice the size you need, or use an SVG.
Can I use SVG icons in Google Slides?
Not directly. Google Slides does not accept SVG uploads, so download a PNG instead. A 256 px PNG is plenty for normal slide icons; choose 1024 px if the icon will fill a big part of the slide.
Can I change the colour of a PNG icon?
Only roughly. The colour is baked into the pixels. The easiest way is to choose your colour before you download. With an SVG you can recolour the icon later in apps like PowerPoint, Word, Canva and Figma.
Should I use SVG icons in email?
Use PNG for email and email signatures. Support for SVG images varies between email apps, and Gmail, the biggest one, only partly supports them. A small PNG works everywhere.
Are icon fonts still a good idea?
They still work, but most teams now prefer SVG. SVG icons can have more than one colour, look sharper, and do not turn into empty boxes when a font fails to load.
Sources and notes
- Microsoft Support: Edit SVG images in Microsoft 365
- Apple Human Interface Guidelines: Images (scale factors and vector formats)
- Can I email: SVG images
- Google Docs Editors Help: Insert or delete images
- GitHub blog: Delivering Octicons with SVG (2016)
- with icons app guides (which file to use in each app)
Facts about other icon sets were checked against their official sites in October 2026. Libraries change, so check the links above for the latest numbers.