fluentui-system-icons Documentation

Technical Documentation: microsoft/fluentui-system-icons

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (README.md) Copy Section

Fluent UI System Icons

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

Icon List Copy Chapter

• View the full list of regular icons

• View the full list of filled icons

Direction Copy Chapter

Within the metadata.json file for an icon, a property named directionType is used to indicate the direction of the icon. This property can have one of the following values:

• unique, meaning that the icon is unique and has a specific RTL and LTR version
• mirror, meaning that the icon can be mirrored for RTL or LTR languages

The property singleton is also used to indicate the default direction that should be used for the icon.

Installation Copy Chapter

Android Copy Section

The library is published via Maven Central, please ensure that the mavenCentral() repository has been added to the root build.gradle file:

repositories {
    ...
    mavenCentral()
}

Include the following dependency in your project's build.gradle:

implementation 'com.microsoft.design:fluent-system-icons:1.1.345@aar'

For library docs, see android/README.md.

iOS and macOS Copy Section

CocoaPods

use_frameworks!

pod "FluentIcons", "1.1.345"

Carthage

git "[email protected]:microsoft/fluentui-system-icons.git" "1.1.345"

For library docs, see ios/README.md.

Flutter Copy Section

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  fluentui_system_icons: ^1.1.345

For library docs, see flutter/README.md.

Plain svg Copy Section

Inline svg directly. See packages/svg-icons/README.md.

Contributing Copy Chapter

Asset metadata Copy Section

For groups with an assets/<group>/metadata.json file, keep its size and style
arrays in sync with the SVG files in that group's SVG/ directory. These arrays
describe the sets of available sizes and styles, not every size/style combination.
Directional _ltr and _rtl suffixes do not introduce separate styles.

Check all existing metadata files locally:

yarn nx run system-icons-processing:check:assets-metadata

To reconcile only the size/style arrays with the SVG filenames:

yarn nx run system-icons-processing:check:assets-metadata --fix --skip-nx-cache

Review the changes before committing. The checker does not infer descriptions or
directionality and explicitly skips groups without metadata; those remain a
separate data-completeness task. PR CI runs the check (and its regression tests,
via dependsOn) through nx affected; the target declares assets/** as an
input, so asset changes both select it and invalidate its cache.

Importer Copy Section

The importer generates the Android and iOS libraries from the icons in the assets directory.

Install dependencies from the repository root (this is a single yarn workspace, so
dependencies for every package are installed in one go):

corepack enable
yarn install

Jump into the directory:

cd importer
yarn clean

List all the available commands:

yarn run

Build Pipeline Copy Section

Our build pipeline runs deploy:android and deploy:ios to create the libraries. The build definitions are located in .github/workflows/.

Demo apps Copy Chapter

You can build and run the demo apps following the steps below.

Android Copy Section

1. Follow the Importer section above and run the command yarn deploy:android
2. Open the android directory in Android Studio
3. Select the sample-showcase in the build configuration dropdown
4. Click run

Flutter Copy Section

Prerequisite: Make sure you have flutter configured in Android Studio

1. Open the flutter directory in Android Studio
2. Select the example in the directory and open it in Android Studio
3. Click run

Contact Copy Chapter

Please feel free to open a GitHub issue and assign to the following points of contact with questions or requests.

• Jason Custer(@jasoncuster) / Spencer Nelson(@spencer-nelson) / Joe Woodward(@thewoodpecker) - Design
• Nick Romano(@rickromano) - iOS
• Will Hou(@willhou) - Android
• Akashdeep Singh(@aakash1313) - Flutter

Code of Conduct Copy Chapter

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

--- METRICS ---

• Files Extracted: 1
• Estimated Token Budget: ~1214 tokens
• Canonical Reference: https://codewiki.google/github.com/microsoft/fluentui-system-icons