DESIGN GUIDELINES

Maki aims to be the most high quality, consistent, and comprehensive point of interest icon set possible. Maki icons are visually simple and constructed with the simplest possible XML under the hood. Every icon must follow these guidelines to maintain quality and to work with the Maki editor.

Maki icons are generic & geographic

The best Maki icons represent common places or things in the world, like parks or ATMs. Maki icons can be more abstract, like circles, stars, and other geometric shapes. Icons that represent specific places, like "The Eiffel Tower", or don't make sense on a map, like a mouse cursor, are not appropriate for Maki.

Maki icons have bold & recognizable silhouettes

A successful icon must be widely recognizable even across cultures, as simple as possible, and legible at 11px and 15px. When possible, icons should be two-dimensional, and fill-based rather than stroke based.

Maki icons use the pixel grid

Maki icons come in two different sizes: 11px by 11px and 15px by 15px. The icon will appear blurry and indistinct if drawn once and then scaled, so both sizes require separate drawings. The two sizes should look as similar as possible.

Maki icons stay within the trim area

Maki icons are designed to work well inside rectangular and circular shields. For this reason, the icon silhouette should be contained inside a circular trim area. Some narrow or tall icons may need to extend into the trim area in order to stay proportional to the rest of the icon set.

Maki icons use common geometric building blocks

Maki icons share a common set of geometric elements:

• Shape area

• Corner

• Stroke

• Stroke ending

• Counter area

• Counter stroke

• Counter stroke ending

Maki icons have straight edges but rounded corners

Due to the small scale of Maki, icons should be constructed with straight, obvious vertical and horizontal lines according to the pixel grid. Large, gradual curves will look blurry and indistinct at actual size.To make Maki feel friendly and inviting, round all corners consistently based on circle radiuses, in half pixel increments.

Maki icons have 1 pixel stroke

Icons comprised of stroke elements should have a stroke width of 1 pixel. Stroke endings should be rounded with a .5 pixel radius. Counter strokes should also be a width of 1 pixel.

File requirements

Every icon should have two SVG files corresponding with the two different icon sizes. File names should be all lowercase and end with “-11” or “-15” for each respective size. When possible, icon names should be consistent with the OpenStreetMap tag name associated with the symbol.

The SVGs files must meet the following technical qualifications:

• No SVG elements except for paths.

• No groups or transforms.

• Units must be in pixels.

• If SVG has a viewbox, it must equal “0 0 15 15” or “0 0 11 11”.

• Height and width must equal 15 or 11, and height and width must equal each other.