DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Metro Studio – Your Modern UI Style Icons Paradise

Toni Petrina user avatar by
Toni Petrina
·
Sep. 20, 12 · Interview
Like (0)
Save
Tweet
Share
7.10K Views

Join the DZone community and get the full member experience.

Join For Free

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:
create icon from font character or characters

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:
custom category with icon imported from nounproject

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.

Icon

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Kotlin Is More Fun Than Java And This Is a Big Deal
  • Why Open Source Is Much More Than Just a Free Tier
  • Event Driven 2.0
  • Memory Debugging: A Deep Level of Insight

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: