Corner Ribbon SVG element, flat

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="navy" data-name="Navy"><path d="M633 106c-8 2-181 136-203 152-68 51-135 102-203 152-5 4-17 10-20 16-5 9-1 40-1 53 0 29 0 59 0 89 0 59 0 118 0 177 0 29 0 59 0 89 0 13-3 61 1 71 1 4 4 6 9 7 13 3 31 0 45 0 44 0 88 0 132 0 118 0 236 0 355 0 11 0 58 3 66-2 6-3 5-10 5-15 1-30 0-60 0-89 0-59 0-118 0-177 0-119 0-237 0-355 0-30 0-60 0-89 0-14 3-62-1-72-1-4-4-6-9-7-7-2-171-1-176 0z" fill="#072862" stroke="#072862"/><path d="M441 107c-9-4-181-1-206-1-7 0-20-2-25 2-7 5-4 63-4 75 0 27-4 78 1 103z" fill="#072862" stroke="#072862"/></g><g id="coral" data-name="Coral"><path d="M677 62c-29 0-144-5-163 3-13 6-25 17-37 26-43 33-86 65-129 98s-87 66-130 99c-16 12-37 23-50 39-5 5-9 13-10 21-3 26 0 78 0 108 28-28 62-50 93-74 55-41 111-82 166-124 60-45 121-91 182-137 26-19 51-42 78-59z" fill="#fc6353" stroke="#fc6353"/></g><g id="midnight" data-name="Midnight"><path d="M550 53c-41 1-51 11-82 35-4 3-9 8-14 10-14 3-39 0-53 0-28 0-179-4-192 1-5 2-9 8-11 13-4 16 0 55 0 74 0 31 1 64 0 96 0 3 1 7 0 10-4 9-36 23-44 42-9 21-4 69-4 93 0 51-4 50 36 82 3 3 10 6 12 10 3 8 0 43 0 54 0 64 0 128 0 193 0 32 0 64 0 97 0 15-8 52 14 57 7 1 17 0 25 0 64 0 128 0 193 0 64 0 129 0 194 0 28 0 176 4 191-1 6-2 10-7 11-13 5-18 1-53 1-72 0-32 0-65 0-96 0-65 0-129 0-193 0-129 0-259 0-387 0-15 5-52-10-58-8-4-19-2-27-2-12 0-62 3-70-1-4-2-8-12-10-15-7-11-12-23-25-26-16-5-112-3-135-3zm127 9c-27 17-52 40-78 59-61 46-122 92-182 137-55 42-111 83-166 124-31 24-65 46-93 74 0-30-3-82 0-108 1-8 5-16 10-21 13-16 34-27 50-39 43-33 87-66 130-99s86-65 129-98c12-9 24-20 37-26 19-8 134-3 163-3zm34 36h-68c7-5 38-33 44-32s21 26 24 32zm-270 9l-234 179c-5-25-1-76-1-103 0-12-3-70 4-75 5-4 18-2 25-2 25 0 197-3 206 1zm192-1c5-1 169-2 176 0 5 1 8 3 9 7 4 10 1 58 1 72 0 29 0 59 0 89 0 118 0 236 0 355 0 59 0 118 0 177 0 29 1 59 0 89 0 5 1 12-5 15-8 5-55 2-66 2-119 0-237 0-355 0-44 0-88 0-132 0-14 0-32 3-45 0-5-1-8-3-9-7-4-10-1-58-1-71 0-30 0-60 0-89 0-59 0-118 0-177 0-30 0-60 0-89 0-13-4-44 1-53 3-6 15-12 20-16 68-50 135-101 203-152 22-16 195-150 203-152zM198 432v78c-41-42-59-33 0-78z" fill="#02122b" stroke="#02122b"/></g><g id="red" data-name="Red"><path d="M198 432c-59 45-41 36 0 78z" fill="#cc353c" stroke="#cc353c"/><path d="M711 98c-3-6-18-31-24-32s-37 27-44 32z" fill="#cc353c" stroke="#cc353c"/></g></svg>

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

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

import CornerRibbonSvg from "./corner-ribbon.jsx"; // from the React tab above

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