microsoft / fluentui-system-icons

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

Fluent UI System Icons

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

Icon List

• View the full list of regular icons

• View the full list of filled icons

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:

• 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

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

For library docs, see android/README.md.

iOS and macOS

CocoaPods

use_frameworks!

pod "FluentIcons", "1.1.235"

Carthage

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

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.235

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.

Jump into the directory:

cd importer

Install npm dependencies:

npm install
npm run clean

List all the available commands:

npm 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 npm run 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.

• 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

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's Issues

Flutter support

How can i integrate with existing flutter project?

Play icon is optically misaligned

While play icon is technically centered within its canvas, it does appear optically misaligned because of its shape:

While this can be easily worked around I feel like this should be fixed in the resources itself, even if it’s kind of a breaking change.

Are we going to see a good web interface?

Hey, it's a great work. Are we going to see a web interface where people can find the icons they need, instead of getting them all.
It would be alot more helpful and easy to manage, and are you also planning for web fonts?

load font icon in cdn

hi
please add font icon cdn url

Inconsistency with Regular/Filled icons that have a pen

Hi. This is the first time posting an issue for me, and I am very new to open source communities, so please correct me if there are any errors.
I love the fluent system icons, so I thought I should take this opportunity to join in.

Now for the issue itself:

Some of the icons in this set have a smaller, secondary icon that modifies the meaning of the original icon. One such modification is the pen.

However, whether or not that pen is filled or outlined seems to be inconsistent.

This can be found in icons such as:

Those with outlined pen for regular styles (I believe this is the intended design):

• Draw Shape (Regular)
• Draw Text (Regular)
• Image Edit (Regular)
• Link Edit (Regular)
• Speaker Edit (Regular)
• Status (Regular)
• Text Edit Style (Regular)
• Whiteboard (Regular)

Those with filled pen, even for regular styles:

• Camera Edit (Regular)
• Comment Edit (Regular)
• Document Edit (Regular)
• People Edit (Regular)
• Save Edit (Regular)
• Star Edit (Regular)
• Table Edit (Regular)

Those with outlined pen for filled styles:

• Image Edit (Filled)

I believe the pen should be outlined for all icons in the regular style, while pen should be filled in all icons in the filled style.

I tried to look for all instances of the problem, but there may be some that I missed.

Different fill color in one icon

First I would like to thank everybody who worked on these assets.

Yesterday I have built a React package for these icons and I found out that the icon assets/Document Autosave/SVG/ic_fluent_document_autosave_24_filled.svg has a different fill color than the other icons. It uses #292929 the others use #212121

Typography for Fluent icons

Hey ya, love the new icons! First found out about this when you guys released the figma communty doc. So glad to see this repo for android/ios(/master) being released.

Was wondering a few things re typography in the icons...

• I see there's currently a mix of using custom type (eg. Access Time, FPS 960) vs ones that are typeset in Univers(?) (eg. Cellular 4G, Text Number List LTR)

  • Is there a plan to make this consistent?

  • & potentially open sourcing it too (if you look at OpenMoji -- they've released a basic latin and numeral character set for use in their emojis https://openmoji.org/styleguide/#typography) Having a similar one for Fluent would be a good addition as part of Issue #44 if external collaboration guides are produced

— —

All icons below shown as at Release 1.1.29 0cf1b65

Icon request: Fire/Flame icon

Possible usages:

• Heat in weather apps
• Streak in gamification apps (e.g. education)
• Hot deals / Hot (popular) items
• Something burning

Not all icons are displayed

Hi our designers are going to icon cloud and choosing icons from the full MDL2 font for use in our ux.
Most of these (ie 'Save') work when we pass the friendly name to fluent components but some do not, as in don't render anything (ie 'SIMError) It appears that fluent itself manages fetching the fonts so I don't know what control I have over this.
How does one get icons like 'SIMError' to display in the fluent components like ActionButton? Is this not possible? Or does it take a separate more work code path to enable?
The icons our designers have chosen do not all appear to be in the 'View the full list of icons' but some work and some don't so unfortunately the guidance doesn't seem as simple a just telling design that they should restrict their choices to that set of icons.
Could you please provide guidance on how to get these addition icons from full MDL2 to work with fluent?
thanks
-john

Suggestion: Add apps that use FluentUI icons to readme

Some media controls are missing

This is the list of currently supported media controls icons:

• Play
• Pause
• Fast forward
• Rewind
• Next track
• Previous track
• Repeat on
• Repeat off
• Volume levels

Still, some of them are missing:

• Repeat 1
• Shuffle on
• Shuffle off

Would be great if you could include them in the pack!

Rename Mail Unsubscribe to Mail Off?

It has a slash through the standard Mail icon. And other icons use the "Off" suffix to represent this.

