[tl;dr: Syncfusion Metro Studio offers over 2500 free metro icon templates that can be exported into different formats for use in apps or web sites.]

When developing apps for Windows Phone or Windows 8, one thing that our customers expect is a professional screen design that blends into the modern design language (formerly called metro) of these environments. One key aspect of this design language are its icons. They should be flat and simplistic but still give users a clear idea of what these icons stands for.

I myself am not much of a designer and finding or creating the right icon artwork for my apps has always been quite a challenge for me. Luckily these dark times are over since I discovered Syncfusion Metro Studio, a tool which I am using almost daily now, for app and web development.

Metro Studio is a free application (registration necessary though) that downloads and installs on your PC. It currently provides a collection of more than 2500 metro style icon templates that can be customized in size, color and format to meet your needs.

Let’s have a first glance at the actual application after it has started up. It is pretty much self-explanatory: Icons are organized by categories on the left pane of the application and the main area displays all available icons of a category. Additionally, a search bar helps discovering icons.

Selecting an icon and clicking the edit (pen) symbol opens edit mode in which the selected icon can be customized.

In edit mode, the appearance of the selected metro icon can be adjusted in many ways (size, padding, rotation, flip, foreground / background colors or transparency).

After having finished customization, the icon can be saved using Metro Studio Icon File format for later use or exported into other various formats (bmp, png, jpg, gif, ico, tiff, xaml).

Another useful feature is the XAML View which is also available in edit mode through the button labeled XAML. This view provides the icon as Path vector data ready to copy and paste into a WPF, Silverlight or WinRT application.

In addition to the large number of “pre-canned” icons in the product, there is also the Characters category which allows creating fully vector-based icons out of symbol fonts (like Webdings or Wingdings).

Also very useful is the projects pane at the bottom area of the application. It provides the possibility of grouping a number of icons into a logical project. This project can be given a name and allows the modification and customization of its icons in a unified way. Projects can be created by simply dragging an icon onto the orange area on the lower left of the application.

After a project has been created, additional icons can be added - again by simply dragging them onto the project. Let’s for example create a collection of social media icons (facebook, twitter, flickr). By selecting the edit (pen) symbol the whole project can be opened in edit mode.

Project edit mode provides basically the same functionality as edit mode for a single icon, but now that we are dealing with a group of icons, all save and export operations work on the whole collection. This also gives us the additional functionality of Sprite export which generates an image sprite for optimized icon use in web sites.

Syncfusion Metro Studio is a great and useful tool that has boosted my productivity in app and web development quite significantly. It’s a free download so go and check it out!