Historically Organic Maps app used Material and Material-inspired icon designs for both Android and iOS. While being native to one platform and easily available, these icons could be stylistically questionable at their best and weird or foreign-looking at their worst.

To provide a consistent signature Organic Maps look, this icon guideline was prepared. All UI icons must conform to it.

• Icons are SVG files of 24px × 24px size.
• They use transparent background and black color.
• All shapes must be aligned on a pixel grid to achieve sharp look.
• Similar to Material, icons consist of outlined shapes drawn with 2px strokes.
• In contrast to Material, rounded shapes are usually preferred to sharper angles.
• Because of 2px strokes, spacing between shapes should be at least than 2px.
• For optical adjustments of dense and complex shapes 1.5px strokes/spacing is allowed.
• Padding is important for the visual balance of the icons placed next to each other:
  • 3px for square shapes;
  • 2px for longer/wider and round shapes;
  • 1px rarely used for balancing asymmetric shapes.

Pixel grid alignment is very important, because Organic Maps strives to support older devices with lower resolution screens (mdpi), and icons should be crisp.

Consistent stroke width, open forms, and sufficient spacing ensure icon legibility for all sizes.

In general, these requirements make sure that for some cases rounded Material Icons or rounded Material Symbols are a good starting point.

If desired metaphors are not discovered there, an Iconify search tool with 24px grid filter could also help.

Nevertheless many real use cases require drawing an icon from scratch, or at least tweaking an existing one.

When drawing/editing an icon, you can use Material Icons guidelines:

For drawing icons, Inkscape is the recommended open source vector image editor.

• In the Document Properties window…
  • Make sure that Format and Display units are in px.
  • Set up Width and Height to be 24px each.
  • In a Grids tab, add a new rectangular grid with 1 px X/Y spacing.
• When designing an icon…
  • Use grid snapping to achieve pixel-perfect design.
  • Prefer simpler shapes, but do not be afraid of curved lines.
  • When rounding corners, keep the visual width of the shape constant.
• To check the result, export a few PNGs: 24×24 (mdpi), 36×36 (hdpi), and 48×48 (xhdpi).
• When preparing an SVG to a developer, optimize it using https://svgomg.net or similar tools.

These icons conform to this guideline. They are already in use on both iOS and Android.

Historically Organic Maps uses round icons for businesses and similar POIs, square icons for transport infrastructure, and doesn't use background for smaller features and natural objects. See https://github.com/organicmaps/organicmaps/wiki/Icons

Dark mode icons are derived from light mode icons by changing them in several ways depending on original design. Check discussion in #7195 and see https://github.com/organicmaps/organicmaps/wiki/Icons:-dark-vs.-night-and-size-comparison

For drawing icons, Inkscape is the recommended open source vector image editor.

• When creating a new icon, start with redrawing one of the existing images.
• Be careful with the outline shape, rounded corners, and other conventions.
• The width and height is generally 18px, but in some cases smaller images are OK.
• Filled shapes are preferred, since outlines aren't legible in small sizes.
• Color is of great importance, use existing conventions for light and dark.
• Pixel grid is still helpful, even if perfect alignment is not achievable.
• Check legibility by exporting PNGs at 1x (mdpi), 1.5x (hdpi), 2x (xhdpi).