HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/xH-5FqnJpUFa/amnt.svg" alt="Three Dots" 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="turquoise" data-name="Turquoise"><path d="M813 373c-26 2-52 12-73 29-94 78-40 232 85 226 24-1 48-11 68-26 98-75 44-237-80-229z" fill="#15b6aa" stroke="#15b6aa"/></g><g id="coral" data-name="Coral"><path d="M200 373c-28 2-54 13-75 31-91 78-35 230 86 224 28-1 54-13 75-31 91-77 35-233-86-224z" fill="#fc6b53" stroke="#fc6b53"/></g><g id="amber" data-name="Amber"><path d="M505 373c-28 2-54 14-75 32-91 77-32 230 88 223 27-2 53-14 74-31 90-76 33-233-87-224z" fill="#fdbe02" stroke="#fdbe02"/></g><g id="navy" data-name="Navy"><path d="M806 361c-27 3-54 15-75 32-103 88-39 261 99 247 28-3 54-15 77-33 104-86 34-258-101-246zm7 12c124-8 178 154 80 229-20 15-44 25-68 26-125 6-179-148-85-226 21-17 47-27 73-29z" fill="#02194c" stroke="#02194c"/><path d="M194 361c-30 3-58 17-80 36-98 87-30 257 103 243 28-3 54-14 77-33 104-86 35-257-100-246zm6 12c121-9 177 147 86 224-21 18-47 30-75 31-121 6-177-146-86-224 21-18 47-29 75-31z" fill="#02194c" stroke="#02194c"/><path d="M500 361c-26 2-50 13-70 28-110 84-47 265 93 251 27-3 52-14 74-31 106-84 39-259-97-248zm5 12c120-9 177 148 87 224-21 17-47 29-74 31-120 7-179-146-88-223 21-18 47-30 75-32z" fill="#02194c" stroke="#02194c"/></g></svg>
CSS background-image
.three-dots {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/xH-5FqnJpUFa/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.three-dots {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/xH-5FqnJpUFa/amnt.svg") center / contain no-repeat;
}
React
import ThreeDotsSvg from "./three-dots.jsx"; // from the React tab above
<ThreeDotsSvg width={48} height={48} />
