HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/WV_HDYBYg_kK/amnt.svg" alt="Asymmetric Blob" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="currentColor"><path d="M159 29C179 40 190 61 188 83C187 105 171 119 151 128C137 135 128 145 123 161C118 178 104 190 85 188C67 187 61 174 55 158C49 144 38 138 26 126C13 113 9 95 15 78C21 60 38 55 53 48C70 41 78 25 96 17C117 8 141 18 159 29Z"/></svg>
CSS background-image
.asymmetric-blob {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/WV_HDYBYg_kK/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/WV_HDYBYg_kK/amnt.svg") center / contain no-repeat;
}
React
import AsymmetricBlobSvg from "./asymmetric-blob.jsx"; // from the React tab above
<AsymmetricBlobSvg width={48} height={48} />