Toggle menu
Fluent UI System IconsIcons
Browse Microsoft's Fluent icons in one grid: Regular and Filled at every size. Copy SVG or JSX, download PNG. MIT licensed and free for commercial use.
Most popular Fluent UI System Icons icons
What visitors download and copy most from this pack, last 30 days
- 1
arrow-growth-20-regular - 2
people-team-20-regular - 3
phone-32-regular - 4
arrow-growth-20-filled - 5
checkmark-24-filled
Recently added in Fluent UI System Icons
24 icons added on 19 October 2026. See every pack's latest additions
circle-multiple-concentric-dashes-16-filled
circle-multiple-concentric-dashes-20-filled
circle-multiple-concentric-dashes-24-filled
circle-multiple-concentric-dashes-28-filled
circle-multiple-concentric-dashes-32-filled
circle-multiple-concentric-dashes-48-filled
layout-infographic-two-sparkle-16-filled
layout-infographic-two-sparkle-20-filled
plug-puzzle-16-filled
plug-puzzle-20-filled
plug-puzzle-24-filled
plug-puzzle-32-filled
Showing 12 of 24 new icons. Search the browser above to find the rest.
Copy & download Fluent UI System Icons icons
Click any icon above to open the detail panel. Four export formats are available instantly, no sign-up required.
Raw vector markup. Paste directly into HTML or React components. Scales to any size without quality loss.
React-ready component. Drop into any React or Next.js project. Works with shadcn/ui, Radix, and Tailwind CSS.
Raster export at 1×, 2× and 3× for email templates, Figma imports, app assets, and Open Graph images.
Inline data URI, embed icons in CSS background-image, email HTML, or anywhere an image URL is needed.
Works with shadcn/ui
Copy the JSX format and paste directly into any shadcn/ui component. Alternatively, install@fluentui/react-iconsand use via @iconify/react, fully tree-shakeable, no icon font loading required.
About Fluent UI System Icons
Fluent Icons is the official icon system of Microsoft 365 and Windows 11, used across Teams, Outlook, Word, Excel, Edge, and the full Microsoft product suite. With 4,300+ icons in Regular and Filled variants at precisely optimised 12, 16, 20, 24, 28, 32, and 48px grid sizes, Fluent is one of the most comprehensively size-engineered icon libraries in the open-source space, each icon is drawn for its target size, not scaled from a master. MIT licensed. The tree-shakeable React package (@fluentui/react-icons) supports every icon and variant. Search Fluent Icons SVG, copy to clipboard, export as JSX, and download PNG on AllSVGIcons. Fluent's rounded, approachable aesthetic suits enterprise SaaS, productivity software, collaboration tools, and any product aiming for a polished professional feel aligned with the Microsoft Fluent Design System. Compared with Material Symbols: Fluent provides static SVGs with explicit size variants rather than a variable font approach, giving precise per-size rendering control.
Created By
License
Features & Tags
Pack Details
Version
1.1.344
Color Support
Monochrome
Category
UI Other / Mixed Grid
How to use Fluent UI System Icons icons
Icon Set Version
v1.1.344
Package
@fluentui/react-icons
License SPDX
MIT
Sample Icons
zoom-out-24-filled, drink-coffee-24-regular, photo-filter-24-regular
Install
npm install @fluentui/react-iconsReact
import { SearchRegular, SearchFilled, HomeFilled } from '@fluentui/react-icons';
export default function App() {
// Regular = outline, Filled = solid: pick per design state
return <SearchRegular fontSize={24} />;
}Via Iconify · HTML
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent:icon-name" width="24"></iconify-icon>Via Iconify · any framework
import { Icon } from '@iconify/react';
export default function App() {
return <Icon icon="fluent:icon-name" width={24} />;
}Package stats
Build-time npm metadata cached weekly • Last refresh Oct 18, 2026
@fluentui/react-icons
Fluent System Icons are a collection of familiar, friendly, and modern icons from Microsoft.
License
MIT
Weekly downloads
372.3K
Monthly downloads
3.2M
Total downloads
31.2M
Unpacked size
166 MB
Last published
Oct 9, 2026
Registry updated
Oct 9, 2026
Fluent UI System Icons version history
Based on the last 10 releases, Fluent UI System Icons typically ships a new version every ~5 days. The latest release, v2.0.344, landed on Oct 9, 2026.
| Version | Released |
|---|---|
| v2.0.344 | Oct 9, 2026 |
| v2.0.343 | Sep 25, 2026 |
| v2.0.342 | Sep 25, 2026 |
| v2.0.341 | Sep 11, 2026 |
| v2.0.340 | Sep 10, 2026 |
| v2.0.339 | Aug 26, 2026 |
| v2.0.338 | Aug 21, 2026 |
| v2.0.337 | Aug 13, 2026 |
| v2.0.336 | Aug 12, 2026 |
| v2.0.335 | Aug 7, 2026 |
| v2.0.334 | Jul 24, 2026 |
| v2.0.333 | Jul 10, 2026 |
| v2.0.332 | Jul 7, 2026 |
| v2.0.331 | Jun 26, 2026 |
| v2.0.330 | Jun 12, 2026 |
| v2.0.329 | Jun 9, 2026 |
| v2.0.328 | May 22, 2026 |
| v2.0.327 | May 20, 2026 |
| v2.0.326 | May 8, 2026 |
| v2.0.325 | Apr 24, 2026 |
Source: npm registry data for @fluentui/react-icons, refreshed weekly.
Compare Fluent UI System Icons with similar icon packs
Frequently Asked Questions
How do I use Fluent UI icons in React?
npm install @fluentui/react-icons, then: import { SearchRegular } from "@fluentui/react-icons";. The package is tree-shakeable: only imported icons are bundled.