How to add SVG icons to your website (HTML, CSS and WordPress)

SVG is the best format for icons on the web. The file is tiny, it stays sharp on every screen, and you can change its colour and size with a line of CSS. This guide shows three ways to use an SVG icon downloaded from our site, and when to pick each one.

All examples use the Download SVG or Copy SVG buttons on any icon page.

Option 1: paste the SVG code inline

Click Copy SVG on an icon page and paste the code straight into your HTML:

<button class="btn">
  <svg viewBox="…" width="24" height="24" fill="none"
       stroke="#000000" stroke-width="…" stroke-linecap="round"
       stroke-linejoin="round" aria-hidden="true">…</svg>
  Add to cart
</button>

Inline SVG is the most flexible option because CSS can reach inside the icon. To make the icon follow the text colour of its parent, replace the colour in stroke="#000000" with stroke="currentColor":

.btn { color: #1d4ed8; }       /* the icon turns blue with the text */
.btn:hover { color: #1e3a8a; } /* and darker on hover */

Use inline SVG when the icon is part of your interface (buttons, menus, navigation) and needs hover states or theme colours.

Option 2: use an img tag

Download the SVG file, upload it with your other images, and reference it like any picture:

<img src="/images/piggy-bank.svg" width="48" height="48" alt="Savings account">

This keeps your HTML short, and the browser caches the file. The trade-off: CSS can't change the colour of an SVG loaded through img, so set the colour on our site before you download.

Use img when the icon is decorative content, such as a feature list on a landing page, and its colour never changes.

Option 3: use it as a CSS background or mask

For icons that appear in many places through CSS (list bullets, input decorations), use the file as a mask so you can still colour it:

.check-list li::before {
  content: "";
  width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: url(/images/check.svg) center / contain no-repeat;
          mask: url(/images/check.svg) center / contain no-repeat;
}

The mask uses the shape of the icon, and background decides its colour.

Changing size and line thickness

An SVG scales to any size: change width and height, or set them in CSS. One thing to know: line thickness scales with the icon. A line that looks right at 64 px looks thin at 16 px.

That's why every icon page on our site has a Stroke slider. Pick a heavier stroke for small icons and a lighter one for large icons, then download. Our stroke weight guide has a table of recommended values for common sizes.

Using SVG icons in WordPress

WordPress blocks SVG uploads to the Media Library by default, because an SVG file can contain code. You have three options:

• Paste inline code into a Custom HTML block. This needs no plugin and works with Copy SVG.
• Use PNG instead. Download PNG at 2× the size you need (for example 128 px for a 64 px icon) so it stays sharp on high-resolution screens.
• Install a plugin that sanitises SVG uploads, such as Safe SVG, if you want SVG files in the Media Library.

Only upload SVG files from sources you trust. Every file on our site is a plain line drawing with no scripts.

Accessibility: decorative or meaningful?

Decide what each icon does:

• Decorative (next to a text label, like the cart icon in "Add to cart"): add aria-hidden="true" to the svg tag so screen readers skip it.
• Meaningful on its own (an icon-only button): label the button, not the icon.

<button aria-label="Search">
  <svg aria-hidden="true" …>…</svg>
</button>

For img tags, write alt text that describes the meaning ("Savings account"), not the drawing ("pink pig").

Quick reference

Ready to try it? Pick any icon, for example the piggy bank, set your stroke and colour, and copy the code.