Square Grid SVG element, flat

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="midnight" data-name="Midnight"><path d="M193 135c-47 5-47 45-47 82 0 18 0 37 0 56 0 60 0 122 0 183 0 85 0 172 0 258 0 27-4 83 2 106 11 41 48 35 81 36 21 1 42 0 64 0 58 1 116-1 174 1 51 1 102-1 153-1 65 0 132 1 198 0 6 0 13 1 20 0 53-8 40-86 40-123 0-61 0-123 0-183 0-83 0-167 0-249 0-39 3-80 0-118-4-48-44-48-80-48-19 0-38 0-56 0-61 0-123 0-183 0-83 0-166 0-248 0-39 0-80-3-118 0zm136 22v157h-160c0-34 0-67 0-100 0-12-2-26 0-37 1-5 4-9 8-12 3-4 8-7 14-8 12-2 27 0 40 0 32 0 65 0 98 0zm21 0h152v157h-152zm173 0h151v157h-151zm173 0c32 0 64 0 97 0 13 0 27-2 40 0 6 1 11 3 14 7 5 4 8 10 9 16 2 12 0 27 0 40 0 31 0 63 0 94h-160zM329 335v154h-161v-154zm21 0h152v154h-152zm173 0h151v154h-151zm173 0h160v154h-160zM168 510h161v152h-160zm182 0h152v152h-152zm173 0h151v152h-151zm173 0h160v151l-160 1zM329 682v153c-32 0-64 0-96 0-14 0-28 2-41 0-5-1-10-3-13-6-6-5-10-12-11-20-2-12 0-26 0-38 0-30 0-60 0-89zm21 0l151 1 1 152h-152zm173 0h151v153h-151zm173 0h160c0 31 0 61 0 92 0 12 2 26 0 38-1 6-4 12-9 16-4 4-10 6-15 7-13 2-27 0-40 0-32 0-64 0-96 0z" fill="#121e2d" stroke="#121e2d"/></g><g id="blue" data-name="Blue"><path d="M329 157c-33 0-66 0-98 0-13 0-28-2-40 0-6 1-11 4-14 8-4 3-7 7-8 12-2 11 0 25 0 37 0 33 0 66 0 100h160z" fill="#1e79fb" stroke="#1e79fb"/><path d="M168 510l1 152h160v-152z" fill="#1e79fb" stroke="#1e79fb"/><path d="M523 335v154h151v-154z" fill="#1e79fb" stroke="#1e79fb"/><path d="M523 682v153h151v-153z" fill="#1e79fb" stroke="#1e79fb"/></g><g id="coral" data-name="Coral"><path d="M696 157v157h160c0-31 0-63 0-94 0-13 2-28 0-40-1-6-4-12-9-16-3-4-8-6-14-7-13-2-27 0-40 0-33 0-65 0-97 0z" fill="#fc665d" stroke="#fc665d"/><path d="M696 510v152l160-1v-151z" fill="#fc665d" stroke="#fc665d"/><path d="M350 335v154h152v-154z" fill="#fc665d" stroke="#fc665d"/><path d="M350 682v153h152l-1-152z" fill="#fc665d" stroke="#fc665d"/></g><g id="yellow" data-name="Yellow"><path d="M329 335h-161v154h161z" fill="#fcd33b" stroke="#fcd33b"/><path d="M329 682h-161c0 29 0 59 0 89 0 12-2 26 0 38 1 8 5 15 11 20 3 3 8 5 13 6 13 2 27 0 41 0 32 0 64 0 96 0z" fill="#fcd33b" stroke="#fcd33b"/><path d="M523 157v157h151v-157z" fill="#fcd33b" stroke="#fcd33b"/><path d="M523 510v152h151v-152z" fill="#fcd33b" stroke="#fcd33b"/></g><g id="turquoise" data-name="Turquoise"><path d="M696 335v154h160v-154z" fill="#0eb6ab" stroke="#0eb6ab"/><path d="M696 682v153c32 0 64 0 96 0 13 0 27 2 40 0 5-1 11-3 15-7 5-4 8-10 9-16 2-12 0-26 0-38 0-31 0-61 0-92z" fill="#0eb6ab" stroke="#0eb6ab"/><path d="M350 157v157h152v-157z" fill="#0eb6ab" stroke="#0eb6ab"/><path d="M350 510v152h152v-152z" fill="#0eb6ab" stroke="#0eb6ab"/></g></svg>

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

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

import SquareGridSvg from "./square-grid.jsx"; // from the React tab above

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