NewEvery size, Color & Light styles, code for 8 platforms

Fluent Icons

Open source icons by Microsoft. Viewer by Colton Griffith

NOT AFFILIATED WITH MICROSOFT, IN ANY WAY

Star us on Github

Featured project

Free Fluent UI System Icons, ready to drop into your project

Fluent UI System Icons are the icons Microsoft designed for its Fluent design system — the same family you see across Windows 11, Microsoft 365 and Teams. Microsoft publishes them as open source under the MIT License. Fluenticons puts the whole set in one searchable place: more than 3,000+ designs, most of them in both a filled and a regular (outlined) style, for over 5,900+ icons in the grid — and 20,000+ size and style variants on the icon pages.

Microsoft ships the icons as a large repository, a Figma file and several code packages. That's fine when you already know an icon's exact name. When you're hunting for "the calendar with a check mark" it's slow. This site is built for that: type what you're looking for, see every match at once, and copy the exact code you need.

What's new

Every size and style. Each icon page now has all of Microsoft's hand-tuned sizes (10 to 48 px) plus the Color and Light styles where they exist, each ready to download as SVG or PNG.
Code for your platform. Copy-ready snippets for React, Blazor, Flutter, WinUI and WPF, Android, iOS, the icon font and the SVG package — with the exact name for the size you picked.
Power Apps. Copy any icon as a Power Fx formula for an Image control, from the editor or an icon page.
Browse by topic. 301 topics such as arrows, charts and security, and a page of new icons from each Microsoft release (with an RSS feed).

How to use Fluenticons

Search. Type a name or an idea — "arrow", "delete", "flame", "weather". Search covers icon names and Microsoft's own keywords, so "trash" finds Delete. Press / anywhere to jump to the search box.
Preview. Click an icon to open it in the editor. Try it in any color, or apply a linear or radial gradient, to see how it looks next to your design.
Copy or download. Copy the icon as raw SVG, an HTML image, a Vue component, a React component or a CSS background. You can also download it as SVG, PNG (512 px), WEBP or a component file. Every icon also has its own page with ready-to-paste code.
Collect. Heart the icons you need. Your favorites are saved in your browser, and you can download them all at once as a ZIP.

Filled or regular?

Both styles share the same 24 px grid and outer shapes, so you can mix them freely. A common pattern in Microsoft's own apps is regular icons for navigation and toolbars, and the filled version to show an active or selected state — a regular heart that becomes filled once you've favorited something. The filled vs. regular guide covers when to use each.

Using the icons in code

For React apps, Microsoft's @fluentui/react-icons package ships every icon as a tree-shakable component. Each icon page on this site shows the exact import name. For anything else — plain HTML, Vue, Svelte, email templates, native apps — copy the SVG. The paths use a single fill color, so you can recolor them with currentColor or CSS. The guides walk through React, Vue, HTML and CSS setups step by step.

Frequently asked questions

Are these icons free for commercial use?

Yes. Microsoft releases Fluent UI System Icons under the MIT License, which allows commercial and personal use, modification and redistribution. The license asks that you keep Microsoft's copyright and permission notice with copies of the icons — most teams add it to their third-party notices. See the license page for the full text.

Is Fluenticons made by Microsoft?

No. Fluenticons is an independent, free viewer for the open-source icon set. It isn't affiliated with or endorsed by Microsoft. The icons themselves are Microsoft's work.

What size are the icons?

The grid shows the 24 px versions, the size most apps use for toolbar and navigation icons. Microsoft also draws many icons at other sizes (such as 16, 20, 28, 32 and 48 px), tuned so they stay crisp at that size. Each icon page lists every size and lets you download any of them. SVGs scale cleanly, and PNG downloads are rendered at 512 px.

How do I change an icon's color?

Pick a color in the editor before you copy or download it. In your own code, set the SVG's fill to currentColor and the icon will follow the surrounding text color — the color and size guide shows how.

Why can't I find an icon I've seen in a Microsoft app?

Some icons in Microsoft products are product-specific and aren't part of the open-source set. Try searching for what the icon means rather than what it looks like — Microsoft tags each icon with keywords such as "trash" for Delete. You can also browse every icon A–Z.