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

Last update: Aug 17, 2022

Fluent UI System Icons

CI

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

fluent system icons

Icon List

View the full list of icons

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:[email protected]'

For library docs, see android/README.md.

iOS and macOS

CocoaPods

use_frameworks!

pod "FluentIcons", "1.1.154"

Carthage

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

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

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.

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.

GitHub

https://github.com/microsoft/fluentui-system-icons
Comments
  • 1. 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?
    Reviewed by mdtauk at 2020-07-04 03:53
  • 2. Update template to bundle filled and regular states

    This PR is to update the template for react-icons to bundle the filled and regular states for each icon. It also defaults the fill to currentColor, so that the icon can inherit its container color

    Reviewed by tomi-msft at 2021-05-12 18:58
  • 3. 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.

    Reviewed by TaigaYamada at 2021-01-08 08:41
  • 4. Adding 5G icon to new branch

    I added a Cellular 5G Icon in the assets folder to the repository. I am new to the open-source contribution. Please review and send any feedback or changes. I felt that 5G icon was missing, I made it myself using Adobe XD.

    Reviewed by tanmaya0102 at 2020-12-18 15:22
  • 5. Latest package not generating type mappings

    Latest package version 1.1.138 is not generating any type mapping files for the icons, is this a know issue or am I missing something setup-wise?

    Might be related to this PR: https://github.com/microsoft/fluentui-system-icons/pull/314

    Reviewed by digarza at 2021-09-02 17:30
  • 6. Gradle build error

    Execution failed for task ':app:dataBindingMergeDependencyArtifactsDebug'.

    Could not resolve all files for configuration ':app:debugCompileClasspath'. Could not find :unspecified:. Required by: project :app > com.microsoft.design:fluent-system-icons:1.1.122

    Maybe this is caused by 'unspecified' line?

    Reviewed by tipapro at 2021-05-02 09:14
  • 7. 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
    
    
    Reviewed by houdayec at 2021-01-06 08:37
  • 8. Make icons index.ts/index.d.ts more easier for TS to work with

    Resolves #300, improving TS resolution time for this package. Also re-casts these functions to unknown first to allow TS to bypass typechecking these icon functions.

    Reviewed by markjm at 2022-01-12 01:58
  • 9. Add a package which builds SVG sprites

    Packages which depend directly on @fluentui/react-icons can cause very lengthy build times, since some bundler configurations will cause the bundler to iterate through each of the 8,833 icons in this project. This ~is~ was true at least for Storybook consuming @fluentui/react-components.

    The situation calls for a more comprehensive solution than even the one contained in this PR. I think the ideal solution for a React stack would be to offer a module which tracks which icons are used by an app (maybe similar to the makeStyles/useStyles pattern), and render either a one-off sprite during development or a sprite optimized for exactly the icons used in the app in production.

    As a first step, though, the spriting solution in this PR offers these benefits:

    • Developers don’t need to install this package as a dependency
    • The user agent can cache requests for sprites
    • Icon assets no longer affect project bundle size

    SVG sprites have been well supported by user agents for more than 5 years by now. This package uses svgstore to generate the sprites.

    Reviewed by thure at 2021-10-04 19:39
  • 10. 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>
    
    Reviewed by Obin at 2020-07-17 21:43
  • 11. Upgrade swift-argument-parser to version 1.0.2

    Overview

    The stable version of swift-argument-parse has been released. Therefore, we will upgrade swift-argument-parser to version 1.0.2.

    Reference

    https://github.com/apple/swift-argument-parser/releases

    Reviewed by ramen2020 at 2022-01-26 15:09
  • 12. Why are Fabric icons different to Fluent System icons?

    I wasn't sure where to put this but had to ask. Why are Fabric icons or Fluent UI icons and Fluent System icons so different to each other? Wouldn't it be normal to just have one set of icons across Microsoft products? Usage has been unclear: https://github.com/microsoft/fluentui/issues/12488. Google allows anyone to use Material Symbols.

    What icons should a Fluent Design app use?

    ~~honestly there's so much going on in the fluent ui umbrella but i'm not here for that~~

    Reviewed by Poopooracoocoo at 2022-06-25 09:37
  • 13. Make a website for the new icons like the Fabric icons.

    https://github.com/microsoft/fluentui-system-icons/blob/master/icons_regular.md

    This markdown can't be read in darkmode github viewing. Please just spin up a simple next.js website that lets you wordwheel through them. It would be great to also look up things by mdl2 name through a site like that.

    Reviewed by dzearing at 2022-06-21 21:56
  • 14. Icons Missing from @fluentui/[email protected]

    Hi, we are consuming @fluentui/[email protected] and we noticed that some of the icons are not present in the package even though they are listed here.

    So far, we have noticed the following missing although there might be more.

    • GroupDismiss20Regular
    • GroupReturn20Regular
    • TextBulletListDismiss20Regular
    • TextBulletListCheckmark20Regular

    We do not plan to upgrade to v2.x until a stable release is available.

    Reviewed by sharmar999 at 2022-06-21 04:30
  • 15. add volume icon

    Please add volume icon They are https://docs.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font List: Volume Volume0 Volume1 Volume2 Volume3 SpatialVolume0 SpatialVolume1 SpatialVolume2 SpatialVolume3 VolumeBars MixVolumes

    Reviewed by sudongg at 2022-06-02 10:38

