Profile Frame SVG element, flat

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="denim" data-name="Denim"><path d="M837 802c20-19 37-44 51-67 79-126 88-288 22-421-77-153-226-251-398-251-304 0-526 317-413 601 21 50 50 100 88 139 11-51 48-89 93-113 16-8 32-15 49-22 19-7 47-10 62-24 10-8 14-19 14-31-23-16-41-39-52-66-2-5-3-16-7-20-1-1-3-1-4-2-6-4-13-5-19-9-28-18-40-54-38-86 1-19 10-39 26-50 3-2 9-4 10-7 1-1 0-46 1-54 5-38 24-75 50-102 58-60 151-77 226-40 60 29 102 90 106 158 1 13-1 26-1 39 52 17 41 103 8 134-8 8-29 15-33 20s-10 26-14 34c-6 12-14 23-23 32-4 5-18 13-20 18-2 2-2 3-2 5-1 11 9 24 17 29 13 9 29 11 43 16 23 8 46 17 67 29 56 31 69 53 91 111zM209 519c6-10 19 14 16 19-8 14-21-7-16-19 0 0 0 0 0 0z" fill="#4b81b6" stroke="#4b81b6"/></g><g id="ivory" data-name="Ivory"><path d="M496 183c-51 4-98 34-125 77-15 23-24 50-25 77-1 15 5 36 4 47-1 14-20 10-29 21-17 20-12 57 3 77 15 19 41 19 44 25 4 6 5 18 7 25 7 19 18 37 34 51 5 5 19 10 22 17 7 15-7 48-18 59-20 21-55 25-81 36-20 7-39 16-57 28-31 20-54 49-62 85-1 5-5 13-3 18 1 5 13 12 16 15 84 71 193 107 302 102 56-3 112-16 164-39 40-18 77-42 111-71 2-2 9-6 10-10 2-5-1-14-3-20-11-43-45-73-83-93-16-8-32-15-49-21-31-11-67-17-80-52-17-44 3-37 26-63 11-12 19-26 25-41 3-7 3-22 8-27 10-11 42 1 54-48 5-19 5-48-16-60-4-2-10-2-14-4-3-2-6-3-7-7-2-8 3-20 4-29 1-16 0-34-4-50-6-25-18-47-34-67-36-42-90-62-144-58z" fill="#fcf3de" stroke="#fcf3de"/></g><g id="charcoal" data-name="Charcoal"><path d="M489 29c-259 14-465 239-454 498 12 265 239 462 500 451 257-11 472-238 453-498s-234-465-499-451zM837 802c-22-58-35-80-91-111-21-12-44-21-67-29-14-5-30-7-43-16-8-5-18-18-17-29 0-2 0-3 2-5 2-5 16-13 20-18 9-9 17-20 23-32 4-8 10-29 14-34s25-12 33-20c33-31 44-117-8-134 0-13 2-26 1-39-4-68-46-129-106-158-75-37-168-20-226 40-26 27-45 64-50 102-1 8 0 53-1 54-1 3-7 5-10 7-16 11-25 31-26 50-2 32 10 68 38 86 6 4 13 5 19 9 1 1 3 1 4 2 4 4 5 15 7 20 11 27 29 50 52 66 0 12-4 23-14 31-15 14-43 17-62 24-17 7-33 14-49 22-45 24-82 62-93 113-38-39-67-89-88-139-113-284 109-601 413-601 172 0 321 98 398 251 66 133 57 295-22 421-14 23-31 48-51 67zM496 183c54-4 108 16 144 58 16 20 28 42 34 67 4 16 5 34 4 50-1 9-6 21-4 29 1 4 4 5 7 7 4 2 10 2 14 4 21 12 21 41 16 60-12 49-44 37-54 48-5 5-5 20-8 27-6 15-14 29-25 41-23 26-43 19-26 63 13 35 49 41 80 52 17 6 33 13 49 21 38 20 72 50 83 93 2 6 5 15 3 20-1 4-8 8-10 10-34 29-71 53-111 71-52 23-108 36-164 39-109 5-218-31-302-102-3-3-15-10-16-15-2-5 2-13 3-18 8-36 31-65 62-85 18-12 37-21 57-28 26-11 61-15 81-36 11-11 25-44 18-59-3-7-17-12-22-17-16-14-27-32-34-51-2-7-3-19-7-25-3-6-29-6-44-25-15-20-20-57-3-77 9-11 28-7 29-21 1-11-5-32-4-47 1-27 10-54 25-77 27-43 74-73 125-77z" fill="#2f3336" stroke="#2f3336"/></g></svg>

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

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

import ProfileFrameSvg from "./profile-frame.jsx"; // from the React tab above

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