Fluent UI System Icons Icons
Browse 18648 free Fluent UI System Icons SVG icons. Download SVG, copy as JSX, PNG or Base64. MIT licensed. Designed by Microsoft Corporation. Styles: Precise Shapes, Has Padding.
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-icons
and 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.313
Color Support
Monochrome
Category
UI Other / Mixed Grid
In 4 collections
How to use Fluent UI System Icons icons
Icon Set Version
v1.1.313
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 May 12, 2026
@fluentui/react-icons
Fluent System Icons are a collection of familiar, friendly, and modern icons from Microsoft.
License
MIT
Weekly downloads
502.5K
Monthly downloads
2M
Total downloads
21.1M
Unpacked size
116 MB
Last published
May 8, 2026
Registry updated
May 8, 2026
Compare Fluent UI System Icons with similar icon packs
Frequently Asked Questions
npm install @fluentui/react-icons, then: import { SearchRegular } from "@fluentui/react-icons";. The package is tree-shakeable — only imported icons are bundled.