HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/yCI-5wvjH5eS/amnt.svg" alt="Asymmetric Blob" 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="coral" data-name="Coral"><path d="M804 128c-50 4-93 32-123 71-14 17-25 36-40 52-18 20-39 37-62 49-34 18-75 27-114 22-24-3-47-10-71-11-50-2-100 7-146 29-210 100-219 369-8 474 98 49 216 28 299-42 56-48 91-116 99-190 4-32 1-64 12-96 21-63 77-109 143-120 38-6 70-4 104-28 22-17 38-41 43-68 17-84-56-147-136-142z" fill="#fc6a4b" stroke="#fc6a4b"/></g><g id="black" data-name="Black"><path d="M799 112c-125 10-138 131-236 178-64 29-112 9-176 5-57-4-115 13-165 40-90 49-154 147-154 251 0 107 80 204 173 247 103 47 227 23 311-51 38-33 67-75 85-122 9-26 16-56 18-84 2-31 1-61 13-91 19-51 64-88 117-101 15-3 30-4 45-5 36-4 73-19 97-47 18-21 29-47 31-73 9-92-73-153-159-147zm5 16c80-5 153 58 136 142-5 27-21 51-43 68-34 24-66 22-104 28-66 11-122 57-143 120-11 32-8 64-12 96-8 74-43 142-99 190-83 70-201 91-299 42-211-105-202-374 8-474 46-22 96-31 146-29 24 1 47 8 71 11 39 5 80-4 114-22 23-12 44-29 62-49 15-16 26-35 40-52 30-39 73-67 123-71z" fill="#1d1c1c" stroke="#1d1c1c"/></g></svg>
CSS background-image
.asymmetric-blob {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/yCI-5wvjH5eS/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.asymmetric-blob {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/yCI-5wvjH5eS/amnt.svg") center / contain no-repeat;
}
React
import AsymmetricBlobSvg from "./asymmetric-blob.jsx"; // from the React tab above
<AsymmetricBlobSvg width={48} height={48} />
