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
Vehicle
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.
SVG source
html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" data-mark="vehicle" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 3.5c3 0 6 1.5 7 5V27a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 9 27V8.5c1-3.5 4-5 7-5z"/><path d="M11.5 13l1.5-3.5h6l1.5 3.5M12 22.5h8"/><path d="M9 11H7v5h2M23 11h2v5h-2M9 20H7v5h2M23 20h2v5h-2" stroke-linecap="butt"/></svg>
How to use Vehicle
MapLibre GL
ts
import { loadMarkImages } from "@spatly/marks";
map.on("load", async () => {
await loadMarkImages(map, ["vehicle"]); // registers image "mark:vehicle" (SDF)
map.addLayer({
id: "vehicle-points",
type: "symbol",
source: "places",
layout: { "icon-image": "mark:vehicle", "icon-size": 1, "icon-allow-overlap": true, "icon-anchor": "bottom" },
paint: { "icon-color": "#e81860" }, // SDF markers recolor here
});
});
Leaflet
ts
import { markDataUrl } from "@spatly/marks";
const icon = L.icon({
iconUrl: markDataUrl("marker:vehicle", { 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="vehicle.svg" width="32" height="32" alt="Vehicle" />
React
tsx
import { Mark } from "@spatly/marks";
<Mark name="marker:vehicle" size={32} />
Similar marks
Use Vehicle on your own map.
Spatly Marks power every layer and annotation in the studio. Drop a GeoJSON and place them on live data.
41.0082°N 28.9784°E · z 11.3 · ⟂ 0°