Mapbox GL js available icons

Question

I am rewriting a web application from Mapbox.js to Mapbox GL js. Using the standard 'mapbox://styles/mapbox/streets-v8' style, where can I find a list of all working marker icons?

Here is my code:

m.map.addSource("markers", {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": ["-75.532965", "35.248018"]
                },
                "properties": {
                    "title": "Start",
                    "marker-symbol": "entrance",
                    "marker-size": "small",
                    "marker-color": "#D90008"
                }
            }
        }
    });
    m.map.addLayer({
        "id": "markers",
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "{marker-symbol}-15", //but monument-15 works
            "text-field": "{title}",
            "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
            "text-offset": [0, -1.6],
            "text-anchor": "top"
        }
    });

I read that all Maki icons should be made available for styles that don't have icons as a default: https://github.com/mapbox/mapbox-gl-styles/issues/241 But most of them don't work. Also there is the problem with the sizes - for Maki they were -small, -medium and -large, and now I see -11 and -15.

I just need to use some basic marker icons.

score 16 · Answer 1 · answered Mar 21 '16 at 19:50

16

We're still sorting out the final implementation details for the default icon set and will document that set thoroughly once it has been decided upon.

Until then, you can see exactly what icons are available for a given style by peeking at the mapbox-gl-styles repo in the sprites folder.

answered Mar 21 '16 at 19:50

Lucas Wojciechowski

3,695
16
19

Thanks, is there a way to see how the sprite image looks like or need to test them visually 1 by 1? – the_web Mar 23 '16 at 08:14
14

This really should be made more obvious in the documentation. Users shouldn't have to dive into stack overflow to find out what markers are available! – Huw Davies Jul 22 '16 at 10:37
4

Is this still the only way to see icons? – Shane Reustle May 16 '17 at 04:12
1

is the official documentation ready yet and I'm just missing it? – André Aug 21 '21 at 21:03

score 3 · Answer 2 · answered Nov 21 '17 at 20:46

3

Since that issue was closed, all maki icons are now natively available in mapbox-gl.js. You can see all available at https://www.mapbox.com/maki-icons/. You can also multiply their size using the icon-size paint property, though this may result in pixelation. There are still some hitches, like the icon-color property not yet working, so you'll need to edit, recolor, and republish icons for now. (issue #3605).

answered Nov 21 '17 at 20:46

Steven Kalt

1,116
15
25

2

You can search the icons by name and theme at this hack I wrote [here](https://skalt.github.io/maki-choice/). – Steven Kalt Nov 21 '17 at 20:50
This is only true if you are using a Mapbox basemap (like Streets or Outdoors) – Lucas Wojciechowski Jun 29 '20 at 18:44
@LucasWojciechowski what if we're using a fork of one of the basemaps? I forked the streets map to make a single change but now I can't seem to access any maki icons other than marker-11 and marker-15, and they don't even look like the maki marker icon (they're rough circles). – Alex Nov 27 '22 at 19:05

Mapbox GL js available icons

2 Answers2

Linked