[{"data":1,"prerenderedAt":10},["ShallowReactive",2],{"guide-use-fluent-icons-in-html-and-css":3},{"slug":4,"title":5,"description":6,"date":7,"order":8,"html":9},"use-fluent-icons-in-html-and-css","Using Fluent icons in plain HTML and CSS","Inline SVG, img tags, CSS background images and CSS masks — when to use each technique for Fluent UI System Icons, with copy-paste examples.","2026-09-23",3,"\u003Cp>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: \u003Cstrong>whether you can change the icon's color with CSS\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Technique\u003C\u002Fth>\n\u003Cth>Recolor with CSS\u003C\u002Fth>\n\u003Cth>Cached separately\u003C\u002Fth>\n\u003Cth>Best for\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Inline \u003Ccode><svg>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Yes\u003C\u002Ftd>\n\u003Ctd>No\u003C\u002Ftd>\n\u003Ctd>Interactive UI, buttons\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode><img src>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>No\u003C\u002Ftd>\n\u003Ctd>Yes\u003C\u002Ftd>\n\u003Ctd>Static, decorative icons\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>CSS \u003Ccode>background-image\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>No\u003C\u002Ftd>\n\u003Ctd>Yes (if external)\u003C\u002Ftd>\n\u003Ctd>Decorative UI, pseudo-elements\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>CSS \u003Ccode>mask-image\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Yes\u003C\u002Ftd>\n\u003Ctd>Yes\u003C\u002Ftd>\n\u003Ctd>Lists of icons, theming\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch2>1. Inline SVG\u003C\u002Fh2>\n\u003Cp>Paste the SVG markup straight into your HTML. On Fluenticons, click an icon and choose \u003Cstrong>SVG\u003C\u002Fstrong> in the copy menu.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><button type="button" class="icon-button">\n  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">\n    <path d="…" fill="currentColor" \u002F>\n  <\u002Fsvg>\n  Delete\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Two details matter:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>\u003Ccode>fill="currentColor"\u003C\u002Fcode>\u003C\u002Fstrong> makes the icon use the element's text color, so \u003Ccode>.icon-button:hover { color: #d13438; }\u003C\u002Fcode> recolors both the text and the icon.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ccode>viewBox="0 0 24 24"\u003C\u002Fcode>\u003C\u002Fstrong> has to stay. Change \u003Ccode>width\u003C\u002Fcode> and \u003Ccode>height\u003C\u002Fcode> (or use CSS) to resize; the viewBox keeps the drawing scaled correctly.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Inline SVG is the most flexible option, but the markup is repeated every time you use the icon.\u003C\u002Fp>\n\u003Ch2>2. The img tag\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-html\"><img src="\u002Ficons\u002Fic_fluent_delete_24_regular.svg" width="24" height="24" alt="">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>This is the simplest option, and the browser caches the file. The downside is that you can't restyle an SVG loaded through \u003Ccode><img>\u003C\u002Fcode>: 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).\u003C\u002Fp>\n\u003Cp>Set \u003Ccode>alt=""\u003C\u002Fcode> when the icon is decorative. If the icon is the only content of a link or button, give it a meaningful \u003Ccode>alt\u003C\u002Fcode> instead.\u003C\u002Fp>\n\u003Ch2>3. CSS background-image\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-css\">.file-row::before {\n  content: "";\n  width: 20px;\n  height: 20px;\n  background: url("\u002Ficons\u002Fic_fluent_document_24_regular.svg") center \u002F contain no-repeat;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>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 \u003Cstrong>CSS Background\u003C\u002Fstrong> copy option that produces this for you:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">background-image: url("data:image\u002Fsvg+xml,%3Csvg%20width%3D%2224%22…");\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Like \u003Ccode><img>\u003C\u002Fcode>, a background image keeps its original color.\u003C\u002Fp>\n\u003Ch2>4. CSS mask-image: color with CSS, cached like an image\u003C\u002Fh2>\n\u003Cp>A CSS mask uses the icon's shape as a stencil. Whatever sits behind it — usually \u003Ccode>background-color: currentColor\u003C\u002Fcode> — shows through:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">.icon {\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-color: currentColor;\n  mask: var(--icon) center \u002F contain no-repeat;\n  -webkit-mask: var(--icon) center \u002F contain no-repeat;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre>\u003Ccode class=\"language-html\"><span class="icon" style="--icon: url('\u002Ficons\u002Fic_fluent_delete_24_regular.svg')"><\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>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 \u003Ccode>-webkit-\u003C\u002Fcode> prefixed property for older Safari versions.\u003C\u002Fp>\n\u003Cp>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.\u003C\u002Fp>\n\u003Ch2>Which should you use?\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Buttons, menus, anything interactive:\u003C\u002Fstrong> inline SVG, or a mask if you have many.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Long lists or grids of icons:\u003C\u002Fstrong> mask-image.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Decorative icons in content:\u003C\u002Fstrong> \u003Ccode><img>\u003C\u002Fcode> with \u003Ccode>alt=""\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Icons generated by CSS (list bullets, pseudo-elements):\u003C\u002Fstrong> background-image, or a mask if it needs theming.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>For more on recoloring and resizing, see \u003Ca href=\"\u002Fguides\u002Fchange-svg-icon-color-and-size\u002F\">How to change an SVG icon's color and size\u003C\u002Fa>.\u003C\u002Fp>\n",1790215639586]