Using Fluent icons in plain HTML and CSS

You don't need a framework to use Fluent UI System Icons. Each icon is a small, single-color SVG, and HTML and CSS give you four ways to put one on a page. They differ in one important way: whether you can change the icon's color with CSS.

Technique	Recolor with CSS	Cached separately	Best for
Inline <svg>	Yes	No	Interactive UI, buttons
<img src>	No	Yes	Static, decorative icons
CSS background-image	No	Yes (if external)	Decorative UI, pseudo-elements
CSS mask-image	Yes	Yes	Lists of icons, theming

1. Inline SVG

Paste the SVG markup straight into your HTML. On Fluenticons, click an icon and choose SVG in the copy menu.

<button type="button" class="icon-button">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="…" fill="currentColor" />
  </svg>
  Delete
</button>

Two details matter:

• fill="currentColor" makes the icon use the element's text color, so .icon-button:hover { color: #d13438; } recolors both the text and the icon.
• viewBox="0 0 24 24" has to stay. Change width and height (or use CSS) to resize; the viewBox keeps the drawing scaled correctly.

Inline SVG is the most flexible option, but the markup is repeated every time you use the icon.

2. The img tag

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

This is the simplest option, and the browser caches the file. The downside is that you can't restyle an SVG loaded through <img>: it keeps the fill color it was saved with. Download the icon in the color you need, or use a different technique when the color must change (dark mode, hover states).

Set alt="" when the icon is decorative. If the icon is the only content of a link or button, give it a meaningful alt instead.

3. CSS background-image

.file-row::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url("/icons/ic_fluent_document_24_regular.svg") center / contain no-repeat;
}

Background images keep your HTML clean and work well for decorative icons in pseudo-elements. You can also embed the SVG as a data URL to avoid an extra request. The Fluenticons editor has a CSS Background copy option that produces this for you:

background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22…");

Like <img>, a background image keeps its original color.

4. CSS mask-image: color with CSS, cached like an image

A CSS mask uses the icon's shape as a stencil. Whatever sits behind it — usually background-color: currentColor — shows through:

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

<span class="icon" style="--icon: url('/icons/ic_fluent_delete_24_regular.svg')"></span>

Now the icon follows the text color like inline SVG does, and the file is cached like an image. It's how this site draws its icon grid, so thousands of icons don't have to be inlined into the page. Keep the -webkit- prefixed property for older Safari versions.

Masks use only the icon's shape, so multi-color icons become a single color. That's fine for Fluent's regular and filled styles, which are single-color by design.

Which should you use?

• Buttons, menus, anything interactive: inline SVG, or a mask if you have many.
• Long lists or grids of icons: mask-image.
• Decorative icons in content: <img> with alt="".
• Icons generated by CSS (list bullets, pseudo-elements): background-image, or a mask if it needs theming.

For more on recoloring and resizing, see How to change an SVG icon's color and size.