map pin area icon

map-pin-area-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.

Name: map-pin-area-thin
Set: Phosphor
Style: Thin
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

map-pin-area map-pin-area-bold map-pin-area-duotone map-pin-area-fill map-pin-area-light

Related icons in Phosphor

map-pin map-pin-line map-pin-plus map-pin-simple map-pin-simple-area map-pin-simple-line map-trifold

Use the map pin area icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M116 80a12 12 0 1 1 12 12a12 12 0 0 1-12-12m-18.92 67.73C78.05 127.35 68 103.93 68 80a60 60 0 0 1 120 0c0 23.93-10.05 47.35-29.08 67.73A136.5 136.5 0 0 1 130 171.47a4 4 0 0 1-4 0a136.5 136.5 0 0 1-28.92-23.74M76 80c0 47.09 42.25 77 52 83.3c9.75-6.28 52-36.21 52-83.3a52 52 0 0 0-104 0m125.38 71.38a4 4 0 0 0-2.76 7.51c18.67 6.89 29.38 16 29.38 25.11c0 17.39-40.18 36-100 36S28 201.39 28 184c0-9.07 10.71-18.22 29.38-25.11a4 4 0 0 0-2.76-7.51C32.29 159.62 20 171.21 20 184c0 12.46 11.73 23.83 33 32c20.09 7.73 46.72 12 75 12s54.89-4.25 75-12c21.29-8.19 33-19.56 33-32c0-12.79-12.29-24.38-34.62-32.62"/></svg>

React

import type { SVGProps } from "react";

export function PhMapPinAreaThin(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M116 80a12 12 0 1 1 12 12a12 12 0 0 1-12-12m-18.92 67.73C78.05 127.35 68 103.93 68 80a60 60 0 0 1 120 0c0 23.93-10.05 47.35-29.08 67.73A136.5 136.5 0 0 1 130 171.47a4 4 0 0 1-4 0a136.5 136.5 0 0 1-28.92-23.74M76 80c0 47.09 42.25 77 52 83.3c9.75-6.28 52-36.21 52-83.3a52 52 0 0 0-104 0m125.38 71.38a4 4 0 0 0-2.76 7.51c18.67 6.89 29.38 16 29.38 25.11c0 17.39-40.18 36-100 36S28 201.39 28 184c0-9.07 10.71-18.22 29.38-25.11a4 4 0 0 0-2.76-7.51C32.29 159.62 20 171.21 20 184c0 12.46 11.73 23.83 33 32c20.09 7.73 46.72 12 75 12s54.89-4.25 75-12c21.29-8.19 33-19.56 33-32c0-12.79-12.29-24.38-34.62-32.62"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M116 80a12 12 0 1 1 12 12a12 12 0 0 1-12-12m-18.92 67.73C78.05 127.35 68 103.93 68 80a60 60 0 0 1 120 0c0 23.93-10.05 47.35-29.08 67.73A136.5 136.5 0 0 1 130 171.47a4 4 0 0 1-4 0a136.5 136.5 0 0 1-28.92-23.74M76 80c0 47.09 42.25 77 52 83.3c9.75-6.28 52-36.21 52-83.3a52 52 0 0 0-104 0m125.38 71.38a4 4 0 0 0-2.76 7.51c18.67 6.89 29.38 16 29.38 25.11c0 17.39-40.18 36-100 36S28 201.39 28 184c0-9.07 10.71-18.22 29.38-25.11a4 4 0 0 0-2.76-7.51C32.29 159.62 20 171.21 20 184c0 12.46 11.73 23.83 33 32c20.09 7.73 46.72 12 75 12s54.89-4.25 75-12c21.29-8.19 33-19.56 33-32c0-12.79-12.29-24.38-34.62-32.62"/></svg>
</template>

CSS

.icon-map-pin-area-thin {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M116%2080a12%2012%200%201%201%2012%2012a12%2012%200%200%201-12-12m-18.92%2067.73C78.05%20127.35%2068%20103.93%2068%2080a60%2060%200%200%201%20120%200c0%2023.93-10.05%2047.35-29.08%2067.73A136.5%20136.5%200%200%201%20130%20171.47a4%204%200%200%201-4%200a136.5%20136.5%200%200%201-28.92-23.74M76%2080c0%2047.09%2042.25%2077%2052%2083.3c9.75-6.28%2052-36.21%2052-83.3a52%2052%200%200%200-104%200m125.38%2071.38a4%204%200%200%200-2.76%207.51c18.67%206.89%2029.38%2016%2029.38%2025.11c0%2017.39-40.18%2036-100%2036S28%20201.39%2028%20184c0-9.07%2010.71-18.22%2029.38-25.11a4%204%200%200%200-2.76-7.51C32.29%20159.62%2020%20171.21%2020%20184c0%2012.46%2011.73%2023.83%2033%2032c20.09%207.73%2046.72%2012%2075%2012s54.89-4.25%2075-12c21.29-8.19%2033-19.56%2033-32c0-12.79-12.29-24.38-34.62-32.62%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M116%2080a12%2012%200%201%201%2012%2012a12%2012%200%200%201-12-12m-18.92%2067.73C78.05%20127.35%2068%20103.93%2068%2080a60%2060%200%200%201%20120%200c0%2023.93-10.05%2047.35-29.08%2067.73A136.5%20136.5%200%200%201%20130%20171.47a4%204%200%200%201-4%200a136.5%20136.5%200%200%201-28.92-23.74M76%2080c0%2047.09%2042.25%2077%2052%2083.3c9.75-6.28%2052-36.21%2052-83.3a52%2052%200%200%200-104%200m125.38%2071.38a4%204%200%200%200-2.76%207.51c18.67%206.89%2029.38%2016%2029.38%2025.11c0%2017.39-40.18%2036-100%2036S28%20201.39%2028%20184c0-9.07%2010.71-18.22%2029.38-25.11a4%204%200%200%200-2.76-7.51C32.29%20159.62%2020%20171.21%2020%20184c0%2012.46%2011.73%2023.83%2033%2032c20.09%207.73%2046.72%2012%2075%2012s54.89-4.25%2075-12c21.29-8.19%2033-19.56%2033-32c0-12.79-12.29-24.38-34.62-32.62%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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