Ribbon A SVG logo, flat

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" width="800" height="800"><defs><radialGradient id="g0" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="1" gradientTransform="matrix(0 556 -590 0 399 339)"><stop offset="0" stop-color="#20292d"/><stop offset="0.52" stop-color="#10181c"/><stop offset="1" stop-color="#080d11"/></radialGradient><linearGradient id="g1" gradientUnits="userSpaceOnUse" x1="245" y1="554" x2="492" y2="242"><stop offset="0" stop-color="#a77b43"/><stop offset="0.24" stop-color="#dec495"/><stop offset="0.51" stop-color="#fff0ce"/><stop offset="0.76" stop-color="#e4caa0"/><stop offset="1" stop-color="#b38b55"/></linearGradient><linearGradient id="g2" gradientUnits="userSpaceOnUse" x1="413" y1="438" x2="458" y2="544"><stop offset="0" stop-color="#ebd4ac"/><stop offset="0.42" stop-color="#c8a36c"/><stop offset="1" stop-color="#8c6437"/></linearGradient><linearGradient id="g3" gradientUnits="userSpaceOnUse" x1="560" y1="562" x2="542" y2="628"><stop offset="0" stop-color="#f8e7c3"/><stop offset="0.44" stop-color="#d8b784"/><stop offset="1" stop-color="#ae824a"/></linearGradient><linearGradient id="g4" gradientUnits="userSpaceOnUse" x1="330" y1="186" x2="473" y2="634"><stop offset="0" stop-color="#fff4d9" stop-opacity="0.75"/><stop offset="0.53" stop-color="#fff4d9" stop-opacity="0.2"/><stop offset="1" stop-color="#fff4d9" stop-opacity="0.05"/></linearGradient></defs><g id="layer-1" data-name="Shape 1"><path d="M0 0L800 0L800 800L0 800Z" fill="url(#g0) #10181c"/></g><g id="layer-2" data-name="Shape 2" transform="matrix(1 0 0 1 0 17)" opacity="0.42"><g fill="none"><defs><filter id="k0_0" x="110" y="108" width="588" height="610" filterUnits="userSpaceOnUse"><feGaussianBlur stdDeviation="19"/></filter></defs><path d="M196 632 346 222C358 189 376 171 401 171C426 171 444 189 456 222L604 626C607 635 601 642 590 642H551L286 457L321 407L507 537L399 241L262 632Z" fill="#000000" filter="url(#k0_0)"/></g></g><g id="layer-3" data-name="Shape 3"><path d="M196 632L346 222C358 189 376 171 401 171C426 171 444 189 456 222L604 626C607 635 601 642 590 642L551 642L286 457L321 407L507 537L404 254C402 248 398 248 396 254L262 632Z" fill="url(#g1) #fff0ce"/></g><g id="layer-4" data-name="Shape 4"><path d="M321 407L555 570L590 642L551 642L286 457Z" fill="url(#g2) #c8a36c"/></g><g id="layer-5" data-name="Shape 5" opacity="0.36"><path d="M507 537L555 570L604 626C607 635 601 642 590 642L551 642C568 641 577 634 574 622C573 617 569 612 563 608L529 584Z" fill="#62441f"/></g><g id="layer-6" data-name="Shape 6"><path d="M456 222L604 626C607 635 601 642 590 642L551 642C567 641 575 635 574 626C573 619 569 614 563 609L537 591L404 254C402 248 398 248 396 254L401 210C419 201 440 205 456 222Z" fill="url(#g3) #d8b784"/></g><g id="layer-7" data-name="Shape 7"><path d="M197 631L347 222C359 190 377 172 401 172C425 172 443 190 455 222" fill="none" stroke="url(#g4) #fff4d9" stroke-width="1.25"/></g><g id="layer-8" data-name="Shape 8"><path d="M322 408L554 570" fill="none" stroke="#fff0ce" stroke-width="1" stroke-opacity="0.45"/></g><g id="layer-9" data-name="Shape 9"><path d="M404 254L537 591L563 609C569 614 573 619 574 626" fill="none" stroke="#fff0ce" stroke-width="1" stroke-opacity="0.32"/></g><g id="layer-10" data-name="Shape 10"><path d="M263 630L396 254" fill="none" stroke="#624b2d" stroke-width="1" stroke-opacity="0.28"/></g></svg>

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

import RibbonASvg from "./ribbon-a.jsx"; // from the React tab above

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