fix icons

src/components/metar/MatrixComponents.jsx

@@ -18,7 +18,6 @@ const baseStyles = {
     fontSize: '1.1em',
   },
   icon: {
-    fontSize: '1.5em',
     textAlign: 'center',
   },
   check: {
@@ -55,11 +54,49 @@ export const ValueCell = ({ children }) => (
 );
 
 export const CheckIcon = () => (
-  <span style={{ ...baseStyles.icon, ...baseStyles.check }}>✅</span>
+  <span style={{ ...baseStyles.icon, ...baseStyles.check }}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width="36"
+      height="36"
+      viewBox="0 0 48 48"
+    >
+      <path
+        fill="transparent"
+        d="M36,42H12c-3.314,0-6-2.686-6-6V12c0-3.314,2.686-6,6-6h24c3.314,0,6,2.686,6,6v24C42,39.314,39.314,42,36,42z"
+      ></path>
+      <path
+        fill="#5fd98d"
+        d="M34.585 14.586L21.014 28.172 15.413 22.584 12.587 25.416 21.019 33.828 37.415 17.414z"
+      ></path>
+    </svg>
+  </span>
 );
 
 export const CrossIcon = () => (
-  <span style={{ ...baseStyles.icon, ...baseStyles.cross }}>❌</span>
+  <span style={{ ...baseStyles.icon, ...baseStyles.cross }}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width="28"
+      height="28"
+      viewBox="0 0 48 48"
+    >
+      <path
+        fill="#f44336"
+        d="M21.5 4.5H26.501V43.5H21.5z"
+        transform="rotate(45.001 24 24)"
+      ></path>
+      <path
+        fill="#f44336"
+        d="M21.5 4.5H26.5V43.501H21.5z"
+        transform="rotate(135.008 24 24)"
+      ></path>
+    </svg>
+  </span>
 );
 
 export const HeaderRow = ({ columns, labels, align }) => (