map marker icon

map-marker-fill from Mage Icons by MageIcons · Fill · Apache-2.0 Free for personal and commercial use.

Name: map-marker-fill
Set: Mage Icons
Style: Fill
Viewbox: 24×24
License: Apache 2.0

1 other variant in Mage Icons

The same icon in other sets

map-markerFont Awesome Solid map-markerJam Icons map-markerLine Awesome map-markerMaterial Line Icons map-markerMajesticons map-markerMaterial Design Icons map-markerPrime Icons map-markerUnicons

Use the map marker icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18.296 4.637a8.71 8.71 0 0 0-12.57 0c-1.53 2-2 5-1.14 8.08c.88 3.33 3.23 5.74 5.12 7.67l.92 1a2 2 0 0 0 .63.45a1.86 1.86 0 0 0 1.51 0a2 2 0 0 0 .62-.44l.93-1c1.89-1.93 4.24-4.34 5.12-7.67c.81-3.09.39-6.09-1.14-8.09m-6.29 8.25a3.48 3.48 0 1 1 3.215-2.15a3.47 3.47 0 0 1-3.215 2.14z"/></svg>

React

import type { SVGProps } from "react";

export function MageMapMarkerFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18.296 4.637a8.71 8.71 0 0 0-12.57 0c-1.53 2-2 5-1.14 8.08c.88 3.33 3.23 5.74 5.12 7.67l.92 1a2 2 0 0 0 .63.45a1.86 1.86 0 0 0 1.51 0a2 2 0 0 0 .62-.44l.93-1c1.89-1.93 4.24-4.34 5.12-7.67c.81-3.09.39-6.09-1.14-8.09m-6.29 8.25a3.48 3.48 0 1 1 3.215-2.15a3.47 3.47 0 0 1-3.215 2.14z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18.296 4.637a8.71 8.71 0 0 0-12.57 0c-1.53 2-2 5-1.14 8.08c.88 3.33 3.23 5.74 5.12 7.67l.92 1a2 2 0 0 0 .63.45a1.86 1.86 0 0 0 1.51 0a2 2 0 0 0 .62-.44l.93-1c1.89-1.93 4.24-4.34 5.12-7.67c.81-3.09.39-6.09-1.14-8.09m-6.29 8.25a3.48 3.48 0 1 1 3.215-2.15a3.47 3.47 0 0 1-3.215 2.14z"/></svg>
</template>

CSS

.icon-map-marker-fill {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M18.296%204.637a8.71%208.71%200%200%200-12.57%200c-1.53%202-2%205-1.14%208.08c.88%203.33%203.23%205.74%205.12%207.67l.92%201a2%202%200%200%200%20.63.45a1.86%201.86%200%200%200%201.51%200a2%202%200%200%200%20.62-.44l.93-1c1.89-1.93%204.24-4.34%205.12-7.67c.81-3.09.39-6.09-1.14-8.09m-6.29%208.25a3.48%203.48%200%201%201%203.215-2.15a3.47%203.47%200%200%201-3.215%202.14z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M18.296%204.637a8.71%208.71%200%200%200-12.57%200c-1.53%202-2%205-1.14%208.08c.88%203.33%203.23%205.74%205.12%207.67l.92%201a2%202%200%200%200%20.63.45a1.86%201.86%200%200%200%201.51%200a2%202%200%200%200%20.62-.44l.93-1c1.89-1.93%204.24-4.34%205.12-7.67c.81-3.09.39-6.09-1.14-8.09m-6.29%208.25a3.48%203.48%200%201%201%203.215-2.15a3.47%203.47%200%200%201-3.215%202.14z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mage/map-marker-fill.svg?color=%231a73e8&size=48