Guide to Adding Icons in Avalonia UI (4 Easy Methods That Actually Work)

There are several ways to add icons to your Avalonia UI app. Here are the most common and effective methods:

Method 1: Using Lucide Icons (note that I wasn’t able to change the foreground color like other methods)

1. Install Lucide.Avalonia

<PackageReference Include="LucideAvalonia" />

2. Add the namespace to your axaml file

xmlns:Icons="clr-namespace:LucideAvalonia;assembly=LucideAvalonia"

3. Use Icons in Your Views

to search for icons link here

<UserControl xmlns:lucide="using:Lucide.Avalonia">
  
  <StackPanel Spacing="10">
    <!-- Simple icon -->
    <Icons:Lucide Icon="Plus" Width="24" Height="24" />
    
    <!-- Colored icon -->
    <Icons:Lucide Icon="Check" Width="20" Height="20" Foreground="Green" />
    
    <!-- In buttons -->
    <Button>
      <StackPanel Orientation="Horizontal" Spacing="5">
        <Icons:Lucide Icon="Save" Width="16" Height="16" />
        <TextBlock Text="Save Task" />
      </StackPanel>
    </Button>
    
    <!-- More todo app relevant icons -->
    <Icons:Lucide Icon="Calendar" Width="24" Height="24" />
    <Icons:Lucide Icon="Clock" Width="24" Height="24" />
    <Icons:Lucide Icon="User" Width="24" Height="24" />
    <Icons:Lucide Icon="Settings" Width="24" Height="24" />
    <Icons:Lucide Icon="Trash2" Width="24" Height="24" />
  </StackPanel>
  
</UserControl>

Method 2: Using MahaApps Icons

1. Install Avalonia MahaApps Icons

<PackageReference Include="IconPacks.Avalonia"/>

2. Add to App.axaml

<Application.Styles>
  <FluentTheme />
  <StyleInclude Source="avares://IconPacks.Avalonia/Icons.axaml" />
</Application.Styles>

3. Use in Views

for icons, it’s a GUI application, you can clone and run it:
https://github.com/MahApps/IconPacks.Browser

<UserControl xmlns:iconPacks="https://github.com/MahApps/IconPacks.Avalonia">
  
  <StackPanel>
    <iconPacks:PackIconBoxIcons Kind="RegularPlus" Width="24" Height="24" />
    <iconPacks:PackIconBoxIcons Kind="RegularTrash" Width="24" Height="24" Foreground="Red" />

    <iconPacks:PackIconBoxIcons Kind="RegularPencil" Width="24" Height="24" />

    <iconPacks:PackIconBoxIcons Kind="RegularCheck" Width="24" Height="24" Foreground="Green" />
  </StackPanel>
  
</UserControl>

Method 3: Custom PNG Icons

1. Add PNG files to your project

Create a folder Assets/Icons/ and add your PNG files:

for SVG you need Avalonia.Svg package:
https://github.com/liwuqingxin/Avalonia.Svg

or you can convert it to png

2. Use PNG icons in Views

<UserControl>
  <StackPanel>
    <!-- Direct SVG -->
    <Image Source="..Assets/Icons/coding-icon.png" Width="24" Height="24" />
    
    <!-- SVG in buttons -->
    <Button>
      <StackPanel Orientation="Horizontal" Spacing="5">
        <Image Source="../Assets/Icons/plus.png" Width="16" Height="16" />
        <TextBlock Text="Add Task" />
      </StackPanel>
    </Button>
  </StackPanel>
</UserControl>

note that Avalonia does not support SVG so you need to use the Avalonia.Svg package.

Method 4: Using PathIcon (Built-in Avalonia)

Create reusable icon styles

<!-- In App.axaml or a style file -->
<Application.Resources>
  <!-- Plus icon -->
  <StreamGeometry x:Key="PlusIcon">M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z</StreamGeometry>
  
  <!-- Check icon -->
  <StreamGeometry x:Key="CheckIcon">M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z</StreamGeometry>
  
  <!-- Delete icon -->
  <StreamGeometry x:Key="DeleteIcon">M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z</StreamGeometry>
</Application.Resources>

Use PathIcon in Views

<UserControl>
  <StackPanel>
    <!-- Using PathIcon -->
    <PathIcon Data="{StaticResource PlusIcon}" Width="24" Height="24" Foreground="Blue" />
    <PathIcon Data="{StaticResource CheckIcon}" Width="24" Height="24" Foreground="Green" />
    <PathIcon Data="{StaticResource DeleteIcon}" Width="24" Height="24" Foreground="Red" />
  </StackPanel>
</UserControl>

you can create a Separate Icons Style File (Better Organization)

As your application grows, keeping all icons in App.axaml becomes messy. Here’s a much better approach – creating a dedicated Icons resource file.

Step 1: Create the Icons Resource File

Your project structure should now look like this:

1. Right-click on your project in the Solution Explorer
2. Add → New Item
3. Choose “Avalonia Styles”
4. Name it Icons.axaml

YourApp/
├── Views/
├── Assets/
├── ViewModels/
├── Resources/
│   └── Icons.axaml  ← Your new file
├── App.axaml
└── Program.cs

Step 2: Define Your Icons in Icons.axaml

Open your newly created Icons.axaml file and add your icon definitions:

<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Design.PreviewWith>
        <Border Padding="20">
            <!--  Add Controls for Previewer Here  -->
        </Border>
    </Design.PreviewWith>

    <!-- Define yours icons below -->
    <Style>
        <Style.Resources>
            <StreamGeometry x:Key="search_regular">M11.5,2.75 C16.3324916,2.75 20.25,6.66750844 20.25,11.5 C20.25,13.6461673 19.4773285,15.6118676 18.1949905,17.1340957 L25.0303301Z...</StreamGeometry>
        </Style.Resources>
    </Style>
</Styles>

Step 3: Include Your Icons File in App.axaml

Now you need to tell Avalonia to load your icons. Update your App.axaml:

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="YourTodoApp.App">
  
  <Application.Styles>
    <FluentTheme />
    <StyleInclude Source="Resources/Icons.axaml" />
  </Application.Styles>
</Application>

Step 4: Using Your Icons in Views

Now comes the fun part, actually using your icons! Here’s how to use them in your Avalonia views:

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="YourTodoApp.Views.TodoListView">
  
  <StackPanel>

     <PathIcon Data="{StaticResource AddIcon}" Width="16" Height="16" Foreground="White" />

<Button Background="Transparent" Padding="5">
          <PathIcon Data="{StaticResource CheckIcon}" Width="20" Height="20" Foreground="Green" />
       </Button>

<StackPanel Grid.Column="2" Orientation="Horizontal" Spacing="5" Margin="10,0">
          <PathIcon Data="{StaticResource CalendarIcon}" Width="14" Height="14" Foreground="Gray" />
          <TextBlock Text="Today" FontSize="12" Foreground="Gray" VerticalAlignment="Center" />
        </StackPanel>

</StackPanel>
</UserControl>

Which Method Should You Choose?

Here’s my honest recommendation based on different scenarios:

Choose PathIcon when:

• You need just a few simple icons
• Performance is critical
• You want zero external dependencies

Choose Lucide or MahaApps Icons when:

• You’re building a modern web-style application
• You want consistent, professional icons
• You prefer a curated set over overwhelming choice
• You need the largest possible selection

Choose Custom SVG or PNG when:

• You have brand-specific requirements
• A designer created custom icons
• You need icons that aren’t available elsewhere

Good Luck