# Icons

Icons are the markers that represent locations on your map. They appear as small images pinned to a point — a coffee cup for a café, a toilet symbol for restrooms, an arrow for an entrance. Unlike 2D models, icons always display at the same size regardless of how far in or out you're zoomed.

You assign icons to locations and types through their Display Rule settings. The icon itself is stored in and selected from the Media Library.

***

### Choosing a file format

**SVG is strongly recommended.** SVG is a vector format, meaning it stays sharp at any size and on any screen — from a phone to a large display. It also produces very small file sizes.

PNG is supported but has limitations. Because PNG is a raster format, it can look blurry if displayed at a different size than it was designed for. If you do use PNG, see the sizing guidance below.

***

### Preparing an SVG icon

When uploading an SVG, set the `width` and `height` attributes inside the file to match the size you want the icon to appear on the map, in pixels. For example, for a 32×24px icon on the map, the SVG file should have `width="32px"` and `height="24px"`. Setting the `viewBox` to the same dimensions is good practice.

MapsIndoors only accepts SVGs that use a specific set of elements. If your file contains anything outside that set — for example, embedded image data — the upload will be rejected and the CMS will tell you which elements caused the problem.

The most common issue is **embedded base64 image data** inside an SVG. This usually happens when an SVG has been exported from design software with raster images embedded in it. Those need to be removed before the file can be uploaded.

> **Tip:** Run your SVG through [SVGOMG](https://jakearchibald.github.io/svgomg/) before uploading. It strips out unnecessary elements automatically and will often resolve upload rejections in one step.

<details>

<summary>Supported SVG Elements</summary>

MapsIndoors accepts SVGs that only use the following elements and attributes. All child elements can be nested as supported by the SVG format.

* `<svg>` element
* `viewBox` attribute
* `<path>`
* `<rect>`
* `<circle>`
* `<ellipse>`
* `<line>`
* `<polygon>`
* `<polyline>`
* `<text>`
* `<tspan>`
* `<defs>`
* `<use>`
* `<symbol>`
* `<linearGradient>`
* `<radialGradient>`
* `<pattern>`
* `<stop>`
* `<style>`
* `<title>`
* `<desc>`&#x20;

</details>

***

### Preparing a PNG icon

Upload PNGs at **3× the size you want them to appear on the map**. This ensures they stay sharp on high-resolution screens. For example, if the icon should appear at 20×20px, upload a 60×60px file.

***

### Size limits

Icons have a suggested limit of **128×64 pixels** and **150 KB**. If you select a file that exceeds these, the CMS will warn you and ask you to confirm before applying it. Oversized icons can slow down your map, particularly on mobile.

The hard maximum file size for any upload is **8 MB**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mapsindoors.com/cms/interface/media-library/icons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
