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.
Icons suitable for Maki.
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 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.
Flat icons have strong silhouettes.
Perspective makes icons less legible.
Maki icons use the pixel grid
Maki icons come in one size: 15px by 15px. Icons should be aligned with the pixel grid.
15px by 15px grid at 100%.
15px by 15px grid at 1,600%.
Geometry with proper pixel alignment.
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.
15px by 15px live area.
15px by 15px trim area.
Maki icons use common geometric building blocks
Maki icons share a common set of geometric elements:
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.
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.
Maki icons have 1 pixel strokes
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.
Some icons might be solely stroke-based, and should only use strokes 1 pixel in width.
File requirements
Every icon should be one 15px by 15px sized SVG file. File names should be all lowercase. When possible, icon names should be consistent with the OpenStreetMap tag name associated with the symbol.
If an icon is an alternative to an existing Maki icon, the file name should end with "-alt1.svg", "-alt2.svg", etc.
The SVGs files must meet the following technical qualifications:
Maki icons can be created with any editor that exports SVG, including Inkscape and Illustrator. When exporting from Illustrator, set "Styling" to "Presentation Attributes" and make sure the "Responsive" box is unchecked.
![](../images/guidelines_illustrator.png)
Workflow for contributing
We'd love to have more designers contributing to Maki. Here's how to start:
1. Clone github.com/mapbox/maki, create a new branch, and add your icons to the icons/
folder.
2. Submit a pull request targetting the main
branch of github.com/mapbox/maki.
3. Make sure all the automated tests pass. The Maki tests ensure the SVG XML in your icons meets the qualifications in the "file requirements" section of the guidelines.
4. A maintainer (usually @samanpwbb or @tristen) will review your contribution and provide feedback or merge your pull request.