FluentSystemIconsWinUI3

A WinUI 3 library that provides easy access to Microsoft's Fluent System Icons

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

Installation

From NuGet

In your app project, install the WinUI3.Fluent.Icons NuGet package.

You can install the latest version using the following command in the NuGet Package Manager:

Install-Package WinUI3.Fluent.Icons

Examples

The following examples assume that you have imported the WinUI3.Fluent.Icons namespace as follows.

xmlns:fluent="using:WinUI3.Fluent.Icons"

using Fluent.Icons;

Example A

Use a Fluent Icon as a button's content.

<Button>
    <fluent:FluentSymbolIcon Symbol="AddCircle24"/>
</Button>

myButton.Content = new FluentSymbolIcon(FluentSymbol.AddCircle24);

Example B

Use Fluent Icons in a NavigationView's MenuItems.

<NavigationView.MenuItems>
    <NavigationViewItem Content="Navigate">
        <NavigationViewItem.Icon>
            <FluentIconElement Symbol="Directions24" />
        </NavigationViewItem.Icon>
    </NavigationViewItem>
</NavigationView.MenuItems>

myNavView.MenuItems.Add(new NavigationViewItem()
{
    Icon = new FluentIconElement(FluentSymbol.Directions24);
});

Example C

Use a Fluent Icon in an AppBarButton.

<AppBarButton>
    <AppBarButton.Icon>
        <FluentIconElement Symbol="Star24" />
    </AppBarButton.Icon>
</AppBarButton>

myAppBarButton.Icon = new FluentIconElement(FluentSymbol.Star24);

Example D

Show a list of all available Fluent Icons.

<ListView ItemsSource="{x:Bind fluent:FluentSymbolIcon.AllFluentIcons.Keys}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="fluent:FluentSymbol">
            <ListViewItem>
                <StackPanel Spacing="10" Orientation="Horizontal">
                    <fluent:FluentSymbolIcon Symbol="{x:Bind}"/>
                    <TextBlock Text="{x:Bind}"/>
                </StackPanel>
            </ListViewItem>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Example E

Get the Windows.UI.Xaml.Media.Geometry object that represents an icon

FluentSymbolIcon.GetPathData(FluentSymbol.Home);

Example F

Get a PathIcon object that represents an icon

FluentSymbolIcon.GetPathIcon(FluentSymbol.Home);

Example G

Get the raw SVG path data for a given icon

FluentSymbolIcon.AllFluentIcons[FluentSymbol.Home];