HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/3My3ZkCGgt3P/amnt.svg" alt="Thought Bubble" 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="baby-blue" data-name="Baby Blue"><path d="M673 215c-22-66-82-111-151-111-52 0-101 24-131 67-9 13-13 29-21 43-68-34-151-14-174 65-5 17-2 32-3 49-68 12-118 77-100 147 12 49 57 86 107 90 18 1 35-4 53-7 2 19 15 36 26 50 47 55 132 53 181 3 61 80 174 95 251 27 18-16 36-39 43-63 66 20 142-10 171-74 22-50 7-111-40-140-12-8-27-10-40-18 7-13 7-31 5-46-9-84-109-129-177-82z" fill="#bde3fb" stroke="#bde3fb"/><path d="M255 674c-62 4-57 101 7 96 63-5 56-100-7-96z" fill="#bde3fb" stroke="#bde3fb"/><path d="M165 787c-37 6-29 64 11 58 38-6 27-64-11-58z" fill="#bde3fb" stroke="#bde3fb"/></g><g id="grape" data-name="Grape"><path d="M682 191c-8-16-16-31-28-44-63-72-175-79-248-18-18 16-38 39-45 63-14-5-28-10-43-11-80-6-144 53-143 134-71 20-117 92-99 164 15 59 70 102 131 103 11 0 23-2 34-3 12 18 19 37 36 51 50 45 129 49 181 6 51 50 114 75 186 57 30-8 59-24 82-45 7-7 15-16 21-24 3-5 15-28 18-29 4-1 25 2 32 2 85 0 163-68 154-158-3-32-18-61-44-83-12-11-27-16-41-23 5-15 2-34-1-50-18-88-104-118-183-92zm-9 24c68-47 168-2 177 82 2 15 2 33-5 46 13 8 28 10 40 18 47 29 62 90 40 140-29 64-105 94-171 74-7 24-25 47-43 63-77 68-190 53-251-27-49 50-134 52-181-3-11-14-24-31-26-50-18 3-35 8-53 7-50-4-95-41-107-90-18-70 32-135 100-147 1-17-2-32 3-49 23-79 106-99 174-65 8-14 12-30 21-43 30-43 79-67 131-67 69 0 129 45 151 111z" fill="#012d6c" stroke="#012d6c"/><path d="M249 658c-83 10-68 140 19 128 83-10 68-138-19-128zm6 16c63-4 70 91 7 96-64 5-69-92-7-96z" fill="#012d6c" stroke="#012d6c"/><path d="M166 770c-61 6-52 98 9 92 60-5 52-98-9-92zm-1 17c38-6 49 52 11 58-40 6-48-52-11-58z" fill="#012d6c" stroke="#012d6c"/></g></svg>
CSS background-image
.thought-bubble {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/3My3ZkCGgt3P/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.thought-bubble {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/3My3ZkCGgt3P/amnt.svg") center / contain no-repeat;
}
React
import ThoughtBubbleSvg from "./thought-bubble.jsx"; // from the React tab above
<ThoughtBubbleSvg width={48} height={48} />