MapBox

Style Guide

For every icon, there is both a 10x10 pixel size for higher zoom levels, and a 15x15 pixel size for lower zoom levels.

Maki icons have a 1 pixel 50% opaque white border

1px Border

Both sizes of Maki icons have the same size border. This makes them legible against any background color and stand out against complex backgrounds. The outline color extends into the negative space of the icon and has rounded edges.

Maki icons have strong silhouettes

Silhouettes

Each Maki icon has a unique, descriptive silhouette. Instead of using basic shapes like circles to define edges, the contour of the image depicted in the icon defines the edge.

Maki icons use Internationally recognizable symbols

International recognizable symbols

Whenever possible, avoid alphanumeric characters or purely American/Western concepts. When this is not possible, make multiple versions. Some symbols are more universal than others. For example, letters represent post offices better than mailboxes because mailboxes look different in different parts of the world.

Maki icons are one color

Color

Maki icons are all one color. They are designed in black but intended to be usable in a variety of colors.

Design on the grid

Design on the Grid

Because Maki icons are so small, it is important to design them according to the pixel grid in order to preserve a crisp, clear appearance at actual size. In the image above to the right, the pink area shows the proper line placement of the icon on the grid.