Icon

Lucide icons as geometry for PathIcon.

ExampleInteractive

Icon — Avalonia UIKit

Live demo unavailable

<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 has Lucide icons as geometry resources: set Data to one of them, such as {StaticResource UIKit.Icon.Search} (see Icons for which an app has, and the Icons page for all of them). 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.

To draw one of the components' icons by name, use uikit:Icon.

Examples

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

SizesInteractive

Live demo unavailable

<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

Live demo unavailable

<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>

Icon

#Usage

#Examples

Usage

Examples