fluentui-system-icons README

The project's README from github.com/microsoft/fluentui-system-icons. As one markdown file: README.md.

Fluent UI System Icons

Pull request validation

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

Fluent System Icons

Icon List

Direction

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:

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

Installation

Android

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.341@aar'

For library docs, see android/README.md.

iOS and macOS

CocoaPods

use_frameworks!

pod "FluentIcons", "1.1.341"

Carthage

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

For library docs, see ios/README.md.

Flutter

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

dependencies:
  ...
  fluentui_system_icons: ^1.1.341

For library docs, see flutter/README.md.

Plain svg

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

Contributing

Importer

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

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

Demo apps

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

Android

  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

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

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

Code of Conduct

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.

fluentui-system-icons (microsoft/fluentui-system-icons)

Searching Database…

10.9K ·GitHub
Fluentui-system-icons
What is this?Fluent UI System Icons is Microsoft's open collection of familiar, friendly and modern icons, shipped as ready-made packages for Android, iOS/macOS and Flutter, plus plain SVG files.
Is this one icon pack or a separate library for each platform?One shared set of icons, but you consume it as separate packages: a Maven library for Android, pods via CocoaPods or Carthage for iOS and macOS, a Flutter package, and raw SVG files.
How do I add the icons to my app?Depends on the platform: include the dependency in your Android build.gradle (published on Maven Central), install the pod with CocoaPods or Carthage on iOS/macOS, add it to pubspec.yaml in Flutter, or inline the SVGs directly.
Do the icons work in right-to-left languages?Yes, and each icon declares how: metadata.json has a directionType where 'unique' means dedicated RTL and LTR versions, 'mirror' means the icon is simply flipped, and a singleton property sets the default direction.
Do the libraries cover the web too, or just mobile and desktop apps?The native packages target Android, iOS and macOS, the Flutter package runs wherever Flutter does, and outside any package manager you can inline the raw SVGs in anything, including web pages.
What styles do the icons come in?Two variants: regular and filled, with a browsable full list of each style linked in the README.
Can I try the icons before adding them to my app?Yes — the repo ships demo apps. Build the Android one with yarn deploy:android and run the sample-showcase in Android Studio, or open and run the Flutter example.
How are the Android and iOS libraries produced from the icon artwork?A yarn-workspace importer generates them from the icons in the assets directory, and CI runs deploy:android and deploy:ios, with build definitions in .github/workflows/.
What are similar projects?material-design-icons, react-native-ui-kitten, fluentui, Best-Flutter-UI-Templates, simple-icons, heroicons, MaterialDesign, Font-Awesome
Which topics is it in?fluent, icon-pack, icons, android-library, flutter, design-system, microsoft, svg, design, swift, html, mobile
Creator
microsoft
Size
870.4 MB
Stars
10.9K
Updated
CommitOct 09
Age
6y
Commits · 90 Days