Migrate from using react-icons

src/GoogleAuth/GoogleAuth.tsx

@@ -1,7 +1,7 @@
 import { IconButton } from "@chakra-ui/react";
-import { FcGoogle } from "react-icons/fc";
 
 import { getGoogleCredentials } from "./getGoogleCredentials";
+import { GoogleIcon } from "../assets/icons";
 import colors from "../style/colors";
 import { useAsyncActionHandler } from "../utils/hooks/useAsyncActionHandler";
 
@@ -37,7 +37,7 @@ export const GoogleAuth: React.FC<{ onAuth: (secretKey: string, email: string) =
       _disabled={{ bg: colors.gray[900] }}
       aria-label="Google SSO"
       data-testid="google-auth-button"
-      icon={<FcGoogle size="24px" />}
+      icon={<GoogleIcon />}
       isLoading={isLoading}
       onClick={onClick}
       size="lg"

src/assets/icons/Google.tsx

@@ -0,0 +1,29 @@
+import { Icon, IconProps } from "@chakra-ui/react";
+
+export const GoogleIcon: React.FC<IconProps> = props => (
+  <Icon
+    width="24px"
+    height="24px"
+    fill="none"
+    viewBox="0 0 48 48"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path // yellow
+      d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z" // yellow
+      fill="#FFC107"
+    />
+    <path // red
+      d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z" // red
+      fill="#FF3D00"
+    />
+    <path // green
+      d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z" // green
+      fill="#4CAF50"
+    />
+    <path // blue
+      d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"
+      fill="#1976D2"
+    />
+  </Icon>
+);

src/assets/icons/Ledger.tsx

@@ -1,14 +1,18 @@
 import { Icon, IconProps } from "@chakra-ui/react";
-import { MdUsb } from "react-icons/md";
+
+import colors from "../../style/colors";
 
 export const LedgerIcon: React.FC<IconProps> = props => (
   <Icon
-    as={MdUsb}
     width="18px"
     height="18px"
+    fill={colors.gray[400]}
     data-testid="ledger-icon"
-    viewBox="0 0 18 18"
+    strokeWidth="0"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
-  />
+  >
+    <path d="M15 7v4h1v2h-3V5h2l-3-4-3 4h2v8H8v-2.07c.7-.37 1.2-1.08 1.2-1.93 0-1.21-.99-2.2-2.2-2.2-1.21 0-2.2.99-2.2 2.2 0 .85.5 1.56 1.2 1.93V13c0 1.11.89 2 2 2h3v3.05c-.71.37-1.2 1.1-1.2 1.95a2.2 2.2 0 0 0 4.4 0c0-.85-.49-1.58-1.2-1.95V15h3c1.11 0 2-.89 2-2v-2h1V7h-4z" />
+  </Icon>
 );

src/assets/icons/index.tsx

@@ -31,6 +31,7 @@ export * from "./FileArrowDown";
 export * from "./FileCopy";
 export * from "./FlipForwardEnergy";
 export * from "./Gear";
+export * from "./Google";
 export * from "./Help";
 export * from "./Hourglass";
 export * from "./IncomingArrow";

src/components/AddressTile/AddressTileIcon.tsx

@@ -61,14 +61,7 @@ export const AddressTileIcon: React.FC<{
         />
       );
     case "ledger":
-      return (
-        <LedgerIcon
-          width={sizeInPx}
-          height={sizeInPx}
-          {...baseIconProps}
-          color={colors.gray[400]}
-        />
-      );
+      return <LedgerIcon width={sizeInPx} height={sizeInPx} {...baseIconProps} />;
     case "multisig":
       return <KeyIcon width={sizeInPx} height={sizeInPx} {...baseIconProps} />;
     case "contact":