HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/mRS3yiWI28e0/amnt.svg" alt="Checkmark 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="lime" data-name="Lime"><path d="M343 708c-10-15-23-29-35-43-23-27-46-55-71-81-30-32-67-65-112-43-13 6-24 18-29 31-4 11-3 24 1 35 9 28 59 81 79 107 33 42 66 85 99 128 45 59 73 87 126 13 32-44 62-90 94-134 63-88 127-176 197-258 38-44 77-88 117-131 33-36 70-70 105-105 15-15 33-33 38-55 9-40-29-69-67-63-44 8-101 65-132 97-155 154-285 323-410 502z" fill="#1dd905" stroke="#1dd905"/></g><g id="pine" data-name="Pine"><path d="M341 663c-11-11-20-25-30-36-26-31-53-64-84-91-49-42-130-40-155 25-22 57 38 115 72 156 36 43 70 89 104 134 27 34 56 81 106 74 14-2 28-9 39-19 28-25 78-104 102-138 64-93 132-186 205-272 73-87 150-169 231-249 14-14 29-29 38-46 20-37 11-84-26-106-59-36-121 11-164 50-84 76-160 159-232 246-51 60-100 123-145 187-19 26-41 62-61 85zm2 45c125-179 255-348 410-502 31-32 88-89 132-97 38-6 76 23 67 63-5 22-23 40-38 55-35 35-72 69-105 105-40 43-79 87-117 131-70 82-134 170-197 258-32 44-62 90-94 134-53 74-81 46-126-13-33-43-66-86-99-128-20-26-70-79-79-107-4-11-5-24-1-35 5-13 16-25 29-31 45-22 82 11 112 43 25 26 48 54 71 81 12 14 25 28 35 43z" fill="#02230b" stroke="#02230b"/></g></svg>
CSS background-image
.checkmark-bullet {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/mRS3yiWI28e0/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.checkmark-bullet {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/mRS3yiWI28e0/amnt.svg") center / contain no-repeat;
}
React
import CheckmarkBulletSvg from "./checkmark-bullet.jsx"; // from the React tab above
<CheckmarkBulletSvg width={48} height={48} />