> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt)
# Custom Markers with images
Use [`Marker`](https://docs.mapbox.com/mapbox-gl-js/ja/api/markers/#marker) to add custom icons to your map.
> **Related content (video): [Custom Markers](null)**
>
> If you would like to customize your markers with other HTML functionality, see our Custom Markers video tutorial.
> Example code:
**JavaScript**
```html
Custom Markers with images
```
**React**
```jsx
import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
mapRef.current = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
container: mapContainerRef.current,
style: 'mapbox://styles/mapbox/standard',
center: [-65.017, -16.457],
zoom: 5
});
const geojson = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
label: 'boat and human',
imageId: 1011,
iconSize: [60, 60]
},
geometry: {
type: 'Point',
coordinates: [-66.324462, -16.024695]
}
},
{
type: 'Feature',
properties: {
label: 'lighthouse',
imageId: 870,
iconSize: [50, 50]
},
geometry: {
type: 'Point',
coordinates: [-61.21582, -15.971891]
}
},
{
type: 'Feature',
properties: {
label: 'dog',
imageId: 837,
iconSize: [40, 40]
},
geometry: {
type: 'Point',
coordinates: [-63.292236, -18.281518]
}
}
]
};
for (const marker of geojson.features) {
const el = document.createElement('div');
const width = marker.properties.iconSize[0];
const height = marker.properties.iconSize[1];
el.className = 'marker';
el.style.backgroundImage = `url(https://picsum.photos/id/${marker.properties.imageId}/${width}/${height})`;
el.style.width = `${width}px`;
el.style.height = `${height}px`;
el.style.backgroundSize = '100%';
el.style.display = 'block';
el.style.border = 'none';
el.style.borderRadius = '50%';
el.style.cursor = 'pointer';
el.style.padding = 0;
el.tabIndex = 0;
el.ariaLabel = `Marker with image of the ${marker.properties.label}`;
el.addEventListener('click', () => {
window.alert(marker.properties.label);
});
el.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
window.alert(marker.properties.label);
}
});
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(mapRef.current);
}
}, []);
return ;
};
export default MapboxExample;
```