Update font script to output css file

Continuing from #21 (comment)

Poor contrast of icons in icons.md when GitHub is in dark mode

When viewed in dark mode icons in icons.md are barely visible.

Add Glyph code in the list of icons

I did not find the list of glyph code where I can search icons.
Can you please add new column in this page with glyph code or Unicode Point? Searching in character map is hard.

"Address book" versus "Address book number"

Maybe a mistake, but...not quite getting what the difference between these two is supposed to be (as the former also has the "#" symbol).

Update pr validation for the React library

Just run the library build for pr validation.

Missing currency icon.

Provide currency icon.

wrong icon in full list

minor nitpick: the full list of icons shows the clockwise icon for Arrow Rotate Counterclockwise

Need proper seperate website for icons with search functionality.

We added this recommendation for general purpose, it's hard to search using browser search function. If you provide better searching functionality it'll be beneficial for devs.

Xamarin.Forms support?

Do we have a ttf font that can be used on Xamarin.Forms Projects?

Missing Calendar icons

I build a calendar app on Windows and there are a couple of icons which I use in my app which are missing from this icon pack.

• Go To Today
  

• Calendar Reply
  

Inconsistency with stroke cut outs in icons with settings modifier

As per Figma guideline Creation - Strokes 7, point 1:

The shape should be 1px size (no matter the icon size) from the edge of the glyph

Stroke width rule is different for modifiers compared to normal icons, but the cut out rules of the strokes seems to be shared.

Then, the icons with gear modifier have inconsistent stroke cut outs compared to others.

Instead of the cut out starting from the "edge of the glyph", cut out seems to be based on a circle that is drawn around the gear.

This can be observed in following icons:

• Calendar Settings (Regular)
• Calendar Settings (Filled)
• Content Settings (Regular)
• Content Settings (Filled)
• Dual Screen Settings (Regular)
• Dual Screen Settings (Filled)
• Edit Settings (Regular)
• Edit Settings (Filled)
• Mic Settings (Regular)
• Mic Settings (Filled)
• People Settings (Regular)
• People Settings (Filled)
• Speaker Settings (Regular)
• Speaker Settings (Filled)
• Star Settings (Regular)
• Star Settings (Filled)
• Table Settings (Regular)
• Table Settings (Filled)
• Text Grammar Settings (Regular)
• Text Grammar Settings (Filled)

I have tried to find all instances of the problem, but I may have missed some.

Other non-circle shaped modifiers follow the guideline and start their cut outs from the edge of the glyph.
For example:

• Text Grammar Settings (Regular)
• People Search (Regular)
• People Swap (Regular)
• Person Call (Regular)

Cellular 3G (Regular) isn't consistent with Cellular 4G (Regular)

I have noticed that the signal bar (the 5th one) at the very far right on the Cellular 3G (Regular) icon is slightly different than the one that the Cellular 4G (Regular) icon has.

Cellular 3G (Regular):

Cellular 4G (Regular):

Opening them side-by-side on a browser, say like Microsoft Edge Canary, you can see the differences easily.

Is this intentional?

Readme description is meaningless

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

What does it mean to be familiar, friendly, or modern?

Proposal:
Fluent UI System Icons is a collection of icons from Microsoft intended to produce a consistent user experience throughout the platform.

Fillable SVG

SVG files should not use internal fill rule for coloring things, because then CSS rule fill cannot be easily applied.

For example App regular icon oryginal:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
    <title>ic_fluent_apps_24_regular</title>
    <desc>Created with Sketch.</desc>
    <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="ic_fluent_apps_24_regular" fill="#212121" fill-rule="nonzero">
            <path d="M18.4922565,2.33033009 L21.6710277,5.50910138 C22.5497074,6.38778104 22.5497074,7.81240224 21.6710277,8.69108189 L19.086611,11.2750103 C20.1695798,11.4374707 21,12.3717578 21,13.5 L21,18.75 C21,19.9926407 19.9926407,21 18.75,21 L5.25,21 C4.00735931,21 3,19.9926407 3,18.75 L3,5.25 C3,4.00735931 4.00735931,3 5.25,3 L10.5,3 C11.6289419,3 12.563688,3.83145055 12.7252911,4.91540416 L15.3102759,2.33033009 C16.1889556,1.45165043 17.6135768,1.45165043 18.4922565,2.33033009 Z M4.5,18.75 C4.5,19.1642136 4.83578644,19.5 5.25,19.5 L11.249,19.4993203 L11.25,12.75 L4.5,12.7493203 L4.5,18.75 Z M12.749,19.4993203 L18.75,19.5 C19.1642136,19.5 19.5,19.1642136 19.5,18.75 L19.5,13.5 C19.5,13.0857864 19.1642136,12.75 18.75,12.75 L12.749,12.7493203 L12.749,19.4993203 Z M10.5,4.5 L5.25,4.5 C4.83578644,4.5 4.5,4.83578644 4.5,5.25 L4.5,11.2493203 L11.25,11.2493203 L11.25,5.25 C11.25,4.83578644 10.9142136,4.5 10.5,4.5 Z M12.75,9.30932034 L12.75,11.25 L14.69,11.2493203 L12.75,9.30932034 Z M16.3709361,3.39099026 L13.1921648,6.56976155 C12.8992716,6.86265477 12.8992716,7.3375285 13.1921648,7.63042172 L16.3709361,10.809193 C16.6638293,11.1020862 17.1387031,11.1020862 17.4315963,10.809193 L20.6103676,7.63042172 C20.9032608,7.3375285 20.9032608,6.86265477 20.6103676,6.56976155 L17.4315963,3.39099026 C17.1387031,3.09809704 16.6638293,3.09809704 16.3709361,3.39099026 Z" id="🎨-Color"></path>
        </g>
    </g>
