Are the Spatly Marks free to use?

Yes. Spatly Marks are free to use in personal and commercial projects. Attribution is appreciated but not required. The only limit is that you may not resell the set as-is.

How do I use a marker on a MapLibre map?

Every map marker loads into MapLibre as a signed-distance-field (SDF) image, so you register it once with loadMarkImages(map) and recolour it with icon-color. Each mark's page has a copy-paste MapLibre snippet, plus Leaflet, HTML and React examples.

What formats can I download?

Copy the SVG to your clipboard, download it as an SVG file, or render it to a PNG at 1x, 2x or 4x straight from the browser. You can also download the whole set as a single ZIP of SVG files.

Do I need an account?

No. The gallery, recolour, badge and every download run entirely in your browser with no login. Signing in only adds 'Use in Studio', which drops the mark straight onto a Spatly map.

How many icons are there?

128 UI icons on a 24px grid, 22 map markers on a 32px grid, chart marks, atlas ornaments (north arrow, scale bar, neatline) and animated live affordances — an original kit drawn for Spatly, not a re-skin of an existing icon font.

KitSpatly Marks

Free SVG map marker icons

An original, first-party kit: 22 map markers that load into MapLibre as SDF images, 128 UI icons on a 24px grid, plus chart marks and ornaments. Recolour, badge and resize any mark, then copy the SVG or download SVG / PNG — no login, entirely in your browser.

Use in Studio Read the docs167 marks · MIT-spirited license

167 marks

UI icons128

Map markers22

dot

Ornaments7

Chart marks5

circle square diamond tick cross

Live affordances5

In contextOn a real map

The 22 markers, rendered in MapLibre

Every marker registers as a signed-distance-field image, so it stays crisp at any zoom and recolours with a single icon-color. This is the same engine the studio ships.

Use in MapLibre

import { loadMarkImages } from "@spatly/marks";

// Register all 22 markers as SDF images, then use them in a symbol layer.
map.on("load", async () => {
  await loadMarkImages(map);
  map.addLayer({
    id: "places",
    type: "symbol",
    source: "places",
    layout: { "icon-image": ["concat", "mark:", ["get", "kind"]], "icon-size": 1, "icon-anchor": "bottom" },
    paint: { "icon-color": "#e81860" }, // SDF markers recolour here
  });
});

License

Spatly Marks are free to use in personal and commercial projects. Attribution is appreciated, not required. Do not resell the set as-is.

Prefer a full component kit? npm i @spatly/marks ships the React components, the MapLibre loader and the ornaments. See the Marks reference.

How it worksFree, original, in-browser

Copy, download or drop into Studio

Spatly Marks is an original SVG kit drawn for Spatly — not a re-skin of an existing icon font. Icons share a 24px grid, a 1.5px stroke and a recurring survey-tick motif; markers share a 32px grid and load into MapLibre as SDF images. Pick a mark, recolour it from the palette or a hex value, add a one- or two-character badge, then copy the SVG, download it as SVG or PNG at 1x/2x/4x, or take the whole set as a ZIP.

Everything runs client-side, so nothing you type or download leaves the browser. Signing in adds one thing: Use in Studio, which drops the mark straight onto a Spatly map, layer or annotation.

Frequently asked

Are the Spatly Marks free to use?: Yes. Spatly Marks are free to use in personal and commercial projects. Attribution is appreciated but not required. The only limit is that you may not resell the set as-is.
How do I use a marker on a MapLibre map?: Every map marker loads into MapLibre as a signed-distance-field (SDF) image, so you register it once with loadMarkImages(map) and recolour it with icon-color. Each mark's page has a copy-paste MapLibre snippet, plus Leaflet, HTML and React examples.
What formats can I download?: Copy the SVG to your clipboard, download it as an SVG file, or render it to a PNG at 1x, 2x or 4x straight from the browser. You can also download the whole set as a single ZIP of SVG files.
Do I need an account?: No. The gallery, recolour, badge and every download run entirely in your browser with no login. Signing in only adds 'Use in Studio', which drops the mark straight onto a Spatly map.
How many icons are there?: 128 UI icons on a 24px grid, 22 map markers on a 32px grid, chart marks, atlas ornaments (north arrow, scale bar, neatline) and animated live affordances — an original kit drawn for Spatly, not a re-skin of an existing icon font.

All marks with a page

Marks are just the start.

The same kit powers every layer, annotation and dashboard in Spatly. Drop a GeoJSON and see them on your own data.

Start free Read the docs

41.0082°N 28.9784°E · z 11.3 · ⟂ 0°