Difference between revisions of "icons"

From Microformats Wiki
Jump to navigation Jump to search
Line 92: Line 92:
* [http://zeroseis.com.br ZeroSeis] uses hCard download icon.
* [http://zeroseis.com.br ZeroSeis] uses hCard download icon.
* [http://www.nextbbs.com nextBBS] uses vote-links icons.
* [http://www.nextbbs.com nextBBS] uses vote-links icons.
* [http://www.revolucao.etc.br Revolução Etc] uses hCard download icon and tag icon.

Revision as of 11:26, 5 January 2007


These icons can be used to depict various microformats in webpages or on the desktop.



Publishers are advised to ensure that these icons are used in an accessible fashion, by including suitable "alt" attributes.

Icon designers are reminded that inability to distinguish between red and green is the commonest form of colour-blindness .


Unless otherwise noted, these icons are licensed under the Creative Commons Attribution-ShareAlike 2.5 license.



A first effort has been completed by Wolfgang Bartelme and Chris Messina to create a series of web-friendly icons and buttons for microformats.


  • icon-hatom.png hAtom
  • icon-hcalendar.png hCalendar
  • icon-hcard-add.png hCard Add
  • icon-hcard-download.png hCard Download
  • icon-hresume.png hResume (button)
  • icon-rel-tag.png rel-tag (button)
  • icon-xfn.png XFN (button)


  • Hober pointed out that bright green seems to be a common color for [eventful.com/images/skin/ical.gif ical chicklets]
  • Tantek wonders if the rel-tag button is useful
  • ChrisMessina suggest a need for a small 10x10 tag icon
  • Tantek wonders whether we need an hCard Download icon -- since it focuses too much on the "pipes"
  • Ron thinks it's ok to use icons, cause it's a nice way of promoting the "Microformat idea". Maybe it's a good idea to use a downward aimed arrow to indicate the possibility to "download" something (like an hCard or hResume).


  • xfn-me.png rel-me
  • xfn-friend.png rel-friend
    • xfn-friend-met.png met
  • xfn-sweetheart.png rel-sweetheart
    • xfn-sweetheart-met.png met
  • xfn-colleague.png rel-colleague
    • xfn-colleague-met.png met


  • Tantek: wonders if a rel-me icon is necessary or appropriate; perhaps something indicating "facets"?
  • ChrisMesssina: rel-me is useful in blog posts where you link to other posts that you've written



  • vote-for.gif vote-for
  • vote-against.gif vote-against


  • Steve Ivy: I don't have a good icon for vote-abstain. Recommendations welcome. These are also a tad large to site next to links, perhaps?
    • Andy Mabbett: Is +1/-1 a common way of representing voting? Would ticks and crosses be better, or thumbs up/ down (or horizontal for abstain)?
      • Steve Ivy: I rather like the icons used by digg for voting on comments, but cannot use them for obvious reasons. I'm no iconographer to be honest, but if someone were to create thumbs-up/thumbs-down icons I'd use them instead of these.



These icons can be used for folders or files on your Mac. You can use a tool like Pixadex for managing and applying them.

Created by Chris Messina


pdffile.png svgfile.png

This logo looks pretty much as first icon of Chris’ set. You could open it in any bitmap or vector editing tools, such as Adobe Photoshop or Adobe Illustrator.

Created by Dmitry Baranovskiy

Examples in the Wild