Map Icons/Map Icons Standards

Icons, Symbols, Pictograms ...

A symbol is a graphical representation of an idea. Symbols 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 the map excessively, worsening their functionality. Refer to Stylesheet for roads or areas, as this article will focus only on the graphical representation of POIs. To design a set of symbols it 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.

Icon Concept

Transnationalism refers mainly to the concept of the symbol, i.e. how to represent a particular thing graphically. To achieve it, it is advisable to study frequently used symbols that already meet these standards, for example AIGA (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

As was thereafter adopted by a large number of organizations and they are public domain, they have become a standard. Although its use is primarily for transportation it gives us a good conceptual basis to work on our own map symbols.
Another great standard widely used is the European traffic sign set based on the Vienna Convention on Road Signs and Signals. The aim was that all symbols were understood despite native language so no text was used. There are three main conventions adopted relating to the meaning of their shape:

square means information,

red circle means prohibition and

red triangle means danger.

OSM Context

Readability is key. The great advantage of OpenStreetMap is that it 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. Possible sollutions:

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 or that can be adopted by the community or be an option to install and use locally.

Technical Aspects

To focus on the subject, our symbols are for online use. Thus, the unit of measurement will be the pixel (px), colors will be sRGB, and format will be SVG (vector) from which PNG (bitmap) can easily be created. 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

Size

The first point to consider is size. The design of the forms is directly related to the final size and we should focus 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 the symbol is it should have less detail.

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 bitmap icons is: User:UrSuS

Therefore:

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

Thickness

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

Wrong:
SVG with drawing placed anywhere
makes blurry conversion to PNG .

Correct:
SVG with drawing placed on grid and matching units and pixels.
makes sharper conversion to PNG .

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:

Colours

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 mobile devices that are capable of displaying 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: colored and black/white for example.

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

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.

Furthermore you have to focus on the general color rules of the renderer. See Map Icons. Another aspect is the (different) recognition and interpretation of several colors in different cultures.... see wikipedia:Color_theory

Grid

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.

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

(info) squared icon template 1px border

(info2) circled icon template 1px border