Metro Studio – Your Modern UI Style Icons Paradise

If you ever needed to create those fancy Metro Modern UI style icons for your Windows Phone 7 app, Windows 8 app, for your blog or some marketing newsletter, you will love this tool. You can get it over at the official site: Syncfusion Metro Studio 2. First and foremost it is free. And it comes with a large set of icons already bundled. You can change icon backgrounds, foreground and background colors, icon size, padding to produce a perfect icon.

Convert characters to icons

But this is not all: once you exhaust all icons that come with it, you can create new icons from font character (or characters) by simply going to the Characters category, select your source font, double click on all characters you want in your icon and you have created a brand new icon. With some further color and size manipulations, you can get whatever you want, provided you have the desired font. Example usage below:

You can get a lot of special characters from Webdings and Windings, but you can also go to dafont.com and find some free font with special characters. Let your imagination go wild on this one.

Importing icons from NounProject

Since all underlying icons are either in XAML or SVG format, if you get an icon in such format, you can import it and then manipulate it. One large repository of Metro style icons is NounProject. Find an icon you like and then download it. You will get a zip file containing SVG file and that is what we will import. For example, I will use Hamster Wheel. If you open the SVG file in any text editor, you will find the following XML (parts omitted for brevity):

<svg xmlns="http://www.w3.org/2000/svg" ... xml:space="preserve">
<g>
	<path d="M81.236, ... ,85.777z"/>
</g>
</svg>

Now open Windows Explorer and navigate to C:\Program Files (x86)\Syncfusion\Metro Studio\Icons\. Create a new directory and name it Custom. Create a new file named Custom.xaml inside it and open it in text editor. Now copy the following XML snippet:

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Path Data=""
           Stretch="Fill"
           Fill="#FFFFFFFF"
           Tag="hamster, wheel, nounproject"
           Margin="0,0,0,0"
           x:Key="Hamster Wheel" />

</ResourceDictionary>

The attributes are pretty straightforward. Now copy the value for the attribute named d from the SVG file as value for the Data attribute in the XAML file above. Restart Metro Studio and voilà, you should get something like this:

I haven’t really explored in more detail the file format for Metro Studio but this will help you use most of the icons available on NounProject. Enjoy creating great Modern UI style icons. Also check out other cool features on their page.