XAML Code Icons — Export Paths for WPF & WinUI

Export vector icons as XAML Path data and drop them into WPF or WinUI. You’ll learn how to theme with brushes, bind to Foreground, add accessibility via AutomationProperties, and package icons as reusable resources.

When to choose XAML code

• You’re building desktop apps with WPF or WinUI and need crisp, scalable icons.
• You want icons that inherit theme colors via brushes or Foreground bindings.
• You prefer XAML resources you can reuse in styles, control templates, or data templates.

Draw, Import or Trace your icon

• Start by drawing directly in IconVectors. Use the shape, pen, and path tools to build icons on a pixel-perfect grid (16/20/24/32 px). Align strokes to whole pixels for maximum sharpness at small sizes.
• File → Place lets you import an existing SVG file into your current document— useful for reusing symbols or assets from Figma, Illustrator, or Inkscape.
• File → Place and Trace Bitmap inserts a bitmap image (PNG, JPG, BMP, etc.) and converts it to vector paths. The tracing is optimized for monochrome bitmaps like glyphs or scanned sketches; refine the paths after tracing.
• You can also Copy/Paste vector content from external tools. IconVectors interprets SVG data in the clipboard and adds it to the canvas.
• Or draw from scratch using rectangles, ellipses, lines, freeform pen, path editing, and boolean operations for full control.

Export XAML from IconVectors

1. Design on a consistent grid (e.g., 24×24). Keep strokes aligned to whole pixels.
2. Set theming strategy: for single‑color icons, you’ll typically bind Fill or Stroke to a brush (see below).
3. Open the Live Code Viewer (F3) and switch to the XAML tab.
4. Copy the generated XAML Path (or Export) and paste it into your app as shown next.

WPF: simple Path bound to Foreground

<Grid>
  <Grid.Resources>
    <Style x:Key="IconPathStyle" TargetType="Path">
      <Setter Property="Stretch" Value="Uniform"/>
      <Setter Property="Fill" Value="{Binding Foreground, RelativeSource={RelativeSource AncestorType=Control}}"/>
      <Setter Property="SnapsToDevicePixels" Value="True"/>
    </Style>
  </Grid.Resources>

  <Button Padding="8">
    <Path Style="{StaticResource IconPathStyle}"
          Width="24" Height="24"
          Data="M2.5 9C2.5 2.5 10 3 12 7.5C14 3 21.5 2.5 21.5 9C21.5 15.4 12 21.5 12 21.5C12 21.5 2.5 15.6 2.5 9z"
          AutomationProperties.Name="Favorite"/>
    <Button.Content>Favorite</Button.Content>
  </Button>
</Grid>

WPF: package as a reusable resource (Geometry)

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <SolidColorBrush x:Key="IconBrush" Color="#2563EB"/>
  <Geometry x:Key="Heart24Geometry">M2.5 9C2.5 2.5 10 3 12 7.5C14 3 21.5 2.5 21.5 9C21.5 15.4 12 21.5 12 21.5C12 21.5 2.5 15.6 2.5 9z</Geometry>
</ResourceDictionary>

<Path Data="{StaticResource Heart24Geometry}"
      Width="24" Height="24"
      Stretch="Uniform"
      Fill="{DynamicResource IconBrush}"
      AutomationProperties.Name="Favorite"/>

WinUI: PathIcon with themeable brush

<Page.Resources>
  <SolidColorBrush x:Key="IconBrush" Color="{ThemeResource SystemAccentColor}" />
</Page.Resources>

<StackPanel Orientation="Horizontal" Spacing="8">
  <PathIcon Data="M2.5 9C2.5 2.5 10 3 12 7.5C14 3 21.5 2.5 21.5 9C21.5 15.4 12 21.5 12 21.5C12 21.5 2.5 15.6 2.5 9z"
            Foreground="{StaticResource IconBrush}"
            Width="24" Height="24"
            AutomationProperties.Name="Favorite"/>
  <TextBlock Text="Favorite"/>
</StackPanel>

Accessibility checklist

• Use AutomationProperties.Name on informative icons; omit for purely decorative ones.
• Ensure contrast by choosing brushes that meet your theme’s standards.
• If the icon is part of a control template, prefer TemplateBinding to the control’s Foreground to keep it in sync.

Theming options (brushes & bindings)

• Bind to Foreground so the icon color follows the host control.
• DynamicResource brush (WPF) or ThemeResource (WinUI) to switch colors with the theme.
• For two‑tone icons, keep accents as fixed brushes and bind the main shape to the theme brush.

Performance & packaging tips

• Reuse Geometry or PathIcon definitions from a ResourceDictionary to avoid duplication.
• Enable UseLayoutRounding on your window/page for crisper rendering at odd DPI scales.
• Set Stretch="Uniform" and explicit Width/Height for predictable sizing.
• If animating transforms, consider CacheMode="BitmapCache" on the Path to reduce redraw cost.

Reference example (XAML Path)

<Path Width="24" Height="24" Stretch="Uniform"
      StrokeThickness="1" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeEndLineCap="Round"
      Data="M2.5 9C2.5 2.5 10 3 12 7.5C14 3 21.5 2.5 21.5 9C21.5 15.4 12 21.5 12 21.5C12 21.5 2.5 15.6 2.5 9z"
      Fill="{DynamicResource IconBrush}"
      AutomationProperties.Name="Favorite"/>