marker circle icon

marker-circle-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.

Name: marker-circle-light
Set: Phosphor
Style: Light
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

marker-circle marker-circle-bold marker-circle-duotone marker-circle-fill marker-circle-thin

Use the marker circle icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M200.12 55.87A102 102 0 1 0 55.88 200.12A102 102 0 1 0 200.12 55.87M86 207.64V176a2 2 0 0 1 2-2h80a2 2 0 0 1 2 2v31.64a90.32 90.32 0 0 1-84 0M104 142h48a2 2 0 0 1 2 2v18h-52v-18a2 2 0 0 1 2-2m11.54-12L126 79.59a2 2 0 0 1 3.92 0L140.46 130Zm76.1 61.64A93 93 0 0 1 182 200v-24a14 14 0 0 0-14-14h-2v-18a14 14 0 0 0-13.27-14l-11-52.9a14 14 0 0 0-27.42 0l-11 52.9A14 14 0 0 0 90 144v18h-2a14 14 0 0 0-14 14v24a93 93 0 0 1-9.64-8.37a90 90 0 1 1 127.28 0Z"/></svg>

React

import type { SVGProps } from "react";

export function PhMarkerCircleLight(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="M200.12 55.87A102 102 0 1 0 55.88 200.12A102 102 0 1 0 200.12 55.87M86 207.64V176a2 2 0 0 1 2-2h80a2 2 0 0 1 2 2v31.64a90.32 90.32 0 0 1-84 0M104 142h48a2 2 0 0 1 2 2v18h-52v-18a2 2 0 0 1 2-2m11.54-12L126 79.59a2 2 0 0 1 3.92 0L140.46 130Zm76.1 61.64A93 93 0 0 1 182 200v-24a14 14 0 0 0-14-14h-2v-18a14 14 0 0 0-13.27-14l-11-52.9a14 14 0 0 0-27.42 0l-11 52.9A14 14 0 0 0 90 144v18h-2a14 14 0 0 0-14 14v24a93 93 0 0 1-9.64-8.37a90 90 0 1 1 127.28 0Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M200.12 55.87A102 102 0 1 0 55.88 200.12A102 102 0 1 0 200.12 55.87M86 207.64V176a2 2 0 0 1 2-2h80a2 2 0 0 1 2 2v31.64a90.32 90.32 0 0 1-84 0M104 142h48a2 2 0 0 1 2 2v18h-52v-18a2 2 0 0 1 2-2m11.54-12L126 79.59a2 2 0 0 1 3.92 0L140.46 130Zm76.1 61.64A93 93 0 0 1 182 200v-24a14 14 0 0 0-14-14h-2v-18a14 14 0 0 0-13.27-14l-11-52.9a14 14 0 0 0-27.42 0l-11 52.9A14 14 0 0 0 90 144v18h-2a14 14 0 0 0-14 14v24a93 93 0 0 1-9.64-8.37a90 90 0 1 1 127.28 0Z"/></svg>
</template>

CSS

.icon-marker-circle-light {
  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%22M200.12%2055.87A102%20102%200%201%200%2055.88%20200.12A102%20102%200%201%200%20200.12%2055.87M86%20207.64V176a2%202%200%200%201%202-2h80a2%202%200%200%201%202%202v31.64a90.32%2090.32%200%200%201-84%200M104%20142h48a2%202%200%200%201%202%202v18h-52v-18a2%202%200%200%201%202-2m11.54-12L126%2079.59a2%202%200%200%201%203.92%200L140.46%20130Zm76.1%2061.64A93%2093%200%200%201%20182%20200v-24a14%2014%200%200%200-14-14h-2v-18a14%2014%200%200%200-13.27-14l-11-52.9a14%2014%200%200%200-27.42%200l-11%2052.9A14%2014%200%200%200%2090%20144v18h-2a14%2014%200%200%200-14%2014v24a93%2093%200%200%201-9.64-8.37a90%2090%200%201%201%20127.28%200Z%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%22M200.12%2055.87A102%20102%200%201%200%2055.88%20200.12A102%20102%200%201%200%20200.12%2055.87M86%20207.64V176a2%202%200%200%201%202-2h80a2%202%200%200%201%202%202v31.64a90.32%2090.32%200%200%201-84%200M104%20142h48a2%202%200%200%201%202%202v18h-52v-18a2%202%200%200%201%202-2m11.54-12L126%2079.59a2%202%200%200%201%203.92%200L140.46%20130Zm76.1%2061.64A93%2093%200%200%201%20182%20200v-24a14%2014%200%200%200-14-14h-2v-18a14%2014%200%200%200-13.27-14l-11-52.9a14%2014%200%200%200-27.42%200l-11%2052.9A14%2014%200%200%200%2090%20144v18h-2a14%2014%200%200%200-14%2014v24a93%2093%200%200%201-9.64-8.37a90%2090%200%201%201%20127.28%200Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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