HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Ex7MmWqesC4h/amnt.svg" alt="Push 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="M505 89c-59 3-114 27-158 66-167 153-54 434 172 426 235-8 329-326 122-455-41-26-88-39-136-37z" fill="#fc1115" stroke="#fc1115"/></g><g id="black" data-name="Black"><path d="M559 597c29-9 56-16 82-31 90-51 143-155 135-256-11-138-129-241-265-241-43 0-86 11-123 32-168 93-192 325-39 445 34 26 74 45 117 52 0 37-5 144 3 174 5 18 29 119 36 128 1 2 4 5 7 5 4 0 6-3 8-5 7-9 31-110 36-129 8-33 3-134 3-174zM505 89c48-2 95 11 136 37 207 129 113 447-122 455-226 8-339-273-172-426 44-39 99-63 158-66zm33 511c0 46 0 93 0 140 0 20-5 38-10 58-3 9-5 19-7 28-2 6-7 26-9 26-1 0-6-20-7-25-3-9-5-19-8-28-5-20-11-38-11-58 0-47 0-94 0-140 17 0 36 4 52-1z" fill="#19191b" stroke="#19191b"/></g><g id="silver" data-name="Silver"><path d="M538 600c-16 5-35 1-52 1 0 46 0 93 0 140 0 20 6 38 11 58 3 9 5 19 8 28 1 5 6 25 7 25 2 0 7-20 9-26 2-9 4-19 7-28 5-20 10-38 10-58 0-47 0-94 0-140z" fill="#b4b6ba" stroke="#b4b6ba"/></g></svg>
CSS background-image
.push-pin {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Ex7MmWqesC4h/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.push-pin {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Ex7MmWqesC4h/amnt.svg") center / contain no-repeat;
}
React
import PushPinSvg from "./push-pin.jsx"; // from the React tab above
<PushPinSvg width={48} height={48} />
