Menu

Beta
Sign in
Beta
Location Pin SVG icon, line

Location Pin SVG icon, line

A teardrop marker with a circular center indicates a place. Use it to identify hotel locations on maps or meeting points in tour schedules.

Free · from Travel icons, line · Set 2

Similar SVGs

More from Travel icons, line · Set 2

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/y8GbgNTkTLds/amnt.svg" alt="Location Pin" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="red" data-name="Red"><path d="M511 917c11-28 28-55 42-81 37-69 80-135 121-202 32-52 66-104 89-160 75-185-46-396-251-396-207 0-325 212-252 396 32 79 82 149 126 221 30 48 60 96 86 146 13 25 25 52 39 76zm-4-714c139-2 207 165 108 262-26 25-62 40-98 41-148 3-213-189-92-275 23-16 53-27 82-28z" fill="#fc0202" stroke="#fc0202"/></g><g id="black" data-name="Black"><path d="M512 48c-226 1-360 230-279 435 34 86 90 163 138 243 24 40 49 79 70 120 7 13 56 111 59 114s8 5 12 4c5 0 10-3 12-7 7-8 10-21 15-30 13-28 28-56 43-83 23-41 47-81 71-121 48-79 104-156 138-242 81-202-55-433-279-433zm-1 869c-14-24-26-51-39-76-26-50-56-98-86-146-44-72-94-142-126-221-73-184 45-396 252-396 205 0 326 211 251 396-23 56-57 108-89 160-41 67-84 133-121 202-14 26-31 53-42 81z" fill="#0b0a0a" stroke="#0b0a0a"/><path d="M507 203c-29 1-59 12-82 28-121 86-56 278 92 275 36-1 72-16 98-41 99-97 31-264-108-262zm-8 30c114-10 180 128 98 209-20 19-45 31-72 34-121 12-182-140-90-216 18-15 41-25 64-27z" fill="#0b0a0a" stroke="#0b0a0a"/></g><g id="white" data-name="White"><path d="M499 233c-23 2-46 12-64 27-92 76-31 228 90 216 27-3 52-15 72-34 82-81 16-219-98-209z" fill="#fcfbfb" stroke="#fcfbfb"/></g></svg>
CSS background-image
.location-pin {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/y8GbgNTkTLds/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.location-pin {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/y8GbgNTkTLds/amnt.svg") center / contain no-repeat;
}
React
import LocationPinSvg from "./location-pin.jsx"; // from the React tab above

<LocationPinSvg width={48} height={48} />

Tags

locationmap pindestinationtraveliconline

Made with AMNT

AMNT Draw 1.2 drew this from the words Location Pin: Teardrop map marker with a small circle in its center. A flat colour icon. as part of the pack Travel icons, line · Set 2. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings