diff --git a/apps/dashboard/src/components/buttons/MismatchButton.tsx b/apps/dashboard/src/components/buttons/MismatchButton.tsx
index 63a51e113a8..9ec64f19bc3 100644
--- a/apps/dashboard/src/components/buttons/MismatchButton.tsx
+++ b/apps/dashboard/src/components/buttons/MismatchButton.tsx
@@ -15,7 +15,6 @@ import { cn } from "@/lib/utils";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
 import {
   Box,
-  Icon,
   Popover,
   PopoverArrow,
   PopoverBody,
@@ -34,11 +33,10 @@ 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, TriangleAlertIcon } from "lucide-react";
+import { ExternalLinkIcon, TriangleAlertIcon, UnplugIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import Link from "next/link";
 import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
-import { VscDebugDisconnect } from "react-icons/vsc";
 import { toast } from "sonner";
 import { prepareTransaction, sendTransaction, toWei } from "thirdweb";
 import { type Chain, type ChainMetadata, localhost } from "thirdweb/chains";
@@ -461,7 +459,7 @@ const MismatchNotice: React.FC<{
 
       <Button
         ref={actuallyCanAttemptSwitch ? initialFocusRef : undefined}
-        leftIcon={<Icon as={VscDebugDisconnect} />}
+        leftIcon={<UnplugIcon className="size-4" />}
         size="sm"
         onClick={onSwitchWallet}
         isLoading={connectionStatus === "connecting"}
diff --git a/apps/dashboard/src/components/buttons/TransactionButton.tsx b/apps/dashboard/src/components/buttons/TransactionButton.tsx
index defe25114eb..9d4accb28f8 100644
--- a/apps/dashboard/src/components/buttons/TransactionButton.tsx
+++ b/apps/dashboard/src/components/buttons/TransactionButton.tsx
@@ -12,8 +12,8 @@ import {
 } from "@chakra-ui/react";
 import { CHAIN_ID_TO_GNOSIS } from "constants/mappings";
 import { useActiveChainAsDashboardChain } from "lib/v5-adapter";
+import { ArrowLeftRightIcon } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { BiTransferAlt } from "react-icons/bi";
 import { FiInfo } from "react-icons/fi";
 import {
   useActiveAccount,
@@ -154,7 +154,7 @@ export const TransactionButton: React.FC<TransactionButtonProps> = ({
                 <Text color="inherit" size="label.md" fontFamily="mono">
                   {transactionCount}
                 </Text>
-                <BiTransferAlt />
+                <ArrowLeftRightIcon className="size-3" />
               </Flex>
             </Center>
           </ToolTipLabel>
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-tab.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-tab.tsx
index 4fbc545bf3c..63799b81e82 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-tab.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-tab.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Flex, Icon, useDisclosure } from "@chakra-ui/react";
+import { Flex, useDisclosure } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import {
   type AirdropAddressInput,
@@ -8,9 +8,8 @@ import {
 } from "contract-ui/tabs/nfts/components/airdrop-upload";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
+import { UploadIcon } from "lucide-react";
 import { useForm } from "react-hook-form";
-import { BsCircleFill } from "react-icons/bs";
-import { FiUpload } from "react-icons/fi";
 import type { ThirdwebContract } from "thirdweb";
 import { multicall } from "thirdweb/extensions/common";
 import { balanceOf, encodeSafeTransferFrom } from "thirdweb/extensions/erc1155";
@@ -125,7 +124,7 @@ const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
                 colorScheme="primary"
                 borderRadius="md"
                 onClick={onOpen}
-                rightIcon={<Icon as={FiUpload} />}
+                rightIcon={<UploadIcon className="size-5" />}
               >
                 Upload addresses
               </Button>
@@ -138,13 +137,10 @@ const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
                 color={addresses.length === 0 ? "orange.500" : "green.500"}
               >
                 {addresses.length > 0 && (
-                  <>
-                    <Icon as={BsCircleFill} boxSize={2} />
-                    <Text size="body.sm" color="inherit">
-                      <strong>{addresses.length} addresses</strong> ready to be
-                      airdropped
-                    </Text>
-                  </>
+                  <Text size="body.sm" color="inherit">
+                    ● <strong>{addresses.length} addresses</strong> ready to be
+                    airdropped
+                  </Text>
                 )}
               </Flex>
             </Flex>
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx
index 28d94aba6fe..657c1b91a94 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx
@@ -204,13 +204,13 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
                 <div className="relative aspect-[21/9] w-full">
                   <div
                     className={cn(
-                      "h-full cursor-pointer rounded-md border border-border hover:border-primary",
+                      "flex h-full cursor-pointer rounded-md border border-border hover:border-primary",
                       noCsv ? "bg-red-200" : "bg-card",
                     )}
                     {...getRootProps()}
                   >
                     <input {...getInputProps()} />
-                    <div className="flex flex-col p-6">
+                    <div className="m-auto flex flex-col p-6">
                       <UploadIcon
                         size={16}
                         className={cn("mx-auto mb-2 text-gray-500", {
@@ -218,7 +218,11 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
                         })}
                       />
                       {isDragActive ? (
-                        <Heading as={Text} size="label.md">
+                        <Heading
+                          as={Text}
+                          size="label.md"
+                          className="text-center"
+                        >
                           Drop the files here
                         </Heading>
                       ) : (
@@ -226,6 +230,7 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
                           as={Text}
                           size="label.md"
                           color={noCsv ? "red.500" : "gray.600"}
+                          className="text-center"
                         >
                           {noCsv
                             ? `No valid CSV file found, make sure your CSV includes the "address" column.`
@@ -439,7 +444,7 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
       </TableContainer>
       <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"
@@ -452,10 +457,10 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
               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"
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/batch-lazy-mint-button.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/batch-lazy-mint-button.tsx
index a1672fad263..75bff7e669b 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/batch-lazy-mint-button.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/batch-lazy-mint-button.tsx
@@ -1,11 +1,11 @@
 "use client";
 
 import { MinterOnly } from "@3rdweb-sdk/react/components/roles/minter-only";
-import { Icon, useDisclosure } from "@chakra-ui/react";
+import { useDisclosure } from "@chakra-ui/react";
 import { BatchLazyMint } from "core-ui/batch-upload/batch-lazy-mint";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
-import { RiCheckboxMultipleBlankLine } from "react-icons/ri";
+import { FileStackIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb";
 import * as ERC721Ext from "thirdweb/extensions/erc721";
 import * as ERC1155Ext from "thirdweb/extensions/erc1155";
@@ -120,7 +120,7 @@ export const BatchLazyMintButton: React.FC<BatchLazyMintButtonProps> = ({
       </Drawer>
       <Button
         colorScheme="primary"
-        leftIcon={<Icon as={RiCheckboxMultipleBlankLine} />}
+        leftIcon={<FileStackIcon className="size-4" />}
         onClick={onOpen}
       >
         Batch Upload
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/table.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/table.tsx
index 5e2061e0ac8..5516a0c1d97 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/table.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/table.tsx
@@ -4,7 +4,6 @@ import { WalletAddress } from "@/components/blocks/wallet-address";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import {
   Flex,
-  Icon,
   IconButton,
   Select,
   Skeleton,
@@ -18,14 +17,14 @@ import {
   Tr,
 } from "@chakra-ui/react";
 import { MediaCell } from "components/contract-pages/table/table-columns/cells/media-cell";
-import { useEffect, useMemo, useState } from "react";
-import { FiArrowRight } from "react-icons/fi";
 import {
-  MdFirstPage,
-  MdLastPage,
-  MdNavigateBefore,
-  MdNavigateNext,
-} from "react-icons/md";
+  ArrowRightIcon,
+  ChevronFirstIcon,
+  ChevronLastIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
 import {
   type CellProps,
   type Column,
@@ -294,7 +293,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
                     </Td>
                   ))}
                   <Td borderBottomWidth="inherit" borderColor="borderColor">
-                    {!failedToLoad && <Icon as={FiArrowRight} />}
+                    {!failedToLoad && <ArrowRightIcon className="size-4" />}
                   </Td>
                 </Tr>
               );
@@ -325,17 +324,17 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
         </Table>
       </TableContainer>
       <div className="flex w-full items-center justify-center">
-        <Flex gap={2} direction="row" align="center">
+        <div className="flex flex-row items-center gap-1">
           <IconButton
             isDisabled={!canPreviousPage || queryLoading}
             aria-label="first page"
-            icon={<Icon as={MdFirstPage} />}
+            icon={<ChevronFirstIcon className="size-4" />}
             onClick={() => gotoPage(0)}
           />
           <IconButton
             isDisabled={!canPreviousPage || queryLoading}
             aria-label="previous page"
-            icon={<Icon as={MdNavigateBefore} />}
+            icon={<ChevronLeftIcon className="size-4" />}
             onClick={() => previousPage()}
           />
           <Text whiteSpace="nowrap">
@@ -347,13 +346,13 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
           <IconButton
             isDisabled={!canNextPage || queryLoading}
             aria-label="next page"
-            icon={<Icon as={MdNavigateNext} />}
+            icon={<ChevronRightIcon className="size-4" />}
             onClick={() => nextPage()}
           />
           <IconButton
             isDisabled={!canNextPage || queryLoading}
             aria-label="last page"
-            icon={<Icon as={MdLastPage} />}
+            icon={<ChevronLastIcon className="size-4" />}
             onClick={() => gotoPage(pageCount - 1)}
           />
 
@@ -370,7 +369,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
             <option value="250">250</option>
             <option value="500">500</option>
           </Select>
-        </Flex>
+        </div>
       </div>
     </Flex>
   );
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/token-id.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/token-id.tsx
index 524136bc2a7..a4109a46bbe 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/token-id.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/token-id.tsx
@@ -9,15 +9,14 @@ import {
   Divider,
   Flex,
   GridItem,
-  Icon,
   IconButton,
   SimpleGrid,
   Tooltip,
   useBreakpointValue,
 } from "@chakra-ui/react";
 import { useNFTDrawerTabs } from "core-ui/nft-drawer/useNftDrawerTabs";
+import { ChevronLeftIcon } from "lucide-react";
 import { useState } from "react";
-import { IoChevronBack } from "react-icons/io5";
 import type { ThirdwebContract } from "thirdweb";
 import { getNFT as getErc721NFT } from "thirdweb/extensions/erc721";
 import { getNFT as getErc1155NFT } from "thirdweb/extensions/erc1155";
@@ -115,7 +114,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
                 router.push(`/${chainSlug}/${contract.address}/nfts`)
               }
               aria-label="Back"
-              icon={<Icon as={IoChevronBack} boxSize={6} />}
+              icon={<ChevronLeftIcon className="size-6" />}
             >
               Back
             </IconButton>
diff --git a/apps/dashboard/src/contract-ui/tabs/overview/components/PermissionsTable.tsx b/apps/dashboard/src/contract-ui/tabs/overview/components/PermissionsTable.tsx
index a10abf24235..bafb0373815 100644
--- a/apps/dashboard/src/contract-ui/tabs/overview/components/PermissionsTable.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/overview/components/PermissionsTable.tsx
@@ -1,16 +1,9 @@
-import {
-  Box,
-  Flex,
-  Icon,
-  List,
-  SimpleGrid,
-  Tag,
-  Tooltip,
-} from "@chakra-ui/react";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { Box, Flex, List, SimpleGrid, Tag } from "@chakra-ui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { useClipboard } from "hooks/useClipboard";
+import { CopyIcon } from "lucide-react";
 import { useMemo } from "react";
-import { FiCopy } from "react-icons/fi";
 import { toast } from "sonner";
 import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
 import { useReadContract } from "thirdweb/react";
@@ -164,16 +157,7 @@ const PermissionsItem: React.FC<PermissionsItemProps> = ({ data }) => {
       >
         <Box gridColumn="span 2">
           <div className="flex flex-row items-center gap-3">
-            <Tooltip
-              p={0}
-              bg="transparent"
-              boxShadow="none"
-              label={
-                <Card py={2} px={4} bgColor="backgroundHighlight">
-                  <Text size="label.sm">Copy address to clipboard</Text>
-                </Card>
-              }
-            >
+            <ToolTipLabel label="Copy address to clipboard">
               <Button
                 size="sm"
                 bg="transparent"
@@ -182,9 +166,9 @@ const PermissionsItem: React.FC<PermissionsItemProps> = ({ data }) => {
                   toast.info("Address copied.");
                 }}
               >
-                <Icon as={FiCopy} boxSize={3} />
+                <CopyIcon className="size-3" />
               </Button>
-            </Tooltip>
+            </ToolTipLabel>
             <Text fontFamily="mono" noOfLines={1}>
               {shortenIfAddress(data.member)}
             </Text>
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 cc5cdf90bc7..690809fddca 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
@@ -1,3 +1,4 @@
+import { ToolTipLabel } from "@/components/ui/tooltip";
 import {
   AdminOnly,
   AdminOrSelfOnly,
@@ -5,21 +6,23 @@ import {
 import {
   Flex,
   FormControl,
-  Icon,
   IconButton,
   Input,
   InputGroup,
   InputLeftAddon,
   InputRightAddon,
-  Tooltip,
 } from "@chakra-ui/react";
 import { DelayedDisplay } from "components/delayed-display/delayed-display";
 import { useClipboard } from "hooks/useClipboard";
-import { PlusIcon } from "lucide-react";
+import {
+  ClipboardPasteIcon,
+  CopyIcon,
+  InfoIcon,
+  PlusIcon,
+  TrashIcon,
+} from "lucide-react";
 import { useState } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
-import { BiPaste } from "react-icons/bi";
-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";
@@ -61,7 +64,7 @@ export const PermissionEditor: React.FC<PermissionEditorProps> = ({
       {!fields?.length && (
         <DelayedDisplay delay={100}>
           <div className="flex flex-row items-center gap-3 rounded-md border border-border border-orange-100 bg-orange-50 p-[10px]">
-            <Icon as={FiInfo} color="orange.400" boxSize={6} />
+            <InfoIcon className="size-6 text-orange-400" />
             <Text color="orange.800">
               {role === "asset"
                 ? "No asset contracts are permitted to be listed on this marketplace."
@@ -87,13 +90,12 @@ export const PermissionEditor: React.FC<PermissionEditorProps> = ({
         >
           <InputGroup>
             <InputLeftAddon p={0} border="none">
-              <Tooltip label="Paste address from clipboard">
+              <ToolTipLabel label="Paste address from clipboard">
                 <IconButton
                   borderRadius="sm"
                   borderLeftRadius="md"
                   aria-label="paste address"
-                  icon={<BiPaste />}
-                  _hover={{ bgColor: "gray.300" }}
+                  icon={<ClipboardPasteIcon className="size-4" />}
                   width="100%"
                   height="100%"
                   onClick={() => {
@@ -103,12 +105,13 @@ export const PermissionEditor: React.FC<PermissionEditorProps> = ({
                         setAddress(text);
                         return void 0;
                       })
-                      .catch((err) => {
-                        console.error("failed to paste from clipboard", err);
+                      .catch((error) => {
+                        console.error(error);
+                        toast.error("Failed to paste from clipboard");
                       });
                   }}
                 />
-              </Tooltip>
+              </ToolTipLabel>
             </InputLeftAddon>
             <Input
               variant="filled"
@@ -169,13 +172,12 @@ const PermissionAddress: React.FC<PermissionAddressProps> = ({
     <Flex gap={0} align="center">
       <InputGroup>
         <InputLeftAddon p={0} border="none">
-          <Tooltip label="Copy address to clipboard">
+          <ToolTipLabel label="Copy address to clipboard">
             <IconButton
               borderRadius="sm"
               borderLeftRadius="md"
               aria-label="copy address"
-              icon={<FiCopy />}
-              _hover={{ bgColor: "gray.300" }}
+              icon={<CopyIcon className="size-4" />}
               width="100%"
               height="100%"
               onClick={(e) => {
@@ -185,7 +187,7 @@ const PermissionAddress: React.FC<PermissionAddressProps> = ({
                 toast.info("Address copied.");
               }}
             />
-          </Tooltip>
+          </ToolTipLabel>
         </InputLeftAddon>
         <Input
           variant="filled"
@@ -196,7 +198,7 @@ const PermissionAddress: React.FC<PermissionAddressProps> = ({
         <AdminOrSelfOnly contract={contract} self={member}>
           <InputRightAddon p={0} border="none">
             <Button
-              leftIcon={<Icon as={FiTrash} boxSize={3} />}
+              leftIcon={<TrashIcon className="size-3" />}
               size="sm"
               borderLeftRadius="none"
               borderRightRadius="md"
diff --git a/apps/dashboard/src/contract-ui/tabs/sources/page.tsx b/apps/dashboard/src/contract-ui/tabs/sources/page.tsx
index 92db45bf537..99fb0761c63 100644
--- a/apps/dashboard/src/contract-ui/tabs/sources/page.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/sources/page.tsx
@@ -5,7 +5,6 @@ import { useResolveContractAbi } from "@3rdweb-sdk/react/hooks/useResolveContrac
 import {
   Divider,
   Flex,
-  Icon,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -18,8 +17,8 @@ import {
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { SourcesPanel } from "components/contract-components/shared/sources-panel";
 import { useContractSources } from "contract-ui/hooks/useContractSources";
+import { CircleCheckIcon, CircleXIcon } from "lucide-react";
 import { useMemo, useState } from "react";
-import { FiCheckCircle, FiXCircle } from "react-icons/fi";
 import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
 import { Badge, Button, Card, Heading } from "tw-components";
@@ -109,8 +108,7 @@ const VerifyContractModal: React.FC<
             )}
             {veryifyQuery?.error ? (
               <Flex gap={2} align="center">
-                <Icon as={FiXCircle} color="red.600" />
-
+                <CircleXIcon className="size-4 text-red-600" />
                 <Heading size="label.md">
                   {veryifyQuery?.error.toString()}
                 </Heading>
@@ -124,7 +122,7 @@ const VerifyContractModal: React.FC<
                     <Flex key={index} gap={2} align="center" mb={4}>
                       {result.success && (
                         <>
-                          <Icon as={FiCheckCircle} color="green.600" />
+                          <CircleCheckIcon className="size-4 text-green-600" />
                           {result.alreadyVerified && (
                             <Heading size="label.md">
                               {result.explorerUrl}: Already verified
@@ -139,7 +137,7 @@ const VerifyContractModal: React.FC<
                       )}
                       {!result.success && (
                         <>
-                          <Icon as={FiXCircle} color="red.600" />
+                          <CircleXIcon className="size-4 text-red-600" />
                           <Heading size="label.md">
                             {`${result.explorerUrl}: Verification failed`}
                           </Heading>