My code for formatting a JS Leaflet Extra Marker is like below where I've clearly given a marker color.

let parkMarkerIcon = L.ExtraMarkers.icon({
  shape: 'circle',
  markerColor: 'green',
  prefix: 'fa-solid',
  icon: 'fa-tree"',
  iconColor: '#fff',
  iconRotate: 0,
  extraClasses: '',
  number: '',
  svg: false

However, I don't seem to be getting the marker, just the icon? See below enter image description here

Have I missed something? I've tried looking at other working examples but they don't seem to include anything more than what I have above.

  • Which versions of Leaflet, L.ExtraMarkers and Fonts Awesome are you using? I had no problems displaying icon with Leaflet 1.8.0 and Fonts Awesome 4.4.0, just had to put prefix: 'fa'.
    – TomazicM
    Commented Nov 1, 2022 at 18:26

1 Answer 1


I had this problem. It is either your css file is not properly linked, or your images are in the wrong folder. For me, I moved my images to a directory above my css file and it worked. We know your js is working, otherwise the icon wouldn't appear at all.

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.