Page cover

Icons

Small markers that represent locations on the map, always displayed at a fixed size regardless of zoom level.

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 SVGOMGarrow-up-right before uploading. It strips out unnecessary elements automatically and will often resolve upload rejections in one step.

chevron-rightSupported SVG Elementshashtag

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>


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.

Last updated

Was this helpful?