# Fluent UI System Icons: Microsoft's Icon Library for Android, iOS, Flutter, and Web

> Fluent UI System Icons is Microsoft's open-source icon collection providing regular, filled, color, and light variants for use in Android, iOS, macOS, Flutter, and web projects. The library is distributed through platform-specific package managers and carries RTL-aware direction metadata for each icon.

**microsoft/fluentui-system-icons** — Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.

- Repository: https://github.com/microsoft/fluentui-system-icons
- Website: https://aka.ms/fluentui-system-icons
- Stars: 10,869 · Forks: 808
- Language: HTML
- License: MIT
- Published: 2026-09-21 · Updated: 2026-09-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/microsoft-fluentui-system-icons

## What Fluent UI System Icons provides and who uses it

Fluent UI System Icons is a collection of icons designed to match Microsoft's Fluent design language: familiar shapes, a friendly tone, and a modern visual style. The collection is structured for use in applications across Android, iOS, macOS, Flutter, and web, with each platform served by its own package format.

The primary audience is engineers building applications on Microsoft's platforms (Windows, Xbox, Teams, Office applications, or Azure portal) and developers who want their apps to align with Microsoft's design conventions. The icons are also used in cross-platform applications where consistency with Windows UI is a design requirement.

The collection includes four stylistic variants: regular (outline), filled, color, and light. The full lists of regular and filled icons are documented in icons_regular.md and icons_filled.md at the repository root. The coverage is broad: communication, navigation, media, file types, status indicators, and controls.

The repository contains the source SVG assets in the assets/ directory, platform libraries in android/, ios/, and flutter/, and a web package in packages/svg-icons/.

## RTL support and the directionType metadata

Many icons have a directionality to their visual meaning. An arrow pointing forward means something different in left-to-right layouts than in right-to-left layouts. Fluent UI System Icons addresses this through per-icon metadata in each icon's metadata.json file.

The directionType property takes one of two values. 'unique' means the icon has a specific RTL version and a specific LTR version, and both must be maintained separately. 'mirror' means the icon can be horizontally flipped for RTL without a separate design. The singleton property indicates the default direction.

This metadata is used by the platform libraries to serve the correct icon variant automatically when the application locale is RTL. For web usage with plain SVGs, the application must read the directionType and apply CSS transforms or serve the correct file.

For UI engineers working on applications that support Arabic, Hebrew, or other RTL languages, checking the directionType for each icon is necessary before assuming that flipping works correctly. Icons with directionType 'unique' require both design variants to be correct, which means custom icon additions must account for RTL from the start.

## Installing the library on Android, iOS, and Flutter

Each platform uses its own package manager. For Android, the library is published on Maven Central. Add the repository to the root build.gradle:

```groovy
repositories {
    ...
    mavenCentral()
}
```

Then add the dependency:

```groovy
implementation 'com.microsoft.design:fluent-system-icons:1.1.343@aar'
```

For iOS and macOS with CocoaPods:

```ruby
use_frameworks!

pod "FluentIcons", "1.1.343"
```

For iOS and macOS with Carthage:

```bash
git "git@github.com:microsoft/fluentui-system-icons.git" "1.1.343"
```

For Flutter, add to pubspec.yaml:

```yaml
dependencies:
  ...
  fluentui_system_icons: ^1.1.343
```

The version 1.1.343 in these examples reflects what is documented in the README. The current published version on each platform's registry may be higher. Platform-specific documentation is in android/README.md, ios/README.md, and flutter/README.md.

For web use with inline SVG, the packages/svg-icons/ directory provides SVG files and documentation.

## Building the platform libraries from source

The repository uses an importer tool that generates the Android and iOS libraries from the SVG assets in the assets/ directory. This build path is used by the project's CI pipeline and by contributors who add or modify icons.

The first step is installing dependencies from the repository root. The repository is a single Yarn workspace:

```
corepack enable
yarn install
```

The importer directory contains the generator scripts. Enter it and clean the output:

```
cd importer
yarn clean
```

List available commands:

```
yarn run
```

The build pipeline runs `deploy:android` and `deploy:ios` to create the platform libraries. These commands are defined in the importer's package.json. The Node.js version requirement is >=22 or >=24, as specified in the repository root package.json.

