[{"data":1,"prerenderedAt":10},["ShallowReactive",2],{"guide-filled-vs-regular-icons":3},{"slug":4,"title":5,"description":6,"date":7,"order":8,"html":9},"filled-vs-regular-icons","Filled vs. regular icons: when to use each style","How Fluent's filled and regular icon styles differ, the patterns Microsoft uses them for, and practical rules for mixing them in your own interface.","2026-09-23",5,"\u003Cp>Most Fluent UI System Icons come in two styles. \u003Cstrong>Regular\u003C\u002Fstrong> icons are line drawings with open shapes. \u003Cstrong>Filled\u003C\u002Fstrong> icons are solid versions of the same designs. They share the same grid, proportions and silhouettes, so the question isn't which one looks better. It's what each one should \u003Cem>mean\u003C\u002Fem> in your interface.\u003C\u002Fp>\n\u003Ch2>What's the difference?\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Regular (outlined)\u003C\u002Fstrong> icons are light. They take up little visual weight, so a toolbar with ten of them still feels calm.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Filled\u003C\u002Fstrong> icons are heavy. They draw the eye, work at small sizes where thin lines get lost, and read as "on", "selected" or "important".\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Because the two styles line up almost exactly, swapping one for the other in place doesn't make anything jump around. That's what makes the patterns below possible.\u003C\u002Fp>\n\u003Ch2>Pattern 1: regular by default, filled for "selected"\u003C\u002Fh2>\n\u003Cp>This is the most common pattern in Microsoft's own products, and a safe default for yours:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Navigation items use the regular icon, and the \u003Cstrong>current\u003C\u002Fstrong> page shows the filled icon.\u003C\u002Fli>\n\u003Cli>Toggle buttons (favorite, pin, bookmark, like) show regular when off and filled when on.\u003C\u002Fli>\n\u003Cli>Tabs show regular icons, with the filled icon on the active tab.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>The change in weight gives a clear signal that doesn't depend on color alone, which matters for people with color vision deficiencies and in high-contrast modes.\u003C\u002Fp>\n\u003Ch2>Pattern 2: filled for status and small sizes\u003C\u002Fh2>\n\u003Cp>Filled icons hold up better when they're tiny or sit on a busy background:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Status indicators (a filled check-mark circle for "done", a filled warning triangle)\u003C\u002Fli>\n\u003Cli>Badges and small overlays on avatars or thumbnails\u003C\u002Fli>\n\u003Cli>Icons at 16 px or smaller, where outlines can look faint\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Pattern 3: one style throughout\u003C\u002Fh2>\n\u003Cp>Some interfaces use only one style: all regular for a minimal, content-first app, or all filled for a bold, playful one. That's fine as long as you're consistent. Mixing styles \u003Cem>without\u003C\u002Fem> a reason (filled here, regular there, for no clear purpose) makes an interface feel unfinished, because users try to read meaning into the difference.\u003C\u002Fp>\n\u003Ch2>Practical rules\u003C\u002Fh2>\n\u003Col>\n\u003Cli>\u003Cstrong>Pick a default style and write it down.\u003C\u002Fstrong> For most apps it's regular.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Use the other style only to communicate something\u003C\u002Fstrong>, such as selection, state or emphasis.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Keep the pair consistent.\u003C\u002Fstrong> If "favorite" uses Heart Regular and Heart Filled, don't switch to Star elsewhere.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Don't rely on filled vs. regular alone for critical state.\u003C\u002Fstrong> Pair it with text, \u003Ccode>aria-pressed\u003C\u002Fcode> or \u003Ccode>aria-current\u003C\u002Fcode> so assistive technology can announce it too.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Check dark mode.\u003C\u002Fstrong> Filled icons carry more visual weight on dark backgrounds, so an icon that looked balanced in light mode can feel loud in dark mode.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2>Example: a favorite toggle\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-html\"><button type="button" aria-pressed="false" class="favorite">\n  <!-- Heart Regular when off -->\n  <svg class="icon-off" …>…<\u002Fsvg>\n  <!-- Heart Filled when on -->\n  <svg class="icon-on" hidden …>…<\u002Fsvg>\n  <span>Favorite<\u002Fspan>\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre>\u003Ccode class=\"language-js\">button.addEventListener("click", () => {\n  const on = button.getAttribute("aria-pressed") !== "true";\n  button.setAttribute("aria-pressed", String(on));\n  button.querySelector(".icon-on").hidden = !on;\n  button.querySelector(".icon-off").hidden = on;\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>In React, \u003Ccode>@fluentui\u002Freact-icons\u003C\u002Fcode> has a \u003Ccode>bundleIcon\u003C\u002Fcode> helper that does this for you. See the \u003Ca href=\"\u002Fguides\u002Fuse-fluent-icons-in-react\u002F\">React guide\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch2>Finding both styles\u003C\u002Fh2>\n\u003Cp>Every icon page on this site shows the filled and regular versions side by side. You can also switch the main grid between \u003Ca href=\"\u002F\">Filled\u003C\u002Fa> and \u003Ca href=\"\u002Foutlined\u002F\">Outlined\u003C\u002Fa> while keeping your search. A small number of icons only exist in one style. Their pages say so.\u003C\u002Fp>\n",1790223026594]