Icon
Quick answer
L.icon describes a marker's appearance through image URLs, sizes and anchors, while L.divIcon is the HTML counterpart for purely CSS drawn pins. Anchors and sizes decide exactly which pixel of the graphic sits on the geographic coordinate. DivIcon skips image requests entirely, while image icons support retina and shadow variants.
L.icon( options ) → Icon
Key points
- iconUrl is required for image icons and iconRetinaUrl optionally serves high density screens.
- L.Icon.Default.mergeOptions fixes 404s caused by bundled or inlined Leaflet CSS.
- shadowUrl and shadowSize add a drop shadow behind the pin image.
Example
var dot = L.divIcon({
className: '',
html: '<div class="pin"></div>',
iconSize: [16, 16],
iconAnchor: [8, 8],
popupAnchor: [0, -10]
});
L.marker([39.907359, 116.391263], { icon: dot })
.bindPopup('自定义圆点')
.addTo(map);L.Icon.Default.mergeOptions({
iconRetinaUrl: 'https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/images/marker-icon-2x.png',
iconUrl: 'https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/images/marker-icon.png',
shadowUrl: 'https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/images/marker-shadow.png'
});Notes
- Default marker images return 404 when Leaflet CSS is inlined or served from another path.
- Omitting iconAnchor aligns the top-left corner and offsets every marker.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Icon. https://www.jingweizhi.com/en/leaflet/api/icon.html (accessed 2026-11-03).