Icons

Every Lucide icon GPUI Kit ships, as geometry for PathIcon and uikit:Icon: the theme carries the components' icons, and the package's generator adds the others an app uses.

The components draw Lucide icons. IconName names every icon GPUI Kit ships: the 1,818 icons of Lucide 1.43.0 and 12 of GPUI Kit's own (the title bar's buttons, Github, ResizeCorner and a few more). They are StreamGeometry resources, so the icons an app places next to the components match them exactly, and no SVG parser is needed at run time (the geometry is compiled into the assemblies, which suits NativeAOT). Lucide is licensed under the ISC License; the license ships with the package in THIRD-PARTY-NOTICES.md.

#Usage

uikit:Icon draws an icon by name: Kind is an IconName. The icon is 16px, the medium size, and takes the Foreground:

<uikit:Icon Kind="Search" />
<uikit:Icon Kind="TriangleAlert"
            Foreground="{DynamicResource UIKit.Warning}" />

The classes xsmall, small and large give the other sizes, 12, 14 and 24px:

<uikit:Icon Classes="small" Kind="ChevronDown" />
<uikit:Icon Classes="large" Kind="Bell" />

A misspelt Kind fails the build, as any enum value in compiled XAML does. uikit:Icon is a PathIcon, and a PathIcon takes the same icons as resources, UIKit.Icon.<IconName>:

<PathIcon Data="{StaticResource UIKit.Icon.Search}" />
<PathIcon Classes="large" Data="{StaticResource UIKit.Icon.Bell}" />

Any other geometry works the same way; the theme's PathIcon scales whatever Data it gets to its size. In code, IconName.Search.ResourceKey() is the resource's key, UIKit.Icon.Search.

#Which icons an app has

The theme carries the icons its components draw and the rest of GPUI Kit's component icons: the 109 of IconNames.Bundled, which draw in any app. The others come with the generator in the package, which adds to each project the icons it names, so an app carries only the icons it uses. It finds them in the project's XAML and C#:

<uikit:Icon Kind="Bike" />
<PathIcon Data="{StaticResource UIKit.Icon.Bike}" />
<uikit:Icon Kind="{x:Static uikit:IconName.Bike}" />
<Setter Property="Kind" Value="Bike" />

icon.Kind = IconName.Bike;
var key = "UIKit.Icon.Bike";

It cannot see an icon only chosen at run time: a name read from a file or a setting, Enum.Parse<IconName>, or a key put together from parts. List those in the project file, by IconName, Lucide name or key, or take every icon, which adds about 2 MB to the app:

<ItemGroup>
  <UIKitIcon Include="Bike;Camera" />
</ItemGroup>
<PropertyGroup>
  <UIKitIcons>All</UIKitIcons>
</PropertyGroup>

A name in UIKitIcon that is no icon is a build warning (UIKIT001). An icon the app does not have draws nothing, and the theme writes a warning naming it to Avalonia's log (LogToTrace() sends it to the debug output). The generator is a C# source generator: a project in another language has the theme's own icons, IconNames.Bundled.

#Browsing the icons

The Icons page shows every icon at each size and in the theme's colors, and writes the XAML that draws it; for an icon the generator adds, it gives the UIKitIcon item that lists it.

For icons outside IconName, add your own StreamGeometry resources and point Data at them.