Speech Bubble SVG element, flat

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="white" data-name="White"><path d="M465 824c35-35 67-72 93-114 5-9 28-54 33-57 3-2 9-2 13-2 31-3 61-7 91-13 98-21 213-59 271-146 73-108-11-207-105-259-101-56-223-78-337-79-119-1-240 18-347 72-93 46-187 141-127 252 48 89 167 134 261 156 29 7 59 12 90 15 12 1 94 4 97 7 9 7-5 76-8 89-4 17-9 34-15 50-4 10-9 19-10 29z" fill="#fcfcfc" stroke="#fcfcfc"/></g><g id="black" data-name="Black"><path d="M418 884c16-4 93-84 107-101 19-21 35-45 50-69 4-7 22-43 25-45 4-3 12-2 17-3 106-12 223-38 309-108 96-77 113-184 27-277-70-76-189-113-287-130-63-11-128-16-191-13-138 6-369 55-439 191-58 113 16 209 113 263 83 46 178 67 271 75 21 2 43 5 64 4 1 57-21 115-44 167-7 15-16 30-22 46zm47-60c1-10 6-19 10-29 6-16 11-33 15-50 3-13 17-82 8-89-3-3-85-6-97-7-31-3-61-8-90-15-94-22-213-67-261-156-60-111 34-206 127-252 107-54 228-73 347-72 114 1 236 23 337 79 94 52 178 151 105 259-58 87-173 125-271 146-30 6-60 10-91 13-4 0-10 0-13 2-5 3-28 48-33 57-26 42-58 79-93 114z" fill="#020102" stroke="#020102"/></g></svg>

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

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

import SpeechBubbleSvg from "./speech-bubble.jsx"; // from the React tab above

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