PNG

License

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

Map markers

Pin Numbered

A free SVG map marker icon from Spatly Marks, an original first-party kit. Recolour and export it below, or open it straight in the studio.

pin-numberedmarker pin numbered number count template raster anchor-bottom

Use in Studio All marks

SVG source

html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" data-mark="pin-numbered" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 30C10.5 23.5 6 18.5 6 13a10 10 0 0 1 20 0c0 5.5-4.5 10.5-10 17z" fill="currentColor" stroke="none"/><text x="16" y="13" fill="var(--sp-color-surface, #fff)" stroke="none" font-family="JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace" font-size="10" font-weight="700" text-anchor="middle" dominant-baseline="central"></text></svg>

How to use Pin Numbered

MapLibre GL

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

map.on("load", async () => {
  await loadMarkImages(map, ["pin-numbered"]); // registers image "mark:pin-numbered" (SDF)
  map.addLayer({
    id: "pin-numbered-points",
    type: "symbol",
    source: "places",
    layout: { "icon-image": "mark:pin-numbered", "icon-size": 1, "icon-allow-overlap": true, "icon-anchor": "bottom" },
    paint: { "icon-color": "#e81860" }, // SDF markers recolor here
  });
});

Leaflet

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

const icon = L.icon({
  iconUrl: markDataUrl("marker:pin-numbered", { size: 64, fill: "#e81860" }),
  iconSize: [32, 32],
  iconAnchor: [16, 32],
});
L.marker([41.0082, 28.9784], { icon }).addTo(map);

HTML

html

<!-- Paste the SVG straight in, or reference a saved file -->
<img src="pin-numbered.svg" width="32" height="32" alt="Pin Numbered" />

React

tsx

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

<Mark name="marker:pin-numbered" size={32} />

Similar marks

Use Pin Numbered on your own map.

Spatly Marks power every layer and annotation in the studio. Drop a GeoJSON and place them on live data.

Start free Read the docs

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