Add custom marker on a leaflet map

1. Get images

Two images are required to make a custom icon, the image itself and a shadow of the image. For a better look the image background should be transparent

2. Create icon

Here we create the icon using L.icon

const iconPole = L.icon({
    iconUrl: 'pole.png', //actual icon
    shadowUrl: 'pole-shadow.png', //shadow icon

    iconSize: [30, 50], // icon size
    shadowSize: [50, 64], // shadow size
    iconAnchor: [14, 50], // icon placement point corresponding to marker's location
    shadowAnchor: [4, 62],  // icon placement point corresponding to marker's location
    popupAnchor: [-3, -50] // point where the popup will open relative to the iconAnchor
});

3. Use icon on map

L.marker([-3.624044, 39.848580], {
  icon: iconPole
}).addTo(map);

4. Popup on marker

Example to add a popup with text on marker

const samplePopup = L.popup().setContent("This is pole icon");
L.marker([-3.624044, 39.848580], {
  icon: iconPole
}).bindPopup(samplePopup).addTo(map);