location icon
location from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- location
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
1 other variant in Framework7 Icons
The same icon in other sets
locationAkar IconslocationCarbonlocationCodiconslocationElement PluslocationFont Awesome Solidlocation-12-filledFluent UI System IconslocationHumbleiconslocationIonIconslocationMage Iconslocation-fillMingCute IconlocationMyna UI IconslocationOcticonslocationTabler IconslocationTDesign Iconslocation-outlineTeenyiconslocation-outlinedWeUI Icon
Related icons in Framework7 Icons
Use the location icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M5.137 28.246c.82.797 1.64 1.055 3.258 1.078l17.742.07c.164 0 .304.024.375.094c.07.07.093.211.093.375l.07 17.743c.024 1.617.282 2.437 1.102 3.257c1.102 1.125 2.649.938 3.797-.187c.61-.61 1.102-1.617 1.547-2.555L51.051 9.45c.937-1.968.82-3.422-.14-4.36c-.939-.96-2.392-1.077-4.36-.14L7.879 22.88c-.938.445-1.945.937-2.555 1.547c-1.125 1.148-1.312 2.695-.187 3.82m4.758-2.484c-.024-.07.023-.14.164-.211L47.16 8.51c.188-.07.281-.07.352-.023c.047.07.047.164-.024.352L30.45 45.94c-.07.141-.14.188-.21.164c-.048 0-.118-.093-.118-.187l.117-18.516c0-.586-.21-.96-.445-1.195c-.235-.234-.61-.445-1.195-.445l-18.516.117c-.094 0-.187-.07-.187-.117"/></svg>
React
import type { SVGProps } from "react";
export function F7Location(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="M5.137 28.246c.82.797 1.64 1.055 3.258 1.078l17.742.07c.164 0 .304.024.375.094c.07.07.093.211.093.375l.07 17.743c.024 1.617.282 2.437 1.102 3.257c1.102 1.125 2.649.938 3.797-.187c.61-.61 1.102-1.617 1.547-2.555L51.051 9.45c.937-1.968.82-3.422-.14-4.36c-.939-.96-2.392-1.077-4.36-.14L7.879 22.88c-.938.445-1.945.937-2.555 1.547c-1.125 1.148-1.312 2.695-.187 3.82m4.758-2.484c-.024-.07.023-.14.164-.211L47.16 8.51c.188-.07.281-.07.352-.023c.047.07.047.164-.024.352L30.45 45.94c-.07.141-.14.188-.21.164c-.048 0-.118-.093-.118-.187l.117-18.516c0-.586-.21-.96-.445-1.195c-.235-.234-.61-.445-1.195-.445l-18.516.117c-.094 0-.187-.07-.187-.117"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M5.137 28.246c.82.797 1.64 1.055 3.258 1.078l17.742.07c.164 0 .304.024.375.094c.07.07.093.211.093.375l.07 17.743c.024 1.617.282 2.437 1.102 3.257c1.102 1.125 2.649.938 3.797-.187c.61-.61 1.102-1.617 1.547-2.555L51.051 9.45c.937-1.968.82-3.422-.14-4.36c-.939-.96-2.392-1.077-4.36-.14L7.879 22.88c-.938.445-1.945.937-2.555 1.547c-1.125 1.148-1.312 2.695-.187 3.82m4.758-2.484c-.024-.07.023-.14.164-.211L47.16 8.51c.188-.07.281-.07.352-.023c.047.07.047.164-.024.352L30.45 45.94c-.07.141-.14.188-.21.164c-.048 0-.118-.093-.118-.187l.117-18.516c0-.586-.21-.96-.445-1.195c-.235-.234-.61-.445-1.195-.445l-18.516.117c-.094 0-.187-.07-.187-.117"/></svg> </template>
CSS
.icon-location {
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%22M5.137%2028.246c.82.797%201.64%201.055%203.258%201.078l17.742.07c.164%200%20.304.024.375.094c.07.07.093.211.093.375l.07%2017.743c.024%201.617.282%202.437%201.102%203.257c1.102%201.125%202.649.938%203.797-.187c.61-.61%201.102-1.617%201.547-2.555L51.051%209.45c.937-1.968.82-3.422-.14-4.36c-.939-.96-2.392-1.077-4.36-.14L7.879%2022.88c-.938.445-1.945.937-2.555%201.547c-1.125%201.148-1.312%202.695-.187%203.82m4.758-2.484c-.024-.07.023-.14.164-.211L47.16%208.51c.188-.07.281-.07.352-.023c.047.07.047.164-.024.352L30.45%2045.94c-.07.141-.14.188-.21.164c-.048%200-.118-.093-.118-.187l.117-18.516c0-.586-.21-.96-.445-1.195c-.235-.234-.61-.445-1.195-.445l-18.516.117c-.094%200-.187-.07-.187-.117%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%22M5.137%2028.246c.82.797%201.64%201.055%203.258%201.078l17.742.07c.164%200%20.304.024.375.094c.07.07.093.211.093.375l.07%2017.743c.024%201.617.282%202.437%201.102%203.257c1.102%201.125%202.649.938%203.797-.187c.61-.61%201.102-1.617%201.547-2.555L51.051%209.45c.937-1.968.82-3.422-.14-4.36c-.939-.96-2.392-1.077-4.36-.14L7.879%2022.88c-.938.445-1.945.937-2.555%201.547c-1.125%201.148-1.312%202.695-.187%203.82m4.758-2.484c-.024-.07.023-.14.164-.211L47.16%208.51c.188-.07.281-.07.352-.023c.047.07.047.164-.024.352L30.45%2045.94c-.07.141-.14.188-.21.164c-.048%200-.118-.093-.118-.187l.117-18.516c0-.586-.21-.96-.445-1.195c-.235-.234-.61-.445-1.195-.445l-18.516.117c-.094%200-.187-.07-.187-.117%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/location.svg?color=%231a73e8&size=48
