.Net Maui Icons

The .NET Maui Icons is a comprehensive library collection that facilitates icon and font icon management within the .NET Maui framework. This library includes controls that seamlessly integrate three iconic design systems: Fluent, Material, and Cupertino. These controls offer complete access to the Material Icon Collection, delivering a rich and versatile iconography solution for .NET Maui applications.

Package	Latest stable	Latest Preview	Description
AathifMahir.Maui.MauiIcons.SegoeFluent			Maui Icons - Segoe Fluent Package Contains Complete Collection of Built in Windows Segoe Fluent Icons.
AathifMahir.Maui.MauiIcons.Fluent			Maui Icons - Fluent Package Contains Complete Collection of Open Source Version Fluent Icons from Microsoft.
AathifMahir.Maui.MauiIcons.Fluent.Filled			Maui Icons - Fluent Filled Package Contains Complete Collection of Open Source Version Fluent Icons from Microsoft.
AathifMahir.Maui.MauiIcons.Material			Maui Icons - Material Package Contains Complete Collection of Material Regular Icons.
AathifMahir.Maui.MauiIcons.Material.Outlined			Maui Icons - Material Outlined Package Contains Complete Collection of Material Outlined Icons.
AathifMahir.Maui.MauiIcons.Material.Rounded			Maui Icons - Material Rounded Package Contains Complete Collection of Material Rounded Icons.
AathifMahir.Maui.MauiIcons.Material.Sharp			Maui Icons - Material Sharp Package Contains Complete Collection of Material Sharp Icons.
AathifMahir.Maui.MauiIcons.Cupertino			Maui Icons - Cupertino Package Contains Complete Collection of Open Source Version Framework 7's iOS Icons.
AathifMahir.Maui.MauiIcons.FontAwesome			Maui Icons - FontAwesome Package Contains Complete Collection of Free and Open Source Version of Regular FontAwesome 6 Icons.
AathifMahir.Maui.MauiIcons.FontAwesome.Solid			Maui Icons - FontAwesome Solid Package Contains Complete Collection of Free and Open Source Version of Solid FontAwesome 6 Icons.
AathifMahir.Maui.MauiIcons.FontAwesome.Brand			Maui Icons - FontAwesome Brand Package Contains Complete Collection of Free and Open Source Version of Brand FontAwesome 6 Icons.

Get Started

In order to use the .NET MAUI Icons you need to call the extension method in your MauiProgram.cs file as follows:

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		
		// Initialise the .Net Maui Icons - Fluent
		builder.UseMauiApp<App>().UseFluentMauiIcons();
		
		// Initialise the .Net Maui Icons - Material
		builder.UseMauiApp<App>().UseMaterialMauiIcons();

		// Initialise the .Net Maui Icons - Cupertino
		builder.UseMauiApp<App>().UseCupertinoMauiIcons();
	}
}

Usage

In order to make use of the .Net Maui Icons you can use the below namespace:

xmlns:mi="http://www.aathifmahir.com/dotnet/2022/maui/icons"

Workaround

if you came across this issue dotnet/maui#7503 when using new namespace, Make sure to create an discarded instance of MauiIcon in the codebehind like below

    public MainPage()
    {
        InitializeComponent();
        // Temporary Workaround for url styled namespace in xaml
        _ = new MauiIcon();
    }

Breaking Changes from v2

Old (v1)

xmlns:cupertino="clr-namespace:MauiIcons.Cupertino;assembly=MauiIcons.Cupertino"
xmlns:fluent="clr-namespace:MauiIcons.Fluent;assembly=MauiIcons.Fluent"
xmlns:material="clr-namespace:MauiIcons.Material;assembly=MauiIcons.Material"

<cupertino:MauiIcon Icon="Airplane"/>
<fluent:MauiIcon Icon="Accounts"/>
<material:MauiIcon Icon="ABC"/>

New (v2)

xmlns:mi="http://www.aathifmahir.com/dotnet/2022/maui/icons"

<mi:MauiIcon Icon="{mi:Cupertino Airplane}"/>
<mi:MauiIcon Icon="{mi:Fluent Accounts}"/>
<mi:MauiIcon Icon="{mi:Material ABC}"/>

Nuget Package Changes

