Fluent UI System Icons

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.

How to use Fluent UI System Icons icons

npm install @fluentui/react-icons

import { SearchRegular, SearchFilled, HomeFilled } from '@fluentui/react-icons';

export default function App() {
  // Regular = outline, Filled = solid — pick per design state
  return <SearchRegular fontSize={24} />;
}

<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>

import { Icon } from '@iconify/react';

export default function App() {
  return <Icon icon="fluent:icon-name" width={24} />;
}

Compare Fluent UI System Icons with similar icon packs