[{"data":1,"prerenderedAt":12},["ShallowReactive",2],{"guide-winui-icons":3},{"slug":4,"path":5,"title":6,"seoTitle":7,"description":8,"date":9,"updated":9,"order":10,"html":11},"winui-icons","\u002Fguides\u002Fwinui-icons","WinUI icons: SymbolIcon, FontIcon and Fluent icons in WinUI 3","WinUI Icons — SymbolIcon, FontIcon & Fluent System Icons in WinUI 3","The icon elements in WinUI 3 and when to use each. SymbolIcon, FontIcon with Segoe Fluent Icons, PathIcon, and using Microsoft's Fluent UI System Icons when the system font doesn't have the icon.","2026-10-11",99,"\u003Cp>WinUI 3 has several icon elements. Which one to use depends on where the icon comes from: the Windows system font, Microsoft's larger \u003Ca href=\"\u002F\">Fluent UI System Icons\u003C\u002Fa> set, or your own artwork. All of them inherit the foreground color, so they follow light, dark and high-contrast themes.\u003C\u002Fp>\n\u003Ch2>The icon elements\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Element\u003C\u002Fth>\n\u003Cth>Draws\u003C\u002Fth>\n\u003Cth>Use it for\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode>SymbolIcon\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>A glyph from the \u003Ccode>Symbol\u003C\u002Fcode> enumeration (Segoe Fluent Icons)\u003C\u002Ftd>\n\u003Ctd>Common commands: Add, Delete, Edit, Save, Share\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>FontIcon\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Any glyph from any font, by code point\u003C\u002Ftd>\n\u003Ctd>Segoe Fluent Icons glyphs not in \u003Ccode>Symbol\u003C\u002Fcode>, or the Fluent System Icons font\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>PathIcon\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Vector path data\u003C\u002Ftd>\n\u003Ctd>One-off icons, SVG paths from an icon set\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>ImageIcon\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>An image, including SVG\u003C\u002Ftd>\n\u003Ctd>Multicolor or branded icons\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>BitmapIcon\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>A bitmap tinted with the foreground\u003C\u002Ftd>\n\u003Ctd>Simple single-color images\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>Controls such as \u003Ccode>AppBarButton\u003C\u002Fcode> and \u003Ccode>NavigationViewItem\u003C\u002Fcode> take one of these in their \u003Ccode>Icon\u003C\u002Fcode> property. Templated places use the matching \u003Ccode>*IconSource\u003C\u002Fcode> (\u003Ccode>SymbolIconSource\u003C\u002Fcode>, \u003Ccode>FontIconSource\u003C\u002Fcode>, \u003Ccode>PathIconSource\u003C\u002Fcode>).\u003C\u002Fp>\n\u003Ch2>System icons: Segoe Fluent Icons\u003C\u002Fh2>\n\u003Cp>Windows 11's icon font, Segoe Fluent Icons, covers standard commands. Use \u003Ccode>SymbolIcon\u003C\u002Fcode> when the icon is in the \u003Ccode>Symbol\u003C\u002Fcode> enumeration, and \u003Ccode>FontIcon\u003C\u002Fcode> with its code point otherwise:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-xml\"><AppBarButton Label="Add" Icon="Add" \u002F>\n<SymbolIcon Symbol="GlobalNavigationButton" \u002F>\n<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>SymbolThemeFontFamily\u003C\u002Fcode> resolves to Segoe Fluent Icons on Windows 11 and Segoe MDL2 Assets on Windows 10. The \u003Ca href=\"\u002Fsegoe-fluent-icons\u002F\">Segoe Fluent Icons list\u003C\u002Fa> has all 1,500+ glyphs with their codes. Microsoft designs them for 16, 20, 24, 32, 40, 48 and 64 px.\u003C\u002Fp>\n\u003Ch2>When the system font doesn't have it: Fluent UI System Icons\u003C\u002Fh2>\n\u003Cp>Segoe Fluent Icons is built for system UI and has gaps: app features like dashboards, AI, finance or health often have no glyph. Fluent UI System Icons is Microsoft's 3,000+ icon set in the same design language, MIT licensed, with regular and filled styles. Two ways to use it in WinUI:\u003C\u002Fp>\n\u003Cp>\u003Cstrong>The icon font.\u003C\u002Fstrong> Add \u003Ccode>FluentSystemIcons-Regular.ttf\u003C\u002Fcode> (and \u003Ccode>-Filled\u003C\u002Fcode>) from Microsoft's \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffluentui-system-icons\u002Ftree\u002Fmain\u002Ffonts\">fluentui-system-icons\u003C\u002Fa> repository to \u003Ccode>Assets\u002FFonts\u003C\u002Fcode>, then use a \u003Ccode>FontIcon\u003C\u002Fcode>. Each icon page's \u003Cstrong>WinUI \u002F WPF\u003C\u002Fstrong> code tab has the code point:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-xml\"><FontIcon FontFamily="ms-appx:\u002F\u002F\u002FAssets\u002FFonts\u002FFluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular"\n          Glyph="" FontSize="20" \u002F> <!-- Home -->\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Define the font once as a resource (\u003Ccode><FontFamily x:Key="FluentIcons">…<\u002FFontFamily>\u003C\u002Fcode>) so you don't repeat the path.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>A path.\u003C\u002Fstrong> For a few icons, click \u003Cstrong>Copy SVG\u003C\u002Fstrong> on an icon page and put the \u003Ccode>d="…"\u003C\u002Fcode> value in a \u003Ccode>PathIcon\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-xml\"><PathIcon Data="PASTE THE PATH DATA HERE" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Filled for selected, regular for everything else\u003C\u002Fh2>\n\u003Cp>Windows uses the regular (outlined) style by default and the filled style for a selected or active state, such as the current page in a \u003Ccode>NavigationView\u003C\u002Fcode>. With the Fluent System Icons font that means swapping between the Regular and Filled fonts; \u003Ca href=\"\u002Fguides\u002Ffilled-vs-regular-icons\u002F\">filled vs. regular icons\u003C\u002Fa> covers the pattern.\u003C\u002Fp>\n\u003Ch2>WinUI Gallery\u003C\u002Fh2>\n\u003Cp>Microsoft's WinUI 3 Gallery app shows each icon element live, with the code, and is the quickest way to try them. For WPF, see \u003Ca href=\"\u002Fguides\u002Fwpf-ui-icons\u002F\">WPF icons\u003C\u002Fa>; for every Microsoft set, see \u003Ca href=\"\u002Fmicrosoft-icons\u002F\">Microsoft icons\u003C\u002Fa>.\u003C\u002Fp>\n",1791690003798]