KanvasIcon.js

import React from "react";

function KanvasIcon() {
  return (
    <svg
      width="24px"
      height="24px"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 500 500"
    >
      <defs>
        <style>
          {`
            .cls-1 {
              fill: #0bd0a7;
            }
            .cls-2 {
              fill: #04b19d;
            }
          `}
        </style>
      </defs>
      <g id="Layer_2" data-name="Layer 2">
        <g id="Layer_1-2" data-name="Layer 1">
          <polygon
            className="cls-1"
            points="261.82 30.1 261.82 228.75 433.99 129.07 261.82 30.1"
          />
          <polygon
            className="cls-1"
            points="261.82 270.3 261.82 469.9 435.56 370.56 261.82 270.3"
          />
          <polygon
            className="cls-2"
            points="237.03 227.38 237.03 31.77 66.97 129.25 237.03 227.38"
          />
          <polygon
            className="cls-2"
            points="237.03 468.98 237.03 271.74 66.56 370.43 237.03 468.98"
          />
          <polygon
            className="cls-2"
            points="447.37 348.75 447.37 149.97 275.4 249.52 447.37 348.75"
          />
          <polygon
            className="cls-1"
            points="52.63 149.59 52.63 349.85 225.87 249.56 52.63 149.59"
          />
        </g>
      </g>
    </svg>
  );
}

export default KanvasIcon;