HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/WNtY2Bx9l6_P/amnt.svg" alt="Face" 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="yellow" data-name="Yellow"><path d="M505 116c-209 9-383 181-380 394s183 379 394 378c212-1 382-184 379-393-3-204-188-388-393-379zM359 378c75-9 89 98 19 108-74 11-88-99-19-108zm286 0c75-10 90 97 21 108-75 12-90-98-21-108zM371 620c20-2 42 1 63 1 41 0 83-1 125-1 21 0 44 1 66 1 9 0 19-2 28-1 29 3 34 46 4 52-17 3-38 0-55 0-46 0-92 0-138 0-26 0-74 4-97-1-30-5-27-47 4-51z" fill="#fcd324" stroke="#fcd324"/></g><g id="charcoal" data-name="Charcoal"><path d="M500 72c-239 11-418 206-418 443 0 231 213 426 442 416 49-2 98-10 144-29 165-66 282-232 274-412-10-229-209-428-442-418zm5 44c205-9 390 175 393 379 3 209-167 392-379 393-211 1-391-165-394-378s171-385 380-394z" fill="#292c2e" stroke="#292c2e"/><path d="M371 620c-31 4-34 46-4 51 23 5 71 1 97 1 46 0 92 0 138 0 17 0 38 3 55 0 30-6 25-49-4-52-9-1-19 1-28 1-22 0-45-1-66-1-42 0-84 1-125 1-21 0-43-3-63-1z" fill="#292c2e" stroke="#292c2e"/><path d="M645 378c-69 10-54 120 21 108 69-11 54-118-21-108z" fill="#292c2e" stroke="#292c2e"/><path d="M359 378c-69 9-55 119 19 108 70-10 56-117-19-108z" fill="#292c2e" stroke="#292c2e"/></g></svg>
CSS background-image
.face {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/WNtY2Bx9l6_P/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.face {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/WNtY2Bx9l6_P/amnt.svg") center / contain no-repeat;
}
React
import FaceSvg from "./face.jsx"; // from the React tab above
<FaceSvg width={48} height={48} />