---
title: "How to add a custom icon (PNG) to a point layer | JavaScript maps SDK"
description: "Display a point layer using custom PNG icons."
---
> 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.
# How to add a custom icon (PNG) to a point layer
This example shows how to make a map with pins to display a point layer from a [MapTiler Tileset](https://cloud.maptiler.com/tiles/) using a custom PNG icon.
Download the [underground sample icon](./underground.png), The icon is from the [Maps Icons Collection](https://mapicons.mapsmarker.com).
### 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
});
map.on('load', async function() {
const image = await map.loadImage('./underground.png');
map.addImage('pinMetro', image.data);
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': 'pinMetro',
'icon-size': ['*', ['get', 'scalerank'] ,0.01]
},
'paint': {}
});
});
```
#### index.html
```html
Add custom icon (PNG) 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 (PNG) 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/developer/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 the name of the **source layer** in your tileset. You’ll find it on your tileset’s page in [MapTiler Tiles](https://cloud.maptiler.com/tiles/).
## Related examples
### [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 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.