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.

Flightmap

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.

Flightmap

Icons suitable for Maki.

Flightmap

Icons not suitable 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.

Flightmap

Simple, recognizable shape.

Flightmap

Avoid extra detail, only use strokes if necessary.

Flightmap

Simple, recognizable shape.

Flightmap

Avoid detail and perspective.

Flightmap

Fill-based have strong silhouettes.

Flightmap

Stroke-based icons are harder to read.

Flightmap

Perspective makes icons less legible.

Flightmap

Flat icons have strong silhouettes.

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.

Flightmap

15px by 15px grid at 100%.

Flightmap

11px by 11px grid at 100%.

Flightmap

15px by 15px grid at 1600%.

Flightmap

11px by 11px grid at 1600%.

Flightmap

Geometry with proper pixel alignment.

Flightmap

Geometry with improper pixel alignment.

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.

Flightmap

15px by 15px live area.

Flightmap

11px by 11px live area.

Flightmap

15px by 15px trim area.

Flightmap

11px by 11px trim area.

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

Flightmap

Icon anatomy.

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.

Flightmap

The wastebasket is constructed with
straight lines, and all corners are consistently rounded.

Flightmap

Flightmap

The hotel icon uses a wide variety of curves.

Flightmap

Flightmap

Even gradual curves should be based on
circles like the bottom left curve on this heliport icon.

Flightmap

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.

Flightmap

The wastebasket is constructed with
straight lines, and all corners are consistently rounded.

Flightmap

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.

Flightmap

Flightmap

Let's find a way together

Get in touch to know about our Pricing Plans

Contact Us
Jungleworks