HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/w7Xo-mcFpKDy/amnt.svg" alt="Circle Frame" 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="M491 46c-252 11-447 231-436 481 11 256 225 445 478 438 251-7 447-232 435-480-12-251-223-450-477-439zm14 128c178-7 331 148 335 324 4 180-139 335-321 338-181 3-333-142-336-324-3-181 142-330 322-338z" fill="#02bab2" stroke="#02bab2"/></g><g id="midnight" data-name="Midnight"><path d="M483 31c-257 12-461 249-443 504 18 259 236 462 500 445 263-18 457-240 444-503-3-63-21-126-49-182-85-172-260-273-452-264zm8 15c254-11 465 188 477 439 12 248-184 473-435 480-253 7-467-182-478-438-11-250 184-470 436-481z" fill="#022532" stroke="#022532"/><path d="M505 174c-180 8-325 157-322 338 3 182 155 327 336 324 182-3 325-158 321-338-4-176-157-331-335-324zm-10 16c303-15 447 371 211 562-50 40-113 65-177 68-171 7-322-124-330-298-7-167 126-323 296-332z" fill="#022532" stroke="#022532"/></g></svg>
CSS background-image
.circle-frame {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/w7Xo-mcFpKDy/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.circle-frame {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/w7Xo-mcFpKDy/amnt.svg") center / contain no-repeat;
}
React
import CircleFrameSvg from "./circle-frame.jsx"; // from the React tab above
<CircleFrameSvg width={48} height={48} />
