diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index 0a7addba12f..0dad0d63d6a 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -85,7 +85,6 @@
     "react-dom": "18.3.1",
     "react-dropzone": "^14.2.9",
     "react-hook-form": "7.52.0",
-    "react-icons": "^5.2.1",
     "react-intersection-observer": "^9.10.3",
     "react-markdown": "^9.0.1",
     "react-responsive-carousel": "^3.2.23",
diff --git a/apps/dashboard/src/components/buttons/TransactionButton.tsx b/apps/dashboard/src/components/buttons/TransactionButton.tsx
index 9d4accb28f8..e0d7c9c3225 100644
--- a/apps/dashboard/src/components/buttons/TransactionButton.tsx
+++ b/apps/dashboard/src/components/buttons/TransactionButton.tsx
@@ -3,7 +3,6 @@ import { ToolTipLabel } from "@/components/ui/tooltip";
 import {
   Center,
   Flex,
-  Icon,
   Popover,
   PopoverArrow,
   PopoverBody,
@@ -12,9 +11,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 { ArrowLeftRightIcon, InfoIcon } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { FiInfo } from "react-icons/fi";
 import {
   useActiveAccount,
   useActiveWallet,
@@ -209,7 +207,7 @@ const ExternalApprovalNotice: React.FC<ExternalApprovalNoticeProps> = ({
       <div className="flex flex-col gap-4">
         <Heading size="label.lg">
           <div className="flex flex-row items-center gap-2">
-            <Icon color="primary.500" boxSize={6} as={FiInfo} />
+            <InfoIcon className="size-6 text-primary-foreground" />
             <span>Execute Transaction</span>
           </div>
         </Heading>
@@ -244,7 +242,7 @@ const ExternalApprovalNotice: React.FC<ExternalApprovalNoticeProps> = ({
       <div className="flex flex-col gap-4">
         <Heading size="label.lg">
           <div className="flex flex-row items-center gap-2">
-            <Icon color="primary.500" boxSize={6} as={FiInfo} />
+            <InfoIcon className="size-6 text-primary-foreground" />
             <span>Approve Transaction</span>
           </div>
         </Heading>
diff --git a/apps/dashboard/src/components/chain-validation/index.tsx b/apps/dashboard/src/components/chain-validation/index.tsx
index a000b4549a9..1d0c5f424be 100644
--- a/apps/dashboard/src/components/chain-validation/index.tsx
+++ b/apps/dashboard/src/components/chain-validation/index.tsx
@@ -1,7 +1,6 @@
 import { InlineCode } from "@/components/ui/inline-code";
 import {
   FormControl,
-  Icon,
   Input,
   InputGroup,
   Table,
@@ -13,28 +12,22 @@ import {
 } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useRpcValidation } from "hooks/chains/useRpcValidation";
-import { type ChangeEvent, useMemo, useState } from "react";
-import type { IconType } from "react-icons";
-import { BiCheckCircle, BiErrorCircle } from "react-icons/bi";
-import { RiErrorWarningLine } from "react-icons/ri";
+import { AlertCircleIcon, CheckCircleIcon } from "lucide-react";
+import { type ChangeEvent, useState } from "react";
+
 import { Button, Card, FormLabel, Link, TableContainer } from "tw-components";
 
-const StatusCheck = ({
-  status,
-}: {
+const StatusCheck = (props: {
   status: "success" | "error" | "warning";
 }) => {
-  const values: [string, IconType] = useMemo(() => {
-    if (status === "error") {
-      return ["red.500", BiErrorCircle];
-    }
-    if (status === "warning") {
-      return ["yellow.500", RiErrorWarningLine];
-    }
-    return ["green.500", BiCheckCircle];
-  }, [status]);
-
-  return <Icon fontSize={16} color={values[0]} as={values[1]} />;
+  switch (props.status) {
+    case "error":
+      return <AlertCircleIcon className="size-4 text-destructive-text" />;
+    case "warning":
+      return <AlertCircleIcon className="size-4 text-warning-text" />;
+    case "success":
+      return <CheckCircleIcon className="size-4 text-success-text" />;
+  }
 };
 
 const ChainValidation: React.FC = () => {
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx
index 5277b7a0b7f..9055c4a6046 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx
@@ -3,17 +3,15 @@ import {
   Box,
   Flex,
   FormControl,
-  Icon,
   IconButton,
   Input,
   ListItem,
   UnorderedList,
 } from "@chakra-ui/react";
 import type { Abi } from "abitype";
-import { PlusIcon } from "lucide-react";
+import { PlusIcon, TrashIcon } from "lucide-react";
 import { type Dispatch, type SetStateAction, useEffect } from "react";
 import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { FiTrash } from "react-icons/fi";
 import { Button, Heading, Text } from "tw-components";
 import { useCustomFactoryAbi } from "../hooks";
 import { AbiSelector } from "./abi-selector";
@@ -101,7 +99,7 @@ export const CustomFactory: React.FC<CustomFactoryProps> = ({
               </Box>
               <IconButton
                 isDisabled={fields.length === 1 || form.formState.isSubmitting}
-                icon={<Icon as={FiTrash} boxSize={5} />}
+                icon={<TrashIcon className="size-5" />}
                 aria-label="Remove row"
                 onClick={() => remove(index)}
               />
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/external-links-input.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/external-links-input.tsx
index 04fc82b694d..a102b23ab79 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/external-links-input.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/external-links-input.tsx
@@ -2,12 +2,11 @@ import {
   Divider,
   Flex,
   FormControl,
-  Icon,
   IconButton,
   Input,
 } from "@chakra-ui/react";
+import { TrashIcon } from "lucide-react";
 import { useFormContext } from "react-hook-form";
-import { FiTrash } from "react-icons/fi";
 import { FormErrorMessage, FormLabel } from "tw-components";
 
 interface ExternalLinksInputProps {
@@ -73,7 +72,7 @@ export const ExternalLinksInput: React.FC<ExternalLinksInputProps> = ({
           </FormErrorMessage>
         </FormControl>
         <IconButton
-          icon={<Icon as={FiTrash} boxSize={5} />}
+          icon={<TrashIcon className="size-5" />}
           aria-label="Remove row"
           onClick={() => remove(index)}
           alignSelf="end"
diff --git a/apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx b/apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx
index 21b0c331985..d63577244af 100644
--- a/apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx
+++ b/apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx
@@ -4,7 +4,6 @@ import { useThirdwebClient } from "@/constants/thirdweb.client";
 import {
   Box,
   FormControl,
-  Icon,
   Input,
   Textarea,
   useDisclosure,
@@ -22,11 +21,9 @@ import type { ProfileMetadata, ProfileMetadataInput } from "constants/schemas";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
 import { useTxNotifications } from "hooks/useTxNotifications";
+import { EditIcon, GlobeIcon, ImageIcon, PencilIcon } from "lucide-react";
 import { useId } from "react";
 import { useForm } from "react-hook-form";
-import { BiImage } from "react-icons/bi";
-import { FiEdit, FiGlobe } from "react-icons/fi";
-import { HiPencilAlt } from "react-icons/hi";
 import {
   getContractPublisher,
   setPublisherProfileUri,
@@ -90,7 +87,7 @@ export const EditProfile: React.FC<EditProfileProps> = ({
         onClick={onOpen}
         size="sm"
         variant="outline"
-        leftIcon={<Icon as={FiEdit} />}
+        leftIcon={<EditIcon />}
       >
         Edit Profile
       </Button>
@@ -177,7 +174,7 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           <FormControl isInvalid={!!errors.avatar}>
             <FormLabel>
               <div className="flex flex-row gap-2">
-                <Icon as={BiImage} boxSize={4} />
+                <ImageIcon className="size-4" />
                 Avatar
               </div>
             </FormLabel>
@@ -200,7 +197,7 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           <FormControl isInvalid={!!errors.bio}>
             <FormLabel>
               <div className="flex flex-row gap-2">
-                <Icon as={HiPencilAlt} boxSize={4} />
+                <PencilIcon className="size-4" />
                 Bio
               </div>
             </FormLabel>
@@ -240,7 +237,7 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           <FormControl isInvalid={!!errors.website}>
             <FormLabel>
               <div className="flex flex-row gap-2">
-                <Icon as={FiGlobe} boxSize={4} />
+                <GlobeIcon className="size-4" />
                 Website
               </div>
             </FormLabel>
diff --git a/apps/dashboard/src/components/contract-components/tables/published-contracts.tsx b/apps/dashboard/src/components/contract-components/tables/published-contracts.tsx
index 3348ac06e44..e2eec1c5474 100644
--- a/apps/dashboard/src/components/contract-components/tables/published-contracts.tsx
+++ b/apps/dashboard/src/components/contract-components/tables/published-contracts.tsx
@@ -1,7 +1,7 @@
 import { Alert, AlertIcon, AlertTitle, Flex, Spinner } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
+import { RefreshCcwIcon } from "lucide-react";
 import { useMemo, useState } from "react";
-import { IoRefreshSharp } from "react-icons/io5";
 import { Button, Heading, LinkButton, Text } from "tw-components";
 import { PublishedContractTable } from "../contract-table-v2";
 import { usePublishedContractsQuery } from "../hooks";
@@ -100,7 +100,7 @@ export const PublishedContracts: React.FC<PublishedContractsProps> = ({
                 </AlertTitle>
                 <Button
                   onClick={() => publishedContractsQuery.refetch()}
-                  leftIcon={<IoRefreshSharp />}
+                  leftIcon={<RefreshCcwIcon className="size-4" />}
                   ml="auto"
                   size="sm"
                   colorScheme="red"
diff --git a/apps/dashboard/src/components/contract-pages/forms/properties.shared.tsx b/apps/dashboard/src/components/contract-pages/forms/properties.shared.tsx
index ef0052b2b54..1e8f3a9caf7 100644
--- a/apps/dashboard/src/components/contract-pages/forms/properties.shared.tsx
+++ b/apps/dashboard/src/components/contract-pages/forms/properties.shared.tsx
@@ -1,7 +1,6 @@
 import {
   Flex,
   FormControl,
-  Icon,
   IconButton,
   Input,
   InputGroup,
@@ -9,7 +8,7 @@ import {
   Tooltip,
 } from "@chakra-ui/react";
 import { FileInput } from "components/shared/FileInput";
-import { PlusIcon } from "lucide-react";
+import { BanIcon, PlusIcon, TrashIcon, UploadIcon, XIcon } from "lucide-react";
 import { useEffect } from "react";
 import {
   type ArrayPath,
@@ -24,7 +23,6 @@ import {
   type WatchObserver,
   useFieldArray,
 } from "react-hook-form";
-import { FiSlash, FiTrash, FiUpload, FiX } from "react-icons/fi";
 import { Button, FormErrorMessage, FormLabel } from "tw-components";
 
 type OptionalPropertiesInput = {
@@ -73,7 +71,7 @@ export const PropertiesFormControl = <
       <Flex justify="space-between" align="center" direction="row">
         <FormLabel m={0}>Attributes</FormLabel>
         <Button
-          rightIcon={<Icon as={FiSlash} />}
+          rightIcon={<BanIcon className="size-4" />}
           variant="outline"
           colorScheme="red"
           size="xs"
@@ -120,11 +118,8 @@ export const PropertiesFormControl = <
                       }
                     />
                     <InputRightElement>
-                      <Icon
-                        as={FiTrash}
-                        cursor="pointer"
-                        color="red.300"
-                        _hover={{ color: "red.200" }}
+                      <TrashIcon
+                        className="size-4 cursor-pointer text-red-300 hover:text-red-200"
                         onClick={() =>
                           setValue(
                             `attributes.${index}.value` as Path<TFieldValues>,
@@ -155,10 +150,7 @@ export const PropertiesFormControl = <
                             );
                           }}
                         >
-                          <Icon
-                            as={FiUpload}
-                            className="text-muted-foreground"
-                          />
+                          <UploadIcon className="size-4 text-muted-foreground" />
                         </FileInput>
                       </Tooltip>
                     </InputRightElement>
@@ -173,7 +165,7 @@ export const PropertiesFormControl = <
               variant="ghost"
               aria-label="remove key value pair"
               size="xs"
-              icon={<Icon as={FiX} />}
+              icon={<XIcon />}
             />
           </div>
         );
diff --git a/apps/dashboard/src/components/product-pages/common/GameCard.tsx b/apps/dashboard/src/components/product-pages/common/GameCard.tsx
index 06fb787cd7a..d7c6f2e2e64 100644
--- a/apps/dashboard/src/components/product-pages/common/GameCard.tsx
+++ b/apps/dashboard/src/components/product-pages/common/GameCard.tsx
@@ -1,8 +1,8 @@
 import { Box, Flex, useBreakpointValue } from "@chakra-ui/react";
 import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 import { useTrack } from "hooks/analytics/useTrack";
+import { GamepadIcon } from "lucide-react";
 import NextImage, { type StaticImageData } from "next/image";
-import { IoGameControllerOutline } from "react-icons/io5";
 import {
   Button,
   Card,
@@ -72,7 +72,7 @@ export const GameCard: React.FC<GameCardProps> = ({
         />
         <div className="absolute inset-0 flex items-center justify-center">
           <Button
-            leftIcon={<IoGameControllerOutline />}
+            leftIcon={<GamepadIcon className="size-4" />}
             color="white"
             bg="rgba(0,0,0,.5)"
             _groupHover={{ bg: "rgba(0,0,0,.9)" }}
diff --git a/apps/dashboard/src/components/product-pages/common/GuideShowcase.tsx b/apps/dashboard/src/components/product-pages/common/GuideShowcase.tsx
index 2c52fbb2289..3241b0c386f 100644
--- a/apps/dashboard/src/components/product-pages/common/GuideShowcase.tsx
+++ b/apps/dashboard/src/components/product-pages/common/GuideShowcase.tsx
@@ -1,5 +1,5 @@
-import { Flex, Icon, SimpleGrid } from "@chakra-ui/react";
-import { FiArrowRight } from "react-icons/fi";
+import { Flex, SimpleGrid } from "@chakra-ui/react";
+import { ArrowRightIcon } from "lucide-react";
 import { Heading, TrackedLink, type TrackedLinkProps } from "tw-components";
 import { GuideCard } from "./GuideCard";
 import { ProductSection } from "./ProductSection";
@@ -105,7 +105,7 @@ export const GuidesShowcase: React.FC<GuidesShowcaseProps> = ({
                 See all of our {solution.replace("-", " ")}{" "}
                 {caseStudies ? "case studies" : "guides"}
               </Heading>
-              <Icon as={FiArrowRight} />
+              <ArrowRightIcon className="size-4" />
             </Flex>
           </TrackedLink>
         )}
diff --git a/apps/dashboard/src/components/product-pages/common/Hero.tsx b/apps/dashboard/src/components/product-pages/common/Hero.tsx
index 998d201ab93..5979dccd4b5 100644
--- a/apps/dashboard/src/components/product-pages/common/Hero.tsx
+++ b/apps/dashboard/src/components/product-pages/common/Hero.tsx
@@ -1,8 +1,8 @@
-import { Container, Flex, GridItem, Icon, SimpleGrid } from "@chakra-ui/react";
+import { Container, Flex, GridItem, SimpleGrid } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
+import { ChevronRightIcon } from "lucide-react";
 import type { StaticImageData } from "next/image";
 import type { ReactElement, ReactNode } from "react";
-import { FiChevronRight } from "react-icons/fi";
 import { Heading, LinkButton, Text, TrackedLink } from "tw-components";
 import type { ComponentWithChildren } from "types/component-with-children";
 import { ProductButton } from "./ProductButton";
@@ -74,7 +74,7 @@ export const Hero: ComponentWithChildren<HeroProps> = ({
             >
               {type}
             </Text>
-            <Icon as={FiChevronRight} color="whiteAlpha.800" />
+            <ChevronRightIcon className="size-4 text-white opacity-80" />
             <Text
               cursor="default"
               fontWeight="medium"
diff --git a/apps/dashboard/src/components/product-pages/common/ImageCard.tsx b/apps/dashboard/src/components/product-pages/common/ImageCard.tsx
index e8e3d9c7f3a..b121cc34c19 100644
--- a/apps/dashboard/src/components/product-pages/common/ImageCard.tsx
+++ b/apps/dashboard/src/components/product-pages/common/ImageCard.tsx
@@ -1,6 +1,6 @@
-import { Box, Flex, Icon } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
+import { ArrowRightIcon } from "lucide-react";
 import NextImage, { type StaticImageData } from "next/image";
-import { FiArrowRight } from "react-icons/fi";
 import { Card, Heading, TrackedLink } from "tw-components";
 import type { ComponentWithChildren } from "types/component-with-children";
 
@@ -75,15 +75,7 @@ export const ImageCard: ComponentWithChildren<ImageCardProps> = ({
           {href && (
             <Flex alignItems="center">
               {linkTitle || <span>Visit website</span>}
-              <Icon
-                as={FiArrowRight}
-                transform="rotate(-45deg)"
-                transition="transform 0.2s"
-                _groupHover={{
-                  transform: "rotate(-45deg) translateX(2px)",
-                }}
-                ml={2}
-              />
+              <ArrowRightIcon className="-rotate-45 ml-2 size-4 transition-transform group-hover:translate-x-1 group-hover:rotate-45" />
             </Flex>
           )}
         </Flex>
diff --git a/apps/dashboard/src/components/product-pages/common/ProductLearnMoreCard.tsx b/apps/dashboard/src/components/product-pages/common/ProductLearnMoreCard.tsx
index d4671d911a4..5fbc5e87147 100644
--- a/apps/dashboard/src/components/product-pages/common/ProductLearnMoreCard.tsx
+++ b/apps/dashboard/src/components/product-pages/common/ProductLearnMoreCard.tsx
@@ -1,8 +1,8 @@
-import { Flex, Icon } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
+import { ArrowRightIcon } from "lucide-react";
 import type { StaticImageData } from "next/image";
 import type { ReactNode } from "react";
-import { FiArrowRight } from "react-icons/fi";
 import {
   Heading,
   Text,
@@ -51,12 +51,7 @@ export const ProductLearnMoreCard: React.FC<ProductLearnMoreCardProps> = ({
         role="group"
       >
         <span>Learn more</span>
-        <Icon
-          as={FiArrowRight}
-          transform="rotate(-45deg)"
-          transition="transform 0.2s"
-          _groupHover={{ transform: "rotate(-45deg) translateX(2px)" }}
-        />
+        <ArrowRightIcon className="-rotate-45 ml-2 size-4 transition-transform group-hover:translate-x-1 group-hover:rotate-45" />
       </TrackedLink>
     </Flex>
   );
diff --git a/apps/dashboard/src/components/settings/Account/Billing/DowngradeDialog.tsx b/apps/dashboard/src/components/settings/Account/Billing/DowngradeDialog.tsx
index e9bd4256e9e..878510b6f4c 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/DowngradeDialog.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/DowngradeDialog.tsx
@@ -6,14 +6,13 @@ import {
   AlertDialogHeader,
   AlertDialogOverlay,
   Flex,
-  Icon,
   Menu,
   MenuButton,
   MenuList,
   Textarea,
 } from "@chakra-ui/react";
+import { ChevronDownIcon, XIcon } from "lucide-react";
 import { useRef, useState } from "react";
-import { FiChevronDown, FiX } from "react-icons/fi";
 import { Button, MenuItem, Text } from "tw-components";
 
 const DOWNGRADE_OPTIONS = {
@@ -68,7 +67,7 @@ export const BillingDowngradeDialog: React.FC<BillingDowngradeDialogProps> = ({
                       className="flex flex-row items-center gap-2"
                       key={Array.isArray(feat) ? feat[0] : feat}
                     >
-                      <Icon as={FiX} boxSize={4} color="red.500" />
+                      <XIcon className="size-4 text-destructive-text" />
                       <Text>{Array.isArray(feat) ? feat[0] : feat}</Text>
                     </div>
                   ))}
@@ -87,7 +86,7 @@ export const BillingDowngradeDialog: React.FC<BillingDowngradeDialogProps> = ({
                         w="full"
                         fontSize="small"
                         textAlign="left"
-                        rightIcon={<FiChevronDown />}
+                        rightIcon={<ChevronDownIcon className="size-4" />}
                       >
                         {feedback
                           ? DOWNGRADE_OPTIONS[
diff --git a/apps/dashboard/src/components/settings/Account/Billing/Header.tsx b/apps/dashboard/src/components/settings/Account/Billing/Header.tsx
index 5c54bf8c635..2ee8385390c 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/Header.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/Header.tsx
@@ -1,5 +1,5 @@
-import { Flex, Icon } from "@chakra-ui/react";
-import { FiAlertCircle, FiCheckCircle, FiInfo } from "react-icons/fi";
+import { Flex } from "@chakra-ui/react";
+import { AlertCircleIcon, CheckCircleIcon, InfoIcon } from "lucide-react";
 import { Badge, Text } from "tw-components";
 
 interface BillingHeaderProps {
@@ -29,20 +29,8 @@ export const BillingHeader: React.FC<BillingHeaderProps> = ({
         >
           <span className="flex flex-row items-center gap-2">
             <Icon
-              as={
-                validPayment
-                  ? FiCheckCircle
-                  : paymentVerification
-                    ? FiInfo
-                    : FiAlertCircle
-              }
-              color={
-                validPayment
-                  ? "green.500"
-                  : paymentVerification
-                    ? "orange.500"
-                    : "red.500"
-              }
+              validPayment={validPayment}
+              paymentVerification={paymentVerification}
             />
             <Text size="label.sm" as="span">
               {validPayment
@@ -57,3 +45,16 @@ export const BillingHeader: React.FC<BillingHeaderProps> = ({
     </Flex>
   );
 };
+
+function Icon(props: {
+  validPayment: boolean;
+  paymentVerification: boolean;
+}) {
+  if (props.validPayment) {
+    return <CheckCircleIcon className="size-4 text-success-text" />;
+  }
+  if (props.paymentVerification) {
+    return <InfoIcon className="size-4 text-warning-text" />;
+  }
+  return <AlertCircleIcon className="size-4 text-error-text" />;
+}
diff --git a/apps/dashboard/src/components/settings/Account/Billing/index.tsx b/apps/dashboard/src/components/settings/Account/Billing/index.tsx
index a0f0240d2fb..e751ad1ace8 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/index.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/index.tsx
@@ -5,15 +5,15 @@ import {
   AccountStatus,
   useUpdateAccountPlan,
 } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex, Icon } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { StepsCard } from "components/dashboard/StepsCard";
 import { OnboardingModal } from "components/onboarding/Modal";
 import { AccountForm } from "components/settings/Account/AccountForm";
 import { ManageBillingButton } from "components/settings/Account/Billing/ManageButton";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
+import { ExternalLinkIcon } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { FiExternalLink } from "react-icons/fi";
 import { Button, Heading, Text, TrackedLink } from "tw-components";
 import { PLANS } from "utils/pricing";
 import { LazyOnboardingBilling } from "../../../onboarding/LazyOnboardingBilling";
@@ -284,7 +284,7 @@ export const Billing: React.FC<BillingProps> = ({ account, teamId }) => {
       >
         <div className="flex flex-row items-center gap-2">
           <Text color="blue.500">Learn more about thirdweb&apos;s pricing</Text>
-          <Icon as={FiExternalLink} />
+          <ExternalLinkIcon className="size-4" />
         </div>
       </TrackedLink>
 
diff --git a/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx b/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx
index 30922b03ccf..3a9e52aafde 100644
--- a/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx
+++ b/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx
@@ -25,9 +25,9 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { GatedSwitch } from "components/settings/Account/Billing/GatedSwitch";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
+import { TrashIcon } from "lucide-react";
 import { useMemo } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
-import { LuTrash2 } from "react-icons/lu";
 import { isAddress } from "thirdweb/utils";
 import {
   Button,
@@ -598,7 +598,7 @@ export function AccountAbstractionSettingsPage(
                           />
                           <IconButton
                             aria-label="Remove header"
-                            icon={<LuTrash2 />}
+                            icon={<TrashIcon />}
                             onClick={() => {
                               customHeaderFields.remove(customHeaderIdx);
                             }}
diff --git a/apps/dashboard/src/contract-ui/tabs/manage/components/InstalledModulesTable.tsx b/apps/dashboard/src/contract-ui/tabs/manage/components/InstalledModulesTable.tsx
index 435d2ff478d..decc22e4118 100644
--- a/apps/dashboard/src/contract-ui/tabs/manage/components/InstalledModulesTable.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/manage/components/InstalledModulesTable.tsx
@@ -18,9 +18,8 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useMutation } from "@tanstack/react-query";
 import { TransactionButton } from "components/buttons/TransactionButton";
-import { CircleSlash } from "lucide-react";
+import { CircleSlash, TrashIcon } from "lucide-react";
 import { useState } from "react";
-import { FaRegTrashAlt } from "react-icons/fa";
 import { toast } from "sonner";
 import {
   type ContractOptions,
@@ -233,7 +232,7 @@ function ModuleRow(props: {
                 {uninstallMutation.isPending ? (
                   <Spinner className="size-4" />
                 ) : (
-                  <FaRegTrashAlt className="size-4" />
+                  <TrashIcon className="size-4" />
                 )}
               </Button>
             </ToolTipLabel>
diff --git a/apps/dashboard/src/contract-ui/tabs/permissions/components/contract-permission.tsx b/apps/dashboard/src/contract-ui/tabs/permissions/components/contract-permission.tsx
index 8920ec842a3..0623afff71d 100644
--- a/apps/dashboard/src/contract-ui/tabs/permissions/components/contract-permission.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/permissions/components/contract-permission.tsx
@@ -1,7 +1,7 @@
 import { useIsAdmin } from "@3rdweb-sdk/react/hooks/useContractRoles";
-import { Flex, Icon, Select, Spinner } from "@chakra-ui/react";
+import { Flex, Select, Spinner } from "@chakra-ui/react";
+import { InfoIcon } from "lucide-react";
 import { useFormContext } from "react-hook-form";
-import { FiInfo } from "react-icons/fi";
 import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
 import { Card, Heading, Text } from "tw-components";
 import { PermissionEditor } from "./permissions-editor";
@@ -165,12 +165,7 @@ export const ContractPermission: React.FC<ContractPermissionProps> = ({
               padding="10px"
               gap={3}
             >
-              <Icon
-                as={FiInfo}
-                color="primary.800"
-                _dark={{ color: "primary.100" }}
-                boxSize={6}
-              />
+              <InfoIcon className="size-6 text-primary-foreground hover:opacity-10" />
               <Text color="primary.800" _dark={{ color: "primary.100" }}>
                 {isRestricted ? (
                   <>
@@ -205,12 +200,7 @@ export const ContractPermission: React.FC<ContractPermissionProps> = ({
               padding="10px"
               gap={3}
             >
-              <Icon
-                as={FiInfo}
-                color="primary.800"
-                _dark={{ color: "primary.100" }}
-                boxSize={6}
-              />
+              <InfoIcon className="size-6 text-primary-foreground hover:opacity-10" />
               <Text color="primary.800" _dark={{ color: "primary.100" }}>
                 {isRestricted ? (
                   <>
@@ -239,12 +229,7 @@ export const ContractPermission: React.FC<ContractPermissionProps> = ({
               padding="10px"
               gap={3}
             >
-              <Icon
-                as={FiInfo}
-                color="primary.800"
-                _dark={{ color: "primary.100" }}
-                boxSize={6}
-              />
+              <InfoIcon className="size-6 text-primary-foreground hover:opacity-10" />
               <Text color="primary.800" _dark={{ color: "primary.100" }}>
                 {isRestricted ? (
                   <>
diff --git a/apps/dashboard/src/contract-ui/tabs/proposals/components/proposal.tsx b/apps/dashboard/src/contract-ui/tabs/proposals/components/proposal.tsx
index 076d8e76dfe..25f43efea44 100644
--- a/apps/dashboard/src/contract-ui/tabs/proposals/components/proposal.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/proposals/components/proposal.tsx
@@ -4,10 +4,10 @@ import {
   tokensDelegated,
   votingTokenDecimals,
 } from "@3rdweb-sdk/react/hooks/useVote";
-import { Flex, Icon } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
+import { CheckIcon, MinusIcon, XIcon } from "lucide-react";
 import { useState } from "react";
-import { FiCheck, FiMinus, FiX } from "react-icons/fi";
 import { toast } from "sonner";
 import { type ThirdwebContract, toTokens } from "thirdweb";
 import * as VoteExt from "thirdweb/extensions/vote";
@@ -139,7 +139,7 @@ export const Proposal: React.FC<IProposal> = ({ proposal, contract }) => {
             txChainID={contract.chain.id}
             size="sm"
             transactionCount={1}
-            rightIcon={<Icon as={FiCheck} />}
+            rightIcon={<CheckIcon />}
             onClick={() => castVote(1)}
             colorScheme="green"
             isDisabled={sendTx.isPending && voteType !== 1}
@@ -151,7 +151,7 @@ export const Proposal: React.FC<IProposal> = ({ proposal, contract }) => {
             txChainID={contract.chain.id}
             size="sm"
             transactionCount={1}
-            rightIcon={<Icon as={FiX} />}
+            rightIcon={<XIcon />}
             onClick={() => castVote(0)}
             colorScheme="red"
             isDisabled={sendTx.isPending && voteType !== 0}
@@ -164,7 +164,7 @@ export const Proposal: React.FC<IProposal> = ({ proposal, contract }) => {
             colorScheme="blackAlpha"
             size="sm"
             transactionCount={1}
-            rightIcon={<Icon as={FiMinus} />}
+            rightIcon={<MinusIcon />}
             onClick={() => castVote(2)}
             isDisabled={sendTx.isPending && voteType !== 2}
             isLoading={sendTx.isPending && voteType === 2}
@@ -177,7 +177,7 @@ export const Proposal: React.FC<IProposal> = ({ proposal, contract }) => {
           <Button
             colorScheme="primary"
             size="sm"
-            leftIcon={<Icon as={FiCheck} />}
+            leftIcon={<CheckIcon />}
             onClick={() => {
               const executeTx = VoteExt.executeProposal({
                 contract,
diff --git a/apps/dashboard/src/tw-components/button.tsx b/apps/dashboard/src/tw-components/button.tsx
index 7d6bf5ae488..82eaa859598 100644
--- a/apps/dashboard/src/tw-components/button.tsx
+++ b/apps/dashboard/src/tw-components/button.tsx
@@ -1,7 +1,6 @@
 import {
   Button as ChakraButton,
   type ButtonProps as ChakraButtonProps,
-  Icon,
   IconButton,
   type IconButtonProps,
   LightMode,
@@ -11,8 +10,8 @@ import {
 } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useClipboard } from "hooks/useClipboard";
+import { CheckIcon, CopyIcon, ExternalLinkIcon } from "lucide-react";
 import { forwardRef as reactForwardRef } from "react";
-import { FiCheck, FiCopy, FiExternalLink } from "react-icons/fi";
 import { fontWeights, letterSpacings, lineHeights } from "theme/typography";
 import { ChakraNextLink } from "./link";
 import { convertFontSizeToCSSVar } from "./utils/typography";
@@ -96,7 +95,9 @@ export const LinkButton = reactForwardRef<HTMLButtonElement, LinkButtonProps>(
           isExternal
           ref={ref}
           textDecoration="none!important"
-          rightIcon={noIcon ? undefined : <Icon as={FiExternalLink} />}
+          rightIcon={
+            noIcon ? undefined : <ExternalLinkIcon className="size-4" />
+          }
           {...restButtonProps}
         >
           {children}
@@ -198,15 +199,7 @@ export const TrackedCopyButton = forwardRef<TrackedCopyButtonProps, "button">(
         size="sm"
         onClick={copy}
         icon={
-          hasCopied ? (
-            <Icon
-              color="green.400"
-              _light={{ color: "green.600" }}
-              as={FiCheck}
-            />
-          ) : (
-            <Icon as={FiCopy} />
-          )
+          hasCopied ? <CheckIcon className="text-success-text" /> : <CopyIcon />
         }
         {...restButtonProps}
       />
diff --git a/apps/portal/package.json b/apps/portal/package.json
index eb1534c9de3..75de0f316ce 100644
--- a/apps/portal/package.json
+++ b/apps/portal/package.json
@@ -42,7 +42,6 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-html-parser": "2.0.2",
-    "react-icons": "^5.2.1",
     "remark-gfm": "3.0.1",
     "semver": "^7.6.0",
     "server-only": "^0.0.1",
diff --git a/apps/portal/src/app/Header.tsx b/apps/portal/src/app/Header.tsx
index 03b9a2b42c8..3a0371502a4 100644
--- a/apps/portal/src/app/Header.tsx
+++ b/apps/portal/src/app/Header.tsx
@@ -1,21 +1,20 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
-import clsx from "clsx";
-import { ChevronDownIcon, Menu } from "lucide-react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-
 import { DocSearch } from "@/components/others/DocSearch";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import clsx from "clsx";
+import { ChevronDownIcon, Menu } from "lucide-react";
 import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { useState } from "react";
-import { FaGithub } from "react-icons/fa";
+import { GithubIcon } from "../components/Document/GithubButtonLink";
 import { CustomAccordion } from "../components/others/CustomAccordion";
 import { ThemeSwitcher } from "../components/others/theme/ThemeSwitcher";
 import { ThirdwebIcon } from "../icons/thirdweb";
@@ -136,7 +135,7 @@ export function Header() {
             target="_blank"
             className="text-f-100"
           >
-            <FaGithub className="mx-3 size-6" />
+            <GithubIcon className="mx-3 size-6" />
           </Link>
 
           {/* Mobile burger menu */}
@@ -218,7 +217,7 @@ export function Header() {
               target="_blank"
               className="hidden text-f-300 transition-colors hover:text-f-100 xl:block"
             >
-              <FaGithub className="mx-2 size-6" />
+              <GithubIcon className="mx-2 size-6" />
             </Link>
           </div>
         </nav>
diff --git a/apps/portal/src/components/Document/Cards/GithubTemplateCard.tsx b/apps/portal/src/components/Document/Cards/GithubTemplateCard.tsx
index 9662dc5da56..fbf3c62807c 100644
--- a/apps/portal/src/components/Document/Cards/GithubTemplateCard.tsx
+++ b/apps/portal/src/components/Document/Cards/GithubTemplateCard.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { BsGithub } from "react-icons/bs";
+import { GithubIcon } from "../GithubButtonLink";
 
 export function GithubTemplateCard(props: {
   title: string;
@@ -10,7 +10,7 @@ export function GithubTemplateCard(props: {
     <Link href={props.href} target="_blank" className="flex cursor-default">
       <article className="group/article flex w-full items-center overflow-hidden rounded-lg border bg-b-800 transition-colors duration-300 hover:border-accent-500 hover:bg-accent-900">
         <div className="flex w-full items-center gap-4 p-4">
-          <BsGithub className="size-6 shrink-0" />
+          <GithubIcon className="size-6 shrink-0" />
           <h3 className="font-medium text-base">{props.title}</h3>
           {props.tag && (
             <div className="ml-auto shrink-0 rounded-lg border bg-b-700 px-2 py-1 text-f-200 text-xs transition-colors">
diff --git a/apps/portal/src/components/Document/EditPage.tsx b/apps/portal/src/components/Document/EditPage.tsx
index 4043fce9b80..da80c6d40b7 100644
--- a/apps/portal/src/components/Document/EditPage.tsx
+++ b/apps/portal/src/components/Document/EditPage.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { BsGithub } from "react-icons/bs";
+import { GithubIcon } from "./GithubButtonLink";
 
 const prefix =
   "https://github.com/thirdweb-dev/js/edit/main/apps/portal/src/app";
@@ -12,7 +12,7 @@ export function EditPage(props: { path: string }) {
       className="inline-flex items-center rounded-lg border text-sm duration-200 hover:border-f-300"
     >
       <div className="p-2.5">
-        <BsGithub className="size-5" />
+        <GithubIcon className="size-5" />
       </div>
       <div className="border-l-2 p-2.5 font-semibold">Edit this page</div>
     </Link>
diff --git a/apps/portal/src/components/Document/GithubButtonLink.tsx b/apps/portal/src/components/Document/GithubButtonLink.tsx
index 291cdd78526..66a1f5346a2 100644
--- a/apps/portal/src/components/Document/GithubButtonLink.tsx
+++ b/apps/portal/src/components/Document/GithubButtonLink.tsx
@@ -1,5 +1,22 @@
 import Link from "next/link";
-import { BsGithub } from "react-icons/bs";
+import type { SVGProps } from "react";
+
+export const GithubIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width={24}
+      height={24}
+      {...props}
+    >
+      <title>GitHub</title>
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+    </svg>
+  );
+};
 
 export function GithubButtonLink(props: { href: string }) {
   return (
@@ -9,7 +26,7 @@ export function GithubButtonLink(props: { href: string }) {
       className="inline-flex items-center rounded-lg border text-sm duration-200 hover:border-f-300"
     >
       <div className="p-2.5">
-        <BsGithub className="size-5" />
+        <GithubIcon className="size-5" />
       </div>
       <div className="border-l-2 p-2.5 font-semibold">View on GitHub</div>
     </Link>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8bcadfcfce1..8916368e37f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -252,9 +252,6 @@ importers:
       react-hook-form:
         specifier: 7.52.0
         version: 7.52.0(react@18.3.1)
-      react-icons:
-        specifier: ^5.2.1
-        version: 5.3.0(react@18.3.1)
       react-intersection-observer:
         specifier: ^9.10.3
         version: 9.13.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -611,9 +608,6 @@ importers:
       react-html-parser:
         specifier: 2.0.2
         version: 2.0.2(react@18.3.1)
-      react-icons:
-        specifier: ^5.2.1
-        version: 5.3.0(react@18.3.1)
       remark-gfm:
         specifier: 3.0.1
         version: 3.0.1
@@ -12856,11 +12850,6 @@ packages:
     peerDependencies:
       react: ^0.14.0 || ^15.0.0 || ^16.0.0-0
 
-  react-icons@5.3.0:
-    resolution: {integrity: sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==}
-    peerDependencies:
-      react: '*'
-
   react-immutable-proptypes@2.2.0:
     resolution: {integrity: sha512-Vf4gBsePlwdGvSZoLSBfd4HAP93HDauMY4fDjXhreg/vg6F3Fj/MXDNyTbltPC/xZKmZc+cjLu3598DdYK6sgQ==}
     peerDependencies:
@@ -32473,10 +32462,6 @@ snapshots:
       htmlparser2: 3.10.1
       react: 18.3.1
 
-  react-icons@5.3.0(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-
   react-immutable-proptypes@2.2.0(immutable@3.8.2):
     dependencies:
       immutable: 3.8.2