HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/NDftlTIbyehG/amnt.svg" alt="Water Drop" 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="sky" data-name="Sky"><path d="M512 130c-29 48-56 97-87 144-57 88-127 172-163 272-67 181 50 377 249 377s318-193 251-376c-34-95-101-176-155-260-34-52-65-104-95-157z" fill="#9ed9fb" stroke="#9ed9fb"/></g><g id="cobalt" data-name="Cobalt"><path d="M512 64c-8 10-13 23-19 35-10 19-21 38-32 57-28 49-60 95-90 142-49 76-106 149-139 235-56 150-1 320 147 391 42 20 88 32 134 31 220-4 357-219 278-423-33-85-88-161-139-235-31-47-62-94-90-142-17-30-32-62-50-91zm0 66c30 53 61 105 95 157 54 84 121 165 155 260 67 183-52 376-251 376s-316-196-249-377c36-100 106-184 163-272 31-47 58-96 87-144z" fill="#012e8a" stroke="#012e8a"/></g></svg>
CSS background-image
.water-drop {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/NDftlTIbyehG/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.water-drop {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/NDftlTIbyehG/amnt.svg") center / contain no-repeat;
}
React
import WaterDropSvg from "./water-drop.jsx"; // from the React tab above
<WaterDropSvg width={48} height={48} />
