---
title: "Add custom icons with markers | JavaScript maps SDK"
description: "Add custom marker icons to your map."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Add custom icons with markers
Enhance your map by incorporating personalized icons using the [`Marker`](https://docs.maptiler.com/sdk-js/api/markers/#marker) feature. This functionality allows you to include custom icons that align with your specific preferences.
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const geojson = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {
'message': 'Foo',
'iconSize': [60, 60]
},
'geometry': {
'type': 'Point',
'coordinates': [-66.324462890625, -16.024695711685304]
}
},
{
'type': 'Feature',
'properties': {
'message': 'Bar',
'iconSize': [50, 50]
},
'geometry': {
'type': 'Point',
'coordinates': [-61.2158203125, -15.97189158092897]
}
},
{
'type': 'Feature',
'properties': {
'message': 'Baz',
'iconSize': [40, 40]
},
'geometry': {
'type': 'Point',
'coordinates': [-63.29223632812499, -18.28151823530889]
}
}
]
};
const map = new Map({
container: 'map',
style: MapStyle.STREETS,
center: [-65.017, -16.457],
zoom: 5
});
// add markers to map
geojson.features.forEach(function (marker) {
// create a DOM element for the marker
const el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage =
`url(https://docs.maptiler.com/sdk-js/examples/custom-marker-icons/${marker.properties.iconSize[0]}.jpg)`;
el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
el.addEventListener('click', function () {
window.alert(marker.properties.message);
});
// add marker to map
new maptilersdk.Marker({element: el})
.setLngLat(marker.geometry.coordinates)
.addTo(map);
});
```
#### index.html
```html
Add custom icons with markers | NPM example
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Add custom icons with Markers
```
## Related examples
### [Add an icon to the map](https://docs.maptiler.com/sdk-js/examples/add-image/)
Examples
Add icons from external URLs to symbol map layers.
### [Add custom icon (PNG) to a point layer](https://docs.maptiler.com/sdk-js/examples/custom-points-icon-png/)
Examples
Display a point layer using custom PNG icons.
### [Add custom icon (SVG) to a point layer](https://docs.maptiler.com/sdk-js/examples/custom-points-icon-svg/)
Examples
Display a point layer using custom SVG icons.
### [GeoJSON point layer](https://docs.maptiler.com/sdk-js/examples/geojson-point/)
Tutorials
Add a GeoJSON point overlay to your map application.