leaflet-svg-marker.js

// Create a customized SVG pin icon on the fly
// uses vars: lat, lon, color, title
// map is leaflet Map object
const color = '#cc0000';
const svg = `<?xml version="1.0" encoding="UTF-8"?><svg width="27" height="53.5" version="1.1" viewBox="-31 -22 22 18" xmlns="http://www.w3.org/2000/svg"><path d="m-20 8.8889c-2-20-10-22-10-30a10 10 0 1 1 20 0c0 8-8 10-10 30zm-2-30a2 2 0 1 1 4 0 2 2 0 1 1-4 0" fill="${color}" stroke="#000" stroke-width=".8"/></svg>`;
const iconUrl = 'data:image/svg+xml;base64,' + btoa(svg);
const icon = L.icon({
        iconUrl: iconUrl,
        iconAnchor: [13.5, 53],
    });
const marker = L.marker([lat, lon], {
  icon: icon,
  opacity: 0.75,
  title: tite,
  riseOnHover: true,
}).addTo(map);