Leaflet marker with a custom icon

This tutorial shows how to define your custom icons for markers using Leaflet JS.

Introducing custom images and shadows to your markers can significantly enhance the visual appeal of your map. By adding a personal touch to your Leaflet icons, you can create a unique and engaging experience for your users.




Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.



Learn more



Check out the How to make a map with pins using Leaflet to learn How to load a geoJSON of points in Leaflet JS and add your custom pins or icons.



Related examples




  
  
  
    
    
  
  
    

      
        
          
          Display a Marker on the map using Leaflet
        
        
Display Marker

        Example
        
Display a Marker on the Map: this tutorial shows how to add the default Marker to the map using Leaflet JS.

      
    

  
  
    

      
        
          
          How to make a map with pins using Leaflet
        
        
Make a map with pins

        Example
        
This tutorial shows how to make a map with pins using Leaflet JS.