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.
More SVG Icons
access-time-20-filled
access-time-20-regular
access-time-24-filled
access-time-24-regular
accessibility-16-filled
accessibility-16-regular
accessibility-20-filled
accessibility-20-regular
accessibility-24-filled
accessibility-24-regular
accessibility-28-filled
accessibility-28-regular
accessibility-32-filled
accessibility-32-regular
accessibility-48-filled
accessibility-48-regular
accessibility-checkmark-20-filled
accessibility-checkmark-20-regular
accessibility-checkmark-24-filled
accessibility-checkmark-24-regular
accessibility-checkmark-28-filled
accessibility-checkmark-28-regular
accessibility-checkmark-32-filled
accessibility-checkmark-32-light
accessibility-checkmark-32-regular
accessibility-checkmark-48-filled
accessibility-checkmark-48-regular
accessibility-error-20-filled
accessibility-error-20-regular
accessibility-error-24-filled
accessibility-error-24-regular
accessibility-more-16-filled
accessibility-more-16-regular
accessibility-more-20-filled
accessibility-more-20-regular
accessibility-more-24-filled
accessibility-more-24-regular
accessibility-question-mark-20-filled
accessibility-question-mark-20-regular
accessibility-question-mark-24-filled
accessibility-question-mark-24-regular
add-12-filled
add-12-regular
add-16-filled
add-16-regular
add-20-filled
add-20-regular
add-24-filled
add-24-regular
add-28-filled
add-28-regular
add-32-filled
add-32-light
add-32-regular
add-48-filled
add-48-regular
add-circle-12-filled
add-circle-12-regular
add-circle-16-filled
add-circle-16-regular
add-circle-20-filled
add-circle-20-regular
add-circle-24-filled
add-circle-24-regular
add-circle-28-filled
add-circle-28-regular
add-circle-32-filled
add-circle-32-regular
add-circle-48-filled
add-circle-48-regular
add-square-16-filled
add-square-16-regular
Most popular Fluent UI System Icons icons
What visitors download and copy most from this pack, last 30 days
- 1
access-time-20-filled - 2
handshake-24-filled - 3
form-20-regular - 4
drink-wine-16-filled - 5
brain-circuit-48-regular - 6
weather-sunny-20-regular - 7
clothes-hanger-16-filled - 8
handshake-32-filled - 9
text-proofing-tools-abc-16-regular - 10
handshake-20-filled - 11
math-formula-16-regular - 12
person-info-16-regular - 13
split-hint-20-filled - 14
clothes-hanger-20-regular - 15
people-team-24-filled - 16
access-time-24-regular - 17
weather-sunny-48-regular - 18
chat-16-filled - 19
chat-help-24-regular - 20
iot-20-regular
Recently added in Fluent UI System Icons
26 icons added on 27 September 2026. See every pack's latest additions
autopilot-24-filled
autopilot-28-filled
autopilot-32-filled
circle-image-off-20-filled
keyboard-mouse-20-filled
keyboard-mouse-off-20-filled
pivot-16-filled
rename-a-16-filled
rename-a-24-filled
rename-a-28-filled
text-collapse-16-filled
text-collapse-28-filled
text-collapse-32-filled
Showing 13 of 26 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.343
Color Support
Monochrome
Category
UI Other / Mixed Grid
How to use Fluent UI System Icons icons
Icon Set Version
v1.1.343
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 Sep 27, 2026
@fluentui/react-icons
Fluent System Icons are a collection of familiar, friendly, and modern icons from Microsoft.
License
MIT
Weekly downloads
695.3K
Monthly downloads
2.7M
Total downloads
27.5M
Unpacked size
166 MB
Last published
Sep 25, 2026
Registry updated
Sep 25, 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.343, landed on Sep 25, 2026.
| Version | Released |
|---|---|
| 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 |
| v2.0.324 | Apr 13, 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.