<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" integrity="sha512-Zcn6bjR/8RZbLEpLIeOwNtzREBAJnUKESxces60Mpoj+2okopSAcSUIUOseddDm0cxnGQzxIR7vJgsLZbdLE3w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js" integrity="sha512-puJW3E/qXDqYp9IfhAI54BJEaWIfloJ7JWs7OeD5i6ruC9JZL1gERT1wjtwXFlh7CjE7ZJ+/vcRZRkIYIb6p4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="map-custom"></div>

* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 20px;
  font-family: system-ui, "Segoe UI", sans-serif;
  background: #f1f5f9;
}

#map-custom {
  height: 500px;
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.leaflet-popup-content-wrapper {
  border-radius: 8px;
}
.leaflet-popup-content b {
  color: #3b82f6;
}

const map = L.map("map-custom").setView([48.8566, 2.3522], 13);

L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
  attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>"
}).addTo(map);

const storeIcon = L.icon({
  iconUrl: "https://placehold.co/50x50/3b82f6/ffffff?text=Store",
  iconSize: [50, 50],
  iconAnchor: [25, 50],
  popupAnchor: [0, -50]
});

L.marker([48.8566, 2.3522], {icon: storeIcon}).addTo(map)
  .bindPopup("<b>Main Store</b><br>Come visit us!")
  .openPopup();

Back to Snippets

OSM with Custom Marker Icon

Customize your OpenStreetMap location with a branded marker icon. This snippet demonstrates how to replace the default blue pin with your own image or logo using Leaflet's icon functionality.

342

#javascript

#css

#openstreetmap

#map

#marker

#custom icon

#branding

#leaflet

/HTML *CSS ()JS Output Live Updates

OSM with Custom Marker Icon

Share Code Snippet