[{"data":1,"prerenderedAt":74},["ShallowReactive",2],{"guides":3},[4,9,14,19,24,29,34,39,44,49,54,59,64,69],{"slug":5,"path":6,"title":7,"description":8},"use-fluent-icons-in-react","\u002Fguides\u002Fuse-fluent-icons-in-react","How to use Fluent UI System Icons in React","Install @fluentui\u002Freact-icons, pick the right component name, size and color icons, toggle filled and regular states, and keep your bundle small.",{"slug":10,"path":11,"title":12,"description":13},"use-fluent-icons-in-vue","\u002Fguides\u002Fuse-fluent-icons-in-vue","Using Fluent UI System Icons in Vue and Nuxt","Three ways to use Fluent icons in Vue 3 and Nuxt — copied SVG components, SVG files with vite-svg-loader, and on-demand icons with unplugin-icons and Iconify.",{"slug":15,"path":16,"title":17,"description":18},"use-fluent-icons-in-html-and-css","\u002Fguides\u002Fuse-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.",{"slug":20,"path":21,"title":22,"description":23},"change-svg-icon-color-and-size","\u002Fguides\u002Fchange-svg-icon-color-and-size","How to change an SVG icon's color and size","Why some SVG icons ignore CSS color, how currentColor fixes it, and the right way to resize icons without blurry edges or broken proportions.",{"slug":25,"path":26,"title":27,"description":28},"filled-vs-regular-icons","\u002Fguides\u002Ffilled-vs-regular-icons","Filled vs. regular icons: when to use which","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.",{"slug":30,"path":31,"title":32,"description":33},"accessible-icon-buttons","\u002Fguides\u002Faccessible-icon-buttons","Accessible icon buttons with SVG icons","How to label icon-only buttons, hide decorative icons from screen readers, keep touch targets large enough, and meet contrast requirements.",{"slug":35,"path":36,"title":37,"description":38},"fluent-icons-license","\u002Fguides\u002Ffluent-icons-license","Fluent icons license and commercial use","A plain-English look at the MIT License for Microsoft's Fluent UI System Icons: what it allows, what it asks of you, attribution and trademarks.",{"slug":40,"path":41,"title":42,"description":43},"fluent-icons-vs-material-symbols-vs-heroicons","\u002Fguides\u002Ffluent-icons-vs-material-symbols-vs-heroicons","Fluent vs. Material vs. Heroicons vs. Lucide","A practical comparison of four popular open-source icon sets: size, styles, licenses, framework support, and how to choose one for your project.",{"slug":45,"path":46,"title":47,"description":48},"optimize-svg-icons-for-performance","\u002Fguides\u002Foptimize-svg-icons-for-performance","Optimizing SVG icons for web performance","How to keep icons from slowing your site down: minifying SVGs, inline vs. sprite vs. external files, caching, and loading large icon sets efficiently.",{"slug":50,"path":51,"title":52,"description":53},"microsoft-icons","\u002Fmicrosoft-icons","Microsoft icons library: every official set explained","Microsoft's icon library in one place. Free Fluent UI System Icons by topic, plus Segoe Fluent Icons, Fabric MDL2, Office, Fluent Emoji and Azure icons, and how each is licensed.",{"slug":55,"path":56,"title":57,"description":58},"fluent-icon-theme","\u002Fguides\u002Ffluent-icon-theme","Fluent icon themes for Linux, VS Code and your own apps","The Fluent icon theme for Linux desktops, Fluent product icons for VS Code, and how to give your own app the Windows 11 Fluent look with Microsoft's free icons.",{"slug":60,"path":61,"title":62,"description":63},"power-bi-icons","\u002Fguides\u002Fpower-bi-icons","Power BI icons: adding Fluent icons to reports","Free icons for Power BI reports. Add Fluent icons to buttons and images, draw them with a DAX SVG measure that changes color with your data, or use them for conditional formatting.",{"slug":65,"path":66,"title":67,"description":68},"winui-icons","\u002Fguides\u002Fwinui-icons","WinUI icons: SymbolIcon, FontIcon and Fluent icons in WinUI 3","The icon elements in WinUI 3 and when to use each. SymbolIcon, FontIcon with Segoe Fluent Icons, PathIcon, and using Microsoft's Fluent UI System Icons when the system font doesn't have the icon.",{"slug":70,"path":71,"title":72,"description":73},"wpf-ui-icons","\u002Fguides\u002Fwpf-ui-icons","WPF icons: Fluent icons in WPF and WPF UI","How to use Microsoft's Fluent icons in a WPF app. SymbolIcon in the WPF UI library, the Fluent System Icons font in XAML, Segoe Fluent Icons on Windows 11, and SVG paths.",1791690003730]