WPF Vector Icons

WPF Vector Icons

Create scalable, resolution-independent icons using WPF geometry.

1. Icon Definition Patterns

1.1 PathGeometry Resources

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!-- Check mark -->
    <PathGeometry x:Key="CheckIconGeometry">
        M 2,7 L 5,10 L 10,3
    </PathGeometry>

    <!-- Close (X) -->
    <PathGeometry x:Key="CloseIconGeometry">
        M 2,2 L 10,10 M 10,2 L 2,10
    </PathGeometry>

    <!-- Plus -->
    <PathGeometry x:Key="PlusIconGeometry">
        M 6,2 L 6,10 M 2,6 L 10,6
    </PathGeometry>

    <!-- Minus -->
    <PathGeometry x:Key="MinusIconGeometry">
        M 2,6 L 10,6
    </PathGeometry>

    <!-- Arrow right -->
    <PathGeometry x:Key="ArrowRightIconGeometry">
        M 2,6 L 10,6 M 7,3 L 10,6 L 7,9
    </PathGeometry>

    <!-- Search (magnifier) -->
    <PathGeometry x:Key="SearchIconGeometry">
        M 7,7 A 4,4 0 1 1 7,6.99 M 10,10 L 14,14
    </PathGeometry>

</ResourceDictionary>

1.2 GeometryGroup for Complex Icons

<!-- Menu (hamburger) icon -->
<GeometryGroup x:Key="MenuIconGeometry">
    <RectangleGeometry Rect="0,0,16,2"/>
    <RectangleGeometry Rect="0,6,16,2"/>
    <RectangleGeometry Rect="0,12,16,2"/>
</GeometryGroup>

<!-- Settings (gear) icon -->
<GeometryGroup x:Key="SettingsIconGeometry">
    <EllipseGeometry Center="8,8" RadiusX="3" RadiusY="3"/>
    <PathGeometry>
        M 8,0 L 9,3 L 7,3 Z
        M 8,16 L 9,13 L 7,13 Z
        M 0,8 L 3,9 L 3,7 Z
        M 16,8 L 13,9 L 13,7 Z
    </PathGeometry>
</GeometryGroup>

<!-- Home icon -->
<GeometryGroup x:Key="HomeIconGeometry">
    <PathGeometry>M 8,1 L 1,7 L 3,7 L 3,14 L 6,14 L 6,10 L 10,10 L 10,14 L 13,14 L 13,7 L 15,7 Z</PathGeometry>
</GeometryGroup>

---

2. Icon Usage

2.1 Direct Path Usage

<Path Data="{StaticResource CheckIconGeometry}"
      Fill="Green"
      Width="16" Height="16"
      Stretch="Uniform"/>

2.2 Icon in Button

<Button Width="32" Height="32">
    <Path Data="{StaticResource CloseIconGeometry}"
          Fill="{Binding Foreground, RelativeSource={RelativeSource AncestorType=Button}}"
          Width="12" Height="12"
          Stretch="Uniform"/>
</Button>

---

3. IconButton Style

<Style x:Key="IconButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Width" Value="32"/>
    <Setter Property="Height" Value="32"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="4">
                    <Path x:Name="IconPath"
                          Data="{TemplateBinding Content}"
                          Fill="{TemplateBinding Foreground}"
                          Stretch="Uniform"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"
                          Width="16" Height="16"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#E3F2FD"/>
                        <Setter TargetName="IconPath" Property="Fill" Value="#2196F3"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="#BBDEFB"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="IconPath" Property="Fill" Value="#BDBDBD"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- Usage -->
<Button Style="{StaticResource IconButtonStyle}"
        Content="{StaticResource CloseIconGeometry}"
        ToolTip="Close"/>

<Button Style="{StaticResource IconButtonStyle}"
        Content="{StaticResource SearchIconGeometry}"
        ToolTip="Search"/>

---

4. Icon with Text

<Style x:Key="IconTextButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Padding" Value="12,8"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}"
                        CornerRadius="4">
                    <StackPanel Orientation="Horizontal">
                        <Path Data="{TemplateBinding Tag}"
                              Fill="{TemplateBinding Foreground}"
                              Width="16" Height="16"
                              Stretch="Uniform"
                              Margin="0,0,8,0"/>
                        <ContentPresenter VerticalAlignment="Center"/>
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- Usage -->
<Button Style="{StaticResource IconTextButtonStyle}"
        Tag="{StaticResource PlusIconGeometry}"
        Content="Add Item"/>

---

5. Dynamic Icon Color

<!-- Icon that inherits foreground color -->
<Path Data="{StaticResource CheckIconGeometry}"
      Fill="{Binding Foreground, RelativeSource={RelativeSource AncestorType=ContentControl}}"
      Width="16" Height="16"
      Stretch="Uniform"/>

<!-- Icon with binding -->
<Path Data="{StaticResource CheckIconGeometry}"
      Fill="{Binding IconColor}"
      Width="16" Height="16"
      Stretch="Uniform"/>

---

6. Path Mini-Language Reference

Command	Description	Example
M	MoveTo	M 10,10
L	LineTo	L 100,100
H	Horizontal line	H 50
V	Vertical line	V 50
A	Arc	A 50,50 0 0 1 100,100
Z	Close path	Z

Lowercase = relative, Uppercase = absolute

---

7. References

• Path Markup Syntax - Microsoft Docs
• Geometry Overview - Microsoft Docs