HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/8Kc3eq-GDRZJ/amnt.svg" alt="Four Lobe Blob" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="currentColor"><path d="M100 12C119 12 132 26 135 45C151 37 169 43 179 59C190 77 184 94 169 105C183 117 187 135 176 153C165 171 148 176 132 167C125 181 114 189 100 189C83 189 71 181 65 166C49 175 32 169 21 152C10 135 15 117 30 105C15 94 10 77 21 59C32 42 49 37 65 46C69 26 81 12 100 12Z"/></svg>
CSS background-image
.four-lobe-blob {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/8Kc3eq-GDRZJ/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.four-lobe-blob {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/8Kc3eq-GDRZJ/amnt.svg") center / contain no-repeat;
}
React
import FourLobeBlobSvg from "./four-lobe-blob.jsx"; // from the React tab above
<FourLobeBlobSvg width={48} height={48} />