Related

ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter
ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

Basic Widgets Examples This is aimed for complete beginners in Flutter, to get them acquainted with the various basic widgets in Flutter. Run this pro

Aug 15, 2022
Flutter widget library containing buttons for authenticating with popular social networks: Apple, Google, Facebook, Twitter and Microsoft.
Flutter widget library containing buttons for authenticating with popular social networks: Apple, Google, Facebook, Twitter and Microsoft.

Flutter Auth Buttons This library is now in maintenance mode I'm no longer actively using Flutter and don't have the time to keep this library maintai

Mar 23, 2022
Easy form building in Flutter with a fluent schema API.
Easy form building in Flutter with a fluent schema API.

former - Easy form building in Flutter Motivation Formik is one of my favorite React libraries. It is a form library that drastically reduces boilerpl

Jul 19, 2022
flutter grpc video app && microsoft text to speech
flutter grpc video app && microsoft text to speech

flutter_video_app Getting Started Install dart protoc_plugin pub global activate protoc_plugin Clone WarpDriveProtocol git clone [email protected]

Dec 14, 2021
A fluent API for generating valid Dart source code

A fluent, builder-based library for generating valid Dart code. Usage code_builder has a narrow and user-friendly API. See the example and test folder

Aug 15, 2022
Flutter plugin to implement a Boom Menu, with icons, title, subtitle, animated FAB Icons and hide on scrolling.
Flutter plugin to implement a Boom Menu, with icons, title, subtitle, animated FAB Icons and hide on scrolling.

Flutter Boom Menu Usage The BoomMenu widget is built to be placed in the Scaffold.floatingActionButton argument, replacing the FloatingActionButton wi

Aug 1, 2022
The Material Design Icons Icon pack available as set of Flutter Icons.

material_design_icons_flutter The Material Design Icons Icon pack available as set of Flutter Icons. Based on Material Design Icons 6.5.95. See a web

Jul 12, 2022
Flutter-Apps-Collection: a collection of apps made in flutter for learning purpose
 Flutter-Apps-Collection: a collection of apps made in flutter for learning purpose

Flutter-Apps-Collection This is a repository of a collection of apps made in flutter for learning purpose Some Screenshots . . . Apps build in Flutter

May 27, 2022
A user-friendly API for KDE's KRunner application.

A user-friendly API for KDE's KRunner application. Features Create KRunner plugins ("runners") Type safe Null safe Named parameters Documentation expl

Dec 25, 2021
A privacy-friendly Twitter frontend for mobile devices
A privacy-friendly Twitter frontend for mobile devices

Fritter A privacy-friendly Twitter frontend for mobile devices. Features Device-local subscriptions and groups, Newpipe-style, including a feed view D

Aug 13, 2022
Win32 registry - A package that provides a friendly Dart API for accessing the Windows registry

A package that provides a friendly Dart API for accessing the Windows registry.

Aug 12, 2022
A user-friendly money management app which allows you to keep track of transactions seamlessly
A user-friendly money management app which allows you to keep track of transactions seamlessly

See the first version of 'Mvelopes' - Money Management Application which I completed as my first project and published on Play Store. 'Mvelopes' is a user-friendly money management app which allows you to keep track of transactions seamlessly. - Features - Technology • Reminder • Flutter • Notification • Hive • Manage income & expenses

Aug 10, 2022
A simple PokeDex App with Modern UI created using Flutter and Dart and using API from PokeApi.
A simple PokeDex App with Modern UI created using Flutter and Dart and using API from PokeApi.

FlutterDex FlutterDex A simple PokeDex App created using Flutter and Dart and using API from PokeApi. UI Design inspired by : Home Screen Pokedex iOS

Aug 16, 2022
Modern UI with Flutter for Web, Android, Windows and Linux.

Modern UI with Flutter for Web, Android, Windows and Linux.

Apr 9, 2022
A package that gives us a modern way to show animated border as a placeholder while loading our widget with easy customization and ready to use.
A package that gives us a modern way to show animated border as a placeholder while loading our widget with easy customization and ready to use.

A package that gives us a modern way to show animated border as a placeholder while loading our widget with easy customization and ready to use.

Aug 5, 2022
Modern implementation of the Original BLoC

stream_bloc Modern implementation of the Original BLoC About This package contai

Jun 14, 2022
A GraphQL client for Flutter, bringing all the features from a modern GraphQL client to one easy to use package. Built after react apollo

Flutter GraphQL Table of Contents Flutter GraphQL Table of Contents About this project Installation Usage GraphQL Provider [Graphql Link and Headers]

Jul 22, 2021
A GraphQL client for Flutter, bringing all the features from a modern GraphQL client to one easy to use package.
A GraphQL client for Flutter, bringing all the features from a modern GraphQL client to one easy to use package.

GraphQL Flutter ?? Bulletin See the v3 -> v4 Migration Guide if you're still on v3. Maintenance status: Low. Follow #762 for updates on the planned ar

Aug 8, 2022