Quote Bubble SVG element, flat

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Wo7BylzZit_L/amnt.svg" alt="Quote Bubble" width="48" height="48">

<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="M483 126c-57 3-115 14-167 38-145 68-236 225-187 385 14 46 41 91 77 123 27 25 41 20 29 60-7 24-17 48-29 71-3 5-25 44-25 46 0 3 2 5 5 6s11-3 14-4c24-9 46-20 69-32 12-7 85-56 89-56 13-1 31 8 44 11 146 34 310 2 418-106 45-45 77-104 86-168 21-154-84-297-226-348-63-22-131-29-197-26zM351 512c-17-3-32-7-46-15-68-40-66-137-12-186 72-68 186-25 204 70 17 87-29 184-102 233-27 18-70 42-98 16-6-5-10-11-12-18-11-37 19-47 41-67 11-9 18-21 25-33zm267 0c-19-7-37-10-53-23-56-45-50-135 3-180 77-65 187-22 201 76 13 87-34 182-106 229-31 20-95 51-111-3-13-46 48-55 66-99z" fill="#6dc3fb" stroke="#6dc3fb"/></g><g id="navy" data-name="Navy"><path d="M490 95c-60 3-120 12-176 36-160 66-265 237-220 411 14 52 40 99 77 139 5 5 36 33 37 35 1 7-6 21-8 27-9 26-21 50-34 73-9 17-19 33-9 51 20 36 75 4 101-8 24-12 47-25 69-39 42-27 24-26 74-15 220 50 501-55 536-302 23-161-82-314-229-373-69-28-145-38-218-35zm-7 31c66-3 134 4 197 26 142 51 247 194 226 348-9 64-41 123-86 168-108 108-272 140-418 106-13-3-31-12-44-11-4 0-77 49-89 56-23 12-45 23-69 32-3 1-11 5-14 4s-5-3-5-6c0-2 22-41 25-46 12-23 22-47 29-71 12-40-2-35-29-60-36-32-63-77-77-123-49-160 42-317 187-385 52-24 110-35 167-38z" fill="#021d52" stroke="#021d52"/><path d="M351 512c-7 12-14 24-25 33-22 20-52 30-41 67 2 7 6 13 12 18 28 26 71 2 98-16 73-49 119-146 102-233-18-95-132-138-204-70-54 49-56 146 12 186 14 8 29 12 46 15zm20-210c54-2 99 41 104 95 2 28-2 57-10 84-11 35-30 65-56 91-16 15-75 59-95 41-8-6-8-17-3-25 4-7 16-12 22-17 14-10 25-23 34-38 6-9 22-39 5-45-5-2-11-1-16-1-18-1-33-6-47-17-69-52-20-164 62-168z" fill="#021d52" stroke="#021d52"/><path d="M618 512c-18 44-79 53-66 99 16 54 80 23 111 3 72-47 119-142 106-229-14-98-124-141-201-76-53 45-59 135-3 180 16 13 34 16 53 23zm27-210c22-1 44 6 62 19 49 37 45 106 28 159-11 34-30 67-57 91-16 15-74 59-95 43-9-6-10-18-4-26 4-6 12-9 18-14 14-11 27-24 37-40 6-10 24-40 6-46-6-2-13-1-18-1-16-1-31-8-42-17-68-56-15-163 65-168z" fill="#021d52" stroke="#021d52"/></g><g id="white" data-name="White"><path d="M371 302c-82 4-131 116-62 168 14 11 29 16 47 17 5 0 11-1 16 1 17 6 1 36-5 45-9 15-20 28-34 38-6 5-18 10-22 17-5 8-5 19 3 25 20 18 79-26 95-41 26-26 45-56 56-91 8-27 12-56 10-84-5-54-50-97-104-95z" fill="#fcfcfc" stroke="#fcfcfc"/><path d="M645 302c-80 5-133 112-65 168 11 9 26 16 42 17 5 0 12-1 18 1 18 6 0 36-6 46-10 16-23 29-37 40-6 5-14 8-18 14-6 8-5 20 4 26 21 16 79-28 95-43 27-24 46-57 57-91 17-53 21-122-28-159-18-13-40-20-62-19z" fill="#fcfcfc" stroke="#fcfcfc"/></g></svg>

.quote-bubble {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Wo7BylzZit_L/amnt.svg");
  background-size: contain;
}

.quote-bubble {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Wo7BylzZit_L/amnt.svg") center / contain no-repeat;
}

import QuoteBubbleSvg from "./quote-bubble.jsx"; // from the React tab above

<QuoteBubbleSvg width={48} height={48} />