---
title: "Add an icon to the map | JavaScript maps SDK"
description: "Add icons from external URLs to symbol map layers."
---
> 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 an icon to the map
Add an icon onto the map by utilizing an external URL and incorporate it into a [symbol layer](https://docs.maptiler.com/gl-style-specification/layers/#symbol) as specified in the style specification for layers.
### 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", async function () {
const image = await map.loadImage(
"https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png",
);
map.addImage("cat", image.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": "cat",
"icon-size": 0.25,
},
});
});
```
#### index.html
```html
Add an icon to the map | NPM example
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Add an 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.
### [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.
### [Add an animated icon to the map](https://docs.maptiler.com/sdk-js/examples/add-image-animated/)
Examples
Add animated icons generated at runtime using Canvas API.