</svg>

App regular icon fillable by CSS fill:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
    <title>ic_fluent_apps_24_regular</title>
    <desc>Created with Sketch.</desc>
    <g id="🔍-Product-Icons">
        <g id="ic_fluent_apps_24_regular">
            <path d="M18.4922565,2.33033009 L21.6710277,5.50910138 C22.5497074,6.38778104 22.5497074,7.81240224 21.6710277,8.69108189 L19.086611,11.2750103 C20.1695798,11.4374707 21,12.3717578 21,13.5 L21,18.75 C21,19.9926407 19.9926407,21 18.75,21 L5.25,21 C4.00735931,21 3,19.9926407 3,18.75 L3,5.25 C3,4.00735931 4.00735931,3 5.25,3 L10.5,3 C11.6289419,3 12.563688,3.83145055 12.7252911,4.91540416 L15.3102759,2.33033009 C16.1889556,1.45165043 17.6135768,1.45165043 18.4922565,2.33033009 Z M4.5,18.75 C4.5,19.1642136 4.83578644,19.5 5.25,19.5 L11.249,19.4993203 L11.25,12.75 L4.5,12.7493203 L4.5,18.75 Z M12.749,19.4993203 L18.75,19.5 C19.1642136,19.5 19.5,19.1642136 19.5,18.75 L19.5,13.5 C19.5,13.0857864 19.1642136,12.75 18.75,12.75 L12.749,12.7493203 L12.749,19.4993203 Z M10.5,4.5 L5.25,4.5 C4.83578644,4.5 4.5,4.83578644 4.5,5.25 L4.5,11.2493203 L11.25,11.2493203 L11.25,5.25 C11.25,4.83578644 10.9142136,4.5 10.5,4.5 Z M12.75,9.30932034 L12.75,11.25 L14.69,11.2493203 L12.75,9.30932034 Z M16.3709361,3.39099026 L13.1921648,6.56976155 C12.8992716,6.86265477 12.8992716,7.3375285 13.1921648,7.63042172 L16.3709361,10.809193 C16.6638293,11.1020862 17.1387031,11.1020862 17.4315963,10.809193 L20.6103676,7.63042172 C20.9032608,7.3375285 20.9032608,6.86265477 20.6103676,6.56976155 L17.4315963,3.39099026 C17.1387031,3.09809704 16.6638293,3.09809704 16.3709361,3.39099026 Z" id="🎨-Color"></path>
        </g>
    </g>
</svg>

But if you really need to stay with default color, then use fill on SVG element directly whith can be overriden by CSS fill:

