Improve icons graphical consistency

[dvdmrtnz]

I think we can improve the graphical consistency of the POI icons in Organic Maps. So I created a wiki page to look at all the icons on a single view (https://github.com/organicmaps/organicmaps/wiki/Icons). I have tried to group the icons by type to get a better sense of all the styles used.

Some things that I noticed that could be improved:

• [x] Hairdresser could get a purple background instead of grey
• [x] Taxi icon is currently using a grey background, instead of the squared blue of the rest of the transport icons
• [x] Camping should get a brown icon, the same as the rest of the accommodations
• [x] Dentist should be red, same as other health icons
• [x] Outdoors icons have a mix of grey round backgrounds and icons without background
• [ ] Most of the icons use a "filled in" style, however, some of them are just "outlines" without fill (for example stationery or sweets)

[not-available-username]

I tried to create two alternatives for the pay parking wich is unclear imho, but I'm not sure that the icons are big enough to be noticed, I must make the coins bigger if this design could work.

new icon below

[biodranik]

It's easy to test: render 18x18 pixels icon and recognize it.

[euf]

Actually, its a little bit more complicated. SVG size in px gets scaled 0.75 to become mdpi (@1 on iOS), 0.75×1.5=1.125 to become hdpi, 0.75×2=1.5 to become xhdpi (@2 on iOS). So it goes like this:

sixe in px		1x	1.5x	2x	3x
	svg	mdpi	hdpi	xhdpi	xxhdpi
small (e.g. airport-s)	16	12	18	24	36
regular (e.g. airport-m)	24	18	27	36	54

[not-available-username]

Actually, its a little bit more complicated. SVG size in px gets scaled 0.75 to become mdpi (@1 on iOS), 0.75×1.5=1.125 to become hdpi, 0.75×2=1.5 to become xhdpi (@2 on iOS). So it goes like this: sixe in px 1x 1.5x 2x 3x svg mdpi hdpi xhdpi xxhdpi small 16 12 18 24 36 medium 20 15 23 30 45 large 24 18 27 36 54 test 32 24 36 48 72

Every icon should be tested at 16x16 pixel? I guess that most of the current icons are not much readable at that size. It would be nice to be able to resize the icons, like it's currently possible with fonts.

[euf]

Sorry, my initial comment had a mistake. I updated it to avoid further misleading. What I meant was that your icon is supposed to be on 24x24 SVG canvas. Then it would be correctly rendered as 18x18px for mdpi, 27x27px for hdpi and so on.

[not-available-username]

I think that nothing with a P and a symbol can be big enough to be clearly visible, but a different icon can hint that is a different parking and tapping on the icon will clarify.

[dvdmrtnz]

I think cave, mountain-pass, peak and volcano symbols should use the same color as the rest of the outdoors icons.

[dvdmrtnz]

Also, I noticed that there are some icons that are in the symbols folder but are not used in the app. Should we delete them?

convenience-m.svg

hardware-m.svg

heliport-m.svg

npark-m.svg

tire-repair-m.svg

travel_agency_shop-m.svg

[biodranik]

Can't we add these types instead? It would be great to show hints on icons in the wiki about which types are matched: ![](url "type_name")

[pastk]

Also see https://github.com/organicmaps/organicmaps/issues/2026 for a technical vision how to automate production of icon versions in the future.

[dvdmrtnz]

IMO these should be changed too for consistency:

• Change tourism=theme_park icon background to brown as all the other tourism POIs.

• Remove circle background from amenity=bbq, leisure=beach_resort, amenity=hunting_stand, man_made=light_house, man_made=windmill icons, same as all other outdoors icons.

• Remove square background from amenity=sanitary_dumping_station.

• Change aeroway=heliport, aeroway=helipad icon to square blue background, same as all other transport icons.

• Change amenity=vending_machine to filled-in icon.

[pastk]

Should the dump station icon be circled like other vehicle icons?

The current hunting stand icons is too complex and hard to recognize IMO. Carto has a better one: https://wiki.openstreetmap.org/wiki/File:Hunting-stand-16.svg

[dvdmrtnz]

Should the dump station icon be circled like other vehicle icons?

I would make it a non-circled icon. It's not a business or building-like place. It's more akin to a smaller feature like a bicycle repair station, a vending machine or a parking meter, which are not circled.

[dvdmrtnz]

The current hunting stand icons is too complex and hard to recognize IMO. Carto has a better one: https://wiki.openstreetmap.org/wiki/File:Hunting-stand-16.svg

Carto icon looks good!

[not-available-username]

• Change aeroway=heliport, aeroway=helipad icon to square blue background, same as all other transport icons.

IMO H with round icon is helipad, H with square icon is hospital. Usually helipads are marked on the ground with a circled H.

[pastk]

I thought so also, bu here https://wiki.openstreetmap.org/wiki/Tag:aeroway=helipad are many helipad pics w/o a circle (but with a cross instead). Alternatively a circle could be inside a square.

[patepelo]

Here is my opinion:

• Change tourism=theme_park icon background to brown as all the other tourism POIs.

Find it ok, brown or grey.

• Remove circle background from amenity=bbq, leisure=beach_resort, amenity=hunting_stand, man_made=light_house, man_made=windmill icons, same as all other outdoors icons.

Fully agree

• Remove square background from amenity=sanitary_dumping_station.

Fully agree. Maybe even change the icon, althought in the inspiration from internet all look the same.

• Change aeroway=heliport, aeroway=helipad icon to square blue background, same as all other transport icons.

I agree, although I find it difficult to represent. And the comment for the hospital is important, although blue is different and if we add some circle it be better, like proposed. Do we want to have the same icon for heliport as for helipad? I suppose for the moment, yes.

• Change amenity=vending_machine to filled-in icon.

I disagree on this one, as a vending machine is something that's usually there unattended by someone, it follows the rest of not filled icons. Do you propose this change because it's hard to visualize?

[dvdmrtnz]

• Change aeroway=heliport, aeroway=helipad icon to square blue background, same as all other transport icons.

I agree, although I find it difficult to represent. And the comment for the hospital is important, although blue is different and if we add some circle it be better, like proposed. Do we want to have the same icon for heliport as for helipad? I suppose for the moment, yes

Could be done like this:

[patepelo]

I like it :)

