---
title: "Add a generated icon to the map | JavaScript maps SDK"
description: "Add custom map icons generated dynamically at runtime."
---
> 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 a generated icon to the map
Add an icon to the map that was generated at runtime.
### 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 map = new Map({
container: 'map',
style: MapStyle.STREETS,
center: [0, 0],
zoom: 2
});
map.on('load', function () {
const width = 64; // The image will be 64 pixels square
const bytesPerPixel = 4; // Each pixel is represented by 4 bytes: red, green, blue, and alpha.
const data = new Uint8Array(width * width * bytesPerPixel);
for (let x = 0; x < width; x++) {
for (let y = 0; y < width; y++) {
const offset = (y * width + x) * bytesPerPixel;
data[offset + 0] = (y / width) * 255; // red
data[offset + 1] = (x / width) * 255; // green
data[offset + 2] = 128; // blue
data[offset + 3] = 255; // alpha
}
}
map.addImage('gradient', { width: width, height: width, data: data });
map.addSource('point', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}
}
]
}
});
map.addLayer({
'id': 'points',
'type': 'symbol',
'source': 'point',
'layout': {
'icon-image': 'gradient'
}
});
});
```
#### index.html
```html
Add a generated icon to the map
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Add a generated icon to the map
```
## Related examples
### [Add custom icons with markers](https://docs.maptiler.com/sdk-js/examples/custom-marker-icons/)
Examples
Add custom marker icons to your map.
### [Generate a missing icon to the map](https://docs.maptiler.com/sdk-js/examples/add-image-missing-generated/)
Examples
Dynamically generate and add missing icons to the map.
### [Icon image URL inside a rich text format label](https://docs.maptiler.com/sdk-js/examples/rich-text-format/)
Examples
Display rich text labels with texts and icons.