• AathifMahir.Maui.MauiIcons.Material doesn't contain all the Variants anymore, Now only contains Regular version of Material Icons. Other Variants Decoupled into Seperate Packages Like Below

  • AathifMahir.Maui.MauiIcons.Material.Outlined
  • AathifMahir.Maui.MauiIcons.Material.Rounded
  • AathifMahir.Maui.MauiIcons.Material.Sharp

• AathifMahir.Maui.MauiIcons.FluentFilled is Depcrecated and Replaced by AathifMahir.Maui.MauiIcons.Fluent.Filled

Built in Control Usage

Xaml

<mi:MauiIcon Icon="{mi:Cupertino Airplane}"/>
<mi:MauiIcon Icon="{mi:material ABC}"/>
<mi:MauiIcon Icon="{mi:fluent Accounts}"/>

C#

// Traditional C#
new MauiIcon() {Icon = CupertinoIcons.AppBadge, IconColor = Colors.Green};
new MauiIcon() {Icon = FluentIcons.Accounts, IconColor = Colors.Blue};
new MauiIcon() {Icon = MaterialIcons.ABC, IconColor = Colors.Yellow};

// C# Markup
new MauiIcon().Icon(CupertinoIcons.AntFill).IconColor(Colors.Purple);
new MauiIcon().Icon(FluentIcons.Accounts).IconColor(Colors.Magenta);
new MauiIcon().Icon(MaterialIcons.ABC).IconColor(Colors.Violet);

Xaml Extension Usage

<Image Aspect="Center" Source="{mi:Cupertino Icon=ArchiveboxFill}"/>

<Label Text="{mi:Fluent Icon=Accounts}"/>

C# Markup Usage

new ImageButton().Icon(FluentIcons.Accounts);

new Image().Icon(CupertinoIcons.AntFill);

new Label().Icon(MaterialIcons.Home).IconSize(40.0).IconColor(Colors.Red);

new Entry().Icon(CupertinoIcons.AntFill).IconSize(20.0).IconColor(Colors.Aqua);

new SearchBar().Icon(MaterialIcons.ABC);

Applying Icon To Text or Placeholder

Controls that Supports Placeholder, Can Assign the Icon To PlaceHolder or Text, Defaults to Placeholder but can be set to Text by Setting isPlaceHolder Parameter to False

new Entry().Icon(CupertinoIcons.AntFill, isPlaceHolder: false).IconSize(20.0).IconColor(Colors.Aqua);

new SearchBar().Icon(MaterialIcons.ABC, isPlaceHolder: false);

Disclaimer: It's important to note that not all controls are compatible with C# markup. We have conducted tests with the following controls in the current release: Label, Image, ImageButton, SearchBar, Editor, and Entry. Additionally, the native MauiIcon control, when combined with C# markup, can prove to be quite versatile and offer extra features for various scenarios.

Icon Suffix

The Built in MauiIcon Control Does Support IconSuffix and It's Customizations, You can use Icon Suffix Feature by Following Below Examples

Xaml

<mi:MauiIcon Icon="{mi:Material Icon=AirplanemodeActive}" IconSuffixTextColor="Red" IconSuffix="Off" IconSuffixFontSize="16"/>
<mi:MauiIcon Icon="{mi:FontAwesomeBrand Icon=Github}" IconSuffixTextColor="Cyan" IconSuffix="Repo" IconSuffixFontSize="16"/>

C#

new MauiIcon().Icon(FontAwesomeBrandIcons.Pinterest).IconColor(Colors.Red).IconSuffix("Pin").IconSuffixBackgroundColor(Colors.White);
new MauiIcon().Icon(CupertinoIcons.Airplane).IconColor(Colors.Cyan).IconSuffix("Flying");

Animation Usage

Xaml

<mi:MauiIcon Icon="{mi:Cupertino Airplane}" EntranceAnimationType="Fade"/>
<mi:MauiIcon Icon="{mi:material ABC}" EntranceAnimationType="Rotate" EntranceAnimationDuration="4000"/>
<mi:MauiIcon Icon="{mi:fluent Accounts}" EntranceAnimationType="Scale"/>

C#

