microsoft/fluentui-system-icons

★ 10,542HTMLAudience · designerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((fluentui-system-icons))
    What It Does
      Official Microsoft icons
      Regular and filled styles
      RTL direction support
    Platforms
      Android package
      iOS and macOS
      Flutter package
      Raw SVG for web
    Icon Categories
      Navigation icons
      File and folder icons
      People and settings
    Audience
      App developers
      Designers

mindmap root((fluentui-system-icons)) What It Does Official Microsoft icons Regular and filled styles RTL direction support Platforms Android package iOS and macOS Flutter package Raw SVG for web Icon Categories Navigation icons File and folder icons People and settings Audience App developers Designers

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a consistent set of professionally designed icons to an Android or iOS app without designing them yourself.

USE CASE 2

Use official Microsoft Fluent icons in a Flutter app by adding the ready-made pub.dev package.

USE CASE 3

Embed SVG icon files directly in a web project to match Microsoft's design language for a business tool.

USE CASE 4

Build an app that supports Arabic or Hebrew using directional icon variants that flip correctly for right-to-left layouts.

Tech stack

SVGAndroidiOSFlutterHTML

Getting it running

Difficulty · easy Time to first run · 5min

Open source and maintained by Microsoft, use freely in your apps following the package license terms.

In plain English

Fluent UI System Icons is Microsoft's official collection of icons used across their products and design system. The icons are described as familiar, friendly, and modern, and they come in two visual styles: regular (outline) and filled (solid). The full list runs to hundreds of individual icons covering common interface concepts like navigation, files, settings, people, and notifications. The collection is packaged for several different development platforms so that app builders can add these icons to their projects without converting image files by hand. There are ready-made libraries for Android apps, iOS and macOS apps, and Flutter apps, each available through their respective standard package managers. If none of those fit, the raw SVG files are also available to embed directly in HTML or web projects. One detail the repository calls out is directional support. Some icons look different depending on whether the interface reads left-to-right or right-to-left. The icon metadata marks each icon as either unique (with separate versions for each direction) or mirrored (where the same shape just flips horizontally for the other direction). This matters for apps that support Arabic, Hebrew, or other right-to-left languages. The project is open source and maintained by Microsoft's design and platform engineering teams. Contributors who want to add or update icons work through an importer tool that generates the Android and iOS library files from source assets. A build pipeline runs automatically on pull requests to validate changes.

Copy-paste prompts

Prompt 1

How do I add the Fluent UI System Icons package to my Android project and display a settings icon in my app?

Prompt 2

I am building a Flutter app. Show me how to install fluentui-system-icons and display a filled notification bell icon.

Prompt 3

Which Fluent UI icon SVG should I use for a file-upload button? How do I embed it in my HTML page?

Prompt 4

My app supports Arabic. How do I use the directional variants in fluentui-system-icons so icons mirror correctly for RTL text layouts?

Open on GitHub → Explain another repo

← microsoft on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.