Chat Bubble SVG element, flat

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

<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="M139 772c35-14 77-44 107-68 12-9 36-32 46-37 14-7 70-3 89-3 116 0 233 0 350 0 30 0 62 3 91-2 65-11 118-64 127-130 4-30 2-62 2-93 0-76 6-143-61-193-20-15-43-26-68-30-29-5-61-2-90-2-54 0-107 0-160 0-79 0-157 0-235 0-39 0-77-2-115 0-69 3-130 53-145 121-5 26-3 54-3 82 0 36-4 81 1 116 9 61 53 106 109 125-7 41-28 77-45 114z" fill="#c4e3fb" stroke="#c4e3fb"/></g><g id="cobalt" data-name="Cobalt"><path d="M158 672c-4 23-17 49-28 70-4 7-11 16-13 24-4 20 13 33 32 26 26-9 95-58 119-76 7-6 30-28 36-30 9-3 23 0 33 0 32 0 65 0 98 0 65 0 129 0 195 0 38 0 77 0 116 0 21 0 42 1 63 0 54-3 104-34 134-77 12-19 21-39 26-61 7-36 7-181 0-217-5-20-13-39-23-56-27-45-78-76-130-82-24-3-48-1-72-1-36 0-72 0-107 0-131 0-261 0-391 0-124 0-195 74-195 197 0 84-14 179 51 244 16 16 34 29 56 39zM139 772c17-37 38-73 45-114-56-19-100-64-109-125-5-35-1-80-1-116 0-28-2-56 3-82 15-68 76-118 145-121 38-2 76 0 115 0 78 0 156 0 235 0 53 0 106 0 160 0 29 0 61-3 90 2 25 4 48 15 68 30 67 50 61 117 61 193 0 31 2 63-2 93-9 66-62 119-127 130-29 5-61 2-91 2-117 0-234 0-350 0-19 0-75-4-89 3-10 5-34 28-46 37-30 24-72 54-107 68z" fill="#05338d" stroke="#05338d"/></g></svg>

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

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

import ChatBubbleSvg from "./chat-bubble.jsx"; // from the React tab above

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