Fluent UI System Icons: Modern, Cross-Platform Icons from Microsoft

Introduction

Fluent UI System Icons is a comprehensive collection of familiar, friendly, and modern icons from Microsoft, designed to provide a consistent visual language across various platforms. This repository serves as the central hub for these high-quality icons, offering them in both regular and filled styles. It also details how icons handle directionality (RTL/LTR) through directionType and singleton properties, ensuring proper display in diverse language contexts.

Installation

Integrating Fluent UI System Icons into your projects is straightforward, with support for major development environments.

Android

To include the library in your Android project, ensure mavenCentral() is added to your root build.gradle file:

repositories {
    // ...
    mavenCentral()
}

Then, add the following dependency to your project's build.gradle:

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

For detailed documentation, refer to the Android README.

iOS and macOS

CocoaPods

Add the following to your Podfile:

use_frameworks!

pod "FluentIcons", "1.1.325"

Carthage

Include this in your Cartfile:

git "git@github.com:microsoft/fluentui-system-icons.git" "1.1.325"

For detailed documentation, refer to the iOS README.

Flutter

Add the dependency to your pubspec.yaml file:

dependencies:
  # ...
  fluentui_system_icons: ^1.1.325

For detailed documentation, refer to the Flutter README.

Plain SVG

You can also use the icons directly as inline SVG. More information is available in the SVG Icons README.

Examples

The repository includes demo applications for both Android and Flutter, allowing you to see the icons in action and understand their implementation.

Android Demo

1. Follow the Importer section in the repository's README and run npm run deploy:android.
2. Open the android directory in Android Studio.
3. Select sample-showcase in the build configuration dropdown.
4. Click run to launch the demo.

Flutter Demo

1. Open the flutter directory in Android Studio.
2. Select the example project within the directory and open it.
3. Click run to launch the demo.

Why Use Fluent UI System Icons?

Choosing Fluent UI System Icons brings several advantages to your projects:

• Modern and Consistent Design: Leverage a visually appealing and unified icon set from Microsoft, ensuring a polished look across your applications.
• Cross-Platform Compatibility: Seamlessly integrate icons into Android, iOS, Flutter, and web projects using SVG, maintaining consistency regardless of the platform.
• Developer-Friendly: With clear installation guides and demo applications, getting started and implementing these icons is straightforward for developers.
• Open Source: Benefit from an actively maintained open-source project under the MIT License, providing flexibility and community support.

Links

• GitHub Repository: microsoft/fluentui-system-icons
• Full List of Regular Icons: View Regular Icons
• Full List of Filled Icons: View Filled Icons
• Android Library Docs: android/README.md
• iOS Library Docs: ios/README.md
• Flutter Library Docs: flutter/README.md
• SVG Icons Docs: packages/svg-icons/README.md