GitHub

Icon

PreviousNext

The Lucide icons GPUI Kit uses, as geometry for PathIcon.

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

Usage

The theme covers PathIcon and bundles GPUI Kit's Lucide icons as geometry resources: set Data to one of them, such as {StaticResource Gpui.Icon.Search} (see Icons for the list). An icon is 16px, GPUI's 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, as GPUI scales the SVG.

Examples

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

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

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

Colors
InteractiveIcon demo: Colors
<StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left">
  <PathIcon Classes="large" Data="{StaticResource Gpui.Icon.Copy}" />
  <PathIcon Classes="large" Data="{StaticResource Gpui.Icon.Copy}" Foreground="{DynamicResource Gpui.MutedForeground}" />
  <PathIcon Classes="large" Data="{StaticResource Gpui.Icon.Copy}" Foreground="{DynamicResource Gpui.Primary}" />
  <PathIcon Classes="large" Data="{StaticResource Gpui.Icon.Copy}" Foreground="{DynamicResource Gpui.Danger}" />
  <PathIcon Classes="large" Data="{StaticResource Gpui.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.