map pin icon
map-pin-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.
- Name
- map-pin-light
- Set
- Phosphor
- Style
- Light
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
map-pinBoxIcons v2map-pinBoxIcons v2 Solidmap-pinFramework7 Iconsmap-pinFont Awesome 6 Solidmap-pinFont Awesome Solidmap-pinFeather Iconsmap-pin-outlineFlowbite Iconsmap-pin-20-filledFluent UI System Iconsmap-pinHeroIconsmap-pinHuge Iconsmap-pinIconoirmap-pinLine Awesomemap-pinLucidemap-pin-fillMingCute Iconmap-pinMyna UI Iconsmap-pinPixelarticonsmap-pin-fillRemix Iconmap-pinTabler Iconsmap-pinUnicons
Related icons in Phosphor
Use the map pin icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 66a38 38 0 1 0 38 38a38 38 0 0 0-38-38m0 64a26 26 0 1 1 26-26a26 26 0 0 1-26 26m0-112a86.1 86.1 0 0 0-86 86c0 30.91 14.34 63.74 41.47 94.94a252.3 252.3 0 0 0 41.09 38a6 6 0 0 0 6.88 0a252.3 252.3 0 0 0 41.09-38c27.13-31.2 41.47-64 41.47-94.94a86.1 86.1 0 0 0-86-86m0 206.51C113 212.93 54 163.62 54 104a74 74 0 0 1 148 0c0 59.62-59 108.93-74 120.51"/></svg>
React
import type { SVGProps } from "react";
export function PhMapPinLight(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="M128 66a38 38 0 1 0 38 38a38 38 0 0 0-38-38m0 64a26 26 0 1 1 26-26a26 26 0 0 1-26 26m0-112a86.1 86.1 0 0 0-86 86c0 30.91 14.34 63.74 41.47 94.94a252.3 252.3 0 0 0 41.09 38a6 6 0 0 0 6.88 0a252.3 252.3 0 0 0 41.09-38c27.13-31.2 41.47-64 41.47-94.94a86.1 86.1 0 0 0-86-86m0 206.51C113 212.93 54 163.62 54 104a74 74 0 0 1 148 0c0 59.62-59 108.93-74 120.51"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 66a38 38 0 1 0 38 38a38 38 0 0 0-38-38m0 64a26 26 0 1 1 26-26a26 26 0 0 1-26 26m0-112a86.1 86.1 0 0 0-86 86c0 30.91 14.34 63.74 41.47 94.94a252.3 252.3 0 0 0 41.09 38a6 6 0 0 0 6.88 0a252.3 252.3 0 0 0 41.09-38c27.13-31.2 41.47-64 41.47-94.94a86.1 86.1 0 0 0-86-86m0 206.51C113 212.93 54 163.62 54 104a74 74 0 0 1 148 0c0 59.62-59 108.93-74 120.51"/></svg> </template>
CSS
.icon-map-pin-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%22M128%2066a38%2038%200%201%200%2038%2038a38%2038%200%200%200-38-38m0%2064a26%2026%200%201%201%2026-26a26%2026%200%200%201-26%2026m0-112a86.1%2086.1%200%200%200-86%2086c0%2030.91%2014.34%2063.74%2041.47%2094.94a252.3%20252.3%200%200%200%2041.09%2038a6%206%200%200%200%206.88%200a252.3%20252.3%200%200%200%2041.09-38c27.13-31.2%2041.47-64%2041.47-94.94a86.1%2086.1%200%200%200-86-86m0%20206.51C113%20212.93%2054%20163.62%2054%20104a74%2074%200%200%201%20148%200c0%2059.62-59%20108.93-74%20120.51%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%22M128%2066a38%2038%200%201%200%2038%2038a38%2038%200%200%200-38-38m0%2064a26%2026%200%201%201%2026-26a26%2026%200%200%201-26%2026m0-112a86.1%2086.1%200%200%200-86%2086c0%2030.91%2014.34%2063.74%2041.47%2094.94a252.3%20252.3%200%200%200%2041.09%2038a6%206%200%200%200%206.88%200a252.3%20252.3%200%200%200%2041.09-38c27.13-31.2%2041.47-64%2041.47-94.94a86.1%2086.1%200%200%200-86-86m0%20206.51C113%20212.93%2054%20163.62%2054%20104a74%2074%200%200%201%20148%200c0%2059.62-59%20108.93-74%20120.51%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/map-pin-light.svg?color=%231a73e8&size=48
