Hexagon Frame SVG element, flat

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="amber" data-name="Amber"><path d="M512 63c-35 16-81 47-116 67-71 41-143 82-214 123-57 32-49 14-49 82 0 43 0 86 0 130 0 86 0 173 0 259l379 218c40-20 79-45 118-68 70-41 142-81 213-122 6-4 46-25 47-28 3-6 1-44 1-53 0-44 0-87 0-130 0-87 0-174 0-260zM240 664c0-99 0-196 0-294 0-8-3-21 1-28 2-3 66-39 75-43 31-18 62-36 93-54 32-18 62-36 94-54 2-1 6-5 9-5 7 1 73 42 84 48 32 18 63 36 94 54 10 6 92 51 93 54 4 7 1 129 1 147 0 49 0 98 0 147 0 7 3 20-1 27-2 4-66 38-75 44-31 18-62 36-93 54-31 17-62 36-93 53-3 2-7 5-10 5-6 0-74-42-84-48-45-26-91-51-135-77-18-10-35-22-53-30z" fill="#fcc102" stroke="#fcc102"/></g><g id="black" data-name="Black"><path d="M512 36l-403 232v469l403 232c31-19 63-35 93-53 61-36 122-71 183-105 13-8 125-71 126-74 2-5 1-13 1-17 0-73 0-145 0-217 0-73 0-146 0-218 0-6 1-13-1-17-2-5-112-66-126-74-92-52-184-104-276-158zm0 27l379 218c0 86 0 173 0 260 0 43 0 86 0 130 0 9 2 47-1 53-1 3-41 24-47 28-71 41-143 81-213 122-39 23-78 48-118 68l-379-218c0-86 0-173 0-259 0-44 0-87 0-130 0-68-8-50 49-82 71-41 143-82 214-123 35-20 81-51 116-67z" fill="#292926" stroke="#292926"/><path d="M240 664c18 8 35 20 53 30 44 26 90 51 135 77 10 6 78 48 84 48 3 0 7-3 10-5 31-17 62-36 93-53 31-18 62-36 93-54 9-6 73-40 75-44 4-7 1-20 1-27 0-49 0-98 0-147 0-18 3-140-1-147-1-3-83-48-93-54-31-18-62-36-94-54-11-6-77-47-84-48-3 0-7 4-9 5-32 18-62 36-94 54-31 18-62 36-93 54-9 4-73 40-75 43-4 7-1 20-1 28 0 98 0 195 0 294zM761 356v293l-249 144c-23-17-53-31-78-45-52-30-103-60-154-89-4-2-15-5-17-10-3-8 0-54 0-65 0-31 0-62 0-92 0-31 0-62 0-92 0-48-9-39 31-62 38-22 77-44 116-66 13-8 95-58 102-59 5 0 11 6 15 8 56 32 112 65 168 97 22 12 45 24 66 38z" fill="#292926" stroke="#292926"/></g></svg>

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

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

import HexagonFrameSvg from "./hexagon-frame.jsx"; // from the React tab above

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