<?xml version="1.0" encoding="UTF-8"?>
<svg fill="#000" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
    <title>ic_fluent_apps_24_regular</title>
    <desc>Created with Sketch.</desc>
    <g id="🔍-Product-Icons">
        <g id="ic_fluent_apps_24_regular">
            <path d="M18.4922565,2.33033009 L21.6710277,5.50910138 C22.5497074,6.38778104 22.5497074,7.81240224 21.6710277,8.69108189 L19.086611,11.2750103 C20.1695798,11.4374707 21,12.3717578 21,13.5 L21,18.75 C21,19.9926407 19.9926407,21 18.75,21 L5.25,21 C4.00735931,21 3,19.9926407 3,18.75 L3,5.25 C3,4.00735931 4.00735931,3 5.25,3 L10.5,3 C11.6289419,3 12.563688,3.83145055 12.7252911,4.91540416 L15.3102759,2.33033009 C16.1889556,1.45165043 17.6135768,1.45165043 18.4922565,2.33033009 Z M4.5,18.75 C4.5,19.1642136 4.83578644,19.5 5.25,19.5 L11.249,19.4993203 L11.25,12.75 L4.5,12.7493203 L4.5,18.75 Z M12.749,19.4993203 L18.75,19.5 C19.1642136,19.5 19.5,19.1642136 19.5,18.75 L19.5,13.5 C19.5,13.0857864 19.1642136,12.75 18.75,12.75 L12.749,12.7493203 L12.749,19.4993203 Z M10.5,4.5 L5.25,4.5 C4.83578644,4.5 4.5,4.83578644 4.5,5.25 L4.5,11.2493203 L11.25,11.2493203 L11.25,5.25 C11.25,4.83578644 10.9142136,4.5 10.5,4.5 Z M12.75,9.30932034 L12.75,11.25 L14.69,11.2493203 L12.75,9.30932034 Z M16.3709361,3.39099026 L13.1921648,6.56976155 C12.8992716,6.86265477 12.8992716,7.3375285 13.1921648,7.63042172 L16.3709361,10.809193 C16.6638293,11.1020862 17.1387031,11.1020862 17.4315963,10.809193 L20.6103676,7.63042172 C20.9032608,7.3375285 20.9032608,6.86265477 20.6103676,6.56976155 L17.4315963,3.39099026 C17.1387031,3.09809704 16.6638293,3.09809704 16.3709361,3.39099026 Z" id="🎨-Color"></path>
        </g>
    </g>
</svg>

Building a fat APK fails

I am trying to build a simple fat APK to do some tests. Build fails when trying to run fluent-icons font subset.

I could pass this issue by adding --no-tree-shake-icons, but I would like to know where does this issue might come from.

Flutter SDK version used:

Flutter 1.22.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 7891006299 (4 weeks ago) • 2020-12-10 11:54:40 -0800
Engine • revision ae90085a84
Tools • Dart 2.10.4

Here are the failure logs I get when running flutter build apk

