Microformats Icons

December 05, 2006

I think it's time to inform you about a small project I worked on together with Chris Messina from Factorycity. As Microformats have gained much popularity over the last year we thought it was time to standardize the way they are represented on a website. So we created the Microformats Icon Set.

The starter set contains icons for hCal, hResume, hCard, XFN and a generic TAG icon. All Icons are available here in several formats. If you wanna get started immediately you can grab the PNGs, which will be perfect in most cases. If you need additional icons, you can download the Icon Development Kit containing Photoshop as well as Illustrator templates for all icons. Have fun :)

Primary Microformats Icons

Furthermore we concentraded on special XFN icons, conveiing the relation to the the person linked to.

XFN set

36 comments

Pretty sweet icons man, great idea too. Standardization is the way to go! By the way, I absolutley LOVE the site!

Michael Whalen

Sweet icons indeed !! What about the license ? Are we free to use them on our sites ?

giz404

Great icons. Congratulations, they're amazing!

José Carlos

As giz404 said: can we use them? What are the restrictions?

José Carlos

Well as stated on Chris' website: "Content provided under Creative Commons ShareAlike 1.0. No warranties are granted herein. Take what ya get and make it better!" So feel free to use them :)

Wolfgang

pretty nice icon-set, Wolfgang

Heiko

Der Kontrast der XFN-Icon - zumindest von der zweiten Person - sind viel zu schwach. Sehbehinderte werden die zweite Person im Icon nicht sehen und selbst bei mit auf dem TFT muss ich genau hinsehen, um was zu erkennen. Warum findet eigentlich das Icon für Microformate keine Verwendung? http://microformats.org/

macx

Fantastic idea, excellent execution. Please share screens of others making good use of these.

jharr

Wow. These will be great for my site (in planning stages)....thanks!.

monkey56657

Well done. This is right alongside the feed icons that have been helpful for usability. This will go a long way. Thanks for putting the time in for all of us.

Matthew Smith

Pretty sweet icons. Great work and props for sharing them. However, where would one use them, except for plugging microformats? It's not like microformats are widely supported yet. Don't get me wrong, I'm not criticizing your fantastic work :) Just want to know what the intended use is. - Alex

Alexander Graf

I think about using it for my site in my next update. thank you

Martin Labuschin

Love the hint of a tie on the colleague XFN icon, nice touch! I really must make the effort to learn and utilise some microformats when I redesign my own site and blog over Christmas. Not sure if I've done a client site that would benefit from microformats? Any good real world examples of when microformats help grow a business site?

Steve Williams

Steve Williams: Not yet, but they might in the future. It sure doesn't hurt implementing them.

Alexander Graf

nette Idee ... werde mir mal das Icon-Dev-Kit anschauen ... Chris

Chris Wouters

Just discovered your icons via techchrunch. We'll evaluate how we could use them on our plattform.

Andre

Very nice idea! Congratulations to the fulfilment, the icons look as great as usual!

Julian Schrader

you should register microformatsicons.com!

Augusto

Love your work! Any chance of a hListing icon? :-)

Nathanael

Hello very nice. I will hAtom Icon for my Blog Sidebar, very nice thanx a lot. I also have written an article to tell the others where to find your microicons. I Have also put this picture into my post icon-set.png, is it allowed for me? If not please inform me I will remove it immediately! Thanx a lot!

Stefan Julius

The icons are beautiful, but can you suggest how they should be used? Do you simply add an icon to a page to signal "There is microformat content at this location", or is it expected to be a clickable link that causes something to happen?

Angus McIntyre

My love for Microformats combined with my love for Bartelme Design. What more could I ask for.

Keri Henare

Great idea and great icons!

Justin Halsall

Realy good!!!

Ramon Bispo

Fantastic icons. Here is a 'real-world' example of how I have used it - http://www.aztecportfolio.com/jays/contact.html . For those asking for the business benefits of Microformats, just do a little research or visit my own del.icio.us links on them - http://del.icio.us/oconingham/microformats. One of the key elements of them is the ability to click on a link that will add the hCard to your address book. There are also search engines that allow you to search for specific Microformats such as events or people.

Oliver Coningham

Lovely icons, thank you

Paul Jensen

Oliver Coningham: Thanks for the links. I didn't know technorati could automatically generate vCards. That changes matters. Thanks again for the hint :)

Alexander Graf

Why does the hRésumé icon have a reload/refresh symbol?

Rian

Chris M. told me about this. Posted on newstoday pbs. Gonna post on the netizen blog in the coming week.

Ken Rossi : CivilNetizen.com

good work.I am study css style and AI now.It's funny. http://www.showone.cn/

mr5

Nice work

Michael

Cool idea, good looking icons as well.

Adam Patterson

Extremely useful! Thanks for your input!

Timo Kleemann

Great work and thanks for sharing with the community. I've always felt that to be able to communicate a message with the minuscule constraints of an icon is truly an art. And an extremely frustrating art at times as well!

Jon Buda

sell your icons at http://www.regimages.com

regimages

nice icons! just bookmarked.. :)

Willis Witze

Commenting is not available in this channel entry.