Using SVG Path Icons in WinUI
From PathIcon Basics to ViewBox Scaling and Fluent UI Integration
Icons are a core part of modern UI, especially with fluent designs and vector-based interfaces. In WinUI, one
of the best ways to use scalable vector icons is through the PathIcon
control. In this blog, I’ll walk you through how it works, how to use an SVG path (like the GitHub logo),
how to fix sizing issues using
What is PathIcon?
PathIcon is a WinUI control used to display vector graphics defined by
XAML path geometry. Unlike bitmap images, path icons scale cleanly at any resolution and fit well with
modern UI styles.
The Data Property
The core of PathIcon is the Data
property. It contains the vector instructions (path geometry) that describe the actual shape. These
instructions typically come from SVG files or design tools like Figma/Illustrator.
<PathIcon Data="M..." Foreground="{ThemeResource TextFillColorPrimaryBrush}" />- Data → The SVG path converted into XAML path syntax
- Foreground → Determines the icon color
Example: GitHub Icon in PathIcon
Let’s take the GitHub SVG path and place it directly inside a PathIcon:
<PathIcon Data="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
Foreground="{ThemeResource TextFillColorPrimaryBrush}" />This works and renders the GitHub logo correctly, but there’s a catch!
Resizing Issue (And Why It Happens)
PathIcon respects its natural geometry values. SVG paths are often drawn at large sizes (like 100×100 units). If you drop them directly into a toolbar, button, or small layout, the icon either:
- Overflows its container
- Refuses to shrink correctly
- Ignores Height/Width constraints
So how do we fix it?
Solution: Wrap the Icon in a ViewBox
Viewbox automatically scales the child element (the entire path) to fit
the desired size.
<Viewbox Height="18">
<PathIcon Data="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" />
</Viewbox>Now the icon will: Scale proportionally, Fit inside buttons/toolbars, Respect the given size (e.g. 16px, 18px, 24px)
You can also control width/height together:
<Viewbox Width="24" Height="24">
<PathIcon Data="..." />
</Viewbox>📝 Note: This is the same approach used in the WinUI Gallery. For more details, see this PR
Using Icon Packs (Like Fluent UI System Icons)
One of the biggest advantages of using PathIcon is that you can easily
integrate icon packs. Microsoft’s Fluent UI System Icons are a great example. They provide a huge library
of SVG paths for common UI actions (add, delete, edit, etc.).
You can copy the SVG path data from the Fluent UI repo and paste it directly into a PathIcon inside a ViewBox to get
perfectly scalable, theme-aware icons.
<Viewbox Height="18">
<PathIcon Data="(Fluent icon path here)" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
</Viewbox>Final Thoughts
Using PathIcon with SVG paths in WinUI is a powerful way to create
scalable, modern UIs. By wrapping icons in a ViewBox, you can easily
manage sizing issues and ensure your icons look great at any resolution. Plus, integrating icon packs like
Fluent UI System Icons becomes straightforward, giving you access to a wide range of professionally designed
icons for your applications.
