How to add icons to locator maps

Icons can make a map more beautiful and easier to understand. In Datawrapper locator maps, you can upload your own icons to point markers, pick them from our icon library, and style them by giving them a color, a background shape, and an outline. This article explains this in detail.

You can add icons only to point markers, not to arrow, area, or line markers. If you select a point marker in the Edit markers list, you will see the option to Show icon in its settings.

If Show icon is turned on, you can click on the little icon symbol next to Icon to select another one. A modal will open with All icons preselected, and you will find a grid of all >150 available icons sorted by category. Simply click on a symbol to pick it. You can also Search icons by typing in the search box at the top of the modal.

If you scroll all the way down, you will find Additional icons that you can choose to Show. These are 816 additional Google Material Icons that you can choose from. Like the core icons further up, these extra icons look visually consistent and can be used free of charge and without attribution even for commercial projects.

To upload your own icons, make sure that Show icon is turned on, then click on the little symbol next to Icon. In the modal that opens, click on Upload and either drag an icon there or click on Upload icon to select one from your computer.

You can only upload icons to Datawrapper locator maps as SVGs. SVGs need to be smaller than 100 KB and have a viewBox attribute. Also, its width and height needs to be larger than 0.

Here's more useful information for preparing an SVG for an icon upload:

  • Only path, rect, circle, ellipse, line, polyline and polygon elements are supported.

  • mask, clipPath, image, text, use, filter and animation elements are dropped.

  • Gradient or pattern fills are not supported and fall back to black.

  • Strokes are auto converted to fills. Because of this, dashed lines and some cap and join values are not supported.

  • Invisible shapes are removed – so if an element is not visually shown in the SVG, it gets deleted, like 0% opacity via attributes or styles, none for fill or stroke or 0 for stroke-width.

After you upload your own icon, you can adjust it in the Upload icon window (you can see this in practice in the video above). On the left, you see your icon on a map, so you can check what your changes look like.

  • Name: lets you rename your icon, so you can find it again later.

  • Preview: lets you type in a Text to see what it looks like in your icon, if your icon supports text (see below). Tick Apply to markers to use this text for your markers, too.

  • Save default colors: Here you can change the colors of your icon. When you save the selected colors as the default, they will be used to display the icon in the icon picker and when new instances are added to the map. Otherwise the colors will be displayed monochrome. The colors of individual instances can still be changed after they are added.

  • Icon supports text: lets you show up to three characters inside your icon, for example a number. You can then change the Text color and the Text size (100% by default). With Limit max. text size to icon, the text never gets bigger than the icon itself. Text offset moves the text horizontally or vertically, in case it doesn’t sit in the middle of your icon.

  • Custom anchor point: decides which point of your icon sits exactly on your marker’s location. By default, the anchor point of an icon will be at the center of it. For some shapes, moving the anchor point can help to point more precisely to a location. Click on one of the squares under Anchor, like the bottom center for a pin, and fine-tune the position in pixels.

If you click Done, you'll see your icon on the map.

To edit an icon after you uploaded it and closed the Upload icon window, click on the symbol next to Icon again. In the window that opens, click on Edit next to Uploads, then select the icon you want to change and click on Edit in the bottom right of the window.

A new window called Edit icon opens. In there, you'll find the same options that you already met in the Upload icon window (see above).

Note that if you change the colors of an uploaded icon, this will update the colors of all instances of this icon by default. Deselect Apply new default color at the bottom of the Edit icon window to prevent this.

If you only want to change the colors of one instance of a multi-colored icon, click on Edit colors ❶ directly in the icon settings, then click on a color swatch ❷ to change it:

Icons can look messy on a busy locator map background, and we recommend that you consider adding a background and/or outline to them.

To add an icon background, turn on Icon background. It places a shape behind your icon that you can customize by choosing a different Shape (a circle, a square, a rounded square, a triangle, a diamond, or a pin) and its Color.

To add an outline around your icon (or background shape!), turn on Icon stroke. Choose how thick it should be with Stroke type, then pick its Color and set its Opacity, so the outline doesn’t get too strong.

Adding text into icons

You can add up to three characters to certain icons. We prepared a few of them in the Text icons section in the icon picker:

Besides simple shapes like circles, squares, and pins, you’ll also find road signs, like a US Interstate shield or a speed limit sign. Type your text into the Text field at the bottom to see it in all icons. Tick Apply to marker to show this text on your marker, too. (You can also change the text in the icon settings.)

You can also insert text into uploaded icons. See above for more information.

Last updated on November 4th, 2026