[  +74 ms] [ +107 ms] Using output file: /Users/houdayec/Work/dev/Mate/mate_app/build/app/intermediates/flutter/release/flutter_assets/packages/fluentui_system_icons/fonts/FluentSystemIcons-Regular.ttf
[        ]            Using source file: /Users/houdayec/Development/flutter/.pub-cache/hosted/pub.dartlang.org/fluentui_system_icons-1.1.89/lib/fonts/FluentSystemIcons-Regular.ttf
[        ] [   +2 ms] Codepoint 62573 not found in font, aborting.
[+37296 ms] [+37252 ms] android_aot_release_android-arm64: Complete
[ +101 ms] [ +142 ms] android_aot_release_android-x64: Complete
[  +99 ms] [  +63 ms] android_aot_release_android-arm: Complete
[ +199 ms] [ +186 ms] Persisting file store
[        ] [  +12 ms] Done persisting file store
[        ] [  +15 ms] Target aot_android_asset_bundle failed: IconTreeShakerException: Font subsetting failed with exit code 255.
[        ]            To disable icon tree shaking, pass --no-tree-shake-icons to the requested flutter build command
[        ]            #0      IconTreeShaker.subsetFont (package:flutter_tools/src/build_system/targets/icon_tree_shaker.dart:217:7)
[        ]            #1      _rootRunUnary (dart:async/zone.dart:1198:47)
[        ]            #2      _CustomZone.runUnary (dart:async/zone.dart:1100:19)
[        ]            #3      _FutureListener.handleValue (dart:async/future_impl.dart:143:18)
[        ]            #4      Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:696:45)
[        ]            #5      Future._propagateToListeners (dart:async/future_impl.dart:725:32)
[        ]            #6      Future._complete (dart:async/future_impl.dart:519:7)
[        ]            #7      Stream.fold.<anonymous closure> (dart:async/stream.dart:847:14)
[   +2 ms]            #8      _rootRun (dart:async/zone.dart:1182:47)
[        ]            #9      _CustomZone.run (dart:async/zone.dart:1093:19)
[        ]            #10     _CustomZone.runGuarded (dart:async/zone.dart:997:7)
[        ]            #11     _BufferingStreamSubscription._sendDone.sendDone (dart:async/stream_impl.dart:410:13)
[        ]            #12     _BufferingStreamSubscription._sendDone (dart:async/stream_impl.dart:420:15)
[        ]            #13     _BufferingStreamSubscription._close (dart:async/stream_impl.dart:305:7)
[        ]            #14     _SinkTransformerStreamSubscription._close (dart:async/stream_transformers.dart:97:11)
[        ]            #15     _EventSinkWrapper.close (dart:async/stream_transformers.dart:23:11)
[        ]            #16     _StringAdapterSink.close (dart:convert/string_conversion.dart:251:11)
[  +16 ms]            #17     _Utf8ConversionSink.close (dart:convert/string_conversion.dart:305:20)
[        ]            #18     _ConverterStreamEventSink.close (dart:convert/chunked_conversion.dart:82:18)
[        ]            #19     _SinkTransformerStreamSubscription._handleDone (dart:async/stream_transformers.dart:142:24)
[        ]            #20     _rootRun (dart:async/zone.dart:1182:47)
[        ]            #21     _CustomZone.run (dart:async/zone.dart:1093:19)
[        ]            #22     _CustomZone.runGuarded (dart:async/zone.dart:997:7)
[        ]            #23     _BufferingStreamSubscription._sendDone.sendDone (dart:async/stream_impl.dart:410:13)
[        ]            #24     _BufferingStreamSubscription._sendDone (dart:async/stream_impl.dart:420:15)
[        ]            #25     _BufferingStreamSubscription._close (dart:async/stream_impl.dart:305:7)
[  +12 ms]            #26     _SyncStreamControllerDispatch._sendDone (dart:async/stream_controller.dart:816:19)
[        ]            #27     _StreamController._closeUnchecked (dart:async/stream_controller.dart:671:7)
[        ]            #28     _StreamController.close (dart:async/stream_controller.dart:664:5)
[        ]            #29     _Socket._onData (dart:io-patch/socket_patch.dart:2051:21)
[        ]            #30     _rootRunUnary (dart:async/zone.dart:1206:13)
[        ]            #31     _CustomZone.runUnary (dart:async/zone.dart:1100:19)
[        ]            #32     _CustomZone.runUnaryGuarded (dart:async/zone.dart:1005:7)
[        ]            #33     _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:357:11)
[        ]            #34     _BufferingStreamSubscription._add (dart:async/stream_impl.dart:285:7)
[   +4 ms]            #35     _SyncStreamControllerDispatch._sendData (dart:async/stream_controller.dart:808:19)
[        ]            #36     _StreamController._add (dart:async/stream_controller.dart:682:7)
[        ]            #37     _StreamController.add (dart:async/stream_controller.dart:624:5)
[        ]            #38     new _RawSocket.<anonymous closure> (dart:io-patch/socket_patch.dart:1587:35)
[        ]            #39     _NativeSocket.issueReadEvent.issue (dart:io-patch/socket_patch.dart:1069:18)
[        ]            #40     _microtaskLoop (dart:async/schedule_microtask.dart:41:21)
[        ]            #41     _startMicrotaskLoop (dart:async/schedule_microtask.dart:50:5)
[        ]            #42     _runPendingImmediateCallback (dart:isolate-patch/isolate_patch.dart:118:13)
[   +1 ms]            #43     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:169:5)
[        ] [   +4 ms] 
[        ]            #0      throwToolExit (package:flutter_tools/src/base/common.dart:14:3)
[        ]            #1      AssembleCommand.runCommand (package:flutter_tools/src/commands/assemble.dart:238:7)
[        ]            #2      _rootRunUnary (dart:async/zone.dart:1198:47)
[        ]            #3      _CustomZone.runUnary (dart:async/zone.dart:1100:19)
[        ]            #4      _FutureListener.handleValue (dart:async/future_impl.dart:143:18)
[        ]            #5      Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:696:45)
[        ]            #6      Future._propagateToListeners (dart:async/future_impl.dart:725:32)
[   +4 ms]            #7      Future._completeWithValue (dart:async/future_impl.dart:529:5)
[        ]            #8      _AsyncAwaitCompleter.complete (dart:async-patch/async_patch.dart:40:15)
[        ]            #9      _completeOnAsyncReturn (dart:async-patch/async_patch.dart:311:13)
[        ]            #10     FlutterBuildSystem.build (package:flutter_tools/src/build_system/build_system.dart)
[        ]            #11     _rootRunUnary (dart:async/zone.dart:1198:47)
[        ]            #12     _CustomZone.runUnary (dart:async/zone.dart:1100:19)
[        ]            #13     _FutureListener.handleValue (dart:async/future_impl.dart:143:18)
[        ]            #14     Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:696:45)
[        ]            #15     Future._propagateToListeners (dart:async/future_impl.dart:725:32)
[   +7 ms]            #16     Future._completeWithValue (dart:async/future_impl.dart:529:5)
[        ]            #17     _AsyncAwaitCompleter.complete (dart:async-patch/async_patch.dart:40:15)
[        ]            #18     _completeOnAsyncReturn (dart:async-patch/async_patch.dart:311:13)
[        ]            #19     _BuildInstance.invokeTarget (package:flutter_tools/src/build_system/build_system.dart)
[        ]            #20     _rootRunUnary (dart:async/zone.dart:1198:47)
[        ]            #21     _CustomZone.runUnary (dart:async/zone.dart:1100:19)
[        ]            #22     _FutureListener.handleValue (dart:async/future_impl.dart:143:18)
[        ]            #23     Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:696:45)
[        ]            #24     Future._propagateToListeners (dart:async/future_impl.dart:725:32)
[   +3 ms]            #25     Future._completeWithValue (dart:async/future_impl.dart:529:5)
[        ]            #26     Future.wait.<anonymous closure> (dart:async/future.dart:414:23)
[        ]            #27     _rootRunUnary (dart:async/zone.dart:1198:47)
[        ]            #28     _CustomZone.runUnary (dart:async/zone.dart:1100:19)
[        ]            #29     _FutureListener.handleValue (dart:async/future_impl.dart:143:18)
[        ]            #30     Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:696:45)
[        ]            #31     Future._propagateToListeners (dart:async/future_impl.dart:725:32)
[        ]            #32     Future._completeWithValue (dart:async/future_impl.dart:529:5)
[        ]            #33     _AsyncAwaitCompleter.complete (dart:async-patch/async_patch.dart:40:15)
[   +3 ms]            #34     _completeOnAsyncReturn (dart:async-patch/async_patch.dart:311:13)
[        ]            #35     _BuildInstance.invokeTarget (package:flutter_tools/src/build_system/build_system.dart)
[        ]            #36     _rootRunUnary (dart:async/zone.dart:1198:47)
[        ]            #37     _CustomZone.runUnary (dart:async/zone.dart:1100:19)
[        ]            #38     _FutureListener.handleValue (dart:async/future_impl.dart:143:18)
[        ]            #39     Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:696:45)
[        ]            #40     Future._propagateToListeners (dart:async/future_impl.dart:725:32)
[        ]            #41     Future._completeWithValue (dart:async/future_impl.dart:529:5)
[        ]            #42     Future.wait.<anonymous closure> (dart:async/future.dart:414:23)
[   +7 ms]            #43     _rootRunUnary (dart:async/zone.dart:1198:47)
[        ]            #44     _CustomZone.runUnary (dart:async/zone.dart:1100:19)
[        ]            #45     _FutureListener.handleValue (dart:async/future_impl.dart:143:18)
[        ]            #46     Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:696:45)
[        ]            #47     Future._propagateToListeners (dart:async/future_impl.dart:725:32)
[        ]            #48     Future._completeWithValue (dart:async/future_impl.dart:529:5)
[        ]            #49     _AsyncAwaitCompleter.complete (dart:async-patch/async_patch.dart:40:15)
[        ]            #50     _completeOnAsyncReturn (dart:async-patch/async_patch.dart:311:13)
[        ]            #51     _BuildInstance._invokeInternal (package:flutter_tools/src/build_system/build_system.dart)
[   +8 ms]            #52     _rootRunUnary (dart:async/zone.dart:1198:47)
[        ]            #53     _CustomZone.runUnary (dart:async/zone.dart:1100:19)
[        ]            #54     _FutureListener.handleValue (dart:async/future_impl.dart:143:18)
[        ]            #55     Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:696:45)
[        ]            #56     Future._propagateToListeners (dart:async/future_impl.dart:725:32)
[        ]            #57     Future._completeWithValue (dart:async/future_impl.dart:529:5)
[        ]            #58     _AsyncAwaitCompleter.complete (dart:async-patch/async_patch.dart:40:15)
[        ]            #59     _completeOnAsyncReturn (dart:async-patch/async_patch.dart:311:13)
[   +4 ms]            #60     FileStore.diffFileList (package:flutter_tools/src/build_system/file_store.dart)
[        ]            #61     _rootRunUnary (dart:async/zone.dart:1198:47)
[        ]            #62     _CustomZone.runUnary (dart:async/zone.dart:1100:19)
[        ]            #63     _FutureListener.handleValue (dart:async/future_impl.dart:143:18)
[        ]            #64     Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:696:45)
[        ]            #65     Future._propagateToListeners (dart:async/future_impl.dart:725:32)
[        ]            #66     Future._completeWithValue (dart:async/future_impl.dart:529:5)
[        ]            #67     Future.wait.<anonymous closure> (dart:async/future.dart:414:23)
[        ]            #68     _rootRunUnary (dart:async/zone.dart:1198:47)
[        ]            #69     _CustomZone.runUnary (dart:async/zone.dart:1100:19)
[   +4 ms]            #70     _FutureListener.handleValue (dart:async/future_impl.dart:143:18)
[        ]            #71     Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:696:45)
[        ]            #72     Future._propagateToListeners (dart:async/future_impl.dart:725:32)
[        ]            #73     Future._completeWithValue (dart:async/future_impl.dart:529:5)
[        ]            #74     _AsyncAwaitCompleter.complete (dart:async-patch/async_patch.dart:40:15)
[        ]            #75     _completeOnAsyncReturn (dart:async-patch/async_patch.dart:311:13)
[        ]            #76     FileStore._hashFile (package:flutter_tools/src/build_system/file_store.dart)
[        ]            #77     _rootRunUnary (dart:async/zone.dart:1198:47)
[   +4 ms]            #78     _CustomZone.runUnary (dart:async/zone.dart:1100:19)
[        ]            #79     _FutureListener.handleValue (dart:async/future_impl.dart:143:18)
[        ]            #80     Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:696:45)
[        ]            #81     Future._propagateToListeners (dart:async/future_impl.dart:725:32)
[        ]            #82     Future._complete (dart:async/future_impl.dart:519:7)
[        ]            #83     Stream.last.<anonymous closure> (dart:async/stream.dart:1327:20)
[        ]            #84     _rootRun (dart:async/zone.dart:1182:47)
[        ]            #85     _CustomZone.run (dart:async/zone.dart:1093:19)
[        ]            #86     _CustomZone.runGuarded (dart:async/zone.dart:997:7)
[        ]            #87     _BufferingStreamSubscription._sendDone.sendDone (dart:async/stream_impl.dart:410:13)
[   +7 ms]            #88     _BufferingStreamSubscription._sendDone (dart:async/stream_impl.dart:420:15)
[        ]            #89     _DelayedDone.perform (dart:async/stream_impl.dart:630:14)
[        ]            #90     _StreamImplEvents.handleNext (dart:async/stream_impl.dart:730:11)
[        ]            #91     _PendingEvents.schedule.<anonymous closure> (dart:async/stream_impl.dart:687:7)
[        ]            #92     _rootRun (dart:async/zone.dart:1182:47)
[        ]            #93     _CustomZone.run (dart:async/zone.dart:1093:19)
[        ]            #94     _CustomZone.runGuarded (dart:async/zone.dart:997:7)
[        ]            #95     _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:1037:23)
[        ]            #96     _rootRun (dart:async/zone.dart:1190:13)
[   +2 ms]            #97     _CustomZone.run (dart:async/zone.dart:1093:19)
[        ]            #98     _CustomZone.runGuarded (dart:async/zone.dart:997:7)
[        ]            #99     _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:1037:23)
[        ]            #100    _microtaskLoop (dart:async/schedule_microtask.dart:41:21)
[        ]            #101    _startMicrotaskLoop (dart:async/schedule_microtask.dart:50:5)
[        ]            #102    _runPendingImmediateCallback (dart:isolate-patch/isolate_patch.dart:118:13)
[        ]            #103    _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:169:5)
[        ] [  +12 ms] "flutter assemble" took 102,149ms.
[        ] [   +1 ms] ensureAnalyticsSent: 0ms
[        ] [   +1 ms] Running shutdown hooks
[   +1 ms] [        ] Shutdown hooks complete
[        ] [        ] exiting with code 1
[        ] > Task :app:compileFlutterBuildRelease FAILED
[  +77 ms] FAILURE: Build failed with an exception.
[        ] * Where:
[        ] Script '/Users/houdayec/Development/flutter/packages/flutter_tools/gradle/flutter.gradle' line: 904
[        ] * What went wrong:
[        ] Execution failed for task ':app:compileFlutterBuildRelease'.
[        ] > Process 'command '/Users/houdayec/Development/flutter/bin/flutter'' finished with non-zero exit value 1
[        ] * Try:
[        ] Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
[        ] * Get more help at https://help.gradle.org
[        ] BUILD FAILED in 1m 47s

