Skip to content
Avalonia UIKit
GitHub

Search documentation

Find components, guides and examples.

Esc
↑↓Navigate↵OpenEscClose

Theme

Choose the site's color theme.

ThemeT

System

Light

Dark

↑↓Preview↵ApplyEscCancel
Browse documentation

Icon

Partial

Lucide icons as geometry for PathIcon.

ExampleInteractive
Icon — Avalonia UIKit
Icon demo
<WrapPanel ItemSpacing="12" LineSpacing="12">
  <PathIcon Data="{StaticResource UIKit.Icon.Check}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Plus}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Minus}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Close}" />
  <PathIcon Data="{StaticResource UIKit.Icon.ChevronDown}" />
  <PathIcon Data="{StaticResource UIKit.Icon.ChevronRight}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Search}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
  <PathIcon Data="{StaticResource UIKit.Icon.ExternalLink}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Folder}" />
  <PathIcon Data="{StaticResource UIKit.Icon.FolderOpen}" />
  <PathIcon Data="{StaticResource UIKit.Icon.File}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Calendar}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Inbox}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Bell}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Star}" />
  <PathIcon Data="{StaticResource UIKit.Icon.User}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Eye}" />
  <PathIcon Data="{StaticResource UIKit.Icon.EyeOff}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Info}" />
  <PathIcon Data="{StaticResource UIKit.Icon.CircleCheck}" />
  <PathIcon Data="{StaticResource UIKit.Icon.TriangleAlert}" />
  <PathIcon Data="{StaticResource UIKit.Icon.CircleX}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Loader}" />
</WrapPanel>

Usage

The theme covers PathIcon and bundles Lucide icons as geometry resources: set Data to one of them, such as {StaticResource UIKit.Icon.Search} (see Icons for the list). An icon is 16px, the medium size, and takes its Foreground. The classes xsmall, small and large give 12, 14 and 24px, and any other Width and Height scale the outline exactly.

Examples

The three size classes, the default, and a 48px icon by Width and Height.

SizesInteractive
Icon demo: Sizes
<StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left">
  <PathIcon Classes="xsmall" Data="{StaticResource UIKit.Icon.Copy}" />
  <PathIcon Classes="small" Data="{StaticResource UIKit.Icon.Copy}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
  <PathIcon Classes="large" Data="{StaticResource UIKit.Icon.Copy}" />
  <PathIcon Width="48" Height="48" Data="{StaticResource UIKit.Icon.Copy}" />
</StackPanel>

Color with Foreground (the theme's muted, primary and danger brushes here), and turn an icon with a RenderTransform.

ColorsInteractive
Icon demo: Colors
<StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left">
  <PathIcon Classes="large" Data="{StaticResource UIKit.Icon.Copy}" />
  <PathIcon Classes="large" Data="{StaticResource UIKit.Icon.Copy}" Foreground="{DynamicResource UIKit.MutedForeground}" />
  <PathIcon Classes="large" Data="{StaticResource UIKit.Icon.Copy}" Foreground="{DynamicResource UIKit.Primary}" />
  <PathIcon Classes="large" Data="{StaticResource UIKit.Icon.Copy}" Foreground="{DynamicResource UIKit.Danger}" />
  <PathIcon Classes="large" Data="{StaticResource UIKit.Icon.ChevronRight}">
    <PathIcon.RenderTransform>
      <RotateTransform Angle="90" />
    </PathIcon.RenderTransform>
  </PathIcon>
</StackPanel>

Not covered

  • Loading arbitrary SVG files at run time.
  • An IconName-compatible API; icons are resources.