Tiny Icons
August 13th, 2008
I’ve been spending some free time trying to design an icon set for OpenStreetMap. There are several design goals for this icon set:
- They need to work, or nearly work, in black and white as well as colour. This is so they could be used in printed low-colour or greyscale maps.
- They should be visually identifiable by POI class, for rapid readability.
- They should all be the same size and “weight”, so that no single icon overwhelms the others.
You can grab the icons here, version 0.1, with icons for the following POIs; airports, ATMs, bars, cafés, parking, pubs, recycling points, restaurants, bus stops, places of worship (Buddhist temples, Christian churches, Jewish synagogues, Muslim mosques) and supermarkets.
I’ve tried to keep the icon design consistent by using the same rounded-square outline for all the icons at 16×16 pixels. Each different class uses a different flat background colour, chosen to be distinct from all the others (although I should probably check they’re OK for colour-blind people). The icon classes are totally arbitrary, but I’ve been working with the following:
- Blue: transport.
- Orange: Food, drink and socialising.
- Green: Services and shops.
- Grey: Religious points-of-interest.
- Red: Emergency services.
All of the icon strokes are drawn in white on top and are supposed to be internationally recognisable, though some don’t quite live up to that. The pub icon, for example, shows the “nonic” style of pint glass which is common in the UK, but probably not elsewhere. On the other hand, the concept of a “pub” isn’t itself international, so maybe it doesn’t matter. There is an icon for a bar, when this is more appropriate, but I don’t think we have many of them tagged at the moment.
This screenshot shows how different the map looks when POIs like restaurants and cafés are rendered. Hopefully if these are rendered on a layer of the main map more people will start to tag these kinds of features.
Compare the above with the original, which looks rather barren by comparison:
Feedback, requests and suggestions are welcome. The set is still at a very early stage and is missing many icons, but I hope to make it complete at some point in the not-too-far future.
4 Comments Add your own
1. Edward Betts | August 14th, 2008 at 11:10 am
Looks good, can’t wait to see the icons on the live map.
2. spaetz | August 14th, 2008 at 2:38 pm
Many look very nice. In order to use them on the osmarender layer as you have shown, they would need to be in SVG format though. Would that be possible?
3. Tom Carden | August 14th, 2008 at 3:25 pm
These look great. Kudos for taking on a tricky task!
Is work being done to allow POIs to be on a separate layer in OpenLayers etc? Seems like although they’re useful they’re also going to clutter up maps if they’re displayed all the time. Load up the business data sets in Google Earth to see what I mean.
4. Matt | August 14th, 2008 at 10:56 pm
@Tom: Yeah, they really clutter up the map. I’d love to see something like Google do, where the icons have tooltips to give names and a clickable popup / balloon to see extra details… But I have no idea how / if to do this with OpenLayers.
@spaetz: These icons were originally designed as SVG – I’ll make the originals available, given that people are interested. Stay tuned!
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed