Guides
Practical walkthroughs for using Microsoft's Fluent UI System Icons in real projects: React, Vue, plain HTML and CSS, accessibility, licensing and performance.
How to use Fluent UI System Icons in React
Install @fluentui/react-icons, pick the right component name, size and color icons, toggle filled and regular states, and keep your bundle small.
How to use 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.
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.
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.
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.
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.
Fluent UI System Icons license: can you use them commercially?
A plain-English look at the MIT License that covers Microsoft's Fluent UI System Icons — what it allows, what it asks of you, and common questions about attribution and trademarks.
Fluent icons vs. Material Symbols vs. Heroicons vs. Lucide
A practical comparison of four popular open-source icon sets — size of the set, styles, licenses, framework support — and how to choose one for your project.
Optimizing SVG icons for web performance
How to keep icons from slowing your site down — minifying SVGs, choosing between inline, sprite and external files, caching, and loading large icon sets efficiently.