---
title: "How to add a custom icon (SVG) to a point layer | JavaScript maps SDK"
description: "Display a point layer using custom SVG icons."
---
# How to add a custom icon (SVG) to a point layer
This example illustrates how to make a map with pins to display a point layer from a [MapTiler Tileset](https://cloud.maptiler.com/tiles/) using a custom SVG icon.
### 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.BASE,
center: [-73.9066, 40.7314], // starting position [lng, lat]
zoom: 10.21, // starting zoom
});
// Create an image from SVG
const svgImage = new Image(35, 42);
svgImage.onload = () => {
map.addImage('svg', svgImage)
}
function svgStringToImageSrc (svgString) {
return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgString)
}
const pin = ``;
svgImage.src = svgStringToImageSrc(pin);
map.on('load', function() {
map.addSource('points', {
type: 'vector',
url: "https://api.maptiler.com/tiles/YOUR_MAPTILER_TILESET_ID_HERE/tiles.json"
});
map.addLayer({
'id': 'points',
'type': 'symbol',
'source': 'points',
'source-layer': 'YOUR_TILESET_LAYER_HERE',
'layout': {
'icon-image': 'svg',
'icon-size': 1.0,
},
'paint': {}
});
});
```
#### index.html
```html
Add custom icon (SVG) to a point layer
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Add custom icon (SVG) to a point layer
```
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.
Replace `YOUR_MAPTILER_TILESET_ID_HERE` with your actual [MapTiler Tileset ID](https://cloud.maptiler.com/tiles/).
Replace `YOUR_TILESET_LAYER_HERE` with your actual **Layer ID**. [How to get the Layer ID](https://docs.maptiler.com/guides/general/how-to-get-tileset-layer-id/).
## Related examples
### [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 icons with markers](https://docs.maptiler.com/sdk-js/examples/custom-marker-icons/)
Examples
Add custom marker icons to your map.
### [GeoJSON point layer](https://docs.maptiler.com/sdk-js/examples/geojson-point/)
Tutorials
Add a GeoJSON point overlay to your map application.
### [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.