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} />
