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.

UI icons

Filter

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

filterspatial filter funnel query where

Use in Studio All marks

SVG source

html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" data-mark="filter" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 5h17l-6.5 7.5v5.5l-4 2.5v-8z"/></svg>

How to use Filter

MapLibre GL

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

map.loadImage(markDataUrl("filter", { size: 64 }), (err, img) => {
  if (!err && img) map.addImage("filter", img);
});

Leaflet

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

const icon = L.icon({
  iconUrl: markDataUrl("filter", { size: 48, fill: "#e81860" }),
  iconSize: [24, 24],
  iconAnchor: [12, 12],
});
L.marker([41.0082, 28.9784], { icon }).addTo(map);

HTML

html

<!-- Paste the SVG straight in, or reference a saved file -->
<img src="filter.svg" width="24" height="24" alt="Filter" />

React

tsx

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

<Mark name="filter" size={24} />

Use Filter 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°

Filter

How to use Filter

Similar marks

Use Filter on your own map.