Windows 10 uwp icons

The Windows 10 Insider Preview build 18282 for the first time revealed a beautiful light theme of the Windows Shell (Start menu, Taskbar and Action Center). Many stock apps have already been updated to support this color scheme so in this article, we will check out how to add support for light theme task bar icons in our UWP apps as well!

Example: Microsoft Store

Let’s take the Microsoft Store app as an example. In its Assets folder we find the following:

Картинка с сайта: mzikmund.dev

I have previously written about the different types of app icons supported in UWP and with light theme in Windows shell there is a new addition to the list — the lightunplated suffix.

• targetsize-_altform-lightunplated

Light theme taskbar icon in action

The default UWP Blank app template already creates an altform-unplated icon for display in the taskbar.

However, the system will use the plated version when the user switches to light theme:

So if we want to have an icon with transparent background even with the light theme, we must provide a second png icon with the lightunplated suffix. Ideally, this version should be adapted to look well on light background, so using dark colors is recommended. I have used the following icon (thank you, Icons8!):

And named it Square44x44Logo.targetsize-24_altform-lightunplated.png. This is enough to get the icon picked up by the system and automatically used when light theme is set:

Sizes

In addition to providing the base size for the taskbar icon, you can also provide more sizes for different screen densities. As I described in my older article, Visual Studio shows sizes 256, 48, 24 and 16, but you can freely add even more as you see fit.

Compatibility

As mentioned, light-theme for Windows Shell was first introduced in Insider Preview build 18282, but you are free to add the lightunplated icons to your app running on any version of Windows 10 and they will just be gracefully ignored.

Source code

The example source code for this article is available on my GitHub.

Summary

The light-themed Windows Shell was long awaited and it is awesome to see it finally making its appearance in latest preview builds. Adding support for the light-theme taskbar icons is quick and easy so including them in your app is a no-brainer .

     Icons and Special Characters in UWP     

Icons are an influential part of the UI and UX of an app. They make applications beautiful and enhance the user experiences. For instance, using the plus icon (+) instead of typing «add new» in a button. It makes applications more usable for a wide range of people who do not know a specific language.

Icons are an influential part of the UI and UX of an app. They make applications beautiful and enhance the user experiences. For instance, using the plus icon (+) instead of typing «add new» in a button. It makes applications more usable for a wide range of people who do not know a specific language.

Segue MDL2 is the default icon font of Windows that can be used to show icons in windows applications. You can see the full icons of this font here. You can also see some of its icons in the following list:

Картинка с сайта: parsakarami.com

Character Map is a useful application for finding icons and special characters. You can use this link to download it from Microsoft Store. In order to install it, you need to have Windows 10 Creator Updates (Build 15063). If you use an older build number of windows, you can use the other apps on the Windows Store.

If you run the Character Map application, you can see all installed fonts on your machine on the left side of the app. On the right side of the app, you can copy the code of icon or symbol and use it in your app. You see a screenshot of the Character Map application in the following:

Картинка с сайта: parsakarami.com

In order to use icons in your app, you can use three different elements on XAML. The first one is the FontIcon. The second element is the SymbolIcon, and the last one is the TextBlock. Let’s start showing how to use it in the XAML and code-behind. It will be helpful to see the Keeratsingh Blog and read his article about Font icons in UWP. You can use other fonts to show icons, emojis, and other special characters. You can also use any external fonts on the windows application. But all universal apps support these fonts. The first is Segoe MDL2 Assets, and the second is Segoe UI Symbols. As I said before, you can use three elements for showing icons and special characters in UWP. The first one is FontIcon. According to the Windows Dev Center, the FontIcon element Represents an icon that uses a glyph from the specified font. I want to add that the FontIcon is a general version of SymbolIcon. It supports any font for showing Unicode characters. The SymbolIcon only uses the Segoe MDL2 font. Both elements are inherited from IconFont Class. But the FontIcon uses the Glyph property to set or get the Unicode value, and The SymbolIcon uses the Symbol property that fills with an enum type of windows symbol.

    <fonticon fontfamily="Segoe MDL2 Assets" glyph=" "></fonticon>
    <fonticon fontfamily="Segoe UI Symbol" glyph=" "></fonticon>

For using SymbolIcon must write as below:

     <symbolicon symbol="Refresh"></symbolicon>
     <symbolicon symbol="Download"></symbolicon>
     <symbolicon symbol="Mail"></symbolicon>

On the other side, if you have some styles on your text block, you can still use the same as previous and in the Text property of Textblock add Icons with Unicode value.

     <textblock fontfamily="Segoe MDL2 Assets" text=" "></textblock>
     <textblock fontfamily="Segoe UI Symbol" text=" "></textblock>

When you use C# instead of XAML to assign fonts, and special characters, you should respect the following syntax. You must use it differently and adds it using ‘\u’

     MyTextBlock.Text = "\uE170";
     MyFontIcon.Glyph = "\uE170";