Mapbox.js is no longer in active development. To learn more about our newer mapping tools see Mapbox GL JS.

You are viewing an older version of Mapbox.js. Check out v3.3.1 for the latest.


Represents a lightweight icon for markers that uses a simple div element instead of an image.

var myIcon = L.divIcon({className: 'my-div-icon'});
// you can set .my-div-icon styles in CSS

L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

By default, it has a 'leaflet-div-icon' class and is styled as a little white square with a shadow.


Factory Description
L.divIcon( <DivIcon options> options ) Creates a div icon instance with the given options.


Option Type Description
iconSize Point Size of the icon in pixels. Can be also set through CSS.
iconAnchor Point The coordinates of the "tip" of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker's geographical location. Centered by default if size is specified, also can be set in CSS with negative margins.
className String A custom class name to assign to the icon. 'leaflet-div-icon' by default.
html String A custom HTML code to put inside the div element, empty by default.