Filename inconsistent

Hi there!

The following 2 files has an error in the file name.
assets/TextBox Align Top/SVG/ic_fluent_textbox_align_top_24_regular_.svg - This one has a trailing underscore
assets/Text Strikethrough/SVG/ic_fluent_text_strikethrough_20_fiiled.svg - Filled is misspelled here

Fluent Icon Style Guidelines

I'm trying to design a set of icons that's meant to be integrated with fluent icons. I was wondering if you could direct me to a style guideline for designing Fluent icons.

@jasoncuster @spencer-nelson @thewoodpecker

Errors in ic_fluent_cloud_download_32

Both regular and filled SVGs for ic_fluent_cloud_download_32 have errors. This is what they look like:

Links to SVG:

https://github.com/microsoft/fluentui-system-icons/blob/master/assets/Cloud%20Download/SVG/ic_fluent_cloud_download_32_regular.svg

https://github.com/microsoft/fluentui-system-icons/blob/master/assets/Cloud%20Download/SVG/ic_fluent_cloud_download_32_filled.svg

PDF files for those icons do not have errors.

s

Add square icon missing

it looks like the flutter version are missing add square icon, are there any plan to add this icon from the official fluent ui repo?

Add React documentation

At a minimum, a README for usage of the React code is needed in the react/ directory