new MauiIcon().Icon(CupertinoIcons.AntFill).EntranceAnimationType(AnimationType.Fade);
new MauiIcon().Icon(FluentIcons.Accounts).EntranceAnimationType(AnimationType.Rotate);
new MauiIcon().Icon(MaterialIcons.ABC).EntranceAnimationType(AnimationType.Scale).EntranceAnimationDuration(4000);

Custom OnPlatform and OnIdiom Usage

Xaml

<mi:MauiIcon Icon="{mi:Cupertino Airplane}" OnPlatforms="WinUI, Android, MacCatalyst"/>
<mi:MauiIcon Icon="{mi:material ABC}" OnIdioms="Desktop, Phone, Tablet"/>
<mi:MauiIcon Icon="{mi:fluent Accounts}" OnPlatforms="Android" OnIdioms="Phone"/>

C#

new MauiIcon().Icon(CupertinoIcons.AntFill).OnPlatforms(new List<string>{"WinUI", "Android"});
new MauiIcon().Icon(FluentIcons.Accounts).OnIdioms(new List<string>{"Desktop", "Phone"});
new MauiIcon().Icon(MaterialIcons.ABC).OnPlatforms(new List<string>{"WinUI", "Android"}).OnIdioms(new List<string>{"Desktop", "Phone"});

Maui Built in OnPlatform and OnIdiom Usage

<Image>
    <Image.Source>
        <OnPlatform x:TypeArguments="ImageSource" Default="{mi:FluentFilled Icon=Airplane20Filled, TypeArgument={x:Type ImageSource}}">
            <On Platform="MacCatalyst, WinUI" 
			Value="{mi:Cupertino Icon=Airplane, IconBackgroundColor=Cyan, TypeArgument={x:Type ImageSource}}"/>
        </OnPlatform>
    </Image.Source>
</Image>

<Image>
    <Image.Source>
        <OnIdiom Default="{mi:FluentFilled Icon=Airplane20Filled, TypeArgument={x:Type ImageSource}}" 
		Desktop="{mi:FluentFilled Icon=Airplane20Filled, TypeArgument={x:Type ImageSource}}">
        </OnIdiom>
    </Image.Source>
</Image>

Disclaimer: Only ImageSource or FontImageSource Supports Maui's Built in OnPlatform or OnIdiom and TypeArgument Should be Assigned to Work Optimally, Therefore It's Recommended to use MauiIcons Custom OnPlatform and OnIdioms

Properties

Parameters	Type	Description
Icon	Enum	Gets or sets the icon enum value
IconSize	double	Gets or sets the size of the icon
IconColor	Color	Gets or sets the color of the icon
IconBackgroundColor	Color	Gets or sets the background color of the icon
IconAutoScaling	bool	Gets or sets a value indicating whether the icon should automatically scale
IconSuffix	string	Gets or sets the suffix text for the icon
IconSuffixFontFamily	string	Gets or sets the font family for the icon suffix
IconSuffixFontSize	double	Gets or sets the font size for the icon suffix
IconSuffixTextColor	Color	Gets or sets the text color for the icon suffix
IconSuffixBackgroundColor	Color	Gets or sets the background color for the icon suffix
IconAndSuffixBackgroundColor	Color	Gets or sets the background color for the icon and Suffix, It applies the color to whole control
IconSuffixAutoScaling	bool	Gets or sets a value indicating whether the icon suffix should automatically scale.
EntranceAnimationType	AnimationType	Gets or Sets the type of entrance animation for the element
EntranceAnimationDuration	uint	Gets or sets the duration of the entrance animation for the element
OnPlatforms	IList<string>	Gets or sets the supported platforms
OnIdioms	IList<string>	Gets or sets the supported idioms

License

MauiIcons is Licensed Under MIT License.

Fluent UI System Icons is Licensed Under MIT License.

Material Design Icons is Licensed Under Apache License 2.0.

Segoe Fluent Icons is Licensed by Microsoft Under Couple of License.

Cupertino Icons is Licensed Under MIT License.

FontAwesome Icons is Licensed by FontAwesome Under Couple of License

Contribute

If you wish to contribute to this project, please don't hesitate to create an issue or request. Your input and feedback are highly appreciated. Additionally, if you're interested in supporting the project by providing resources or becoming a sponsor, your contributions would be welcomed and instrumental in its continued development and success. Thank you for your interest in contributing to this endeavor.