To build and run the Android demo app, run `yarn deploy:android` from the importer, then open the android/ directory in Android Studio and run the `sample-showcase` configuration. For Flutter, open the flutter/example directory in Android Studio and run it.

## Icon counts, categories, and the web package

The collection is organized into icon sets: regular, filled, color, and light. The regular and filled sets are the primary variants; color and light are additional styles documented in icons_color.md and icons_light.md.

For web usage, the packages/ directory contains package-specific builds. The svg-icons package at packages/svg-icons/README.md documents how to use the SVGs inline. The repository also includes a packages/react-icons directory structure visible in the top-level entries, though specific documentation for the React package would be in that subdirectory.

The importer generates platform libraries from SVG source, which means the Android and iOS libraries track the source SVGs. New icons added to assets/ can be incorporated into the libraries by running the build pipeline. The build definitions live in .github/workflows/.

The fonts/ directory in the repository contains icon fonts, which is an alternative distribution format for some platforms and web contexts where icon fonts are preferred over SVG files.

## Fluent UI System Icons versus Material Design Icons

Material Design Icons from Google is the closest direct comparison: a large, open-source icon set distributed across Android, iOS, Flutter, and web with multiple weight variants and RTL support. Material Design Icons is designed to align with Google's Material Design system, while Fluent UI System Icons aligns with Microsoft's Fluent design language.

The visual difference is substantial. Material icons tend toward geometric simplicity with thin strokes; Fluent icons lean toward rounded shapes and a more approachable aesthetic. Applications built for Android on Material Design 3 would typically use Material icons. Applications built for Windows, Teams, or other Microsoft surfaces would use Fluent icons for consistency.

Both collections are MIT licensed, actively maintained, and available on the same package registries. The choice is primarily a design decision about which system the application is targeting, not a technical one.

## License, maintenance, and contribution

Fluent UI System Icons is MIT licensed. The license file and NOTICE file are both present in the repository root. The MIT license permits commercial and private use, modification, and distribution.

The last push was on 2026-09-23. The repository is not archived. There are no GitHub releases; the version is tracked through the package version numbers in the platform packages (currently 1.1.343 in the README examples).

Contributions follow the standard GitHub pull request flow. Design questions go to three named maintainers (Jason Custer, Spencer Nelson, Joe Woodward) and platform-specific questions have designated contacts: Nick Romano for iOS, Will Hou for Android, and Akashdeep Singh for Flutter. The project has adopted the Microsoft Open Source Code of Conduct.

## Conclusion

Fluent UI System Icons is the right choice for teams building on Microsoft's design system who need a consistent icon set across Android, iOS, Flutter, and web surfaces. Teams not aligned with Microsoft's Fluent design language should evaluate Material Design Icons from Google, which targets the same platforms with a different visual style. Before integrating, check the directionType metadata in the icon's metadata.json: icons with directionType 'unique' have distinct RTL and LTR variants that must be handled explicitly, while icons with 'mirror' can be flipped programmatically. The library version in the README examples is 1.1.343; use the current published version from each platform's package registry.

## FAQ

### What platforms does Fluent UI System Icons support?

The library provides packages for Android (Maven Central), iOS and macOS (CocoaPods and Carthage), Flutter (pub.dev), and plain SVG for web. Each platform has separate installation documentation in its own README subdirectory.

### How does the directionType property work in Fluent UI System Icons?

Each icon's metadata.json includes a directionType set to 'unique' (the icon has distinct RTL and LTR versions) or 'mirror' (the icon can be horizontally flipped for RTL). The singleton property indicates the default direction. Platform libraries use this metadata to serve the correct variant automatically.

### How do I build the Android or iOS library from source?

Run `corepack enable` and `yarn install` from the repository root to install dependencies, then enter the importer directory and run `yarn deploy:android` or `yarn deploy:ios`. The Node.js version must be 22 or 24.

## Sources

- [Issues](https://github.com/microsoft/fluentui-system-icons/issues)
- [License: MIT](https://github.com/microsoft/fluentui-system-icons/blob/main/LICENSE)
- [microsoft/fluentui-system-icons on GitHub](https://github.com/microsoft/fluentui-system-icons)
- [Project website](https://aka.ms/fluentui-system-icons)
- [README](https://github.com/microsoft/fluentui-system-icons/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/microsoft-fluentui-system-icons