FluentIcons

A multi-framework control library of fluentui-system-icons. Browse the icons in the online gallery.

Packages

Package	Platform
	meta package
	Avalonia 12
	FluentAvalonia 3 (Avalonia 12)
	MAUI 10
	UWP 10.0.10773 Uno.UI 5.4
	Windows App SDK 1.8.5 Uno.WinUI 6.0
	.NET Framework 4.6.2 .NET 6

Version 2.x

Starting with version 2.0, the underlying fonts have been migrated from TTF to CFF.

Package	Version	Platform
FluentIcons.WinUI	2.1	Windows App SDK 1.6.3 Uno.WinUI 5.4
FluentIcons.Avalonia	2.0	Avalonia 11
FluentIcons.Avalonia.Fluent	2.0	FluentAvalonia 2 (Avalonia 11)
FluentIcons.WinUI	2.0	Windows App SDK 1.6

Version 1.3

Version 1.3 is a backports release for legacy platforms which are no longer supported by version 2.0.

Package	Platform
FluentIcons.Avalonia	Avalonia 0.10
FluentIcons.Avalonia.Fluent	FluentAvalonia 1.3 (Avalonia 0.10)
FluentIcons.Maui	MAUI 8
FluentIcons.Uwp	Uno.UI 5.0
FluentIcons.WinUI	Uno.WinUI 5.0
FluentIcons.WinUI	Windows App SDK 1.2

Usage

<Page xmlns:ic="using:FluentIcons.WinUI">
<!-- or FluentIcons.Avalonia / FluentIcons.Avalonia.Fluent / FluentIcons.Maui / FluentIcons.Wpf -->
    <ic:FluentIcon Icon="ArrowLeft" IconVariant="Regular" IconSize="Size32" />
    <ic:SymbolIcon Symbol="Calendar" IconVariant="Color" />
</Page>

This package features <FluentIcon>/<SymbolIcon> element, and <FluentIconSource>/<SymbolIconSource> on platforms with <IconSource>, which generally provide following properties:

• Icon (for Fluent...) / Symbol (for Symbol...) : Icon / Symbol
• IconVariant : IconVariant
  • New in version 1.1.278: Color variant added along with COLRv1 migration.
• IconSize (for Fluent...) : IconSize
• FlowDirection : FlowDirection
  • Switch between LTR/RTL icon variant.
• FontSize : double
• Foreground : Brush

Variants

Grid	Fluent variant	Symbol variant
Resizable	20 × 20 (upstream)	16 × 16 (Segoe-like)
Resizable (light)	32 × 32 (upstream)	28 × 28
Other sizes	12, 16, 20, 24, 28, 32, 48	None

The Fluent variant provides all sizes of icons untouched compared to upstream, while the Symbol variant mimics the APIs and appearances of SymbolIcon and Segoe Fluent Icons from WinUI, where the borders of the icons are trimmed and some overflowed shapes are rearranged, to match the geometric metrics of Segoe (read more at the child project Seagull Icons).

Markup extension

<Page xmlns:icx="using:FluentIcons.WinUI.Markup">
    <Expander Header="{icx:SymbolIcon Symbol=ArrowLeft}" />
</Page>

Markup extensiones have been added since version 1.1.242, and then moved to a child namespace since version 1.3.

Outline

<Page xmlns:ic="using:FluentIcons.WinUI">
    <ic:FluentIcon Icon="Trophy"
                   IconVariant="Filled"
                   Foreground="Gold"
                   ic:Outline.Foreground="Goldenrod" />
    <ic:SymbolIcon Symbol="InkingToolAccent"
                   IconVariant="Filled"
                   Foreground="Gold"
                   ic:Outline.Symbol="InkingTool"
                   ic:Outline.Foreground="Goldenrod" />
</Page>

The new feature Outline is implemented for experiment since version 2.0.317. The static class include following attached properties which could be applied to FluentIcon or SymbolIcon elements:

• Icon (for FluentIcon) / Symbol (for SymbolIcon) : Icon? / Symbol?
  • Default to null, where the value will be inherited from the host control.
• IconVariant : IconVariant
  • Default to Regular.
• Foreground : Brush

Please note that due to limitations in rendering precision, unexpected color leakage may occur at the edges of the icons. To achieve a good display, you may need to avoid using combinations of fill and stroke colors with significant hue differences.

Platform-specific

MAUI

⚠️ The extension method UseFluentIcons(this MauiAppBuilder builder) must be called at start-up to register fonts properly.

<SymbolImageSource> and SymbolImageSourceExtension are provided on MAUI as stand-ins.

All properties of type Brush are defined as Color instead, with the Color suffix added to the name.

UWP / WinUI

The Win2D package is referenced by this library for the “Outline” feature, but with a relatively old version. While this brings you more flexibility, it is still recommended to override with the latest version of the package.

WPF

🚧 Color icons are broken on WPF, because of the lack of COLR rendering support. It also stops working in environments like macOS and WebAssembly when rendering with SkiaSharp 2, possibly affecting Avalonia and Uno.

Building

To clone and build this project with Git for Windows, support for symbolic links are required:

git config --global core.symlinks true