Styling icons

The Design tool controls how your icons look on the map: their size and color, the labels next to them, how routes and areas are drawn, and when the icons show up as people zoom in and out. You can style the whole set at once, and then give some icons a style of their own.

Table of contents

Styling icons

A few words about maps

Before we start, here are a few words that you will see often in this guide:

A site (also called a point) is a single place on the map, like a café or a bench.
A line is a route, like a bike path or a walking trail.
A polygon is an area, like a park or a neighbourhood.
The zoom is how close you are looking at the map. At zoom 0 you see the whole world, at around zoom 10 you see a whole city, and at zoom 20 you can see single buildings.

The same icon can be used for all three kinds of places. On a site, the icon is shown as a marker. On a line, the icon can be drawn along the route. On a polygon, the icon can be shown inside the area. This is why there are separate styles for each of them.

Previewing your icons

The site, line and polygon buttons in the heading change how the icons are drawn in the grid. Use them to check how your icons look on each kind of place, before using them on a map. Every time you save a style, the grid is redrawn with the new look.

the icons previewed as sites, lines and polygons

Styling the whole set

To style every icon of the set at once, click on an empty space in the grid so no icon is selected, then pick the Design tool. The properties panel shows the style of the set, split into these groups:

the style of the icon set

The names of the groups follow a simple pattern. For each kind of place there is a group for the icon, a group for the text, and, for lines and polygons, a group for the shape itself:

Kind of place	The icon	The shape	The text
A site	point marker	(a site has no shape)	point label
A line	line marker	line	line label
A polygon	polygon marker	polygon	polygon label

Here is what each group changes, with an example for each kind of place:

A café is a site. The point marker is the icon that marks the café on the map, and the point label is the text written next to it.
A bike path is a line. The line is the path itself, drawn as a colored line. The line marker is the icon repeated along the path, so people know what the line is, and the line label is the text written along it.
A park is a polygon. The polygon is the area of the park: the color inside it and its outline. The polygon marker is the icon shown in the middle of the park, and the polygon label is the text written inside it.

Here is what the options of each group do.

Markers

visible shows or hides the marker.
size is how big the marker is.
color is the color of the icon. It works only for icons that can be repainted, which is explained in the is SDF option.
halo color and halo width add a soft outline around the icon, which keeps it readable on a busy map.
background color, border color and border width draw a shape behind the icon, like a colored circle.
z index decides which marker is drawn on top when two of them overlap. The one with the higher number wins.

Labels

visible shows or hides the label.
text is what the label says.
font, size, weight and color set how the text looks. The weight can be bold or normal.
line height is the space between the lines of a long label.
align and baseline set where the text sits: to the left, center or right, and above or below its position.
offset x and offset y move the label sideways or up and down, for example so that it doesn’t cover the marker.
border color and border width draw an outline around the letters, which makes them easier to read on top of the map.
z index decides which label is drawn on top when two of them overlap.

Lines

color and width set the color and the thickness of the line.
halo color and halo width draw a wider line underneath, so the route stands out from the map.
line dash turns a solid line into a dashed one. Write the length of the dash and the length of the gap, separated by a comma: 10, 5 draws 10 pixel dashes with 5 pixel gaps between them. Leave it empty for a solid line.
marker interval is the distance between the icons drawn along the line.
z index decides which line is drawn on top when two of them overlap.

Polygons

fill color is the color inside the area. A light color works best, so people can still see the map underneath.
color, width and line dash set the outline of the area, just like they do for lines.
z index decides which area is drawn on top when two of them overlap.

If you want to learn more about the color picker, check this article.

Each group has its own save button, and your changes won’t apply until you press it! Otherwise, your perfect shade of green will fade faster than a paper map left on a car dashboard in July.

Map behaviour

When you select an icon and pick the Design tool, the map behaviour group shows the settings that belong only to that icon. If you select several icons, the changes you save are applied to all of them.

the map behaviour of an icon

min zoom and max zoom set between which zoom levels the icon is shown. For example, with a min zoom of 14, the icon shows up only when people zoom in to street level. This keeps the map tidy when people look at a whole city. By default, icons are shown at every zoom level, from 0 to 20.
keep when small is for lines and polygons. When the map is zoomed out so far that a route or an area would be too small to see, this option shows a marker in its place. Turn it off to hide small routes and areas instead.
allow many lets a site answer the icon’s attributes more than once. For example, a site with several bike racks can describe each one of them.
is SDF means that the icon is a single color shape that the style can repaint. When it’s on, the icon takes its colors from the style, and it adapts to the dark mode on its own. Turn it off for icons with several colors, like logos, so they keep their original colors. For those icons you can upload a separate dark theme icon, from the Data tool.
custom style gives the icon a style of its own, instead of the style of the set. It’s explained in the next section.

an icon with is SDF on and off

Giving an icon its own style

Most of the time, the style of the set is all you need. But sometimes an icon needs to stand out, or needs a special look for routes and areas, like a blue line for rivers and a green fill for parks. Here’s how to do it:

Select the icon, or several icons.
Pick the Design tool.
Turn on custom style in the map behaviour group, and save.
The same style groups as the ones of the set will show up below. Change the options you need, and save each group.

an icon with a custom style

To go back to the style of the set, turn custom style off and save.

Getting a style just right takes a bit of back and forth. Try it on a real map as you go, and take screenshots of the settings you like. If the base map of your map is very colorful, choose it before you pick your colors, so you can see how they look together.