map pin icon

map-pin from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.

Name: map-pin
Set: Framework7 Icons
Style: Outline
Viewbox: 56×56
License: MIT

The same icon in other sets

map-pinBoxIcons v2 map-pinBoxIcons v2 Solid map-pinFont Awesome 6 Solid map-pinFont Awesome Solid map-pinFeather Icons map-pin-outlineFlowbite Icons map-pin-20-filledFluent UI System Icons map-pinHeroIcons map-pinHuge Icons map-pinIconoir map-pinLine Awesome map-pinLucide map-pin-fillMingCute Icon map-pinMyna UI Icons map-pinPhosphor map-pinPixelarticons map-pin-fillRemix Icon map-pinTabler Icons map-pinUnicons

Related icons in Framework7 Icons

map-pin-ellipse map-pin-slash

Use the map pin icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28.012 52.82c.937 0 2.156-3.75 2.156-10.687V20.57a8.81 8.81 0 0 0 6.633-8.554c0-4.852-3.914-8.836-8.79-8.836c-4.898 0-8.812 3.984-8.812 8.836c0 4.101 2.813 7.57 6.61 8.554v21.563c0 6.914 1.242 10.687 2.203 10.687M25.48 12.508c-1.593 0-3-1.406-3-3.047c0-1.617 1.407-3 3-3c1.665 0 3 1.383 3 3c0 1.64-1.335 3.047-3 3.047"/></svg>

React

import type { SVGProps } from "react";

export function F7MapPin(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28.012 52.82c.937 0 2.156-3.75 2.156-10.687V20.57a8.81 8.81 0 0 0 6.633-8.554c0-4.852-3.914-8.836-8.79-8.836c-4.898 0-8.812 3.984-8.812 8.836c0 4.101 2.813 7.57 6.61 8.554v21.563c0 6.914 1.242 10.687 2.203 10.687M25.48 12.508c-1.593 0-3-1.406-3-3.047c0-1.617 1.407-3 3-3c1.665 0 3 1.383 3 3c0 1.64-1.335 3.047-3 3.047"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28.012 52.82c.937 0 2.156-3.75 2.156-10.687V20.57a8.81 8.81 0 0 0 6.633-8.554c0-4.852-3.914-8.836-8.79-8.836c-4.898 0-8.812 3.984-8.812 8.836c0 4.101 2.813 7.57 6.61 8.554v21.563c0 6.914 1.242 10.687 2.203 10.687M25.48 12.508c-1.593 0-3-1.406-3-3.047c0-1.617 1.407-3 3-3c1.665 0 3 1.383 3 3c0 1.64-1.335 3.047-3 3.047"/></svg>
</template>

CSS

.icon-map-pin {
  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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M28.012%2052.82c.937%200%202.156-3.75%202.156-10.687V20.57a8.81%208.81%200%200%200%206.633-8.554c0-4.852-3.914-8.836-8.79-8.836c-4.898%200-8.812%203.984-8.812%208.836c0%204.101%202.813%207.57%206.61%208.554v21.563c0%206.914%201.242%2010.687%202.203%2010.687M25.48%2012.508c-1.593%200-3-1.406-3-3.047c0-1.617%201.407-3%203-3c1.665%200%203%201.383%203%203c0%201.64-1.335%203.047-3%203.047%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M28.012%2052.82c.937%200%202.156-3.75%202.156-10.687V20.57a8.81%208.81%200%200%200%206.633-8.554c0-4.852-3.914-8.836-8.79-8.836c-4.898%200-8.812%203.984-8.812%208.836c0%204.101%202.813%207.57%206.61%208.554v21.563c0%206.914%201.242%2010.687%202.203%2010.687M25.48%2012.508c-1.593%200-3-1.406-3-3.047c0-1.617%201.407-3%203-3c1.665%200%203%201.383%203%203c0%201.64-1.335%203.047-3%203.047%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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