I'm looking to adjust the actual icon within a marker rather than replacing the entire marker with a custom image.

If I'm trying to use a custom .svg file for the 'icon' property, how can i force leaflet (through L.Icon or a similar method) to replace what the white icon is while preserving the actual tear drop shape of the marker?

I just want to use my own icon image instead of calling the MakiMarker api. I am open to adjusting to another library/method compared to L.MakiMarker.

Marker Creation

Below is where I want to pass a custom .svg icon to the icon property.

enter image description here

  • 1
    Have you looked into font awsome github.com/lvoogdt/Leaflet.awesome-markers this gives you many options. Commented Aug 2, 2017 at 12:56
  • @BillChappell Still looking to use my own svg though. Let me know if I'm missing a step here
    – Tmo
    Commented Aug 2, 2017 at 16:48

1 Answer 1


As you alluded to, you will not be able to substitute your own icon image for one of Maki's since those are being returned from mapbox via their marker API (see here for details). Leaflet MakiMarker is not performing any icon "substitution" but instead offering you leaflet markers based on the Maki icons.

You could grab the default leaflet marker image(it's a pin-drop style if that's what you're looking for) and then modify it with your own icon, save that as an image, and then use that image as specified here: http://leafletjs.com/reference-1.1.0.html#icon

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.