Create custom map icon sets with the Maki icon editor

Saman Bemel Benrud
Fri, 29 Apr 2016 00:00:00 -0400

The latest version of the Maki comes with an icon set editor for customizing and organizing large icon sets.

A new way to edit icons

To make it easier and faster to create icon sets, all styling in the Maki icon editor is group-based. The interface lets you organize icons into groups that correspond to categories in your data, and then apply styles to every icon in the group.

Moving an icon from one group to another automatically changes icon styling:

Add background emblems to icons, change fill color, and add strokes:

The editor includes the Maki icon set and lets you import your own SVG icons:

Export, save, and share your icon sets

When you export your icon set from the editor, you’ll get a folder full of ready to use SVGs, plus a special file called iconset.js. Use the iconset.js file to import your icon set back into the editor with all its groups and styles intact:

Designed to work with Mapbox Studio

Start a new icon set with the same icons and groups used by the Mapbox default styles if you want, so you don’t need to understand Mapbox data or POI classifications in order to create icon sets:

When adding icons to a Mapbox Studio style, all the icons in your template style will automatically be replaced by the new icons:

Contribute to Maki, see your icon in the editor

Every icon in the Maki set gets added as a default icon in the Maki editor. Maki is open source, CC0 licensed, and has detailed design guidelines. If you’re working on a project that demands a more extensive icon library than Maki provides, or even if you need one or two icons that aren’t yet in Maki, consider contributing to the project.