diff --git a/app/[locale]/developers/tutorials/_components/tutorials.tsx b/app/[locale]/developers/tutorials/_components/tutorials.tsx
index bcd860496dd..e458bc72ac5 100644
--- a/app/[locale]/developers/tutorials/_components/tutorials.tsx
+++ b/app/[locale]/developers/tutorials/_components/tutorials.tsx
@@ -8,6 +8,7 @@ import React, {
   useMemo,
   useState,
 } from "react"
+import { ExternalLink } from "lucide-react"
 import { useLocale } from "next-intl"
 
 import { ITutorial, Lang } from "@/lib/types"
@@ -198,13 +199,11 @@ const TutorialsList = ({ internalTutorials }: TutorialsListProps) => {
               href={tutorial.href ?? undefined}
             >
               <Flex className="mb-8 flex-col items-start justify-between gap-y-4 md:-mb-4 md:flex-row">
-                <Text
-                  className={cn(
-                    "relative me-0 text-2xl font-semibold text-body after:ml-2 after:inline-block after:italic after:transition-all after:duration-100 after:ease-in-out after:content-['↗'] md:me-24",
-                    tutorial.isExternal ? "after:inline-block" : "after:hidden"
-                  )}
-                >
+                <Text className="relative me-0 text-2xl font-semibold text-body md:me-24">
                   {tutorial.title}
+                  {tutorial.isExternal && (
+                    <ExternalLink className="mb-[0.25em] ms-[0.25em] inline-block size-[0.875em]" />
+                  )}
                 </Text>
                 <Tag variant="outline">
                   <Translation id={getSkillTranslationId(tutorial.skill!)} />
diff --git a/app/[locale]/stablecoins/page.tsx b/app/[locale]/stablecoins/page.tsx
index f0c8cbd8267..56506cb8aca 100644
--- a/app/[locale]/stablecoins/page.tsx
+++ b/app/[locale]/stablecoins/page.tsx
@@ -1,5 +1,5 @@
 import { pick } from "lodash"
-import { HelpCircle } from "lucide-react"
+import { Info } from "lucide-react"
 import {
   getMessages,
   getTranslations,
@@ -94,6 +94,7 @@ const loadData = dataLoader<[CoinGeckoCoinMarketResponse]>(
 async function Page({ params }: { params: Promise<{ locale: Lang }> }) {
   const { locale } = await params
   const t = await getTranslations({ locale, namespace: "page-stablecoins" })
+  const tCommon = await getTranslations({ locale, namespace: "common" })
 
   setRequestLocale(locale)
 
@@ -248,7 +249,7 @@ async function Page({ params }: { params: Promise<{ locale: Lang }> }) {
 
   const tooltipContent = (
     <div>
-      {t("common:data-provided-by")}{" "}
+      {tCommon("data-provided-by")}{" "}
       <InlineLink href="https://www.coingecko.com/en/api">
         coingecko.com
       </InlineLink>
@@ -555,9 +556,9 @@ async function Page({ params }: { params: Promise<{ locale: Lang }> }) {
             </div>
 
             <h3 id="stablecoin-markets" className="mb-8 mt-12">
-              {t("page-stablecoins-top-coins")}
+              {t("page-stablecoins-top-coins")}&nbsp;
               <Tooltip content={tooltipContent}>
-                <HelpCircle className="ms-2 fill-body text-md" />
+                <Info className="size-4" />
               </Tooltip>
             </h3>
 
diff --git a/app/[locale]/staking/deposit-contract/_components/deposit-contract.tsx b/app/[locale]/staking/deposit-contract/_components/deposit-contract.tsx
index f806f1c260c..46144e8bf84 100644
--- a/app/[locale]/staking/deposit-contract/_components/deposit-contract.tsx
+++ b/app/[locale]/staking/deposit-contract/_components/deposit-contract.tsx
@@ -1,7 +1,7 @@
 "use client"
-
 import { useEffect, useState } from "react"
 import makeBlockie from "ethereum-blockies-base64"
+import { Clipboard, ClipboardCheck } from "lucide-react"
 
 import type { ChildOnlyProp, TranslationKey } from "@/lib/types"
 
@@ -375,16 +375,13 @@ const DepositContractPage = () => {
                         <CopyButton>
                           {!isCopied ? (
                             <>
-                              <Emoji text=":clipboard:" className="text-md" />
                               {t("page-staking-deposit-contract-copy")}
+                              <Clipboard className="ms-1" />
                             </>
                           ) : (
                             <>
-                              <Emoji
-                                text=":white_check_mark:"
-                                className="text-md"
-                              />
                               {t("page-staking-deposit-contract-copied")}
+                              <ClipboardCheck className="ms-1" />
                             </>
                           )}
                         </CopyButton>
diff --git a/public/content/translations/fa/zero-knowledge-proofs/index.md b/public/content/translations/fa/zero-knowledge-proofs/index.md
index cb47fa9a1c9..5e1408b84a7 100644
--- a/public/content/translations/fa/zero-knowledge-proofs/index.md
+++ b/public/content/translations/fa/zero-knowledge-proofs/index.md
@@ -108,7 +108,7 @@ lang: fa
 
 استفاده از MACI نیازمند اعتماد به هماهنگ‌کننده مبنی بر تبانی نکردن با رشوه‌دهندگان یا تلاش برای رشوه دادن رای‌دهندگان از سوی او است. هماهنگ‌کننده می‌تواند پیام‌های کاربران را رمزگشایی کند (برای ایجاد اثبات لازم است)، بنابراین آن‌ها می‌توانند نحوۀ رای دادن هر فرد را به‌ طور دقیق تایید کنند.
 
-اما در مواردی که هماهنگ‌کننده صادق است، MACI ابزاری قدرتمند برای تضمین سلامت رای‌گیری آنچین است. این امر بیان‌کنندۀ دلیل محبوبیت آن در میان برنامه‌های تامین مالی ثانویه (مانند [↗clr.fund](https://clr.fund/#/about/maci)) است که به‌شدت بر صحت آرای تک‌تک افراد متکی است.
+اما در مواردی که هماهنگ‌کننده صادق است، MACI ابزاری قدرتمند برای تضمین سلامت رای‌گیری آنچین است. این امر بیان‌کنندۀ دلیل محبوبیت آن در میان برنامه‌های تامین مالی ثانویه (مانند [clr.fund](https://clr.fund/#/about/maci)) است که به‌شدت بر صحت آرای تک‌تک افراد متکی است.
 
 [درباره MACI بیشتر بدانید](https://privacy-scaling-explorations.github.io/maci/).
 
diff --git a/src/components/BigNumber/index.tsx b/src/components/BigNumber/index.tsx
index f5a038073d5..fef399bec85 100644
--- a/src/components/BigNumber/index.tsx
+++ b/src/components/BigNumber/index.tsx
@@ -50,26 +50,29 @@ const BigNumber = async ({
           <div className="text-sm">
             {children}
             {sourceName && sourceUrl && (
-              <Tooltip
-                content={
-                  <>
-                    <p>
-                      {t("data-provided-by")}{" "}
-                      <Link href={sourceUrl}>{sourceName}</Link>
-                    </p>
-                    {lastUpdated && (
-                      <p className="mt-2">
-                        {t("last-updated")}: {lastUpdatedDisplay}
+              <>
+                &nbsp;
+                <Tooltip
+                  content={
+                    <>
+                      <p>
+                        {t("data-provided-by")}{" "}
+                        <Link href={sourceUrl}>{sourceName}</Link>
                       </p>
-                    )}
-                  </>
-                }
-              >
-                <Info
-                  className="mb-0.5 ms-2 inline size-3.5 align-text-bottom"
-                  aria-label={t("data-provided-by")}
-                />
-              </Tooltip>
+                      {lastUpdated && (
+                        <p className="mt-2">
+                          {t("last-updated")}: {lastUpdatedDisplay}
+                        </p>
+                      )}
+                    </>
+                  }
+                >
+                  <Info
+                    className="mb-0.5 inline size-3.5 align-text-bottom"
+                    aria-label={t("data-provided-by")}
+                  />
+                </Tooltip>
+              </>
             )}
           </div>
         </>
diff --git a/src/components/CardList.tsx b/src/components/CardList.tsx
index f6230250eb6..91c9caf1b36 100644
--- a/src/components/CardList.tsx
+++ b/src/components/CardList.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { ExternalLink } from "lucide-react"
 import TwImage, { type ImageProps } from "next/image"
 import type { ReactNode } from "react"
 
@@ -72,7 +73,9 @@ const Card = ({
           <div className="mb-0 text-sm opacity-60">{caption}</div>
         </div>
       )}
-      {isExternal && <span className={twFlipForRtl}>↗</span>}
+      {isExternal && (
+        <ExternalLink className={cn("size-[1em]", twFlipForRtl)} />
+      )}
     </div>
   )
 }
diff --git a/src/components/CodeModal.tsx b/src/components/CodeModal.tsx
index 8ef3b3bae0c..938008a14bc 100644
--- a/src/components/CodeModal.tsx
+++ b/src/components/CodeModal.tsx
@@ -1,5 +1,5 @@
 import { Children, type ReactElement } from "react"
-import { Check, Copy } from "lucide-react"
+import { Clipboard, ClipboardCheck } from "lucide-react"
 
 import { Button } from "./ui/buttons/Button"
 import {
@@ -43,11 +43,13 @@ const CodeModal = ({ children, isOpen, setIsOpen, title }: CodeModalProps) => {
         >
           {hasCopied ? (
             <>
-              <Check /> {t("copied")}
+              {t("copied")}
+              <ClipboardCheck className="ms-1" />
             </>
           ) : (
             <>
-              <Copy /> {t("copy")}
+              {t("copy")}
+              <Clipboard className="ms-1" />
             </>
           )}
         </Button>
diff --git a/src/components/Codeblock.tsx b/src/components/Codeblock.tsx
index dc91bdea881..3e014544463 100644
--- a/src/components/Codeblock.tsx
+++ b/src/components/Codeblock.tsx
@@ -1,6 +1,6 @@
 "use client"
-
 import React, { useState } from "react"
+import { Clipboard, ClipboardCheck } from "lucide-react"
 import Highlight, {
   defaultProps,
   Language,
@@ -10,7 +10,6 @@ import Prism from "prism-react-renderer/prism"
 
 // https://github.com/FormidableLabs/prism-react-renderer/tree/master#custom-language-support
 import CopyToClipboard from "@/components/CopyToClipboard"
-import Emoji from "@/components/Emoji"
 import { Flex } from "@/components/ui/flex"
 
 import { cn } from "@/lib/utils/cn"
@@ -304,16 +303,13 @@ const Codeblock = ({
                         <TopBarItem>
                           {!isCopied ? (
                             <>
-                              <Emoji text=":clipboard:" className="text-md" />{" "}
                               {t("copy")}
+                              <Clipboard className="mb-1 ms-1 inline-block size-[1em]" />
                             </>
                           ) : (
                             <>
-                              <Emoji
-                                text=":white_check_mark:"
-                                className="text-md"
-                              />{" "}
                               {t("copied")}
+                              <ClipboardCheck className="mb-1 ms-1 inline-block size-[1em]" />
                             </>
                           )}
                         </TopBarItem>
diff --git a/src/components/CopyToClipboard.tsx b/src/components/CopyToClipboard.tsx
index 82d04db92e4..f173ba42ba1 100644
--- a/src/components/CopyToClipboard.tsx
+++ b/src/components/CopyToClipboard.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { CheckCircle, Copy } from "lucide-react"
+import { Clipboard, ClipboardCheck } from "lucide-react"
 
 import { cn } from "@/lib/utils/cn"
 
@@ -42,9 +42,9 @@ export const CopyButton = ({ message, ...props }: CopyButtonProps) => {
   return (
     <Button variant="ghost" onClick={() => onCopy(message)} {...props}>
       {hasCopied ? (
-        <CheckCircle className="size-5" />
+        <ClipboardCheck className="size-5" />
       ) : (
-        <Copy className="size-5" />
+        <Clipboard className="size-5" />
       )}
     </Button>
   )
diff --git a/src/components/EthPriceCard.tsx b/src/components/EthPriceCard.tsx
index 394899dd7c9..661bb595efc 100644
--- a/src/components/EthPriceCard.tsx
+++ b/src/components/EthPriceCard.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import { Info } from "lucide-react"
+import { ArrowUpRight, Info } from "lucide-react"
 import { useLocale } from "next-intl"
 
 import type { LoadingState } from "@/lib/types"
@@ -37,7 +37,7 @@ const EthPriceCard = ({
   const [state, setState] = useState<LoadingState<EthPriceState>>({
     loading: true,
   })
-  const { isRtl } = useRtlFlip()
+  const { twFlipForRtl } = useRtlFlip()
 
   useEffect(() => {
     const fetchData = async () => {
@@ -117,9 +117,9 @@ const EthPriceCard = ({
       {...props}
     >
       <h4 className="m-0 flex items-center text-sm font-medium uppercase leading-xs tracking-wider">
-        {t("eth-current-price")}
+        {t("eth-current-price")}&nbsp;
         <Tooltip content={tooltipContent}>
-          <Info className="ms-2 size-[0.875em] text-sm" />
+          <Info className="size-[0.875em] text-sm" />
         </Tooltip>
       </h4>
 
@@ -140,18 +140,12 @@ const EthPriceCard = ({
             isNegativeChange ? "text-error" : "text-success"
           )}
         >
-          <span
-            className={cn(
-              isNegativeChange
-                ? "after:content-['↘']"
-                : "after:content-['↗']",
-              "after:inline-block",
-              /* Cannot string-interpolate 'after:', using isRtl instead */
-              isRtl ? "after:-scale-x-100" : ""
-            )}
-          >
-            {change}
-          </span>
+          {change}
+          {isNegativeChange ? (
+            <ArrowUpRight className={cn(twFlipForRtl, "inline-block")} />
+          ) : (
+            <ArrowUpRight className={cn(twFlipForRtl, "inline-block")} />
+          )}
         </div>
         <div className="text-sm uppercase leading-xs tracking-wider text-body-medium">
           ({t("last-24-hrs")})
diff --git a/src/components/Homepage/CodeExamples.tsx b/src/components/Homepage/CodeExamples.tsx
index 5768f272a5e..36cab10893f 100644
--- a/src/components/Homepage/CodeExamples.tsx
+++ b/src/components/Homepage/CodeExamples.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { Suspense, useState } from "react"
-import { Check, Copy } from "lucide-react"
+import { Clipboard, ClipboardCheck } from "lucide-react"
 import { useLocale } from "next-intl"
 
 import type { CodeExample } from "@/lib/interfaces"
@@ -93,9 +93,11 @@ const CodeExamples = ({ title, codeExamples }: CodeExamplesProps) => {
                     </Codeblock>
                     <CopyToClipboard
                       text={code}
-                      className="absolute end-4 top-4"
+                      className="absolute end-2 top-2 rounded p-2 hover:bg-primary/10 hover:text-primary"
                     >
-                      {(hasCopied) => (hasCopied ? <Check /> : <Copy />)}
+                      {(hasCopied) =>
+                        hasCopied ? <ClipboardCheck /> : <Clipboard />
+                      }
                     </CopyToClipboard>
                   </div>
                 </Suspense>
diff --git a/src/components/Layer2NetworksTable/NetworksSubComponent.tsx b/src/components/Layer2NetworksTable/NetworksSubComponent.tsx
index 2696506b421..38a1e1bf0b0 100644
--- a/src/components/Layer2NetworksTable/NetworksSubComponent.tsx
+++ b/src/components/Layer2NetworksTable/NetworksSubComponent.tsx
@@ -38,7 +38,7 @@ const NetworkSubComponent = ({ network }: NetworkSubComponentProps) => {
             <div className="flex-1">
               <div>
                 <p className="text-xs font-bold text-body-medium">
-                  {t("page-layer-2-networks-age")}{" "}
+                  {t("page-layer-2-networks-age")}&nbsp;
                   <Tooltip
                     content={
                       <div className="flex flex-col gap-2">
@@ -84,7 +84,7 @@ const NetworkSubComponent = ({ network }: NetworkSubComponentProps) => {
             <div className="flex-1">
               <div>
                 <p className="text-xs font-bold text-body-medium">
-                  {t("page-layer-2-networks-wallet-support")}{" "}
+                  {t("page-layer-2-networks-wallet-support")}&nbsp;
                   <Tooltip
                     content={
                       <div className="flex flex-col gap-2">
@@ -119,7 +119,7 @@ const NetworkSubComponent = ({ network }: NetworkSubComponentProps) => {
             <div className="flex-1">
               <div>
                 <p className="text-xs font-bold text-body-medium">
-                  {t("page-layer-2-networks-active-address")}{" "}
+                  {t("page-layer-2-networks-active-address")}&nbsp;
                   <Tooltip
                     content={
                       <div className="flex flex-col gap-2">
@@ -157,7 +157,7 @@ const NetworkSubComponent = ({ network }: NetworkSubComponentProps) => {
             <div className="flex-1">
               <div>
                 <p className="text-xs font-bold text-body-medium">
-                  {t("page-layer-2-networks-fee-token")}{" "}
+                  {t("page-layer-2-networks-fee-token")}&nbsp;
                   <Tooltip
                     content={
                       <div className="flex flex-col gap-2">
@@ -182,7 +182,7 @@ const NetworkSubComponent = ({ network }: NetworkSubComponentProps) => {
         <div className="flex-1 gap-2">
           <div>
             <p className="text-xs font-bold text-body-medium">
-              {t("page-layer-2-networks-network-usage")}{" "}
+              {t("page-layer-2-networks-network-usage")}&nbsp;
               <Tooltip
                 content={
                   <div className="flex flex-col gap-2">
diff --git a/src/components/Leaderboard.tsx b/src/components/Leaderboard.tsx
index 046dcd50be5..8601e84c718 100644
--- a/src/components/Leaderboard.tsx
+++ b/src/components/Leaderboard.tsx
@@ -1,7 +1,10 @@
+import { ExternalLink } from "lucide-react"
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
 
 import Emoji from "@/components/Emoji"
 
+import { cn } from "@/lib/utils/cn"
+
 import { GITHUB_URL } from "@/lib/constants"
 
 import { Avatar } from "./ui/avatar"
@@ -83,9 +86,7 @@ const Leaderboard = ({ content, limit = 100 }: LeaderboardProps) => {
                   </div>
                 </Flex>
                 {emoji && <Emoji className="me-8 text-2xl" text={emoji} />}
-                <span
-                  className={`after:me-1.5 after:ms-0.5 after:content-['↗'] after:${twFlipForRtl} after:inline-block`}
-                />
+                <ExternalLink className={cn("size-[1em]", twFlipForRtl)} />
               </LinkBox>
             </ListItem>
           )
diff --git a/src/components/ListenToPlayer/PlayerWidget/index.tsx b/src/components/ListenToPlayer/PlayerWidget/index.tsx
index 623799ffa4a..565e32b4776 100644
--- a/src/components/ListenToPlayer/PlayerWidget/index.tsx
+++ b/src/components/ListenToPlayer/PlayerWidget/index.tsx
@@ -1,14 +1,15 @@
 import { useCallback, useEffect, useRef, useState } from "react"
-import { X } from "lucide-react"
-
 import {
-  ArrowIcon,
-  AutoplayIcon,
-  CollapseIcon,
-  ExpandIcon,
-  PauseCircleIcon,
-  PlayCircleIcon,
-} from "@/components/icons/listen-to"
+  CirclePause,
+  CirclePlay,
+  Maximize2,
+  Minimize2,
+  SkipBack,
+  SkipForward,
+  X,
+} from "lucide-react"
+
+import AutoplayIcon from "@/components/icons/listen-to/autoplay.svg"
 import Tooltip from "@/components/Tooltip"
 
 import { cn } from "@/lib/utils/cn"
@@ -159,7 +160,7 @@ const PlayerWidget = ({
                 })
               }}
             >
-              <CollapseIcon />
+              <Minimize2 className="stroke-1" />
             </button>
           </Tooltip>
         </div>
@@ -228,17 +229,21 @@ const PlayerWidget = ({
               title="Previous"
               aria-label={"Previous"}
             >
-              <ArrowIcon />
+              <SkipBack className="stroke-[1.5]" />
             </button>
           </PlayerButton>
           <PlayerButton tooltipContent={isPlaying ? "Pause" : "Play"}>
             <button
-              className="cursor-pointer text-[32px] text-primary hover:text-primary-hover"
+              className="text-//[32px] cursor-pointer text-primary hover:text-primary-hover"
               onClick={handlePlayPause}
               title={isPlaying ? "Pause" : "Play"}
               aria-label={isPlaying ? "Pause" : "Play"}
             >
-              {isPlaying ? <PauseCircleIcon /> : <PlayCircleIcon />}
+              {isPlaying ? (
+                <CirclePause className="size-8 stroke-[1.5]" />
+              ) : (
+                <CirclePlay className="size-8 stroke-[1.5]" />
+              )}
             </button>
           </PlayerButton>
           <PlayerButton tooltipContent={"Next"}>
@@ -253,7 +258,7 @@ const PlayerWidget = ({
               title="Next"
               aria-label={"Next"}
             >
-              <ArrowIcon className="rotate-180" />
+              <SkipForward className="stroke-[1.5]" />
             </button>
           </PlayerButton>
           <PlayerButton
@@ -284,12 +289,16 @@ const PlayerWidget = ({
         <div className="flex flex-row items-center gap-2">
           <PlayerButton tooltipContent={isPlaying ? "Pause" : "Play"}>
             <button
-              className="cursor-pointer text-[32px] text-primary hover:text-primary-hover"
+              className="cursor-pointer text-primary hover:text-primary-hover"
               onClick={handlePlayPause}
               title={isPlaying ? "Pause" : "Play"}
               aria-label={isPlaying ? "Pause" : "Play"}
             >
-              {isPlaying ? <PauseCircleIcon /> : <PlayCircleIcon />}
+              {isPlaying ? (
+                <CirclePause className="size-8" />
+              ) : (
+                <CirclePlay className="size-8" />
+              )}
             </button>
           </PlayerButton>
           <div className="text-sm text-body-medium">
@@ -311,7 +320,7 @@ const PlayerWidget = ({
                 })
               }}
             >
-              <ExpandIcon />
+              <Maximize2 className="stroke-1" />
             </button>
           </PlayerButton>
           <PlayerButton tooltipContent={"Close"}>
@@ -324,7 +333,7 @@ const PlayerWidget = ({
                 handleCloseWidget()
               }}
             >
-              <X />
+              <X className="stroke-[1.5]" />
             </button>
           </PlayerButton>
         </div>
diff --git a/src/components/ListenToPlayer/TopOfPagePlayer/index.tsx b/src/components/ListenToPlayer/TopOfPagePlayer/index.tsx
index 11588393e77..0ddcda19aae 100644
--- a/src/components/ListenToPlayer/TopOfPagePlayer/index.tsx
+++ b/src/components/ListenToPlayer/TopOfPagePlayer/index.tsx
@@ -1,4 +1,5 @@
-import { PauseCircleIcon, PlayCircleIcon } from "@/components/icons/listen-to"
+import { CirclePause, CirclePlay } from "lucide-react"
+
 import { Button } from "@/components/ui/buttons/Button"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
@@ -36,12 +37,12 @@ const TopOfPagePlayer = ({
       <div className="flex flex-row items-center gap-2 text-primary hover:text-primary-hover">
         {startedPlaying ? (
           isPlaying ? (
-            <PauseCircleIcon className="h-6 w-6 transition-transform" />
+            <CirclePause />
           ) : (
-            <PlayCircleIcon className="h-6 w-6 transition-transform" />
+            <CirclePlay />
           )
         ) : (
-          <PlayCircleIcon className="h-6 w-6 transition-transform" />
+          <CirclePlay />
         )}
         <div className="text-sm text-body-medium">
           {startedPlaying ? (
diff --git a/src/components/Nav/Client/index.tsx b/src/components/Nav/Client/index.tsx
index 04f34a7bd2d..523ac333e22 100644
--- a/src/components/Nav/Client/index.tsx
+++ b/src/components/Nav/Client/index.tsx
@@ -1,10 +1,10 @@
 "use client"
 
 import { useRef } from "react"
+import { Languages } from "lucide-react"
 import dynamic from "next/dynamic"
 import { useLocale } from "next-intl"
 
-import Translate from "@/components/icons/translate.svg"
 import SearchButton from "@/components/Search/SearchButton"
 import SearchInputButton from "@/components/Search/SearchInputButton"
 import { Skeleton } from "@/components/ui/skeleton"
@@ -146,7 +146,8 @@ const ClientSideNav = () => {
               variant="ghost"
               className="animate-fade-in gap-0 px-2 text-body transition-transform duration-500 active:bg-primary-low-contrast active:text-primary-hover data-[state='open']:bg-primary-low-contrast data-[state='open']:text-primary-hover max-md:hidden xl:px-3 [&_svg]:transition-transform [&_svg]:duration-500 [&_svg]:hover:rotate-12"
             >
-              <Translate className="me-2 align-middle text-2xl" />
+              <Languages className="align-middle text-2xl" />
+              &nbsp;
               <span className="max-lg:hidden">{t("languages")}&nbsp;</span>
               {locale!.toUpperCase()}
             </Button>
diff --git a/src/components/Nav/Mobile/ExpandIcon.tsx b/src/components/Nav/Mobile/ExpandIcon.tsx
index 86600ce81ae..bceaa6f343f 100644
--- a/src/components/Nav/Mobile/ExpandIcon.tsx
+++ b/src/components/Nav/Mobile/ExpandIcon.tsx
@@ -1,34 +1,14 @@
-import { motion } from "framer-motion"
-
-const expandedPathVariants = {
-  closed: {
-    d: "M12 7.875V17.125",
-    transition: { duration: 0.1 },
-  },
-  open: {
-    d: "M12 12V12",
-    transition: { duration: 0.1 },
-  },
-}
+import { Minus, Plus } from "lucide-react"
 
 type ExpandIconProps = {
   isOpen: boolean
 }
 
-const ExpandIcon = ({ isOpen }: ExpandIconProps) => (
-  <svg
-    viewBox="0 0 24 25"
-    className="relative inline-block h-6 w-6 stroke-current stroke-2 group-hover:text-primary-hover"
-  >
-    <motion.path
-      variants={expandedPathVariants}
-      initial={false}
-      animate={isOpen ? "open" : "closed"}
-      d="M12 7.875V17.125"
-      stroke-width="2"
-    />
-    <path d="M7.375 12.5L16.625 12.5" stroke-width="2" />
-  </svg>
-)
+const ExpandIcon = ({ isOpen }: ExpandIconProps) =>
+  isOpen ? (
+    <Minus className="size-6 stroke-[3] p-1 group-hover:text-primary-hover" />
+  ) : (
+    <Plus className="size-6 stroke-[3] p-1 group-hover:text-primary-hover" />
+  )
 
 export default ExpandIcon
diff --git a/src/components/Nav/Mobile/MenuFooter.tsx b/src/components/Nav/Mobile/MenuFooter.tsx
index 5a034d78da1..09eebc7717e 100644
--- a/src/components/Nav/Mobile/MenuFooter.tsx
+++ b/src/components/Nav/Mobile/MenuFooter.tsx
@@ -1,6 +1,5 @@
-import { Moon, Search, Sun } from "lucide-react"
+import { Languages, Moon, Search, Sun } from "lucide-react"
 
-import Translate from "@/components/icons/translate.svg"
 import LanguagePicker from "@/components/LanguagePicker"
 
 import { MOBILE_LANGUAGE_BUTTON_NAME } from "@/lib/constants"
@@ -44,7 +43,7 @@ const MenuFooter = ({
       </FooterButton>
 
       <LanguagePicker dialog handleClose={onToggle}>
-        <FooterButton icon={Translate} name={MOBILE_LANGUAGE_BUTTON_NAME}>
+        <FooterButton icon={Languages} name={MOBILE_LANGUAGE_BUTTON_NAME}>
           <FooterItemText>{t("languages")}</FooterItemText>
         </FooterButton>
       </LanguagePicker>
diff --git a/src/components/ProductTable/MobileFilters.tsx b/src/components/ProductTable/MobileFilters.tsx
index da496ed8fd3..c6a1f5276c9 100644
--- a/src/components/ProductTable/MobileFilters.tsx
+++ b/src/components/ProductTable/MobileFilters.tsx
@@ -1,9 +1,8 @@
 import React from "react"
-import { RotateCcw, X } from "lucide-react"
+import { ListFilter, RotateCcw, X } from "lucide-react"
 
 import { FilterOption, TPresetFilters } from "@/lib/types"
 
-import { FilterBurgerIcon } from "@/components/icons/wallets"
 import Filters from "@/components/ProductTable/Filters"
 import PresetFilters from "@/components/ProductTable/PresetFilters"
 import {
@@ -71,7 +70,9 @@ const MobileFilters = ({
               <p>{t("table-filters")}</p>
               <p className="text-body-medium">{` ${activeFiltersCount} ${t("table-active")}`}</p>
             </div>
-            <FilterBurgerIcon className="h-8 w-8 stroke-primary" />
+            <div className="grid size-8 place-items-center rounded-full border border-primary text-primary">
+              <ListFilter className="-mb-0.5 size-6 stroke-1" />
+            </div>
           </Button>
         </DrawerTrigger>
         <DrawerContent className="flex h-full flex-col p-2">
diff --git a/src/components/RadialChart/index.tsx b/src/components/RadialChart/index.tsx
index 2def64b02c8..53a4d782050 100644
--- a/src/components/RadialChart/index.tsx
+++ b/src/components/RadialChart/index.tsx
@@ -107,23 +107,26 @@ const RadialChart = ({
         <div className="text-sm">
           {label}
           {sourceName && sourceUrl && (
-            <Tooltip
-              content={
-                <>
-                  <p>
-                    {t("data-provided-by")}{" "}
-                    <Link href={sourceUrl}>{sourceName}</Link>
-                  </p>
-                  {lastUpdated && (
-                    <p className="mt-2">
-                      {t("last-updated")}: {lastUpdatedDisplay}
+            <>
+              &nbsp;
+              <Tooltip
+                content={
+                  <>
+                    <p>
+                      {t("data-provided-by")}{" "}
+                      <Link href={sourceUrl}>{sourceName}</Link>
                     </p>
-                  )}
-                </>
-              }
-            >
-              <Info className="mb-0.5 ms-2 inline size-[0.875em] align-text-bottom" />
-            </Tooltip>
+                    {lastUpdated && (
+                      <p className="mt-2">
+                        {t("last-updated")}: {lastUpdatedDisplay}
+                      </p>
+                    )}
+                  </>
+                }
+              >
+                <Info className="mb-0.5 inline size-[0.875em] align-text-bottom" />
+              </Tooltip>
+            </>
           )}
         </div>
       </div>
diff --git a/src/components/Simulator/WalletHome/AddressPill.tsx b/src/components/Simulator/WalletHome/AddressPill.tsx
index 3bcd964d924..2e378672a5e 100644
--- a/src/components/Simulator/WalletHome/AddressPill.tsx
+++ b/src/components/Simulator/WalletHome/AddressPill.tsx
@@ -1,4 +1,4 @@
-import { Copy } from "lucide-react"
+import { Clipboard } from "lucide-react"
 
 import { Flex, type FlexProps } from "@/components/ui/flex"
 
@@ -17,7 +17,7 @@ export const AddressPill = ({ ...btnProps }: AddressPillProps) => (
       {...btnProps}
     >
       <p>{FAKE_DEMO_ADDRESS}</p>
-      <Copy className="size-4 text-lg leading-none" />
+      <Clipboard className="size-4 text-lg leading-none" />
     </Flex>
   </NotificationPopover>
 )
diff --git a/src/components/StablecoinsTable.tsx b/src/components/StablecoinsTable.tsx
index f47b23f8e11..06927f62d37 100644
--- a/src/components/StablecoinsTable.tsx
+++ b/src/components/StablecoinsTable.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { Suspense, useState } from "react"
-import { Filter } from "lucide-react"
+import { ExternalLink, ListFilter } from "lucide-react"
 
 import type { StablecoinType } from "@/lib/types"
 
@@ -188,7 +188,7 @@ const StablecoinsTable = ({ content, hasError }: StablecoinsTableProps) => {
             ({activeTypeCount})
           </span>
         )}
-        <Filter className="text-xl" />
+        <ListFilter className="size-[1em]" />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start">
         {typeFilters.map((filter) => (
@@ -240,7 +240,7 @@ const StablecoinsTable = ({ content, hasError }: StablecoinsTableProps) => {
         {activePegCount !== totalPegCount && (
           <span className="text-xs text-body-medium">({activePegCount})</span>
         )}
-        <Filter className="text-xl" />
+        <ListFilter className="size-[1em]" />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start">
         {pegFilters.map((filter) => (
@@ -298,8 +298,10 @@ const StablecoinsTable = ({ content, hasError }: StablecoinsTableProps) => {
                 <TableHead key={idx}>{column}</TableHead>
               ))}
               {content && content[0]?.url && (
-                <TableHead className="text-right font-normal">
-                  <span className={cn("inline-block", twFlipForRtl)}>↗</span>
+                <TableHead className="text-end font-normal">
+                  <ExternalLink
+                    className={cn("inline-block size-[1.125em]", twFlipForRtl)}
+                  />
                 </TableHead>
               )}
             </TableRow>
diff --git a/src/components/icons/listen-to/arrow.svg b/src/components/icons/listen-to/arrow.svg
deleted file mode 100644
index 1ce1fd8c95b..00000000000
--- a/src/components/icons/listen-to/arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" fill="currentColor">
-  <g> <path d="M8 8C8 7.44772 8.44772 7 9 7C9.55228 7 10 7.44772 10 8V14.4955L22.5344 7.22367C23.5749 6.62004 25 7.30976 25 8.61627V23.3837C25 24.6902 23.5749 25.38 22.5344 24.7764L10 17.5045V24C10 24.5523 9.55228 25 9 25C8.44772 25 8 24.5523 8 24V8ZM23 9.26576L11.3923 16L23 22.7342V9.26576Z" fill="currentColor"/> </g>
-</svg>
\ No newline at end of file
diff --git a/src/components/icons/listen-to/autoplay.svg b/src/components/icons/listen-to/autoplay.svg
index 6d004dfda31..a8e56ea8458 100644
--- a/src/components/icons/listen-to/autoplay.svg
+++ b/src/components/icons/listen-to/autoplay.svg
@@ -1,3 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
-  <g> <path d="M3 6C3 6.55228 3.44772 7 4 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H4C3.44772 5 3 5.44772 3 6Z" fill="currentColor"/> <path d="M6 2C6 2.55228 6.44772 3 7 3H18C18.5523 3 19 2.55228 19 2C19 1.44772 18.5523 1 18 1H7C6.44772 1 6 1.44772 6 2Z" fill="currentColor"/> <path d="M10.147 13.152C9.83974 12.9593 9.45018 12.9491 9.13324 13.1254C8.81629 13.3016 8.62 13.6365 8.62 14V19C8.62 19.3635 8.81629 19.6984 9.13324 19.8746C9.45018 20.0509 9.83974 20.0407 10.147 19.848L16.147 16.348C16.4394 16.1653 16.62 15.8448 16.62 15.5C16.62 15.1552 16.4394 14.8347 16.147 14.652L10.147 13.152Z" fill="currentColor"/> <path d="M2 23C0.895431 23 0 22.1046 0 21V10C0 8.89543 0.895431 8 2 8H22C23.1046 8 24 8.89543 24 10V21C24 22.1046 23.1046 23 22 23H2ZM22 21.5C22.2761 21.5 22.5 21.2761 22.5 21V10C22.5 9.72386 22.2761 9.5 22 9.5H2C1.72386 9.5 1.5 9.72386 1.5 10V21C1.5 21.2761 1.72386 21.5 2 21.5H22Z" fill="currentColor"/> </g>
-</svg>
\ No newline at end of file
+<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+<path d="M2 20V12C2 10.8954 2.89543 10 4 10H20C21.1046 10 22 10.8954 22 12V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20Z"/>
+<path d="M5 6H19"/>
+<path d="M8 2H16"/>
+<path d="M10 18V14L15 16L10 18Z"/>
+</svg>
diff --git a/src/components/icons/listen-to/collapse.svg b/src/components/icons/listen-to/collapse.svg
deleted file mode 100644
index e9a523dbb50..00000000000
--- a/src/components/icons/listen-to/collapse.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-  <g> <path fillRule="evenodd" clipRule="evenodd" d="M0.171796 15.8287C0.367058 16.0239 0.683641 16.0239 0.878903 15.8287L4.9751 11.7325L4.9751 14.5002C4.9751 14.7764 5.19895 15.0002 5.4751 15.0002C5.75124 15.0002 5.9751 14.7764 5.9751 14.5002L5.9751 10.5254C5.9751 10.2492 5.75124 10.0253 5.4751 10.0253L1.50026 10.0254C1.22412 10.0254 1.00026 10.2492 1.00026 10.5254C1.00026 10.8015 1.22412 11.0254 1.50026 11.0254L4.26799 11.0254L0.171796 15.1215C-0.0234656 15.3168 -0.0234656 15.6334 0.171796 15.8287Z" fill="currentColor"/> <path fillRule="evenodd" clipRule="evenodd" d="M15.8287 0.171349C15.6334 -0.0239132 15.3168 -0.0239132 15.1216 0.171349L11.0254 4.26754L11.0254 1.49977C11.0254 1.22363 10.8015 0.999768 10.5254 0.999769C10.2492 0.999768 10.0254 1.22363 10.0254 1.49977L10.0254 5.47465C10.0254 5.75079 10.2492 5.97465 10.5254 5.97465L14.5002 5.97465C14.7764 5.97465 15.0002 5.75079 15.0002 5.47465C15.0002 5.1985 14.7764 4.97465 14.5002 4.97465L11.7325 4.97465L15.8287 0.878456C16.024 0.683194 16.024 0.366611 15.8287 0.171349Z" fill="currentColor"/> </g>
-</svg>
\ No newline at end of file
diff --git a/src/components/icons/listen-to/expand.svg b/src/components/icons/listen-to/expand.svg
deleted file mode 100644
index 709ed75ae2a..00000000000
--- a/src/components/icons/listen-to/expand.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-  <g> <path fillRule="evenodd" clipRule="evenodd" d="M5.82869 10.1713C5.63343 9.97609 5.31685 9.97609 5.12159 10.1713L1.02539 14.2675L1.02539 11.4998C1.02539 11.2236 0.801534 10.9998 0.525392 10.9998C0.249249 10.9998 0.0253906 11.2236 0.025391 11.4998L0.0253906 15.4746C0.0253906 15.7508 0.249249 15.9747 0.525391 15.9747L4.50023 15.9746C4.77637 15.9746 5.00023 15.7508 5.00023 15.4746C5.00023 15.1985 4.77637 14.9746 4.50023 14.9746L1.7325 14.9746L5.82869 10.8785C6.02395 10.6832 6.02395 10.3666 5.82869 10.1713Z" fill="currentColor"/> <path fillRule="evenodd" clipRule="evenodd" d="M10.1718 5.82865C10.3671 6.02391 10.6836 6.02391 10.8789 5.82865L14.9751 1.73246L14.9751 4.50023C14.9751 4.77637 15.199 5.00023 15.4751 5.00023C15.7512 5.00023 15.9751 4.77637 15.9751 4.50023L15.9751 0.52535C15.9751 0.249208 15.7512 0.0253496 15.4751 0.0253496L11.5003 0.0253525C11.2241 0.0253523 11.0003 0.249211 11.0003 0.525353C11.0003 0.801496 11.2241 1.02535 11.5003 1.02535L14.268 1.02535L10.1718 5.12154C9.97653 5.31681 9.97653 5.63339 10.1718 5.82865Z" fill="currentColor"/> </g>
-</svg>
\ No newline at end of file
diff --git a/src/components/icons/listen-to/index.ts b/src/components/icons/listen-to/index.ts
deleted file mode 100644
index eb3a40bae12..00000000000
--- a/src/components/icons/listen-to/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import ArrowIcon from "./arrow.svg"
-import AutoplayIcon from "./autoplay.svg"
-import CollapseIcon from "./collapse.svg"
-import ExpandIcon from "./expand.svg"
-import PauseCircleIcon from "./pause-circle.svg"
-import PlayCircleIcon from "./play-circle.svg"
-
-export {
-  ArrowIcon,
-  AutoplayIcon,
-  CollapseIcon,
-  ExpandIcon,
-  PauseCircleIcon,
-  PlayCircleIcon,
-}
diff --git a/src/components/icons/listen-to/pause-circle.svg b/src/components/icons/listen-to/pause-circle.svg
deleted file mode 100644
index 37a8319c0e2..00000000000
--- a/src/components/icons/listen-to/pause-circle.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
-  <g> <path d="M12 22.5C6.20101 22.5 1.5 17.799 1.5 12C1.5 6.20101 6.20101 1.5 12 1.5C17.799 1.5 22.5 6.20101 22.5 12C22.5 17.799 17.799 22.5 12 22.5ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="currentColor"/> <path d="M7.5 9.375C7.5 8.33947 8.33947 7.5 9.375 7.5C10.4105 7.5 11.25 8.33947 11.25 9.375V14.625C11.25 15.6605 10.4105 16.5 9.375 16.5C8.33947 16.5 7.5 15.6605 7.5 14.625V9.375ZM12.75 9.375C12.75 8.33947 13.5895 7.5 14.625 7.5C15.6605 7.5 16.5 8.33947 16.5 9.375V14.625C16.5 15.6605 15.6605 16.5 14.625 16.5C13.5895 16.5 12.75 15.6605 12.75 14.625V9.375Z" fill="currentColor"/> </g>
-</svg>
\ No newline at end of file
diff --git a/src/components/icons/listen-to/play-circle.svg b/src/components/icons/listen-to/play-circle.svg
deleted file mode 100644
index aa7aca0b606..00000000000
--- a/src/components/icons/listen-to/play-circle.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
-  <g> <path d="M12 22.5C6.20101 22.5 1.5 17.799 1.5 12C1.5 6.20101 6.20101 1.5 12 1.5C17.799 1.5 22.5 6.20101 22.5 12C22.5 17.799 17.799 22.5 12 22.5ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="currentColor"/> <path d="M9.40681 7.58313C9.65662 7.45457 9.95732 7.47641 10.1859 7.6397L15.4359 11.3897C15.633 11.5305 15.75 11.7578 15.75 12C15.75 12.2422 15.633 12.4695 15.4359 12.6103L10.1859 16.3603C9.95732 16.5236 9.65662 16.5454 9.40681 16.4169C9.15701 16.2883 9 16.0309 9 15.75V8.25C9 7.96906 9.15701 7.71168 9.40681 7.58313Z" fill="currentColor"/> </g>
-</svg>
\ No newline at end of file
diff --git a/src/components/icons/translate.svg b/src/components/icons/translate.svg
deleted file mode 100644
index 16e6bd24239..00000000000
--- a/src/components/icons/translate.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286zm1.634-.736L5.5 3.956h-.049l-.679 2.022z"/>
-<path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm7.138 9.995q.289.451.63.846c-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6 6 0 0 1-.415-.492 2 2 0 0 1-.94.31"/>
-</svg>
\ No newline at end of file
diff --git a/src/components/ui/Link.tsx b/src/components/ui/Link.tsx
index b28044e882c..caccf62ae15 100644
--- a/src/components/ui/Link.tsx
+++ b/src/components/ui/Link.tsx
@@ -106,7 +106,7 @@ export const BaseLink = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
         {isMailto ? (
           <span className="text-nowrap">
             {!hideArrow && (
-              <Mail className="mb-0.5 me-1 inline-block size-[1em] shrink-0" />
+              <Mail className="!mb-0.5 me-1 inline-block size-[1em] shrink-0" />
             )}
             {children}
           </span>
@@ -118,8 +118,9 @@ export const BaseLink = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
         </VisuallyHidden>
         {!hideArrow && !isMailto && (
           <ExternalLink
+            data-label="arrow"
             className={cn(
-              "ms-1 inline size-4 shrink-0 align-middle",
+              "!mb-0.5 ms-1 inline-block size-[0.875em] max-h-4 max-w-4 shrink-0",
               twFlipForRtl
             )}
           />
diff --git a/src/components/ui/buttons/Button.tsx b/src/components/ui/buttons/Button.tsx
index a9faf4289b0..774e0703a49 100644
--- a/src/components/ui/buttons/Button.tsx
+++ b/src/components/ui/buttons/Button.tsx
@@ -166,7 +166,10 @@ const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       >
         <BaseLink
           ref={ref}
-          className={cn("no-underline hover:no-underline", className)}
+          className={cn(
+            "no-underline hover:no-underline [&_[data-label='arrow']]:ms-0",
+            className
+          )}
           activeClassName=""
           {...linkProps}
           onClick={handleClick}