---
title: "Leaflet marker with a custom icon | Leaflet"
description: "Define and use custom marker icons in Leaflet JS maps."
---
# Leaflet marker with a custom icon
This tutorial shows how to define your custom icons for markers using Leaflet JS.
Introducing custom images and shadows to your markers can significantly enhance the visual appeal of your map. By adding a personal touch to your Leaflet icons, you can create a unique and engaging experience for your users.
### NPM module setup
```bash
npm install --save @maptiler/leaflet-maptilersdk leaflet
```
#### main.js
```js
import { MaptilerLayer, MapStyle } from '@maptiler/leaflet-maptilersdk';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
const key = 'YOUR_MAPTILER_API_KEY_HERE';
const map = L.map('map').setView([45.9767521, 7.6569418], 12);
const mtLayer = new MaptilerLayer({
apiKey: key,
style: MapStyle.OUTDOOR, // optional
}).addTo(map);
const LeafIcon = L.Icon.extend({
options: {
shadowUrl: "https://docs.maptiler.com/leaflet/assets/leaf_shadow.png",
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
const leafIcon = new LeafIcon({iconUrl: "https://docs.maptiler.com/leaflet/assets/leaf_marker.png"});
L.marker([45.9767521, 7.6569418], {icon: leafIcon})
.addTo(map)
.openPopup();
```
#### index.html
```html
Leaflet marker with a custom icon | NPM example
```
#### style.css
```css
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
```
### Basic JavaScript setup
```html
Marker with custom icon
```
Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/credentials/api-key/#secure-key) before you publish it.
## Learn more
Check out the [How to make a map with pins using Leaflet](https://docs.maptiler.com/leaflet/examples/map-with-pins/) to learn How to load a geoJSON of points in Leaflet JS and add your custom pins or icons.
## Related examples
### [Display Marker](https://docs.maptiler.com/leaflet/examples/default-marker/)
Tutorials
Add default map markers using Leaflet JS web mapping library.
### [Make a map with pins](https://docs.maptiler.com/leaflet/examples/map-with-pins/)
Examples
Create maps with custom pins and markers in Leaflet JS.