Plugin.Maui.Lucide 1.0.1

Plugin.Maui.Lucide 🌀

A comprehensive Lucide icon library for .NET MAUI applications, featuring over 1,700 beautiful, customizable SVG icons.

✨ Features

• 1,700+ Beautiful Icons: Complete collection of Lucide icons as scalable font icons
• AI-Generated UI Compatible: Perfect for porting designs from GitHub Spark, V0.dev, and other AI tools that favor Lucide icons
• Multiple Usage Patterns: Static references, resource dictionary, and bindable properties
• Cross-Platform: Works on Android, iOS, macOS, and Windows
• Customizable: Full control over size, Color, and styling
• Performance Optimized: Font-based implementation for smooth rendering

🚀 Getting Started

Installation

Install the NuGet package:

<PackageReference Include="Plugin.Maui.Lucide" Version="1.0.0" />

or

dotnet add package Plugin.Maui.Lucide

Setup

1. Register the plugin

In your MauiProgram.cs:

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseLucide(); // Add this line

        return builder.Build();
    }
}

2. Import the namespace

Add the namespace to your global XAML namespaces:

[assembly: XmlnsDefinition(
    "http://schemas.microsoft.com/dotnet/maui/global",
    "Plugin.Maui.Lucide.Controls", AssemblyName = "Plugin.Maui.Lucide")]

or add to any XAML file where you want to use the icons:

<ContentPage 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:lucide="clr-namespace:Plugin.Maui.Lucide.Controls;assembly=Plugin.Maui.Lucide"
    x:Class="MyApp.Pages.MyContentPage">
</ContentPage>

3. Import the Resource Dictionary (optional)

Plugin.Maui.Lucide contains a Resource Dictionary with all the icon names defined as resources. You can use these directly (see below) but will need to import the Resource Dictionary. In your App.xaml file:

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:lucide="clr-namespace:Plugin.Maui.Lucide.Resources.Styles;assembly=Plugin.Maui.Lucide"
             x:Class="YourApp.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                
                <lucide:Icons />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

📋 Usage

Method 1: Resource Dictionary

Recommended for: use in XAML

Make sure you have imported the Resource Dictionary (see optional setup step 3 above).

Then use the icons as static resources:

<lucide:Icon 
    Name="{StaticResource Airplay}"
    Size="24"
    Color="Green" />

<lucide:Icon 
    Name="{StaticResource CableCar}"
    Size="48"
    Color="Purple" />

Method 2: Static Icon Names

Recommended for: use in C#, but works in XAML too.

Use the strongly-typed static icon names for IntelliSense support and compile-time safety:

<lucide:Icon 
    Name="{x:Static icons:Icons.Activity}"
    Size="24"
    Color="Red" />

<lucide:Icon 
    Name="{x:Static icons:Icons.User}"
    Size="32"
    Color="Blue" />

Note: The static class is not in the same namespace as the Icon control, so you need to import both:

xmlns:icons="clr-namespace:Plugin.Maui.Lucide;assembly=Plugin.Maui.Lucide"
xmlns:lucide="clr-namespace:Plugin.Maui.Lucide.Controls;assembly=Plugin.Maui.Lucide"

Method 3: C# Code

All properties are backed by bindable properties, enabling full C# usage:

var icon = new Icon
{
    Name = Icons.Activity,
    Size = 24,
    Color = Colors.Red,
    HorizontalOptions = LayoutOptions.Center
};

// Or modify existing icon
myIcon.Name = Icons.User;
myIcon.Size = 32;
myIcon.Color = Colors.Blue;

Can be used in code-behind files or non-XAML (C# only) projects.

Method 4: Data Binding

Perfect for MVVM scenarios where icons might change based on state:

<lucide:Icon 
    Name="{Binding CurrentIconName}"
    Size="{Binding IconSize}"
    Color="{Binding IconColor}" />

public class ViewModel : INotifyPropertyChanged
{
    public string CurrentIconName { get; set; } = Icons.Activity;
    public double IconSize { get; set; } = 24;
    public Color IconColor { get; set; } = Colors.Red;
}

Note: Generally this is not recommended. In MVVM icons would be considered the responsibility of the View, not the ViewModel. But Name, Color, and Size are backed by bindable properties, so the option is there if it suits your use case.

Method 5: Use as FontImageSource

You can use these icons without using the Icon control directly. The bundled font and static names and dictionary make it simple to consume these anywhere that FontImageSource is supported, e.g.:

<ShellContent
    Title="Home"
    ContentTemplate="{DataTemplate local:MainPage}"
    Icon="{FontImageSource FontFamily=lucide,
                           Glyph={StaticResource House}}"
    Route="MainPage" />

Method 6: Use the Glyph code directly

The Name property is just a string, and the resource dictionary and static class are for convenience. There's nothing stopping you supplying the glyph code directly if you really want to:

<lucide:Icon 
    Name="&#xe61c;"
    Size="32"
    Color="Blue" />

🎯 Perfect for AI-Generated UIs

This library is particularly valuable when working with AI-powered design tools like:

• GitHub Spark
• V0.dev
• Cursor AI
• Claude/ChatGPT

These tools are becoming increasingly popular as a quick way to generate a prototype or bootstrap a project, but they generally only produce HTML, CSS, and JavaScript (and will generally produce React code unless explicitly instructed not to, and may still do so even then). And they all tend to favour Lucide Icons

Several tools are being actively worked on to help port these to .NET MAUI, including:

• FlagstoneUI
• Crosswind
• Tailwind2Xaml

This library helps take care of the icons part. Simply replace the web-based Lucide icon references with the corresponding static references from this library.

🛠 Properties

The Icon control supports these bindable properties:

🎨 Styling

You can style icons using standard .NET MAUI styling approaches:

<Style x:Key="PrimaryIconStyle" TargetType="lucide:Icon">
    <Setter Property="Size" Value="24" />
    <Setter Property="Color" Value="{StaticResource Primary}" />
</Style>

<lucide:Icon 
    Name="{x:Static lucide:Icons.Heart}"
    Style="{StaticResource PrimaryIconStyle}" />

📱 Platform Support

• ✅ Android (API 21+)
• ✅ iOS (15.0+)
• ✅ macOS Catalyst (15.0+)
• ✅ Windows (10.0.17763.0+)

Screenshots

<img src="https://github.com/matt-goldman/Plugin.Maui.Lucide/blob/73faa7d206451166572c3b0d861e679360872d72/assets/screenshot-android.png" width="200">

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Credits

• Icons provided by Lucide - Beautiful & consistent icon toolkit
• Font conversion powered by IconFont2Code

Made with ❤️ for the .NET MAUI community