[{"data":1,"prerenderedAt":12},["ShallowReactive",2],{"guide-wpf-ui-icons":3},{"slug":4,"path":5,"title":6,"seoTitle":7,"description":8,"date":9,"updated":9,"order":10,"html":11},"wpf-ui-icons","\u002Fguides\u002Fwpf-ui-icons","WPF icons: Fluent icons in WPF and WPF UI","WPF UI Icons — Fluent System Icons in WPF, XAML & WPF UI","How to use Microsoft's Fluent icons in a WPF app. SymbolIcon in the WPF UI library, the Fluent System Icons font in XAML, Segoe Fluent Icons on Windows 11, and SVG paths.","2026-10-11",99,"\u003Cp>WPF doesn't ship an icon set, so most modern WPF apps pick one of three routes to Microsoft's Fluent icons: the \u003Cstrong>WPF UI\u003C\u002Fstrong> library, the \u003Cstrong>Fluent System Icons font\u003C\u002Fstrong>, or \u003Cstrong>SVG path data\u003C\u002Fstrong>. All three use \u003Ca href=\"\u002F\">Fluent UI System Icons\u003C\u002Fa>, Microsoft's MIT-licensed set, so you can switch routes later without changing how your app looks.\u003C\u002Fp>\n\u003Ch2>WPF UI (lepoco\u002Fwpfui)\u003C\u002Fh2>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fwpfui.lepo.co\u002F\">WPF UI\u003C\u002Fa> is an open-source library that gives WPF apps the Windows 11 look: Fluent controls, Mica backgrounds and navigation. It includes Fluent UI System Icons as a font and a \u003Ccode>SymbolIcon\u003C\u002Fcode> control. Install the \u003Ccode>WPF-UI\u003C\u002Fcode> NuGet package, add its namespace and resources to \u003Ccode>App.xaml\u003C\u002Fcode> as its docs describe, then:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-xml\"><Window xmlns:ui="http:\u002F\u002Fschemas.lepo.co\u002Fwpfui\u002F2022\u002Fxaml" …>\n    <StackPanel Orientation="Horizontal">\n        <ui:SymbolIcon Symbol="Home24" \u002F>\n        <ui:SymbolIcon Symbol="Home24" Filled="True" \u002F>\n    <\u002FStackPanel>\n<\u002FWindow>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>Symbol\u003C\u002Fcode> takes a \u003Ccode>SymbolRegular\u003C\u002Fcode> name, which is the Fluent icon's name plus its size: \u003Ca href=\"\u002Ficon\u002Fhome\u002F\">Home\u003C\u002Fa> at 24 px is \u003Ccode>Home24\u003C\u002Fcode>, \u003Ca href=\"\u002Ficon\u002Fsettings\u002F\">Settings\u003C\u002Fa> is \u003Ccode>Settings24\u003C\u002Fcode>. \u003Ccode>Filled="True"\u003C\u002Fcode> switches to the filled style. Properties that take an icon, such as a navigation item's \u003Ccode>Icon\u003C\u002Fcode>, accept the markup extension:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-xml\"><ui:NavigationViewItem Content="Settings" Icon="{ui:SymbolIcon Settings24}" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>To find a name, search Fluenticons for what the icon means, then add the size: every size an icon comes in is listed on its page.\u003C\u002Fp>\n\u003Ch2>The Fluent System Icons font (no library)\u003C\u002Fh2>\n\u003Cp>Without WPF UI, add Microsoft's icon font to your project and use a glyph from it. Each icon page's \u003Cstrong>WinUI \u002F WPF\u003C\u002Fstrong> code tab has the exact code point. For example, with \u003Ccode>FluentSystemIcons-Regular.ttf\u003C\u002Fcode> in a \u003Ccode>Fonts\u003C\u002Fcode> folder (Build Action: Resource):\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-xml\"><TextBlock FontFamily="pack:\u002F\u002Fapplication:,,,\u002FFonts\u002F#FluentSystemIcons-Regular"\n           Text="" FontSize="24" \u002F> <!-- Home -->\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>The font files are in Microsoft's \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffluentui-system-icons\u002Ftree\u002Fmain\u002Ffonts\">fluentui-system-icons\u003C\u002Fa> repository, in Regular, Filled and Light. A glyph is text, so it takes the \u003Ccode>Foreground\u003C\u002Fcode> color and scales with \u003Ccode>FontSize\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2>Segoe Fluent Icons (Windows 11)\u003C\u002Fh2>\n\u003Cp>Windows 11 includes \u003Cstrong>Segoe Fluent Icons\u003C\u002Fstrong>, the system icon font, so WPF apps that only run on Windows 11 can use it without bundling anything:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-xml\"><TextBlock FontFamily="Segoe Fluent Icons, Segoe MDL2 Assets" Text="" FontSize="16" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Listing Segoe MDL2 Assets second gives Windows 10 a fallback. The \u003Ca href=\"\u002Fsegoe-fluent-icons\u002F\">Segoe Fluent Icons list\u003C\u002Fa> has every glyph and its code. The font has fewer icons than Fluent UI System Icons and is for Windows apps only.\u003C\u002Fp>\n\u003Ch2>SVG path data\u003C\u002Fh2>\n\u003Cp>For a single icon, or to avoid a font, paste an icon's path into a \u003Ccode>Path\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-xml\"><Path Width="24" Height="24" Stretch="Uniform" Fill="{DynamicResource TextFillColorPrimaryBrush}"\n      Data="PASTE THE PATH DATA HERE" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Click \u003Cstrong>Copy SVG\u003C\u002Fstrong> on an icon's page and copy the value of \u003Ccode>d="…"\u003C\u002Fcode>. Icons with several paths need a \u003Ccode>GeometryGroup\u003C\u002Fcode> or one \u003Ccode>Path\u003C\u002Fcode> each. Paths scale cleanly, but a font or \u003Ccode>SymbolIcon\u003C\u002Fcode> is easier when you use many icons.\u003C\u002Fp>\n\u003Ch2>Which should I use?\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>New app with a modern look:\u003C\u002Fstrong> WPF UI and its \u003Ccode>SymbolIcon\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Existing app, many icons, no new dependencies:\u003C\u002Fstrong> the Fluent System Icons font.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Windows 11 only, system-style icons:\u003C\u002Fstrong> Segoe Fluent Icons.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>A few icons:\u003C\u002Fstrong> SVG paths.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>See also \u003Ca href=\"\u002Fguides\u002Fwinui-icons\u002F\">WinUI icons\u003C\u002Fa> for WinUI 3, and \u003Ca href=\"\u002Fmicrosoft-icons\u002F\">every Microsoft icon set\u003C\u002Fa>.\u003C\u002Fp>\n",1791690003801]