icons
Icons
These icons can be used to depict various microformats in webpages or on the desktop.
Creators
Accessibility
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 color-blindness .
Copyright
Unless otherwise noted, these icons are licensed under the Creative Commons Attribution-ShareAlike 2.5 license.
Icons
Web
A first effort has been completed by Wolfgang Bartelme and Chris Messina to create a series of web-friendly icons and buttons for microformats.
General
hAtom
hCalendar
hCard Add
hCard Download
hResume (button)
rel-tag (button)
XFN (button)
Based on the General Icon DevKit:
hCalendar Download
hCalendar Add
hCard
hAudio Icons
Comments:
- 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).
- Adam wonders if a multiple-license, including GPL, might be helpful in increasing adoption among wordpress themes.
- Pfefferle suggests to change the color of the XFN-button into blue, because it uses the rel-attribute like "rel-tag"
. - SvenDowideit wonders what font is used above, and why there are no open source friendly source files - ie svg (Dmitry's site is offline so i don't know if those are what I'm looking for)
square tag
XFN
rel-me
rel-friend
met
rel-sweetheart
met
rel-colleague
met
Comments:
- 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
- Jon Williams 13:40, 5 Jan 2007 (PST): I thought "Flickr buddy" when I first saw these due to the color. Also the pink/blue may annoy people with some gender issues. Maybe we should use green for the sweetheart?
- Pat Hawks 12:58, 11 Apr 2008 (CST): Should "crush" and "sweetheart" use the same icon? Should "colleague" and "co-worker" use the same? Do we need one for "contact" or "acquaintance" as well?
VoteLinks
vote-for
vote-against
(download the kit)
Comments:
- 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)?
Geo
Can be used in the background-image CSS property, next to a geo microformat. It could also indicate that a map opens in a new window:
(taken from Geotag Icon Project)
Mac
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
PDF & SVG
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
See also
- 2D Barcodes (barcode-like graphic for mobile device input)
- buttons
- icons
- stickers
Examples in the Wild
- ZeroSeis uses hCard download icon.
- Bay of Islands uses hCard geo icon eg. in Moustrap Backpackers page
- nextBBS uses vote-links icons.
- Revolução Etc uses hCard download icon and tag icon.
- There are various microformat logos on the West Midland Bird Club's "about this site" page and on its contacts and events pages