use hero-icons, instead of styled-icons/heroicons

1 files changed, 6 insertions, 3 deletions

diff --git a/extension/react-app/src/components/CodeBlock.tsx b/extension/react-app/src/components/CodeBlock.tsx
index fe9b3a95..97b79ff5 100644
--- a/extension/react-app/src/components/CodeBlock.tsx
+++ b/extension/react-app/src/components/CodeBlock.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import styled from "styled-components";
 import { defaultBorderRadius, secondaryDark, vscBackground } from ".";
 
-import { Clipboard, CheckCircle } from "@styled-icons/heroicons-outline";
+import { ClipboardIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
 
 import StyledCode from "./StyledCode";
 
@@ -52,9 +52,12 @@ function CopyButton(props: { textToCopy: string; visible: boolean }) {
         }}
       >
         {clicked ? (
-          <CheckCircle color="#00ff00" size="1.5em" />
+          <CheckCircleIcon color="#00ff00" className="h-6 w-6" />
         ) : (
-          <Clipboard color={hovered ? "#00ff00" : "white"} size="1.5em" />
+          <ClipboardIcon
+            color={hovered ? "#00ff00" : "white"}
+            className="h-6 w-6"
+          />
         )}
       </StyledCopyButton>
     </>