[dvdmrtnz]

• Change amenity=vending_machine to filled-in icon.

I disagree on this one, as a vending machine is something that's usually there unattended by someone, it follows the rest of not filled icons. Do you propose this change because it's hard to visualize?

I don't know if you are misunderstanding me. Just to be on the same page, I am not talking about adding a circle around the icon, I am talking abut "filling in" the icon. Something like this but more polished:

[patepelo]

Ok, I understand better, but still feel like these icons must be discreet and plain monochronic grey is the best. Do you prefer so because one could find it better or because one would understand the symbol better?

• Change amenity=vending_machine to filled-in icon.

I disagree on this one, as a vending machine is something that's usually there unattended by someone, it follows the rest of not filled icons. Do you propose this change because it's hard to visualize?

I don't know if you are misunderstanding me. Just to be on the same page, I am not talking about adding a circle around the icon, I am talking abut "filling in" the icon. Something like this but more polished:

[dvdmrtnz]

Ok, I understand better, but still feel like these icons must be discreet and plain monochronic grey is the best. Do you prefer so because one could find it better or because one would understand the symbol better?

• Change amenity=vending_machine to filled-in icon.

I disagree on this one, as a vending machine is something that's usually there unattended by someone, it follows the rest of not filled icons. Do you propose this change because it's hard to visualize?

I don't know if you are misunderstanding me. Just to be on the same page, I am not talking about adding a circle around the icon, I am talking abut "filling in" the icon. Something like this but more polished:

For consistency. Most of our icons use a "solid style", not an "outline style".

[dvdmrtnz]

• Remove square background from amenity=sanitary_dumping_station.

Fully agree. Maybe even change the icon, althought in the inspiration from internet all look the same.

I agree that icon could be changed. Maybe we could take the icon from the tourism=caravan_site which I thinks is simple and looks nice and add a down arrow.

[patepelo]

• Remove square background from amenity=sanitary_dumping_station.

Fully agree. Maybe even change the icon, althought in the inspiration from internet all look the same.

I agree that icon could be changed. Maybe we could take the icon from the tourism=caravan_site which I thinks is simple and looks nice and add a down arrow.

Great idea. Would it be stand alone monochrone (without circle)? Most of these amenities are just unsupervised by human.

[dvdmrtnz]

• Remove square background from amenity=sanitary_dumping_station.