Xamarin Support?

I love the icons and would like to be able to use it on a Xamarin native app.

Is it a good idea to import 34 Mb of images as a framework to the mobile app?

Subject

I don't think so. It is much better to import only those images, that you need.

Icon request: Microscope

It would be very nice to have a microscope icon.

Release notifications aren't being sent

This looks to be an effect of the simple tag/push mechanism used in the publish workflow.

Do we need to update the flow to use an actual release action? In particular I was wondering if using something like create release would be the better option.

Flutter package outdated

This repository is in v1.1.72, but the flutter package (https://pub.dev/packages/fluentui_system_icons) is on 1.1.54.

Most of the icons have the old name or does not exist :(

Dart sdk version is wrong for Flutter package

The environment version is wrong:

fluentui-system-icons/flutter/pubspec.yaml

Line 7 in bdc9a9e

sdk: ">=1.1.76 <1.1.76"

This should reflect the versions of dart that are allowed to use this package. Now 1.1.76 could not be used in any version of flutter. (Notice this version has not been published in pub.dev yet).

This sdk: ">=2.7.0 <3.0.0" value is used now by default when creating any project with flutter create .

Versions used from popular packages:
Bloc:

environment:
sdk: ">=2.6.0 <3.0.0"
Provider:

environment:
sdk: '>=2.7.0 <3.0.0'
flutter: '>= 1.16.0'

Add React publishing

We need to be sure the React library versioning is kept in sync with everything else.
This is to be done in the publish.yml

Add 5G icon

Scrolling through the full list of issues I noticed the 3G and 4G cell network icons. While it's still a relatively new technology – it would be useful to add a 5G one too

New file icon missing

Hi, I have been looking for a "new document" icon.

There are many "document" icons, but no "new".

What would be the correct Fluent UI way to show new document in an icon? A plus "+" ?

(New as in "new blank document" as opposed to "open document")

Feature request: custom SF Symbols

Is it possible to import FluentUI icons to apps as custom SF Symbols? By using custom SF Symbols, Fluent UI icons can also enjoy the same benefits as builtin SF Symbols. It can provide icons in different weight and support optical alignment.

Here is the documentation of how to create custom SF Symbols.

Community icons website

Thanks for sharing the icons! ❤️ I loved the shift from sharp Fabric icons to something more friendly and refined in Fluent.

I got so excited about the icons that I've mocked up a community-led icons website.
I wonder if the team is working on the website though?

Otherwise, I'd love to jump in and develop the website. I'm also open to suggestions.

Windows App Support

I am a Windows app developer and would like a Nuget package with all of these icons included.

thumbLike24Regular icon is missing :)

Question : Do you plan to create a WebFont ?

Hello,
Do you plan to create a WebFont for all those icons ?
It would be great and easy to integrate to websites.

Thanks a lot.

The Figma for Fluent UI Icons is out of date

The changelog for the Figma file, has not noted any updates since the 5th August.

https://www.figma.com/community/file/836835755999342788

Outside Icon Contributions - Grids Available?

If Icons made by the community are welcomed to be submitted:

• Will you provide the grids for the icon sizes the project accepts?
• Will stroke thicknesses be detailed for contributors?
• Will guidance for common shapes and corner radii be set out?
• Will this project be linked to the Fluent Icons Figma project?

Invalid dimensions in a few icons

Several SVGs have incorrect dimensions:

ic_fluent_more_24_regular.svg: 25 x 24
ic_fluent_more_24_filled.svg: 25 x 24
ic_fluent_more_28_regular.svg: 29 x 28
ic_fluent_more_48_filled.svg: 49 x 48
ic_fluent_more_48_regular.svg: 49 x 48
ic_fluent_scale_fit_16_filled.svg: 17 x 16
ic_fluent_scale_fit_16_regular.svg: 17 x 16
ic_fluent_scale_fit_20_filled.svg: 21 x 20
ic_fluent_scale_fit_24_filled.svg: 25 x 24
ic_fluent_scale_fit_20_regular.svg: 21 x 20
ic_fluent_text_number_format_24_regular.svg: 20 x 20
ic_fluent_weather_hail_day_24_filled.svg: 48 x 48
ic_fluent_weather_hail_night_24_filled.svg: 48 x 48
ic_fluent_weather_thunderstorm_24_filled.svg: 48 x 48

Would it make sense to fix them and make a pull request? Or are SVGs generated, so fixing them in pull request would be pointless?