Microsoft Fluent UI Icons for Blazor

:star: We appreciate your star, it helps!

Introduction

The Microsoft.FluentUI.AspNetCore.Component package provides a set of Blazor components which you can use to build applications that have the look and feel or modern Microsoft applications.

This library is a set of icons wrapping Microsoft�s official Fluent UI Icon library.

Getting Started

To get started using the Fluent UI Icons for Blazor, you will first need to install the official Nuget package in the project you would like to use the library and components. You can use the following command:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

Usage

To use the icons, you will need to add the following using statement to your _Imports.razor file:

@using Microsoft.FluentUI.AspNetCore.Components

Then you can use the icons in your Blazor components like this:

Note: Names are structured as follows: Icons.[IconVariant].[IconSize].[IconName].

<FluentIcon Icon="@(Icons.Regular.Size24.Save)" />

You can use your custom images by setting the Value property calling the Icon.FromImageUrl method:

<FluentIcon Value="@(Icon.FromImageUrl("/Blazor.png"))" Width="32px" />

List of icons and additional resources

The Microsoft Fluent UI Blazor components documentation and demo site

Joining the Community

Looking to get answers to questions or engage with us in real-time? Our community is active on Gitter and Discord. Submit requests and issues on GitHub, or join us by contributing on some good first issues via GitHub.

We look forward to building an amazing open source community with you!

Contact

• Join the community and chat with us in real-time on Gitter or Discord.
• Submit requests and issues on GitHub.
• Contribute by helping out on some of our recommended first issues on GitHub.