Pen Cursor SVG element, flat

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/16S23Tv6M2BE/amnt.svg" alt="Pen Cursor" width="48" height="48">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="turquoise" data-name="Turquoise"><path d="M568 247c-74 93-129 144-241 191 0 79-6 140-23 218-10 45-23 89-37 133-5 17-13 35-16 52l189-280c-42-47 28-138 93-88 24 19 32 54 17 82-9 17-27 31-48 34-4 0-10-1-15 1-2 1-5 7-6 9-60 93-127 181-186 274 17-11 32-27 48-40 36-30 74-59 113-86 40-28 81-53 124-75 20-11 42-18 62-30 0-17-2-35-1-52 3-67 20-132 48-193 8-18 19-34 28-52-8-8-19-15-28-22-38-28-79-52-121-76z" fill="#02aeac" stroke="#02aeac"/><path d="M771 322c6-7 28-37 26-45-1-5-18-18-22-22-21-19-43-36-67-52s-49-30-75-43c-6-3-26-15-31-14-8 1-26 34-32 41 73 37 143 77 201 135z" fill="#02aeac" stroke="#02aeac"/><path d="M498 564h-10z" fill="#02aeac" stroke="#02aeac"/><path d="M454 528v-8z" fill="#02aeac" stroke="#02aeac"/><path d="M490 484h6z" fill="#02aeac" stroke="#02aeac"/><path d="M217 936v-6z" fill="#02aeac" stroke="#02aeac"/></g><g id="navy" data-name="Navy"><path d="M666 658c0-20-3-40-2-59 2-46 9-90 23-133 9-27 20-52 33-77 8-15 17-44 38-45 7 0 13 3 21 0 11-4 37-42 41-54 1-4 0-9 1-13 6-24 51-25 41-66-8-33-85-86-114-104-25-16-79-46-108-46-18 0-30 13-35 29-3 9-3 26-10 33-3 3-10 4-14 8-7 6-12 17-18 26-5 7-14 16-15 25-5 22 16 30 0 52-62 87-147 150-247 188 3 8 2 17 2 24 4 98-17 194-44 288-13 45-27 90-44 135-6 17-23 50-22 67 3 30 33 31 52 14 62-56 126-114 195-163 49-36 101-68 155-96 23-13 48-21 71-33zM771 322c-58-58-128-98-201-135 6-7 24-40 32-41 5-1 25 11 31 14 26 13 51 27 75 43s46 33 67 52c4 4 21 17 22 22 2 8-20 38-26 45zM568 247c42 24 83 48 121 76 9 7 20 14 28 22-9 18-20 34-28 52-28 61-45 126-48 193-1 17 1 35 1 52-20 12-42 19-62 30-43 22-84 47-124 75-39 27-77 56-113 86-16 13-31 29-48 40 59-93 126-181 186-274 1-2 4-8 6-9 5-2 11-1 15-1 21-3 39-17 48-34 15-28 7-63-17-82-65-50-135 41-93 88l-189 280c3-17 11-35 16-52 14-44 27-88 37-133 17-78 23-139 23-218 112-47 167-98 241-191zM454 520c-1-18 18-37 36-36h6c47-1 49 79 2 80h-10l-7-1c-17 22-31 47-47 70-27 40-55 80-81 120-18 27-117 178-133 188l-3-5v-6c7-21 36-56 49-76 50-74 101-148 150-222 13-20 44-58 51-77-7-7-13-17-13-27z" fill="#011f4d" stroke="#011f4d"/></g><g id="white" data-name="White"><path d="M496 484h-6c-18-1-37 18-36 36v8c0 10 6 20 13 27-7 19-38 57-51 77-49 74-100 148-150 222-13 20-42 55-49 76v6l3 5c16-10 115-161 133-188 26-40 54-80 81-120 16-23 30-48 47-70l7 1h10c47-1 45-81-2-80z" fill="#fcfcfc" stroke="#fcfcfc"/></g></svg>

.pen-cursor {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/16S23Tv6M2BE/amnt.svg");
  background-size: contain;
}

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

import PenCursorSvg from "./pen-cursor.jsx"; // from the React tab above

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