HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/9N3ZAAgEvXWI/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="blue" data-name="Blue"><path d="M512 136c-7 11-12 24-19 35-15 25-31 50-48 74-63 92-146 184-180 292-55 174 52 372 246 374 191 2 304-201 248-373-32-99-102-183-162-267-31-44-59-89-85-135zM448 320c28 2-15 69-21 80-14 28-28 56-37 86-5 14-9 28-12 43-6 29-6 106-46 112-9 1-17-1-24-6-48-37 7-141 30-180 12-23 86-136 110-135zM323 663c39-7 48 71 13 77-39 7-49-71-13-77z" fill="#019cfb" stroke="#019cfb"/></g><g id="grape" data-name="Grape"><path d="M509 73c-5 1-9 5-12 9-7 12-10 28-17 41-11 23-25 45-39 66-24 37-50 72-75 108-51 73-107 145-134 231-64 200 66 416 284 416 55 0 108-17 154-47 123-80 164-239 120-375-27-85-84-158-136-230-25-36-51-71-75-108-13-20-26-41-36-63-5-10-12-34-18-41-4-5-10-8-16-7zm3 63c26 46 54 91 85 135 60 84 130 168 162 267 56 172-57 375-248 373-194-2-301-200-246-374 34-108 117-200 180-292 17-24 33-49 48-74 7-11 12-24 19-35z" fill="#011c6c" stroke="#011c6c"/></g><g id="baby-blue" data-name="Baby Blue"><path d="M448 320c-24-1-98 112-110 135-23 39-78 143-30 180 7 5 15 7 24 6 40-6 40-83 46-112 3-15 7-29 12-43 9-30 23-58 37-86 6-11 49-78 21-80z" fill="#c6f9fa" stroke="#c6f9fa"/><path d="M323 663c-36 6-26 84 13 77 35-6 26-84-13-77z" fill="#c6f9fa" stroke="#c6f9fa"/></g></svg>
CSS background-image
.water-drop {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/9N3ZAAgEvXWI/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/9N3ZAAgEvXWI/amnt.svg") center / contain no-repeat;
}
React
import WaterDropSvg from "./water-drop.jsx"; // from the React tab above
<WaterDropSvg width={48} height={48} />
