diff --git a/apps/dashboard/src/components/buttons/MismatchButton.tsx b/apps/dashboard/src/components/buttons/MismatchButton.tsx
index 62c4bf004b7..b5812db8da8 100644
--- a/apps/dashboard/src/components/buttons/MismatchButton.tsx
+++ b/apps/dashboard/src/components/buttons/MismatchButton.tsx
@@ -25,7 +25,6 @@ import {
   useBreakpointValue,
   useDisclosure,
 } from "@chakra-ui/react";
-import { AiOutlineWarning } from "@react-icons/all-files/ai/AiOutlineWarning";
 import { useQuery } from "@tanstack/react-query";
 import { FaucetButton } from "app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton";
 import { GiftIcon } from "app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/icons/GiftIcon";
@@ -36,7 +35,7 @@ import type {
 import { getSDKTheme } from "app/components/sdk-component-theme";
 import { LOCAL_NODE_PKEY } from "constants/misc";
 import { useTrack } from "hooks/analytics/useTrack";
-import { ExternalLinkIcon } from "lucide-react";
+import { ExternalLinkIcon, TriangleAlertIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import Link from "next/link";
 import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
@@ -448,7 +447,7 @@ const MismatchNotice: React.FC<{
     <div className="flex flex-col gap-4">
       <Heading size="label.lg">
         <div className="flex flex-row items-center gap-2">
-          <Icon boxSize={6} as={AiOutlineWarning} />
+          <TriangleAlertIcon className="size-6" />
           <span>Network Mismatch</span>
         </div>
       </Heading>
diff --git a/apps/dashboard/src/components/hackathon/HacakthonEarnFooter.tsx b/apps/dashboard/src/components/hackathon/HacakthonEarnFooter.tsx
index 828dca3d5f1..5cc8d101b9f 100644
--- a/apps/dashboard/src/components/hackathon/HacakthonEarnFooter.tsx
+++ b/apps/dashboard/src/components/hackathon/HacakthonEarnFooter.tsx
@@ -1,7 +1,7 @@
 import { Flex, Icon } from "@chakra-ui/react";
-import { ImMagicWand } from "@react-icons/all-files/im/ImMagicWand";
 import { ChakraNextImage } from "components/Image";
 import { useTrack } from "hooks/analytics/useTrack";
+import { WandIcon } from "lucide-react";
 import { FiSearch } from "react-icons/fi";
 import { Heading, LinkButton } from "tw-components";
 
@@ -60,7 +60,7 @@ export const HackathonEarnFooter = ({
           h="68px"
           w={{ base: "90%", md: 80 }}
           fontSize="20px"
-          leftIcon={<Icon as={ImMagicWand} />}
+          leftIcon={<WandIcon className="size-6" />}
           color="black"
           flexShrink={0}
           background="rgba(255,255,255,1)"
diff --git a/apps/dashboard/src/components/hackathon/HackathonFooter.tsx b/apps/dashboard/src/components/hackathon/HackathonFooter.tsx
index 3209aa1ae6d..19e18f1a22b 100644
--- a/apps/dashboard/src/components/hackathon/HackathonFooter.tsx
+++ b/apps/dashboard/src/components/hackathon/HackathonFooter.tsx
@@ -1,7 +1,7 @@
 import { Flex, Icon } from "@chakra-ui/react";
-import { ImMagicWand } from "@react-icons/all-files/im/ImMagicWand";
 import { ChakraNextImage } from "components/Image";
 import { useTrack } from "hooks/analytics/useTrack";
+import { WandIcon } from "lucide-react";
 import { FiSearch } from "react-icons/fi";
 import { Heading, LinkButton } from "tw-components";
 
@@ -56,7 +56,7 @@ export const HackathonFooter = ({
           h="68px"
           w={{ base: "90%", md: 80 }}
           fontSize="20px"
-          leftIcon={<Icon as={ImMagicWand} />}
+          leftIcon={<WandIcon className="size-6" />}
           color="black"
           flexShrink={0}
           background="rgba(255,255,255,1)"
diff --git a/apps/dashboard/src/components/hackathon/common/ScheduleSection.tsx b/apps/dashboard/src/components/hackathon/common/ScheduleSection.tsx
index fa05c8db7b8..fe4cd767ff6 100644
--- a/apps/dashboard/src/components/hackathon/common/ScheduleSection.tsx
+++ b/apps/dashboard/src/components/hackathon/common/ScheduleSection.tsx
@@ -1,6 +1,6 @@
-import { Flex, Icon, LinkBox, LinkOverlay } from "@chakra-ui/react";
-import { BiRightArrowAlt } from "@react-icons/all-files/bi/BiRightArrowAlt";
+import { Flex, LinkBox, LinkOverlay } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
+import { MoveRightIcon } from "lucide-react";
 import { Badge, Heading, LinkButton, Text } from "tw-components";
 
 interface ScheduleItem {
@@ -108,14 +108,7 @@ export const ScheduleSection: React.FC<ScheduleSectionProps> = ({
                 </Flex>
               </LinkOverlay>
             </Flex>
-            <Icon
-              as={BiRightArrowAlt}
-              boxSize={6}
-              color="gray.300"
-              _groupHover={{ color: "#e984f3" }}
-              display={{ base: "none", md: "block" }}
-              marginLeft="auto"
-            />
+            <MoveRightIcon className="ml-auto hidden size-4 text-gray-300 md:block" />
           </Flex>
         ))}
       </Flex>
diff --git a/apps/dashboard/src/components/homepage/AnimatedCLICommand/AnimatedCLICommand.tsx b/apps/dashboard/src/components/homepage/AnimatedCLICommand/AnimatedCLICommand.tsx
deleted file mode 100644
index 9f8d494b55d..00000000000
--- a/apps/dashboard/src/components/homepage/AnimatedCLICommand/AnimatedCLICommand.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Icon, IconButton } from "@chakra-ui/react";
-import { IoMdCheckmark } from "@react-icons/all-files/io/IoMdCheckmark";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useClipboard } from "hooks/useClipboard";
-import { FiCopy } from "react-icons/fi";
-
-export const CopyButton: React.FC<{ text: string }> = ({ text }) => {
-  const { onCopy, hasCopied } = useClipboard(text);
-  const trackEvent = useTrack();
-  return (
-    <IconButton
-      ml="auto"
-      borderRadius="md"
-      variant="ghost"
-      colorScheme="whiteAlpha"
-      size="sm"
-      aria-label="Copy npx command"
-      onClick={() => {
-        onCopy();
-        trackEvent({
-          category: "hero-section",
-          action: "copy",
-          label: "npx command",
-        });
-      }}
-      icon={
-        <Icon
-          as={hasCopied ? IoMdCheckmark : FiCopy}
-          fill={hasCopied ? "green.500" : undefined}
-        />
-      }
-    />
-  );
-};
diff --git a/apps/dashboard/src/components/homepage/CodeBlock/index.tsx b/apps/dashboard/src/components/homepage/CodeBlock/index.tsx
index 0bed55186d7..0c81924baa0 100644
--- a/apps/dashboard/src/components/homepage/CodeBlock/index.tsx
+++ b/apps/dashboard/src/components/homepage/CodeBlock/index.tsx
@@ -8,12 +8,11 @@ import {
   useColorModeValue,
   useTheme,
 } from "@chakra-ui/react";
-import { IoMdCheckmark } from "@react-icons/all-files/io/IoMdCheckmark";
 import { useClipboard } from "hooks/useClipboard";
+import { CheckIcon, CopyIcon } from "lucide-react";
 import { Highlight, themes } from "prism-react-renderer";
 import { useEffect, useRef, useState } from "react";
 import { BsLightning } from "react-icons/bs";
-import { FiCopy } from "react-icons/fi";
 import { useInView } from "react-intersection-observer";
 import { Text } from "tw-components";
 
@@ -162,10 +161,11 @@ export const HomePageCodeBlock: React.FC<CodeBlockProps> = ({
               colorScheme="gray"
               size="sm"
               icon={
-                <Icon
-                  as={hasCopied ? IoMdCheckmark : FiCopy}
-                  fill={hasCopied ? "green.500" : undefined}
-                />
+                hasCopied ? (
+                  <CheckIcon className="size-4 text-green-500" />
+                ) : (
+                  <CopyIcon className="size-4" />
+                )
               }
             />
           )}
diff --git a/apps/dashboard/src/components/product-pages/common/nav/MobileMenu.tsx b/apps/dashboard/src/components/product-pages/common/nav/MobileMenu.tsx
index 5bb94132c2e..5cbeef404be 100644
--- a/apps/dashboard/src/components/product-pages/common/nav/MobileMenu.tsx
+++ b/apps/dashboard/src/components/product-pages/common/nav/MobileMenu.tsx
@@ -1,7 +1,6 @@
 import {
   Flex,
   type FlexProps,
-  Icon,
   IconButton,
   ListItem,
   UnorderedList,
@@ -106,7 +105,7 @@ const MobileNavSection: React.FC<MobileNavSectionProps> = ({
               size="label.md"
               onClick={onItemClick}
             >
-              {link.icon ? (
+              {link.icon && (
                 <ChakraNextImage
                   alt=""
                   boxSize={5}
@@ -114,9 +113,7 @@ const MobileNavSection: React.FC<MobileNavSectionProps> = ({
                   sizes="40px"
                   w={5}
                 />
-              ) : link.iconType ? (
-                <Icon as={link.iconType} h={4} w={5} />
-              ) : null}
+              )}
               {link.name}
             </Heading>
           </ListItem>
diff --git a/apps/dashboard/src/components/product-pages/common/nav/NavCard.tsx b/apps/dashboard/src/components/product-pages/common/nav/NavCard.tsx
index a0418fcfb21..e5dd574eb1e 100644
--- a/apps/dashboard/src/components/product-pages/common/nav/NavCard.tsx
+++ b/apps/dashboard/src/components/product-pages/common/nav/NavCard.tsx
@@ -1,4 +1,4 @@
-import { Box, Icon, Stack } from "@chakra-ui/react";
+import { Box, Stack } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { Text, TrackedLink } from "tw-components";
 import type { SectionItemProps, SectionProps } from "./types";
@@ -9,7 +9,6 @@ export const NavCard: React.FC<SectionItemProps | SectionProps> = ({
   label,
   link,
   icon,
-  iconType,
   comingSoon,
 }) => {
   return (
@@ -26,14 +25,6 @@ export const NavCard: React.FC<SectionItemProps | SectionProps> = ({
           {icon && (
             <ChakraNextImage boxSize={7} mb="-4px" src={icon} alt="icon" />
           )}
-          {iconType && (
-            <Icon
-              as={iconType}
-              color={comingSoon ? "whiteAlpha.400" : "white"}
-              boxSize={6}
-              mr={2}
-            />
-          )}
           <div className="flex flex-col">
             <Text
               fontWeight="bold"
diff --git a/apps/dashboard/src/components/product-pages/common/nav/ProductNavCard.tsx b/apps/dashboard/src/components/product-pages/common/nav/ProductNavCard.tsx
index 62a0838a7f6..357a1fdbd65 100644
--- a/apps/dashboard/src/components/product-pages/common/nav/ProductNavCard.tsx
+++ b/apps/dashboard/src/components/product-pages/common/nav/ProductNavCard.tsx
@@ -1,5 +1,4 @@
 import { Box, Stack } from "@chakra-ui/react";
-import type { IconType } from "@react-icons/all-files";
 import type { StaticImageData } from "next/image";
 import { Text } from "tw-components";
 
@@ -8,7 +7,6 @@ interface ProductSectionItemProps {
   description: string;
   href?: string;
   icon?: StaticImageData;
-  iconType?: IconType;
   comingSoon?: boolean;
   selected: boolean;
 }
diff --git a/apps/dashboard/src/components/product-pages/common/nav/types.ts b/apps/dashboard/src/components/product-pages/common/nav/types.ts
index 4b2aabcd016..1f353862c9d 100644
--- a/apps/dashboard/src/components/product-pages/common/nav/types.ts
+++ b/apps/dashboard/src/components/product-pages/common/nav/types.ts
@@ -1,4 +1,3 @@
-import type { IconType } from "@react-icons/all-files";
 import type { StaticImageData } from "next/image";
 
 export interface SectionProps {
@@ -8,7 +7,6 @@ export interface SectionProps {
   icon?: StaticImageData;
   link?: string;
   section?: "contracts-v2" | "connect-v2" | "engine-v2";
-  iconType?: IconType;
   comingSoon?: boolean;
 }
 
@@ -20,7 +18,6 @@ export interface SectionItemProps {
   link: string;
   dashboardLink?: string;
   icon?: StaticImageData;
-  iconType?: IconType;
   comingSoon?: boolean;
   inLandingPage?: boolean;
   section:
diff --git a/apps/dashboard/src/components/shared/FileInput.tsx b/apps/dashboard/src/components/shared/FileInput.tsx
index edeacaa4818..d973b46716d 100644
--- a/apps/dashboard/src/components/shared/FileInput.tsx
+++ b/apps/dashboard/src/components/shared/FileInput.tsx
@@ -1,9 +1,8 @@
 /* eslint-disable @next/next/no-img-element */
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { AiFillEye } from "@react-icons/all-files/ai/AiFillEye";
-import { AiOutlineFileAdd } from "@react-icons/all-files/ai/AiOutlineFileAdd";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
+import { EyeIcon, FilePlusIcon } from "lucide-react";
 import Link from "next/link";
 import { useCallback } from "react";
 import {
@@ -182,14 +181,14 @@ export const FileInput: React.FC<IFileInputProps> = ({
               disabled={isDisabled}
               className="gap-2"
             >
-              <AiOutlineFileAdd className="size-4" />
-              {selectOrUpload} {helperTextOrFile}
+              <FilePlusIcon className="size-4" /> {selectOrUpload}{" "}
+              {helperTextOrFile}
             </Button>
           )}
           {noDisplay && (
             <Link href={fileUrl} target="_blank" className="no-underline">
               <Button variant="outline" className="gap-2">
-                <AiFillEye className="size-4" />
+                <EyeIcon className="size-4" />
                 View File
               </Button>
             </Link>
diff --git a/apps/dashboard/src/contract-ui/tabs/embed/components/embed-setup.tsx b/apps/dashboard/src/contract-ui/tabs/embed/components/embed-setup.tsx
index a40f430281e..b753a8becaf 100644
--- a/apps/dashboard/src/contract-ui/tabs/embed/components/embed-setup.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/embed/components/embed-setup.tsx
@@ -9,13 +9,12 @@ import {
   Stack,
   useBreakpointValue,
 } from "@chakra-ui/react";
-import { IoMdCheckmark } from "@react-icons/all-files/io/IoMdCheckmark";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useClipboard } from "hooks/useClipboard";
 import { useTxNotifications } from "hooks/useTxNotifications";
+import { CheckIcon, CopyIcon } from "lucide-react";
 import { useMemo } from "react";
 import { useForm } from "react-hook-form";
-import { FiCopy } from "react-icons/fi";
 import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import {
@@ -567,7 +566,13 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
                 chainId,
               });
             }}
-            leftIcon={hasCopied ? <IoMdCheckmark /> : <FiCopy />}
+            leftIcon={
+              hasCopied ? (
+                <CheckIcon className="size-4" />
+              ) : (
+                <CopyIcon className="size-4" />
+              )
+            }
           >
             {hasCopied ? "Copied!" : "Copy to clipboard"}
           </Button>
diff --git a/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx b/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx
index 8e44a65d931..9e1ced5167d 100644
--- a/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx
@@ -23,9 +23,9 @@ import {
   Switch,
   Tooltip,
 } from "@chakra-ui/react";
-import { AiOutlineQuestionCircle } from "@react-icons/all-files/ai/AiOutlineQuestionCircle";
 import { AnimatePresence, motion } from "framer-motion";
 import { useClipboard } from "hooks/useClipboard";
+import { CircleHelpIcon } from "lucide-react";
 import { useSearchParams } from "next/navigation";
 import { useRouter } from "next/router";
 import { Fragment, useMemo, useState } from "react";
@@ -398,7 +398,7 @@ const TransactionData: React.FC<TransactionDataProps> = ({
             }
           >
             <div className="flex items-center justify-center">
-              <Icon as={AiOutlineQuestionCircle} color="gray.600" />
+              <CircleHelpIcon className="size-4 text-gray-600" />
             </div>
           </Tooltip>
 
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/claim-button.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/claim-button.tsx
index 8c7b8fcee6d..041cfad2d60 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/claim-button.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/claim-button.tsx
@@ -1,5 +1,5 @@
-import { Icon, useDisclosure } from "@chakra-ui/react";
-import { GiDiamondHard } from "@react-icons/all-files/gi/GiDiamondHard";
+import { useDisclosure } from "@chakra-ui/react";
+import { GemIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb";
 import { Button, Drawer } from "tw-components";
 import { NFTClaimForm } from "./claim-form";
@@ -28,7 +28,7 @@ export const NFTClaimButton: React.FC<NFTClaimButtonProps> = ({ contract }) => {
       </Drawer>
       <Button
         colorScheme="primary"
-        leftIcon={<Icon as={GiDiamondHard} />}
+        leftIcon={<GemIcon className="size-4" />}
         onClick={onOpen}
       >
         Claim
diff --git a/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx b/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx
index 49fb75ba56d..980c222403c 100644
--- a/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx
+++ b/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx
@@ -13,11 +13,10 @@ import {
   Textarea,
 } from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AiFillEye } from "@react-icons/all-files/ai/AiFillEye";
-import { AiFillEyeInvisible } from "@react-icons/all-files/ai/AiFillEyeInvisible";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { FileInput } from "components/shared/FileInput";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { useRef, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { useForm } from "react-hook-form";
@@ -396,10 +395,17 @@ const SelectReveal: React.FC<SelectRevealProps> = ({
                         type={show ? "text" : "password"}
                       />
                       <InputRightElement cursor="pointer">
-                        <Icon
-                          as={show ? AiFillEye : AiFillEyeInvisible}
-                          onClick={() => setShow(!show)}
-                        />
+                        {show ? (
+                          <EyeIcon
+                            onClick={() => setShow(!show)}
+                            className="size-3"
+                          />
+                        ) : (
+                          <EyeOffIcon
+                            onClick={() => setShow(!show)}
+                            className="size-3"
+                          />
+                        )}
                       </InputRightElement>
                     </InputGroup>
 
diff --git a/apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx b/apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx
index 2f955ceb3e2..22da997eca0 100644
--- a/apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx
+++ b/apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx
@@ -1,12 +1,5 @@
-import {
-  Flex,
-  Icon,
-  Radio,
-  Stack,
-  type StackProps,
-  Tooltip,
-} from "@chakra-ui/react";
-import { AiOutlineInfoCircle } from "@react-icons/all-files/ai/AiOutlineInfoCircle";
+import { Flex, Radio, Stack, type StackProps, Tooltip } from "@chakra-ui/react";
+import { InfoIcon } from "lucide-react";
 import type { MouseEventHandler } from "react";
 import { Card, Heading, Text } from "tw-components";
 
@@ -97,7 +90,7 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
                 }
               >
                 <Flex alignItems="center">
-                  <Icon as={AiOutlineInfoCircle} boxSize={5} />
+                  <InfoIcon className="size-4" />
                 </Flex>
               </Tooltip>
             </div>
diff --git a/apps/dashboard/src/pages/hackathon/consumer-crypto.tsx b/apps/dashboard/src/pages/hackathon/consumer-crypto.tsx
index dd59a980ab7..54633060195 100644
--- a/apps/dashboard/src/pages/hackathon/consumer-crypto.tsx
+++ b/apps/dashboard/src/pages/hackathon/consumer-crypto.tsx
@@ -1,6 +1,5 @@
 import { useForceDarkTheme } from "@/components/theme-provider";
-import { Box, Divider, Flex, Icon, ListItem } from "@chakra-ui/react";
-import { ImMagicWand } from "@react-icons/all-files/im/ImMagicWand";
+import { Box, Divider, Flex, ListItem } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import FAQ from "components/hackathon/FAQ";
 import { HackathonFooter } from "components/hackathon/HackathonFooter";
@@ -13,6 +12,7 @@ import { HomepageTopNav } from "components/product-pages/common/Topnav";
 import { HomepageSection } from "components/product-pages/homepage/HomepageSection";
 import { useTrack } from "hooks/analytics/useTrack";
 import { getAbsoluteUrl } from "lib/vercel-utils";
+import { WandIcon } from "lucide-react";
 import { NextSeo } from "next-seo";
 import dynamic from "next/dynamic";
 import { PageId } from "page-id";
@@ -138,7 +138,7 @@ const Hackathon = () => {
               h="68px"
               w={{ base: "100%", md: 96 }}
               fontSize="20px"
-              leftIcon={<Icon as={ImMagicWand} />}
+              leftIcon={<WandIcon className="size-6" />}
               color="black"
               flexShrink={0}
               background="rgba(255,255,255,1)"
diff --git a/apps/dashboard/src/pages/hackathon/earn.tsx b/apps/dashboard/src/pages/hackathon/earn.tsx
index 42f1d24b55e..c6bb916eeed 100644
--- a/apps/dashboard/src/pages/hackathon/earn.tsx
+++ b/apps/dashboard/src/pages/hackathon/earn.tsx
@@ -1,6 +1,5 @@
 import { useForceDarkTheme } from "@/components/theme-provider";
-import { Box, Divider, Flex, Icon, ListItem } from "@chakra-ui/react";
-import { ImMagicWand } from "@react-icons/all-files/im/ImMagicWand";
+import { Box, Divider, Flex, ListItem } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import EarnReasonSection from "components/hackathon/EarnReasonSection";
 import FAQEarn from "components/hackathon/FAQEarn";
@@ -12,6 +11,7 @@ import { HomepageTopNav } from "components/product-pages/common/Topnav";
 import { HomepageSection } from "components/product-pages/homepage/HomepageSection";
 import { useTrack } from "hooks/analytics/useTrack";
 import { getAbsoluteUrl } from "lib/vercel-utils";
+import { WandIcon } from "lucide-react";
 import { NextSeo } from "next-seo";
 import dynamic from "next/dynamic";
 import { PageId } from "page-id";
@@ -149,7 +149,7 @@ const HackathonEarn = () => {
               h="68px"
               w={{ base: "100%", md: 96 }}
               fontSize="20px"
-              leftIcon={<Icon as={ImMagicWand} />}
+              leftIcon={<WandIcon className="size-6" />}
               color="black"
               flexShrink={0}
               background="rgba(255,255,255,1)"
diff --git a/apps/dashboard/src/pages/template/[id].tsx b/apps/dashboard/src/pages/template/[id].tsx
index a9b07d9c202..6ed0988002d 100644
--- a/apps/dashboard/src/pages/template/[id].tsx
+++ b/apps/dashboard/src/pages/template/[id].tsx
@@ -1,6 +1,6 @@
 import { useForceDarkTheme } from "@/components/theme-provider";
+import { CopyButton } from "@/components/ui/CopyButton";
 import { Box, Flex, Image } from "@chakra-ui/react";
-import { CopyButton } from "components/homepage/AnimatedCLICommand/AnimatedCLICommand";
 import { ProductButton } from "components/product-pages/common/ProductButton";
 import { HomepageTopNav } from "components/product-pages/common/Topnav";
 import type { GetStaticPaths, GetStaticProps } from "next";
@@ -36,6 +36,7 @@ const CodeBlock: React.FC<{ text: string }> = (props) => {
       gap={1}
       align="center"
       alignSelf="start"
+      justifyContent="space-between"
     >
       <Text color="white" fontFamily="mono" fontSize="16px" fontWeight="500">
         <span>{props.text}</span>
diff --git a/apps/dashboard/src/tw-components/code-block.tsx b/apps/dashboard/src/tw-components/code-block.tsx
index 4f3e1185a96..dd1a5eca504 100644
--- a/apps/dashboard/src/tw-components/code-block.tsx
+++ b/apps/dashboard/src/tw-components/code-block.tsx
@@ -4,14 +4,12 @@ import {
   Box,
   Code,
   type CodeProps,
-  Icon,
   IconButton,
   useColorModeValue,
 } from "@chakra-ui/react";
-import { IoMdCheckmark } from "@react-icons/all-files/io/IoMdCheckmark";
 import { useClipboard } from "hooks/useClipboard";
+import { CheckIcon, CopyIcon } from "lucide-react";
 import { Highlight, Prism, themes } from "prism-react-renderer";
-import { FiCopy } from "react-icons/fi";
 import { Text } from "./text";
 
 const darkThemeDefault = themes.vsDark;
@@ -103,10 +101,11 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
               colorScheme="gray"
               size="sm"
               icon={
-                <Icon
-                  as={hasCopied ? IoMdCheckmark : FiCopy}
-                  fill={hasCopied ? "green.500" : undefined}
-                />
+                hasCopied ? (
+                  <CheckIcon className="size-4 text-green-500" />
+                ) : (
+                  <CopyIcon className="size-4" />
+                )
               }
             />
           )}