Bitesized tidbits for building Modern (Metro) apps.
Modern (“Metro”) Style Icons for Windows Phone and Windows 8
March 4, 2013Posted by on
When building a Windows Phone or Windows Store app, one of the key things you might need are icons for your application bars (or other buttons); there are some good places to get different sets of icons from, including Syncfusion’s Metro Studio, but there is one place I like to get my icons from for both types of projects.
I’ve found the place to get a huge selection of different icons is from modernuiicons.com, a website run by Austin Andrews (@templarian), which, at time of writing this, has nearly 1000 icons that can be used. Now if the choice of icons alone isn’t enough to sway you, then how about this: when you download the icon pack, you not only get light and dark png versions of each icon, you also get a .design (Expression Design) file and a .xaml file of the same icons. Where might this be useful? Well, let’s start with each format:
Light/Dark png images
What Austin gives you here are versions of the icons that will work against either of the default themes on Windows Phone, which means if you want to use them as more than just application bar icons, then you can choose the version that best suits your usage. All of the png files are now at 76×76, which means they will look great in your Windows Phone 8 app, too.
Expression Design file
This benefit will only be good for you if you have Expression Design installed, but what this allows you to do is open the desired icon’s .design file in Expression Design and resize the image, without losing any detail when upscaling. You can then export this enlarged version as a png and use it somewhere else in your app (like a splash screen, or your app’s icon).
This one is the best benefit for Windows Store apps for Windows 8. If you’re a follower of @TimHeuer’s blog, then you will have seen his post “Using vector data for AppBar icons in XAML.” In it, he explains how to create an appbar button using a vector graphic, meaning it will look right no matter what scale your app is run at. In his blog post, he uses Syncfusion’s Metro Studio to get the XAML data points he requires, but Metro Studio doesn’t have the wide selection of icons that Austin provides. All you would need to change from Tim’s post is you open the .xaml file in question and copy out the Path tag’s Data property and use that in place of where he says to copy the data from Metro Studio.
You get all of these things in the one icon pack, which I think is unbelievably good of Austin. If you want to leave a suggestion for an icon, he can be contacted on twitter (@templarian) or you can leave a suggestion on the icon pack’s GitHub site at https://github.com/Templarian/WindowsIcons/.
If you haven’t checked out this icon pack before, I highly recommend doing so, now!