From d1d3fdc7327277a7ca61fdeaa92f19e57496ddea Mon Sep 17 00:00:00 2001
From: kien-ngo <github@kien.ngo>
Date: Thu, 3 Oct 2024 12:29:57 +0000
Subject: [PATCH] [Dashboard] Remove react-icons (2) (#4885)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on replacing icon imports from `react-icons` with corresponding icons from `lucide-react` across multiple components, enhancing consistency and potentially reducing bundle size.

### Detailed summary
- Replaced `FiCopy` with `CopyIcon` in `AddressCopyButton`.
- Replaced `MdOutlineAccountBalanceWallet` with `WalletIcon` in `TransactionSimulator`.
- Replaced `FiMoon` and `FiSun` with `MoonIcon` and `SunIcon` in `ColorModeToggle`.
- Replaced `FiTrash` with `Trash2Icon` in `SettingsMetadata`.
- Added `PlusIcon` and `Trash2Icon` in `metadata.tsx`.
- Replaced `FiPlus` with `PlusIcon` in `permissions-editor.tsx`.
- Replaced `BsFillLightningChargeFill` with `ZapIcon` in `contact-us.tsx`.
- Replaced `BsFillLightningChargeFill` with `ZapIcon` in `contracts.tsx`.
- Replaced `IoChevronBack` with `ChevronFirstIcon` in `ContractPublishForm`.
- Replaced `IoChevronBack` with `ChevronLeftIcon` in `BatchLazyMint`.
- Replaced various `Md` icons with `Chevron` icons in `BatchTable`.
- Replaced `Chevron` icons in `airdrop-upload-erc20.tsx`.
- Replaced `FiExternalLink` with `MoveUpRightIcon` in `pricing.tsx`.
- Replaced `IoIosInformationCircleOutline` with `InfoIcon` in `pricing.tsx`.
- Replaced `IoCheckmarkCircle` with `CircleCheckIcon` in `pricing.tsx`.
- Replaced `AiOutlineDollarCircle` with `CircleDollarSignIcon` in `pricing.tsx`.
- Replaced `FiArrowRight` with `MoveRightIcon` in `marketplace-table.tsx`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../components/TransactionSimulator.tsx       |  5 ++-
 .../color-mode/color-mode-toggle.tsx          |  6 ++--
 .../contract-publish-form/index.tsx           |  6 ++--
 .../components/permissions-editor.tsx         |  5 +--
 .../tabs/settings/components/metadata.tsx     |  6 ++--
 .../shared-components/marketplace-table.tsx   | 25 +++++++------
 .../components/airdrop-upload-erc20.tsx       | 24 ++++++-------
 .../core-ui/batch-upload/batch-lazy-mint.tsx  | 18 +++++-----
 .../src/core-ui/batch-upload/batch-table.tsx  | 21 ++++++-----
 apps/dashboard/src/pages/contact-us.tsx       |  5 ++-
 apps/dashboard/src/pages/contracts.tsx        |  6 ++--
 apps/dashboard/src/pages/pricing.tsx          | 35 +++++++------------
 .../src/tw-components/AddressCopyButton.tsx   |  6 ++--
 13 files changed, 75 insertions(+), 93 deletions(-)

diff --git a/apps/dashboard/src/app/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx b/apps/dashboard/src/app/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx
index 7fd208846a4..e6637927724 100644
--- a/apps/dashboard/src/app/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx
+++ b/apps/dashboard/src/app/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx
@@ -12,10 +12,9 @@ import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import type { Abi, AbiFunction } from "abitype";
 import { useV5DashboardChain } from "lib/v5-adapter";
-import { ArrowDown } from "lucide-react";
+import { ArrowDown, WalletIcon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { MdOutlineAccountBalanceWallet } from "react-icons/md";
 import {
   getContract,
   prepareContractCall,
@@ -201,7 +200,7 @@ ${Object.keys(populatedTransaction)
                   size="icon"
                   onClick={() => form.setValue("from", activeAccount.address)}
                 >
-                  <MdOutlineAccountBalanceWallet />
+                  <WalletIcon className="size-4" />
                 </Button>
               </ToolTipLabel>
             )}
diff --git a/apps/dashboard/src/components/color-mode/color-mode-toggle.tsx b/apps/dashboard/src/components/color-mode/color-mode-toggle.tsx
index 194285f02d7..34f5aa3f40f 100644
--- a/apps/dashboard/src/components/color-mode/color-mode-toggle.tsx
+++ b/apps/dashboard/src/components/color-mode/color-mode-toggle.tsx
@@ -2,8 +2,8 @@
 
 import { Button } from "@/components/ui/button";
 import { SkeletonContainer } from "@/components/ui/skeleton";
+import { MoonIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
-import { FiMoon, FiSun } from "react-icons/fi";
 import { useIsClientMounted } from "../ClientOnly/ClientOnly";
 
 export const ColorModeToggle: React.FC = () => {
@@ -29,9 +29,9 @@ export const ColorModeToggle: React.FC = () => {
             onClick={() => setTheme(theme === "light" ? "dark" : "light")}
           >
             {v === "dark" ? (
-              <FiMoon className="size-5" />
+              <MoonIcon className="size-5" />
             ) : (
-              <FiSun className="size-5" />
+              <SunIcon className="size-5" />
             )}
           </Button>
         );
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx
index de2aa7cffb6..757697e8511 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx
@@ -4,7 +4,7 @@ import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { Box, Divider, Flex, Icon, IconButton } from "@chakra-ui/react";
+import { Box, Divider, Flex, IconButton } from "@chakra-ui/react";
 import type { Abi } from "abitype";
 import {
   DASHBOARD_ENGINE_RELAYER_URL,
@@ -12,9 +12,9 @@ import {
 } from "constants/misc";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
+import { ChevronFirstIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
-import { IoChevronBack } from "react-icons/io5";
 import type { FetchDeployMetadataResult } from "thirdweb/contract";
 import {
   getContractPublisher,
@@ -312,7 +312,7 @@ export function ContractPublishForm(props: {
                       : setFieldsetToShow("landing")
                 }
                 aria-label="Back"
-                icon={<Icon as={IoChevronBack} boxSize={6} />}
+                icon={<ChevronFirstIcon className="size-6" />}
               >
                 Back
               </IconButton>
diff --git a/apps/dashboard/src/contract-ui/tabs/permissions/components/permissions-editor.tsx b/apps/dashboard/src/contract-ui/tabs/permissions/components/permissions-editor.tsx
index ef8fe9cbcb7..cc5cdf90bc7 100644
--- a/apps/dashboard/src/contract-ui/tabs/permissions/components/permissions-editor.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/permissions/components/permissions-editor.tsx
@@ -15,10 +15,11 @@ import {
 } from "@chakra-ui/react";
 import { DelayedDisplay } from "components/delayed-display/delayed-display";
 import { useClipboard } from "hooks/useClipboard";
+import { PlusIcon } from "lucide-react";
 import { useState } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { BiPaste } from "react-icons/bi";
-import { FiCopy, FiInfo, FiPlus, FiTrash } from "react-icons/fi";
+import { FiCopy, FiInfo, FiTrash } from "react-icons/fi";
 import { toast } from "sonner";
 import { type ThirdwebContract, ZERO_ADDRESS, isAddress } from "thirdweb";
 import { Button, FormErrorMessage, Text } from "tw-components";
@@ -119,7 +120,7 @@ export const PermissionEditor: React.FC<PermissionEditorProps> = ({
             />
             <InputRightAddon p={0} border="none">
               <Button
-                leftIcon={<Icon as={FiPlus} boxSize={4} />}
+                leftIcon={<PlusIcon className="size-4" />}
                 size="sm"
                 borderLeftRadius="none"
                 borderRightRadius="md"
diff --git a/apps/dashboard/src/contract-ui/tabs/settings/components/metadata.tsx b/apps/dashboard/src/contract-ui/tabs/settings/components/metadata.tsx
index eeced41d6f2..ef3ed2039c0 100644
--- a/apps/dashboard/src/contract-ui/tabs/settings/components/metadata.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/settings/components/metadata.tsx
@@ -4,7 +4,6 @@ import { AdminOnly } from "@3rdweb-sdk/react/components/roles/admin-only";
 import {
   Flex,
   FormControl,
-  Icon,
   IconButton,
   Input,
   Textarea,
@@ -17,10 +16,9 @@ import { CommonContractSchema } from "constants/schemas";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
 import { useTxNotifications } from "hooks/useTxNotifications";
-import { PlusIcon } from "lucide-react";
+import { PlusIcon, Trash2Icon } from "lucide-react";
 import { useMemo } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
-import { FiTrash } from "react-icons/fi";
 import type { ThirdwebContract } from "thirdweb";
 import {
   getContractMetadata,
@@ -303,7 +301,7 @@ export const SettingsMetadata = ({
                       isDisabled={
                         metadata.isPending || sendTransaction.isPending
                       }
-                      icon={<Icon as={FiTrash} boxSize={5} />}
+                      icon={<Trash2Icon className="size-5" />}
                       aria-label="Remove row"
                       onClick={() => remove(index)}
                     />
diff --git a/apps/dashboard/src/contract-ui/tabs/shared-components/marketplace-table.tsx b/apps/dashboard/src/contract-ui/tabs/shared-components/marketplace-table.tsx
index 5db4a31ebae..af448d8f02c 100644
--- a/apps/dashboard/src/contract-ui/tabs/shared-components/marketplace-table.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/shared-components/marketplace-table.tsx
@@ -2,7 +2,6 @@ import { WalletAddress } from "@/components/blocks/wallet-address";
 import {
   ButtonGroup,
   Flex,
-  Icon,
   IconButton,
   Select,
   Skeleton,
@@ -19,6 +18,13 @@ import {
 import type { UseQueryResult } from "@tanstack/react-query";
 import { MediaCell } from "components/contract-pages/table/table-columns/cells/media-cell";
 import { ListingDrawer } from "contract-ui/tabs/shared-components/listing-drawer";
+import {
+  ChevronFirstIcon,
+  ChevronLastIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoveRightIcon,
+} from "lucide-react";
 import {
   type Dispatch,
   type SetStateAction,
@@ -26,13 +32,6 @@ import {
   useMemo,
   useState,
 } from "react";
-import { FiArrowRight } from "react-icons/fi";
-import {
-  MdFirstPage,
-  MdLastPage,
-  MdNavigateBefore,
-  MdNavigateNext,
-} from "react-icons/md";
 import { type Cell, type Column, usePagination, useTable } from "react-table";
 import type { ThirdwebContract } from "thirdweb";
 import type {
@@ -268,7 +267,7 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
                     </Td>
                   ))}
                   <Td borderBottomWidth="inherit" borderColor="borderColor">
-                    <Icon as={FiArrowRight} />
+                    <MoveRightIcon className="size-3" />
                   </Td>
                 </Tr>
               );
@@ -281,13 +280,13 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
           <IconButton
             isDisabled={!canPreviousPage || totalCountQuery.isPending}
             aria-label="first page"
-            icon={<Icon as={MdFirstPage} />}
+            icon={<ChevronFirstIcon className="size-4" />}
             onClick={() => gotoPage(0)}
           />
           <IconButton
             isDisabled={!canPreviousPage || totalCountQuery.isPending}
             aria-label="previous page"
-            icon={<Icon as={MdNavigateBefore} />}
+            icon={<ChevronLeftIcon className="size-4" />}
             onClick={() => previousPage()}
           />
           <Text whiteSpace="nowrap">
@@ -303,13 +302,13 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
           <IconButton
             isDisabled={!canNextPage || totalCountQuery.isPending}
             aria-label="next page"
-            icon={<Icon as={MdNavigateNext} />}
+            icon={<ChevronRightIcon className="size-4" />}
             onClick={() => nextPage()}
           />
           <IconButton
             isDisabled={!canNextPage || totalCountQuery.isPending}
             aria-label="last page"
-            icon={<Icon as={MdLastPage} />}
+            icon={<ChevronLastIcon className="size-4" />}
             onClick={() => gotoPage(pageCount - 1)}
           />
 
diff --git a/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx b/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx
index b3046eff867..2d142637a30 100644
--- a/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx
@@ -16,10 +16,10 @@ import {
 } from "@chakra-ui/react";
 import { useQueries } from "@tanstack/react-query";
 import {
-  ChevronFirst,
-  ChevronLast,
-  ChevronLeft,
-  ChevronRight,
+  ChevronFirstIcon,
+  ChevronLastIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
   CircleAlert,
   UploadIcon,
 } from "lucide-react";
@@ -395,36 +395,36 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
         </Tbody>
       </Table>
       {/* Only need to show the Pagination components if we have more than 25 records */}
-      {data.length > 25 && (
+      {data.length > 0 && (
         <Portal containerRef={portalRef}>
           <div className="flex w-full items-center justify-center">
-            <div className="flex flex-row">
+            <div className="flex flex-row gap-1">
               <IconButton
                 isDisabled={!canPreviousPage}
                 aria-label="first page"
-                icon={<ChevronFirst size={16} />}
+                icon={<ChevronFirstIcon className="size-4" />}
                 onClick={() => gotoPage(0)}
               />
               <IconButton
                 isDisabled={!canPreviousPage}
                 aria-label="previous page"
-                icon={<ChevronLeft size={16} />}
+                icon={<ChevronLeftIcon className="size-4" />}
                 onClick={() => previousPage()}
               />
-              <Text whiteSpace="nowrap">
+              <p className="my-auto whitespace-nowrap">
                 Page <strong>{pageIndex + 1}</strong> of{" "}
                 <strong>{pageOptions.length}</strong>
-              </Text>
+              </p>
               <IconButton
                 isDisabled={!canNextPage}
                 aria-label="next page"
-                icon={<ChevronRight size={16} />}
+                icon={<ChevronRightIcon className="size-4" />}
                 onClick={() => nextPage()}
               />
               <IconButton
                 isDisabled={!canNextPage}
                 aria-label="last page"
-                icon={<ChevronLast size={16} />}
+                icon={<ChevronLastIcon className="size-4" />}
                 onClick={() => gotoPage(pageCount - 1)}
               />
               <Select
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 afa72676784..10fc6c07c46 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
@@ -7,7 +7,6 @@ import {
   Container,
   Flex,
   FormControl,
-  Icon,
   Input,
   InputGroup,
   InputRightElement,
@@ -17,11 +16,10 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { FileInput } from "components/shared/FileInput";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
-import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { ChevronLeftIcon, EyeIcon, EyeOffIcon } from "lucide-react";
 import { useRef, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { useForm } from "react-hook-form";
-import { IoChevronBack } from "react-icons/io5";
 import type { CreateDelayedRevealBatchParams } from "thirdweb/extensions/erc721";
 import type { NFTInput } from "thirdweb/utils";
 import {
@@ -269,14 +267,14 @@ export const BatchLazyMint: ComponentWithChildren<BatchLazyMintProps> = (
                 mb={2}
               >
                 <div className="flex flex-row">
-                  <Icon
-                    boxSize={5}
-                    as={IoChevronBack}
-                    color="gray.600"
+                  <Button
+                    className="text-muted-foreground"
+                    variant="ghost"
                     onClick={() => setStep(0)}
-                    cursor="pointer"
-                  />
-                  <Heading size="title.md">
+                  >
+                    <ChevronLeftIcon className="size-5 cursor-pointer" />
+                  </Button>
+                  <Heading size="title.md" className="my-auto">
                     When will you reveal your NFTs?
                   </Heading>
                 </div>
diff --git a/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx b/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
index cf735303f91..a8452df1187 100644
--- a/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
+++ b/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
@@ -3,7 +3,6 @@ import {
   Box,
   type BoxProps,
   Flex,
-  Icon,
   IconButton,
   Image,
   type ImageProps,
@@ -19,13 +18,13 @@ import {
 } from "@chakra-ui/react";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
 import { replaceIpfsUrl } from "lib/sdk";
-import { useMemo } from "react";
 import {
-  MdFirstPage,
-  MdLastPage,
-  MdNavigateBefore,
-  MdNavigateNext,
-} from "react-icons/md";
+  ChevronFirstIcon,
+  ChevronLastIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react";
+import { useMemo } from "react";
 import { type Column, usePagination, useTable } from "react-table";
 import type { NFTInput } from "thirdweb/utils";
 import { CodeBlock, Text } from "tw-components";
@@ -219,13 +218,13 @@ export const BatchTable: React.FC<BatchTableProps> = ({
             <IconButton
               isDisabled={!canPreviousPage}
               aria-label="first page"
-              icon={<Icon as={MdFirstPage} />}
+              icon={<ChevronFirstIcon className="size-4" />}
               onClick={() => gotoPage(0)}
             />
             <IconButton
               isDisabled={!canPreviousPage}
               aria-label="previous page"
-              icon={<Icon as={MdNavigateBefore} />}
+              icon={<ChevronLeftIcon className="size-4" />}
               onClick={() => previousPage()}
             />
             <Text whiteSpace="nowrap">
@@ -235,13 +234,13 @@ export const BatchTable: React.FC<BatchTableProps> = ({
             <IconButton
               isDisabled={!canNextPage}
               aria-label="next page"
-              icon={<Icon as={MdNavigateNext} />}
+              icon={<ChevronRightIcon className="size-4" />}
               onClick={() => nextPage()}
             />
             <IconButton
               isDisabled={!canNextPage}
               aria-label="last page"
-              icon={<Icon as={MdLastPage} />}
+              icon={<ChevronLastIcon className="size-4" />}
               onClick={() => gotoPage(pageCount - 1)}
             />
 
diff --git a/apps/dashboard/src/pages/contact-us.tsx b/apps/dashboard/src/pages/contact-us.tsx
index b9883fa978d..bebb19d8d01 100644
--- a/apps/dashboard/src/pages/contact-us.tsx
+++ b/apps/dashboard/src/pages/contact-us.tsx
@@ -4,7 +4,6 @@ import {
   Flex,
   type FlexProps,
   FormControl,
-  Icon,
   Image,
   Input,
   List,
@@ -16,10 +15,10 @@ import { PartnerLogo } from "components/partners/partner-logo";
 import { HomepageTopNav } from "components/product-pages/common/Topnav";
 import { HomepageSection } from "components/product-pages/homepage/HomepageSection";
 import { useTrack } from "hooks/analytics/useTrack";
+import { ZapIcon } from "lucide-react";
 import { PageId } from "page-id";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { BsFillLightningChargeFill } from "react-icons/bs";
 import { Button, Card, Heading, Text } from "tw-components";
 import type { ThirdwebNextPage } from "utils/types";
 import type { ContactFormPayload } from "../app/api/contact-us/types";
@@ -336,7 +335,7 @@ const ContactUs: ThirdwebNextPage = () => {
                   _hover={{ bg: "black", opacity: 0.8 }}
                   px={8}
                   py={6}
-                  leftIcon={<Icon as={BsFillLightningChargeFill} />}
+                  leftIcon={<ZapIcon className="size-5" />}
                   isDisabled={formStatus === "submitting"}
                 >
                   <Text color="white" size="label.lg">
diff --git a/apps/dashboard/src/pages/contracts.tsx b/apps/dashboard/src/pages/contracts.tsx
index 6b200ab705f..b92124aee01 100644
--- a/apps/dashboard/src/pages/contracts.tsx
+++ b/apps/dashboard/src/pages/contracts.tsx
@@ -1,4 +1,4 @@
-import { Container, Flex, Icon } from "@chakra-ui/react";
+import { Container, Flex } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { ContractInteractionSection } from "components/contracts/ContractInteractionSection";
 import LandingCaseStudyStaticSection from "components/contracts/LandingCaseStudyStaticSection";
@@ -10,8 +10,8 @@ import { LandingGridSection } from "components/landing-pages/grid-section";
 import { LandingHeroWithSideImage } from "components/landing-pages/hero-with-side-image";
 import { LandingLayout } from "components/landing-pages/layout";
 import { getAbsoluteUrl } from "lib/vercel-utils";
+import { ZapIcon } from "lucide-react";
 import { PageId } from "page-id";
-import { BsFillLightningChargeFill } from "react-icons/bs";
 import { Heading, Text, TrackedLinkButton } from "tw-components";
 import type { ThirdwebNextPage } from "utils/types";
 
@@ -217,7 +217,7 @@ const Contracts: ThirdwebNextPage = () => {
           </Flex>
 
           <TrackedLinkButton
-            leftIcon={<Icon as={BsFillLightningChargeFill} boxSize={4} />}
+            leftIcon={<ZapIcon className="size-4" />}
             py={6}
             px={8}
             bgColor="white"
diff --git a/apps/dashboard/src/pages/pricing.tsx b/apps/dashboard/src/pages/pricing.tsx
index 78f3e4b34fd..9421bf8b1e4 100644
--- a/apps/dashboard/src/pages/pricing.tsx
+++ b/apps/dashboard/src/pages/pricing.tsx
@@ -1,10 +1,8 @@
 import { Button } from "@/components/ui/button";
 import {
-  Box,
   Container,
   Flex,
   GridItem,
-  Icon,
   SimpleGrid,
   Tooltip,
   useBreakpointValue,
@@ -15,14 +13,17 @@ import { LandingFAQ } from "components/landing-pages/faq";
 import { LandingLayout } from "components/landing-pages/layout";
 import { useTrack } from "hooks/analytics/useTrack";
 import { getAbsoluteUrl } from "lib/vercel-utils";
-import { ArrowRightIcon, ChevronRight } from "lucide-react";
+import {
+  ArrowRightIcon,
+  ChevronRight,
+  CircleCheckIcon,
+  CircleDollarSignIcon,
+  InfoIcon,
+  MoveUpRightIcon,
+} from "lucide-react";
 import NextLink from "next/link";
 import { useRouter } from "next/router";
 import { PageId } from "page-id";
-import { AiOutlineDollarCircle } from "react-icons/ai";
-import { FiExternalLink } from "react-icons/fi";
-import { IoIosInformationCircleOutline } from "react-icons/io";
-import { IoCheckmarkCircle } from "react-icons/io5";
 import {
   Card,
   Heading,
@@ -134,7 +135,7 @@ const Pricing: ThirdwebNextPage = () => {
                                 trackingProps={{
                                   title: item.title,
                                 }}
-                                icon={<Icon as={FiExternalLink} />}
+                                icon={<MoveUpRightIcon className="size-5" />}
                                 variant="ghost"
                                 aria-label="Learn More"
                               >
@@ -164,13 +165,7 @@ const Pricing: ThirdwebNextPage = () => {
                                   bg="transparent"
                                   boxShadow="none"
                                 >
-                                  <Box pt={0.5}>
-                                    <Icon
-                                      as={IoIosInformationCircleOutline}
-                                      boxSize={4}
-                                      color="blue.500"
-                                    />
-                                  </Box>
+                                  <InfoIcon className="size-5 text-blue-500" />
                                 </Tooltip>
                               ))}
                           </Flex>
@@ -259,7 +254,7 @@ const Item = ({
       textAlign={{ base: "right", lg: "center" }}
     >
       {titleStr === "checkmark" ? (
-        <Icon as={IoCheckmarkCircle} boxSize={4} color="blue.500" />
+        <CircleCheckIcon className="inline-block size-5 fill-blue-500 align-middle text-black" />
       ) : (
         titleStr
       )}
@@ -317,13 +312,7 @@ const Item = ({
                 bg="transparent"
                 boxShadow="none"
               >
-                <Box pt={1}>
-                  <Icon
-                    as={AiOutlineDollarCircle}
-                    boxSize={4}
-                    color="blue.500"
-                  />
-                </Box>
+                <CircleDollarSignIcon className="size-5 text-blue-400" />
               </Tooltip>
             )}
           </Flex>
diff --git a/apps/dashboard/src/tw-components/AddressCopyButton.tsx b/apps/dashboard/src/tw-components/AddressCopyButton.tsx
index 144e06df791..e6547967093 100644
--- a/apps/dashboard/src/tw-components/AddressCopyButton.tsx
+++ b/apps/dashboard/src/tw-components/AddressCopyButton.tsx
@@ -1,7 +1,7 @@
-import { Icon, Tooltip } from "@chakra-ui/react";
+import { Tooltip } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useClipboard } from "hooks/useClipboard";
-import { FiCopy } from "react-icons/fi";
+import { CopyIcon } from "lucide-react";
 import { toast } from "sonner";
 import {
   Button,
@@ -87,7 +87,7 @@ export const AddressCopyButton: React.FC<AddressCopyButtonProps> = ({
             });
           }
         }}
-        leftIcon={noIcon ? undefined : <Icon boxSize={3} as={FiCopy} />}
+        leftIcon={noIcon ? undefined : <CopyIcon className="size-3" />}
         fontFamily="mono"
       >
         <Text color="inherit" size={`label.${buttonSizesMap[size]}`}>