SVG vs icon font vs PNG icons: which should you use?

Use SVG for almost every icon on the web. In the SVG vs icon font debate the font lost years ago, and PNG is for the few places that cannot take a vector. The reasons are practical, and they are worth knowing before you inherit a project that still uses a font.

Why is SVG the default choice for icons?

SVG is a drawing described in text, so the browser renders it fresh at whatever size you ask for. Four things follow from that.

• Sharp at any size. The same file is crisp at 16 px and on a 4K display.
• Coloured with CSS. Set fill or stroke to currentColor and the icon takes the text colour. Hover, focus and dark mode need no extra files.
• Accessible. You can mark an icon as decorative or give it a name, and assistive technology sees what you decided.
• Only what you use. The page carries the icons it shows and nothing else.

Here is a real UIX icon, search, as inline SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10.5a7 7 0 1 0 14 0 7 7 0 1 0-14 0m12 5 5 5"/></svg>

It is one element, there is no request, and it inherits the colour of the button it sits in.

What goes wrong with an icon font?

An icon font treats a picture as a letter. That choice causes most of its problems.

A font ships every glyph in the set, so a page that shows six icons still downloads all of them. While the font loads, the browser may show empty boxes or a blank space, so buttons jump when the icons arrive. The glyphs live in a private-use area of Unicode, and some screen readers announce them as odd characters unless you hide them.

Icons also become text. Font smoothing can make them look slightly heavier or lighter on different systems, and you get one colour only. A two-tone icon is not possible without stacking two glyphs.

<i class="icon icon-search"></i>

That one-liner is the font's real appeal: it is short. It is also why fonts linger in old themes and CMS templates.

When is an icon font still fine?

When you already have one and changing it costs more than it saves. A legacy template with hundreds of class names and no build step can keep its font until someone touches the area for another reason.

For a new project, there is no good reason to start with one.

When should you use PNG icons?

When the place that shows the icon cannot render SVG. The main cases:

• Email. Support for SVG in email clients is patchy, so a PNG is the safe choice.
• App store and social images. Listings, share cards and open graph images are raster files.
• Old or restricted systems. Some embedded viewers and document tools only take bitmaps.

If you need PNG, export it from the SVG at the exact sizes you will use, plus a double-size version for high-density screens. Do not enlarge a small PNG. It will blur.

Does it matter for performance?

Yes, in a small way. Inline SVG adds bytes to the HTML but removes a request. A font is one cached file, but it is large and blocks the icons until it arrives. A sprite or per-icon files split the difference, which is the subject of the later post on SVG sprite vs inline SVG.

Do not try to win a benchmark. Pick the format by the job, and then keep each SVG small.

How do I get SVG versions of my icons?

Open the icon browser, find the icon and copy it as SVG. It works in the three free styles with no account. If you need to adjust a shape first, Studio is a free editor in the browser that exports SVG.

To pick the right size for what you copy, read the UI icon size guide. If you are still deciding what to pull from, what is an icon library lists the checks worth making.

Questions

Are SVG icons better than icon fonts?

For almost every use, yes. SVG is sharper, easier to colour, easier to make accessible and loads only the icons a page needs.

Do icon fonts hurt accessibility?

They can. Glyphs in a private-use area may be read aloud as meaningless characters, so you have to hide each one from assistive technology. Inline SVG with aria-hidden for decorative icons is simpler to get right.

Can I use SVG icons in email?

Not reliably. Support varies by client, so use a PNG exported from the SVG at the size you need.

Are SVG icons slower than PNG?

For simple icons the difference is negligible. An SVG icon is often smaller in bytes than the PNG of the same icon, and it needs no extra sizes for high-density screens.