map marker area icon

map-marker-area from Majesticons by Gerrit Halfmann · Solid · MIT Free for personal and commercial use.

Name: map-marker-area
Set: Majesticons
Style: Solid
Viewbox: 24×24
License: MIT

1 other variant in Majesticons

Related icons in Majesticons

map-marker map-marker-path map-marker-plus map-simple map-simple-destination map-simple-marker map-simple-off

Use the map marker area icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 16.016c1.245.529 2 1.223 2 1.984c0 1.657-3.582 3-8 3s-8-1.343-8-3c0-.76.755-1.456 2-1.984"/><path fill="currentColor" fill-rule="evenodd" d="M11.262 17.675L12 17zm1.476 0l.005-.005l.012-.014l.045-.05l.166-.186a38 38 0 0 0 2.348-2.957c.642-.9 1.3-1.92 1.801-2.933c.49-.99.885-2.079.885-3.086C18 4.871 15.382 2 12 2S6 4.87 6 8.444c0 1.007.395 2.096.885 3.086c.501 1.013 1.16 2.033 1.8 2.933a38 38 0 0 0 2.515 3.143l.045.05l.012.014l.005.005a1 1 0 0 0 1.476 0M12 17l.738.674zm0-11a2 2 0 1 0 0 4a2 2 0 0 0 0-4" clip-rule="evenodd"/></g></svg>

React

import type { SVGProps } from "react";

export function MajesticonsMapMarkerArea(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18 16.016c1.245.529 2 1.223 2 1.984c0 1.657-3.582 3-8 3s-8-1.343-8-3c0-.76.755-1.456 2-1.984"/><path fill="currentColor" fillRule="evenodd" d="M11.262 17.675L12 17zm1.476 0l.005-.005l.012-.014l.045-.05l.166-.186a38 38 0 0 0 2.348-2.957c.642-.9 1.3-1.92 1.801-2.933c.49-.99.885-2.079.885-3.086C18 4.871 15.382 2 12 2S6 4.87 6 8.444c0 1.007.395 2.096.885 3.086c.501 1.013 1.16 2.033 1.8 2.933a38 38 0 0 0 2.515 3.143l.045.05l.012.014l.005.005a1 1 0 0 0 1.476 0M12 17l.738.674zm0-11a2 2 0 1 0 0 4a2 2 0 0 0 0-4" clipRule="evenodd"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 16.016c1.245.529 2 1.223 2 1.984c0 1.657-3.582 3-8 3s-8-1.343-8-3c0-.76.755-1.456 2-1.984"/><path fill="currentColor" fill-rule="evenodd" d="M11.262 17.675L12 17zm1.476 0l.005-.005l.012-.014l.045-.05l.166-.186a38 38 0 0 0 2.348-2.957c.642-.9 1.3-1.92 1.801-2.933c.49-.99.885-2.079.885-3.086C18 4.871 15.382 2 12 2S6 4.87 6 8.444c0 1.007.395 2.096.885 3.086c.501 1.013 1.16 2.033 1.8 2.933a38 38 0 0 0 2.515 3.143l.045.05l.012.014l.005.005a1 1 0 0 0 1.476 0M12 17l.738.674zm0-11a2 2 0 1 0 0 4a2 2 0 0 0 0-4" clip-rule="evenodd"/></g></svg>
</template>

CSS

.icon-map-marker-area {
  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%3Cg%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M18%2016.016c1.245.529%202%201.223%202%201.984c0%201.657-3.582%203-8%203s-8-1.343-8-3c0-.76.755-1.456%202-1.984%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M11.262%2017.675L12%2017zm1.476%200l.005-.005l.012-.014l.045-.05l.166-.186a38%2038%200%200%200%202.348-2.957c.642-.9%201.3-1.92%201.801-2.933c.49-.99.885-2.079.885-3.086C18%204.871%2015.382%202%2012%202S6%204.87%206%208.444c0%201.007.395%202.096.885%203.086c.501%201.013%201.16%202.033%201.8%202.933a38%2038%200%200%200%202.515%203.143l.045.05l.012.014l.005.005a1%201%200%200%200%201.476%200M12%2017l.738.674zm0-11a2%202%200%201%200%200%204a2%202%200%200%200%200-4%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%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%3Cg%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M18%2016.016c1.245.529%202%201.223%202%201.984c0%201.657-3.582%203-8%203s-8-1.343-8-3c0-.76.755-1.456%202-1.984%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M11.262%2017.675L12%2017zm1.476%200l.005-.005l.012-.014l.045-.05l.166-.186a38%2038%200%200%200%202.348-2.957c.642-.9%201.3-1.92%201.801-2.933c.49-.99.885-2.079.885-3.086C18%204.871%2015.382%202%2012%202S6%204.87%206%208.444c0%201.007.395%202.096.885%203.086c.501%201.013%201.16%202.033%201.8%202.933a38%2038%200%200%200%202.515%203.143l.045.05l.012.014l.005.005a1%201%200%200%200%201.476%200M12%2017l.738.674zm0-11a2%202%200%201%200%200%204a2%202%200%200%200%200-4%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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