HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/bBeYm89FP1bM/amnt.svg" alt="Arrow Circle Up" 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="teal" data-name="Teal"><path d="M608 416c18 0 131 3 139-1 7-3 6-11 2-17-4-9-66-71-78-84-26-29-53-57-79-86-9-9-68-77-73-79-3-2-5-2-8-2-8 1-71 72-81 84-26 28-52 56-78 84-11 12-75 78-78 85-3 6-2 13 5 15 7 3 17 1 24 1 21 0 99-4 114 2 0 88 0 176 0 265 0 44 0 88 0 133 0 36 15 35 47 35 16 0 33 0 50 0 16 0 33 0 50 0 33 0 44-2 44-38 0-44 0-89 0-132 0-89 0-177 0-265z" fill="#0db3a3" stroke="#0db3a3"/></g><g id="navy" data-name="Navy"><path d="M498 25c-264 12-469 233-463 497 6 260 231 475 493 464 266-12 467-227 461-493-6-258-231-479-491-468zm-5 32c249-11 448 186 464 429 16 244-183 458-425 469-244 10-457-184-465-428s180-458 426-470z" fill="#03245c" stroke="#03245c"/></g></svg>
CSS background-image
.arrow-circle-up {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/bBeYm89FP1bM/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.arrow-circle-up {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/bBeYm89FP1bM/amnt.svg") center / contain no-repeat;
}
React
import ArrowCircleUpSvg from "./arrow-circle-up.jsx"; // from the React tab above
<ArrowCircleUpSvg width={48} height={48} />
