How to Add SVG Icons to a Website (HTML, CSS and React)

By LinearAndLoom · 13 November 2026 · 3 min read

Four ways to put SVG icons on a web page: inline SVG, the img tag, CSS backgrounds and React components, with copy-paste code and accessibility tips.

SVG is the standard format for icons on the web. The files are tiny, they are sharp on every screen and they can take their color from your CSS. There are four common ways to use one. The right choice depends on whether you need to restyle the icon.

1. Inline SVG: the most flexible

Paste the SVG code directly into your HTML. On any icon page here, press Copy SVG and paste:

<button class="btn">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <path d="M21 21l-4.3-4.3"/><circle cx="11" cy="11" r="7"/>
  </svg>
  Search
</button>

Because the icon uses currentColor, it takes the text color of the button:

.btn { color: #111318; }
.btn:hover { color: #2b4fd8; }

Inline SVG needs no extra network request and can be styled, animated and themed for dark mode. Use it for interface icons.

2. The img tag: the simplest

Download the SVG, upload it with your site's files and reference it like any image:

<img src="/icons/mail.svg" alt="" width="24" height="24">

This keeps your HTML clean and the browser caches the file. The trade-off is that CSS cannot change the color of an icon loaded this way. Pick the color on the icon page before downloading.

Always set width and height so the page does not jump while loading.

3. CSS mask: one file, any color

A mask lets you keep the icon in a separate file and still color it with CSS:

.icon-mail {
  display: inline-block;
  width: 24px; height: 24px;
  background-color: currentColor;
  -webkit-mask: url(/icons/mail.svg) center / contain no-repeat;
          mask: url(/icons/mail.svg) center / contain no-repeat;
}

The icon shape cuts the background color, so color on the parent controls it. Use the solid or outline file as is.

4. React, Vue and other frameworks

Turn the SVG into a small component so size and color become props:

export function SearchIcon({ size = 24, ...props }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth="2"
         strokeLinecap="round" strokeLinejoin="round"
         aria-hidden="true" {...props}>
      <path d="M21 21l-4.3-4.3" /><circle cx="11" cy="11" r="7" />
    </svg>
  );
}

In JSX, attribute names with a hyphen become camelCase: stroke-width is strokeWidth, stroke-linecap is strokeLinecap.

Sizing icons

Icons here are drawn on a 24 by 24 grid. They look sharpest at multiples that keep the 2 pixel stroke on whole pixels: 24, 48, 72. Sizes such as 16, 20 and 32 also work well. To scale an icon with the text beside it, size it in em:

svg.icon { width: 1.25em; height: 1.25em; vertical-align: -0.2em; }

Make icons accessible

• Decorative icon next to text: add aria-hidden="true" so screen readers skip it. The text already says what the button does.
• Icon-only button: label the button, not the icon: <button aria-label="Search">...</button>.
• Meaningful image: for an <img>, write a short alt text. For a decorative one, use alt="".
• Touch targets: keep the clickable area at least 44 by 44 pixels, even when the icon itself is 24.

Host the files yourself

Download the icons and serve them from your own site. Linking to files on someone else's server means your page breaks if that address ever changes, and it adds an extra connection that slows the first load.

Interface icons to start with

View all 106 free Interface icons

Questions

Is inline SVG bad for page speed?

No. An icon is a few hundred bytes. Inline SVG avoids a network request per icon. If the same icon repeats dozens of times on a page, an <img> or a mask keeps the HTML smaller.

Why does my icon look blurry?

It is probably a PNG being stretched, or an SVG displayed at an odd size such as 23.5 pixels. Use the SVG and whole-number sizes.

Can I use these icons on a commercial website?

Yes. They are free for personal and commercial projects with no attribution. Read the license for the limits on redistribution.

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.