HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/GZ0r6M3rmxqJ/amnt.svg" alt="Heart Bullet" 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="M512 253c-15-33-32-65-57-92-59-65-155-91-239-61-128 45-177 180-139 304 33 109 123 193 206 266 70 63 140 128 199 202 10 13 23 27 30 42 5-12 15-23 22-33 61-78 134-146 207-211 82-74 172-157 205-266 38-126-11-259-140-304-83-29-178-4-237 60-25 27-43 59-57 93z" fill="#fc0202" stroke="#fc0202"/></g><g id="black" data-name="Black"><path d="M512 214c-9-22-25-42-40-60-71-80-185-106-283-61-128 57-167 199-125 326 36 111 131 194 215 271 56 52 111 103 162 160 18 19 35 41 50 63 7 10 13 21 21 30 7-9 13-20 20-30 14-20 29-39 45-57 52-60 109-113 167-166 85-78 177-160 216-272 44-126-1-268-126-326-102-47-224-15-292 73-11 15-23 31-30 49zm0 39c14-34 32-66 57-93 59-64 154-89 237-60 129 45 178 178 140 304-33 109-123 192-205 266-73 65-146 133-207 211-7 10-17 21-22 33-7-15-20-29-30-42-59-74-129-139-199-202-83-73-173-157-206-266-38-124 11-259 139-304 84-30 180-4 239 61 25 27 42 59 57 92z" fill="#030202" stroke="#030202"/></g></svg>
CSS background-image
.heart-bullet {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/GZ0r6M3rmxqJ/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.heart-bullet {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/GZ0r6M3rmxqJ/amnt.svg") center / contain no-repeat;
}
React
import HeartBulletSvg from "./heart-bullet.jsx"; // from the React tab above
<HeartBulletSvg width={48} height={48} />
