Fluent UI System Icons Icons

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.

19,719 icons MIT UI Other / Mixed Grid by Microsoft Corporation
Search icons...

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. 1 flow-dot-20-regular
  2. 2 flow-dot-24-regular
  3. 3 brain-28-filled
  4. 4 flow-24-regular
  5. 5 flow-32-regular
  6. 6 flow-dot-16-regular
  7. 7 flow-dot-24-filled
  8. 8 lottery-20-filled
  9. 9 sport-16-filled

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.

SVG

Raw vector markup. Paste directly into HTML or React components. Scales to any size without quality loss.

JSX / TSX

React-ready component. Drop into any React or Next.js project. Works with shadcn/ui, Radix, and Tailwind CSS.

PNG

Raster export at 1×, 2× and 3× for email templates, Figma imports, app assets, and Open Graph images.

Base64

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

Microsoft Corporation Visit Website

License

MIT View License

Features & Tags

Precise Shapes Has Padding

Pack Details

Version

1.1.337

v1.1.337

Color Support

Monochrome

Category

UI Other / Mixed Grid

In 4 collections

Communication & Messaging Transport & Vehicle Education & Learning Accessibility

How to use Fluent UI System Icons icons

Icon Set Version

v1.1.337

Package

@fluentui/react-icons

License SPDX

MIT

Sample Icons

zoom-out-24-filled, drink-coffee-24-regular, photo-filter-24-regular

Install

bash 
npm install @fluentui/react-icons

React

tsx 
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

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

tsx 
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 Aug 13, 2026

@fluentui/react-icons

Fluent System Icons are a collection of familiar, friendly, and modern icons from Microsoft.

v2.0.336
Score 20%
Popularity 6%
Quality 20%
Maintenance 33%

License

MIT

Weekly downloads

616.2K

Monthly downloads

2.4M

Total downloads

27.5M

Unpacked size

165 MB

Last published

Aug 12, 2026

Registry updated

Aug 12, 2026

npm Repository Homepage

Fluent UI System Icons version history

Based on the last 10 releases, Fluent UI System Icons typically ships a new version every ~2 weeks. The latest release, v2.0.337, landed on Aug 13, 2026.

Version Released
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
v2.0.323 Mar 27, 2026
v2.0.322 Mar 24, 2026
v2.0.321 Mar 13, 2026
v2.0.320 Feb 27, 2026
v2.0.319 Feb 13, 2026
v2.0.318 Feb 2, 2026

Source: npm registry data for @fluentui/react-icons, refreshed weekly.

Compare Fluent UI System Icons with similar icon packs

Material Symbols IBM Carbon Icons Material Design Icons

Frequently Asked Questions

How do I use Fluent UI icons in React?
Install npm install @fluentui/react-icons, then: import { SearchRegular } from "@fluentui/react-icons";. The package is tree-shakeable: only imported icons are bundled.
What sizes are available in Fluent Icons?
Fluent Icons are pixel-grid-optimised at 12, 16, 20, 24, 28, 32, and 48px. Most are available in Regular and Filled variants.
Where are Fluent Icons used by Microsoft?
Fluent Icons are the icon foundation of Microsoft 365 products: Teams, Outlook, Word, Excel, Edge, and the Windows 11 UI.
How many icons are in Fluent UI System Icons?
Fluent UI System Icons contains 19,719 SVG icons in the UI Other / Mixed Grid category.
How often is Fluent UI System Icons updated?
Based on the last 10 releases, Fluent UI System Icons typically ships a new version every ~2 weeks. The latest release, v2.0.337, landed on Aug 13, 2026. See the full version history below.