Windows 8 or Windows Store App Icons

Number of Views : 5238

If you are developing a windows store app (an app for windows 8) you may be in need of some icons. A great way to get some icons that are already available is to use the built-in Segoe UI Symbol font. This is what is referenced when you see the MSDN samples regarding the app bar.

<button Content="&#xE112;"></button>

I did not have a clue what  stood for. It is a reference to a font item from Segoe UI Symbol.
You can see all these icons by using the Character Map application. Launch the search charm and type in Character Map

Once you have the Character Map open you can browse the icon set. Scroll down the list to see icons.

In the image above I am selecting the pencil icon for edit. You can reference it by the name in the status bar at the bottom “U+E104” private use. This would equal  . To use the icon you enter the item below into your button.

 Content=""

To use these icons you only need to use the built in. I have also found if you use the select button then copy button out of the character map applcation and paste the value it will work. The strange part, is that you can’t see that value.

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'refresh', label:'Refresh', icon:''}"></button>

That strange character near “icon:’ is the refresh icon. It shows up in my application like this.

Overall this is a nice little feature to have when working with these apps.

Leave a Reply

Your email address will not be published. Required fields are marked *