User:Sergionaranja/Map Icons Design Standards

From OpenStreetMap Wiki
Jump to: navigation, search

icons symbols pictograms

A symbol is a graphical representation of an idea. they are used on maps to extend information and represent points of interest (POI) in a concise and straightforward way without using words that would eventually fill excessively the map, worsening their functionality. In this case I'm going to take care of the graphical representation of POIs only, not roads or areas. To design a set of symbols is useful to bear in mind:

transnationalism. This allows the symbol to be understood by the greatest number of people even from different cultures.
readability. You have to see and distinguish the drawing so that you can understand it.

The first point refers mainly to the concept of the symbol, ie how to represent a a particular thing graphically. To achieve it, is advisable to study frequently used symbols that already meet these standards, for example AIGA the professional association of American graphics from the 1974, proposed a set of symbols. They are based on previous studies of use of such symbols in different countries, at airports, Olympics and all kinds of interconnection facilities. They are: or

As was thereafter adopted by a large number of organizations and they are public domain, they have become a standard. Altough its use is primarily for transportation it gives us a good conceptual basis to work on our own map symbols.
Other great standard widely used is the european trafic sign set. The aim was that all simbols were understood despite native language so no text was used. There are three main conventions adopted related to the meaning of their shape:

2020 st squarerounded 1.svg square means information,
2020 st circle 2.svg red circle means prohibition and
2020 st triangle 2.svg red triangle means danger.

The second point is what we'll talk more here. The great advantage of OpenStreetMap is being built by the generous collaboration of many people. And we have a democratic framework in terms of decisions. All this for graphic consistency is a handicap. The icons are proposed and approved individually so it is very difficult to achieve a set of icons with good readability and consistency.

So we could do two things:

Share symbol creation rules that if followed will help to have consistent icons, although the authors are diverse.
Create a set of symbols that meet the standards we are talking about that can be adopted by the community, or be them an option to install and use locally.

To focus on the subject our symbols are for online use, thus the unit of measurement will be the pixel, colors will be RGB, and format will be SVG (vector) from which PNG (bitmap) can be easely made.

To design you can use the free open source software Inkscape (vector) and for small ad hoc corrections Gimp (bitmap) can be used.

general rules


The first point to consider is size. The design of the forms is directly related to the final size and we should stablish it from the beginning. A symbol whose final size is large allows us to draw more detail, as we need a smaller size such details become scribble ultimately making it an illegible symbol, so the smaller is we should create less detail.

Seticonos sss IS sizegrid.png

There is a barrier size at 20x20 pixels. Below this size restrictions are becoming so important that will require a different work. In that case the svg to png convertion will not work too good. An example of this are some of the symbols of size 16x16 which are somewhat blurry here [1] In this case it is better to work the bitmap directly. A correct example of such icons is: User:UrSuS


Details - the smaller icon the simpler design.
How - in Inkscape define the page with the final size of the symbol.


The horizontal and vertical lines must match in thickness and position with the pixels, so as to avoid a blurred image. svg to png will be much cleaner and will avoid having to correct the pixels by hand. Therefore the minimum thickness shall be one pixel. Or a unit in the svg

In the case of sloping lines will be inevitable that they are slightly blurry but if we maintain the rule of a unit of thickness or exact multiples of it, we get a consistent result.

How - Inkscape defining a grid in the final size of the symbol. example: 2020 st squarerounded 1.svg


Another great contribution to consistency is a specific color range. In principle colors that can be used are all RGB, as our preferred viewer will be the computer screen. Gps, pda and other devices that are capable of displaing our maps are increasingly achieving a color resolution equal to that of a computer. It is not worth designing for each of the possibilities. The solution is to have two versions of the icons: coloured and black/white for example.

If you have a specific project or target for your icons keep in mind end hardware, some devices do have limited colours and it might be a must to adapt to them. Seticonos sss websafe.png

Although we have millions of colors at our disposal if we limit ourselves to a range we will have better results. The best idea is to arrange the icons thematically and assign a color to each group.


For best consistent style, icons should be designed on a grid base.

This assures also that the conversion from .svg to .png is as smooth as posible and there is no need for reparing the pixels in the .png file , this can even be an automatic process. All shape anchor points can be placed on this grid.
Seticonos sss IS bezier forkdwn.png Seticonos sss IS bezier forkup.png

The grid should be made of the same (or twice) number of units as the end number of pixels.

2020 iconset: templates and examples

This icon set is made by User:Sergionaranja following general rules 20x20px.
you can get them at [2]
please if you do derivative work do not call it 2020iconset

2020 st squarerounded 1.svg (info) squared icon template 1px border
2020 st circle 1.svg (info2) circled icon template 1px border
2020 st diamondrounded.svg (info3) diamond icon template 1px border
2020 st circle 2.svg (prohibition) circled icon template 2px red border
2020 st triangle 2.svg (danger) triangular icon template 2px red border
2020 st amenity bar.svg 2020 stBN amenity bar.svg amenity=bar
2020 st amenity cinema.svg 2020 stBN amenity cinema.svg amenity=cinema
2020 st amenity pub.svg 2020 stBN amenity pub.svg amenity=pub
2020 st amenity nightclub.svg 2020 stBN amenity nightclub.svg amenity=nightclub
2020 st amenity restaurant.svg 2020 stBN amenity restaurant.svg amenity=restaurant
2020 st amenity theatre.svg 2020 stBN amenity theatre.svg amenity=theatre
2020 st placeofworship.svg template for place_of_worship=*
2020 st placeofworship bahai.svg 2020 stBN placeofworship bahai.svg place_of_worship=bahai (Baha'i)
2020 st placeofworship buddhist.svg 2020 stBN placeofworship buddhist.svg place_of_worship=buddhist
2020 st placeofworship christian.svg 2020 stBN placeofworship christian.svg place_of_worship=christian
2020 st placeofworship hindu.svg 2020 stBN placeofworship hindu.svg place_of_worship=hindu
2020 st placeofworship jain.svg 2020 stBN placeofworship jain.svg place_of_worship=jain
2020 st placeofworship jewish.svg 2020 stBN placeofworship jewish.svg place_of_worship=jewish
2020 st placeofworship muslim.svg 2020 stBN placeofworship muslim.svg place_of_worship=muslim
2020 st placeofworship pagan.svg 2020 stBN placeofworship pagan.svg place_of_worship=pagan
2020 st placeofworship pastafarian.svg 2020 stBN placeofworship pastafarian.svg place_of_worship=pastafarian
2020 st placeofworship scientologist.svg 2020 stBN placeofworship scientologist.svg place_of_worship=scientologist
2020 st placeofworship shinto.svg 2020 stBN placeofworship shinto.svg place_of_worship=shinto
2020 st placeofworship sikh.svg 2020 stBN placeofworship sikh.svg place_of_worship=sikh
2020 st placeofworship taoist.svg 2020 stBN placeofworship taoist.svg place_of_worship=taoist
2020 st placeofworship zoroastrian.svg 2020 stBN placeofworship zoroastrian.svg place_of_worship=zoroastrian
2020 st powergensource burn.svg 2020 stBN powergensource burn.svg power_source burn type
2020 st powergensource nuclear.svg 2020 stBN powergensource nuclear.svg power_source nuclear type
2020 st powergensource sun.svg 2020 stBN powergensource sun.svg power_source sun type
2020 st powergensource water.svg 2020 stBN powergensource water.svg power_source water type
2020 st powergensource wind.svg 2020 stBN powergensource wind.svg power_source wind type

2020 stBN leisure bullring.svg