map marker distance icon

map-marker-distance from Material Design Icons by Pictogrammers · Filled · Geographic Information System · Apache-2.0 Free for personal and commercial use.

Name: map-marker-distance
Set: Material Design Icons
Style: Filled
Category: Geographic Information System
Viewbox: 24×24
License: Apache 2.0
Aliases: location-distance

More geographic information system icons from Material Design Icons

Use the map marker distance icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6.5 8.11c-.89 0-1.61-.72-1.61-1.61A1.61 1.61 0 0 1 6.5 4.89c.89 0 1.61.72 1.61 1.61A1.61 1.61 0 0 1 6.5 8.11M6.5 2C4 2 2 4 2 6.5c0 3.37 4.5 8.36 4.5 8.36S11 9.87 11 6.5C11 4 9 2 6.5 2m11 6.11a1.61 1.61 0 0 1-1.61-1.61a1.609 1.609 0 1 1 3.22 0a1.61 1.61 0 0 1-1.61 1.61m0-6.11C15 2 13 4 13 6.5c0 3.37 4.5 8.36 4.5 8.36S22 9.87 22 6.5C22 4 20 2 17.5 2m0 14c-1.27 0-2.4.8-2.82 2H9.32a3 3 0 0 0-3.82-1.83A3.003 3.003 0 0 0 3.66 20a3.017 3.017 0 0 0 3.84 1.83c.85-.3 1.5-.98 1.82-1.83h5.37c.55 1.56 2.27 2.38 3.81 1.83A3 3 0 0 0 20.35 18c-.43-1.2-1.57-2-2.85-2m0 4.5A1.5 1.5 0 0 1 16 19a1.5 1.5 0 0 1 1.5-1.5A1.5 1.5 0 0 1 19 19a1.5 1.5 0 0 1-1.5 1.5"/></svg>

React

import type { SVGProps } from "react";

export function MdiMapMarkerDistance(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6.5 8.11c-.89 0-1.61-.72-1.61-1.61A1.61 1.61 0 0 1 6.5 4.89c.89 0 1.61.72 1.61 1.61A1.61 1.61 0 0 1 6.5 8.11M6.5 2C4 2 2 4 2 6.5c0 3.37 4.5 8.36 4.5 8.36S11 9.87 11 6.5C11 4 9 2 6.5 2m11 6.11a1.61 1.61 0 0 1-1.61-1.61a1.609 1.609 0 1 1 3.22 0a1.61 1.61 0 0 1-1.61 1.61m0-6.11C15 2 13 4 13 6.5c0 3.37 4.5 8.36 4.5 8.36S22 9.87 22 6.5C22 4 20 2 17.5 2m0 14c-1.27 0-2.4.8-2.82 2H9.32a3 3 0 0 0-3.82-1.83A3.003 3.003 0 0 0 3.66 20a3.017 3.017 0 0 0 3.84 1.83c.85-.3 1.5-.98 1.82-1.83h5.37c.55 1.56 2.27 2.38 3.81 1.83A3 3 0 0 0 20.35 18c-.43-1.2-1.57-2-2.85-2m0 4.5A1.5 1.5 0 0 1 16 19a1.5 1.5 0 0 1 1.5-1.5A1.5 1.5 0 0 1 19 19a1.5 1.5 0 0 1-1.5 1.5"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6.5 8.11c-.89 0-1.61-.72-1.61-1.61A1.61 1.61 0 0 1 6.5 4.89c.89 0 1.61.72 1.61 1.61A1.61 1.61 0 0 1 6.5 8.11M6.5 2C4 2 2 4 2 6.5c0 3.37 4.5 8.36 4.5 8.36S11 9.87 11 6.5C11 4 9 2 6.5 2m11 6.11a1.61 1.61 0 0 1-1.61-1.61a1.609 1.609 0 1 1 3.22 0a1.61 1.61 0 0 1-1.61 1.61m0-6.11C15 2 13 4 13 6.5c0 3.37 4.5 8.36 4.5 8.36S22 9.87 22 6.5C22 4 20 2 17.5 2m0 14c-1.27 0-2.4.8-2.82 2H9.32a3 3 0 0 0-3.82-1.83A3.003 3.003 0 0 0 3.66 20a3.017 3.017 0 0 0 3.84 1.83c.85-.3 1.5-.98 1.82-1.83h5.37c.55 1.56 2.27 2.38 3.81 1.83A3 3 0 0 0 20.35 18c-.43-1.2-1.57-2-2.85-2m0 4.5A1.5 1.5 0 0 1 16 19a1.5 1.5 0 0 1 1.5-1.5A1.5 1.5 0 0 1 19 19a1.5 1.5 0 0 1-1.5 1.5"/></svg>
</template>

CSS

.icon-map-marker-distance {
  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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.5%208.11c-.89%200-1.61-.72-1.61-1.61A1.61%201.61%200%200%201%206.5%204.89c.89%200%201.61.72%201.61%201.61A1.61%201.61%200%200%201%206.5%208.11M6.5%202C4%202%202%204%202%206.5c0%203.37%204.5%208.36%204.5%208.36S11%209.87%2011%206.5C11%204%209%202%206.5%202m11%206.11a1.61%201.61%200%200%201-1.61-1.61a1.609%201.609%200%201%201%203.22%200a1.61%201.61%200%200%201-1.61%201.61m0-6.11C15%202%2013%204%2013%206.5c0%203.37%204.5%208.36%204.5%208.36S22%209.87%2022%206.5C22%204%2020%202%2017.5%202m0%2014c-1.27%200-2.4.8-2.82%202H9.32a3%203%200%200%200-3.82-1.83A3.003%203.003%200%200%200%203.66%2020a3.017%203.017%200%200%200%203.84%201.83c.85-.3%201.5-.98%201.82-1.83h5.37c.55%201.56%202.27%202.38%203.81%201.83A3%203%200%200%200%2020.35%2018c-.43-1.2-1.57-2-2.85-2m0%204.5A1.5%201.5%200%200%201%2016%2019a1.5%201.5%200%200%201%201.5-1.5A1.5%201.5%200%200%201%2019%2019a1.5%201.5%200%200%201-1.5%201.5%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.5%208.11c-.89%200-1.61-.72-1.61-1.61A1.61%201.61%200%200%201%206.5%204.89c.89%200%201.61.72%201.61%201.61A1.61%201.61%200%200%201%206.5%208.11M6.5%202C4%202%202%204%202%206.5c0%203.37%204.5%208.36%204.5%208.36S11%209.87%2011%206.5C11%204%209%202%206.5%202m11%206.11a1.61%201.61%200%200%201-1.61-1.61a1.609%201.609%200%201%201%203.22%200a1.61%201.61%200%200%201-1.61%201.61m0-6.11C15%202%2013%204%2013%206.5c0%203.37%204.5%208.36%204.5%208.36S22%209.87%2022%206.5C22%204%2020%202%2017.5%202m0%2014c-1.27%200-2.4.8-2.82%202H9.32a3%203%200%200%200-3.82-1.83A3.003%203.003%200%200%200%203.66%2020a3.017%203.017%200%200%200%203.84%201.83c.85-.3%201.5-.98%201.82-1.83h5.37c.55%201.56%202.27%202.38%203.81%201.83A3%203%200%200%200%2020.35%2018c-.43-1.2-1.57-2-2.85-2m0%204.5A1.5%201.5%200%200%201%2016%2019a1.5%201.5%200%200%201%201.5-1.5A1.5%201.5%200%200%201%2019%2019a1.5%201.5%200%200%201-1.5%201.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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