Fully agree. Maybe even change the icon, althought in the inspiration from internet all look the same.

I agree that icon could be changed. Maybe we could take the icon from the tourism=caravan_site which I thinks is simple and looks nice and add a down arrow.

Great idea. Would it be stand alone monochrone (without circle)? Most of these amenities are just unsupervised by human.

Yes.

[dvdmrtnz]

Proposal for amenity=sanitary_dumping_station:

[patepelo]

It's much better. Thank you. 😊

[DavidMacalister]

Look at the yoga icon, and it has a round background, but all sports don't have a background on the icon

[DavidMacalister]

how it should be before	after

 

[DavidMacalister]

Ok, I understand better, but still feel like these icons must be discreet and plain monochronic grey is the best. Do you prefer so because one could find it better or because one would understand the symbol better?

• Change amenity=vending_machine to filled-in icon.

I disagree on this one, as a vending machine is something that's usually there unattended by someone, it follows the rest of not filled icons. Do you propose this change because it's hard to visualize?

I don't know if you are misunderstanding me. Just to be on the same page, I am not talking about adding a circle around the icon, I am talking abut "filling in" the icon. Something like this but more polished:

For consistency. Most of our icons use a "solid style", not an "outline style".

I agree, this feature is also present in these icons:

outline style	Description
	It is possible to make a solid icon, without many problems, and thus resemble other health icons
	It is possible to make a solid icon, without many problems, and thus resemble other health icons
	It is possible to make a solid icon, without many problems, and thus resemble other health icons
	These are a little more difficult, but they are very different from the others Outdoors
	These are a little more difficult, but they are very different from the others Outdoors
	These are a little more difficult, but they are very different from the others Outdoors
	Other icons that have text inside like memorial plaque, historic tumb and histoc stone are solid, so I don't see why this icon is different.
	Different from the others, but I don't know if it's possible to be a solid icon
	Different from the others, but I don't know if it's possible to be a solid icon
	Different from the others, but I don't know if it's possible to be a solid icon, it would also be nice to enlarge it a little, it seems to be smaller

[DavidMacalister]

How could it be icons of Health	Health

[patepelo]

Look at the yoga icon, and it has a round background, but all sports don't have a background on the icon

Thanks for coming by to give all this feedback. The yoga icon has been changed based on this discussion #5294. In summary is that circled POIs are, in general, icons that are attended by someone there. It's an icon that invites the user to click and open contact details such as opening times, etc.

For example a table tennis or other pitch-like elements will be shown uncircled as they are just a simple element.

And yes, it is a work in progress, several other icons are expected to change, like fitness centre did as well. Many will need to have a sibling uncircled icon version like a swimming sports centre (circled) and a swimming pool (uncircled).

And many of them we haven't been able to publish because we need to redo the designs, such as the one for climbing centre which is hard to understand when shown small.

[patepelo]

Other icons that have text inside like memorial plaque, historic tumb and histoc stone are solid, so I don't see why this icon is different.

I'm not following here. What is a solid icon? An uncircled icon filled with color? Why would you change some of them. There are many elements that need to be reprented real subtle, for example these information boards are many time really invasive in the map.

[patepelo]

How could it be icons of Health

Health

I'm not following through, what is the problem with these icons?

[DavidMacalister]

Outros ícones que possuem texto dentro, como placa memorial , túmulo histórico e pedra histórica, são sólidos, então não vejo por que esse ícone é diferente.

Não estou acompanhando aqui. O que é um ícone sólido? Um ícone não circulado cheio de cores? Por que você mudaria alguns deles? Existem muitos elementos que precisam ser representados de forma muito sutil, por exemplo, esses painéis informativos são muitas vezes realmente invasivos no mapa.

Asolid icon is not an icon with the colored circle at the bottom, but rather an icon that is not made by an outline drawing, but hollow in its middle

example:	outline style	solid stlyle

[DavidMacalister]

How could it be icons of Health Health

I'm not following through, what is the problem with these icons?

These icons were a version that I made to be solid, the original icons are not solid and they are the ones that I find a bit inconsistent

look	my solid	original

[pastk]

IMHO solid-style icons are more likely to look good when they were made small.

[dvdmrtnz]

@DavidMacalister Nice job! I think the solid icons look better and are more consistent with the rest of the icons.