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.
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.
Icons suitable for Maki.
Icons not suitable for Maki.
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.
Simple, recognizable shape.
Avoid extra detail, only use strokes if necessary.
Simple, recognizable shape.
Avoid detail and perspective.
Fill-based have strong silhouettes.
Stroke-based icons are harder to read.
Perspective makes icons less legible.
Flat icons have strong silhouettes.
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.
15px by 15px grid at 100%.
11px by 11px grid at 100%.
15px by 15px grid at 1600%.
11px by 11px grid at 1600%.
Geometry with proper pixel alignment.
Geometry with improper pixel alignment.
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.
15px by 15px live area.
11px by 11px live area.
15px by 15px trim area.
11px by 11px trim area.
Maki icons share a common set of geometric elements:
Shape area
Corner
Stroke
Stroke ending
Counter area
Counter stroke
Counter stroke ending
Icon anatomy.
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.
The wastebasket is constructed with
straight lines, and all corners are consistently rounded.
The hotel icon uses a wide variety of curves.
Even gradual curves should be based on
circles like the bottom left curve on this heliport icon.
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.
The wastebasket is constructed with
straight lines, and all corners are consistently rounded.
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.
