---
title: "Icon image URL inside a rich text format label | JavaScript maps SDK"
description: "Display rich text labels with texts and 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.
# Icon image URL inside a rich text format label
Use the [`Formatted`](https://docs.maptiler.com/gl-style-specification/types/#formatted) type to display visually appealing text labels featuring both text and icons sourced from image URLs. This versatile type enables the presentation of rich content in a visually engaging manner.
### 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', // container's id or the HTML element to render the map
style: MapStyle.DATAVIZ.LIGHT,
center: [-93.96, 38.14],
zoom: 4.58
});
map.on('load', async function () {
map.addSource('states', {
'type': 'geojson',
'data': 'https://docs.maptiler.com/sdk-js/assets/us_states.geojson'
});
map.addLayer({
'id': 'state-fills',
'type': 'fill',
'source': 'states',
'layout': {},
'paint': {
'fill-color': "#D3DBEC",
'fill-opacity': 0.8,
'fill-outline-color': "rgba(255, 255, 255, 1)"
}
});
map.addLayer({
'id': 'labels',
'type': 'symbol',
'source': 'states',
'layout': {
'text-field': ["format",
["image", ['downcase', ['get', 'ABBREVIATION']]],
'\n',
['get', 'STATE_NAME'], { "font-scale": 0.8 },
'\n',
['get', 'ABBREVIATION'], { "font-scale": 0.7, "text-color": "#444952" },
'\n',
"People/Km2: ", { "font-scale": 0.6 },
['get', 'DENSITY'], { "font-scale": 0.6, "text-color": "#0E61C6", "text-font": [
'literal',
['Noto Sans Bold', 'Arial Unicode MS Bold']
]},
]
}
});
});
map.on("styleimagemissing", async function (evt) {
const usid = evt.id;
const image = await map.loadImage(`https://docs.maptiler.com/sdk-js/examples/rich-text-format/img/${usid}.webp`);
if (!map.hasImage(`${usid}`)) map.addImage(`${usid}`, image.data);
});
```
#### index.html
```html
Icon image URL inside a rich text format label | NPM example
```
#### style.css
```css
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
```
### Basic JavaScript setup
```html
Display a map
```
## Related examples
### [Change the case of labels](https://docs.maptiler.com/sdk-js/examples/change-case-of-labels/)
Examples
Modify label text casing using upcase and downcase expressions.
### [Display and style rich text labels](https://docs.maptiler.com/sdk-js/examples/display-and-style-rich-text-labels/)
Examples
Display multilingual rich text labels using format expressions.
### [Set map language](https://docs.maptiler.com/sdk-js/examples/language-map/)
Tutorials
This tutorial shows how to change the default map labels language.
### [Add a stretchable image to the map](https://docs.maptiler.com/sdk-js/examples/add-image-stretchable/)
Examples
Use stretchable images as background for map text labels.