diff --git a/.changeset/four-colts-rhyme.md b/.changeset/four-colts-rhyme.md
new file mode 100644
index 000000000..842da84fb
--- /dev/null
+++ b/.changeset/four-colts-rhyme.md
@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+🚸 replace pressable icons with icon button component
diff --git a/.changeset/petite-taxes-do.md b/.changeset/petite-taxes-do.md
new file mode 100644
index 000000000..444919b3c
--- /dev/null
+++ b/.changeset/petite-taxes-do.md
@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+✨ create icon button component
diff --git a/src/components/activity/details/ActivityDetails.tsx b/src/components/activity/details/ActivityDetails.tsx
index 83551a219..19cec69ee 100644
--- a/src/components/activity/details/ActivityDetails.tsx
+++ b/src/components/activity/details/ActivityDetails.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 
 import { useRouter } from "expo-router";
 
@@ -17,6 +16,7 @@ import { present } from "../../../utils/intercom";
 import reportError from "../../../utils/reportError";
 import ActionButton from "../../shared/ActionButton";
 import GradientScrollView from "../../shared/GradientScrollView";
+import IconButton from "../../shared/IconButton";
 
 import type { ActivityItem } from "../../../utils/queryClient";
 
@@ -28,7 +28,9 @@ export default function ActivityDetails() {
   return (
     <GradientScrollView variant="neutral" stickyHeader>
       <XStack gap="$s3_5" justifyContent="space-between" alignItems="center">
-        <Pressable
+        <IconButton
+          icon={ArrowLeft}
+          aria-label={t("Back")}
           onPress={() => {
             if (router.canGoBack()) {
               router.back();
@@ -36,9 +38,7 @@ export default function ActivityDetails() {
               router.replace("/(main)/(home)");
             }
           }}
-        >
-          <ArrowLeft size={24} color="$uiNeutralPrimary" />
-        </Pressable>
+        />
       </XStack>
       {item.type === "card" && <CardActivity item={item} />}
       {item.type === "received" && <ReceivedActivity item={item} />}
diff --git a/src/components/add-funds/AddCrypto.tsx b/src/components/add-funds/AddCrypto.tsx
index 09a9f6afe..d2ef15512 100644
--- a/src/components/add-funds/AddCrypto.tsx
+++ b/src/components/add-funds/AddCrypto.tsx
@@ -23,6 +23,7 @@ import useAccount from "../../utils/useAccount";
 import AssetLogo from "../shared/AssetLogo";
 import ChainLogo from "../shared/ChainLogo";
 import CopyAddressSheet from "../shared/CopyAddressSheet";
+import IconButton from "../shared/IconButton";
 import Image from "../shared/Image";
 import SafeView from "../shared/SafeView";
 import Skeleton from "../shared/Skeleton";
@@ -74,7 +75,9 @@ export default function AddCrypto() {
         <View gap="$s5">
           <XStack gap="$s3" justifyContent="space-around" alignItems="center">
             <View position="absolute" left={0}>
-              <Pressable
+              <IconButton
+                icon={ArrowLeft}
+                aria-label={t("Back")}
                 onPress={() => {
                   if (router.canGoBack()) {
                     router.back();
@@ -82,9 +85,7 @@ export default function AddCrypto() {
                     router.replace("/(main)/(home)");
                   }
                 }}
-              >
-                <ArrowLeft size={24} color="$uiNeutralPrimary" />
-              </Pressable>
+              />
             </View>
             <View flexDirection="row" alignItems="center" alignSelf="center">
               <Text emphasized subHeadline primary>
diff --git a/src/components/add-funds/AddFunds.tsx b/src/components/add-funds/AddFunds.tsx
index 5ecceaff3..ab882b9fd 100644
--- a/src/components/add-funds/AddFunds.tsx
+++ b/src/components/add-funds/AddFunds.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 
 import { useLocalSearchParams, useRouter } from "expo-router";
 
@@ -21,6 +20,7 @@ import queryClient, { type AuthMethod } from "../../utils/queryClient";
 import reportError from "../../utils/reportError";
 import { getKYCStatus, getRampProviders } from "../../utils/server";
 import ChainLogo from "../shared/ChainLogo";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import Skeleton from "../shared/Skeleton";
 import Text from "../shared/Text";
@@ -96,7 +96,9 @@ export default function AddFunds() {
       <View gap="$s6" fullScreen padded>
         <YStack gap="$s4_5">
           <XStack flexDirection="row" gap="$s3_5" justifyContent="space-between" alignItems="center">
-            <Pressable
+            <IconButton
+              icon={ArrowLeft}
+              aria-label={t("Back")}
               onPress={() => {
                 if (type === "crypto" || type === "fiat") {
                   if (router.canGoBack()) {
@@ -108,19 +110,17 @@ export default function AddFunds() {
                   router.replace("/(main)/(home)");
                 }
               }}
-            >
-              <ArrowLeft size={24} color="$uiNeutralPrimary" />
-            </Pressable>
+            />
             <Text emphasized subHeadline primary>
               {t(type === "crypto" ? "Cryptocurrencies" : type === "fiat" ? "Bank transfers" : "Add Funds")}
             </Text>
-            <Pressable
+            <IconButton
+              icon={CircleHelp}
+              aria-label={t("Help")}
               onPress={() => {
                 presentArticle("8950801").catch(reportError);
               }}
-            >
-              <CircleHelp color="$uiNeutralPrimary" />
-            </Pressable>
+            />
           </XStack>
         </YStack>
         <ScrollView flex={1}>
diff --git a/src/components/add-funds/Bridge.tsx b/src/components/add-funds/Bridge.tsx
index 0ad0693c5..545c69478 100644
--- a/src/components/add-funds/Bridge.tsx
+++ b/src/components/add-funds/Bridge.tsx
@@ -39,6 +39,7 @@ import ownerConfig from "../../utils/wagmi/owner";
 import AssetLogo from "../shared/AssetLogo";
 import ChainLogo from "../shared/ChainLogo";
 import GradientScrollView from "../shared/GradientScrollView";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import Skeleton from "../shared/Skeleton";
 import ExaSpinner from "../shared/Spinner";
@@ -475,7 +476,9 @@ export default function Bridge() {
       <GradientScrollView variant={isError ? "error" : isSuccess ? "success" : "neutral"}>
         <View flex={1}>
           <YStack gap="$s7" paddingBottom="$s9">
-            <Pressable
+            <IconButton
+              icon={X}
+              aria-label={t("Close")}
               onPress={() => {
                 if (!isPending) {
                   setSourceAmount(0n);
@@ -485,9 +488,7 @@ export default function Bridge() {
                 }
                 router.dismissTo("/activity");
               }}
-            >
-              <X size={24} color="$uiNeutralPrimary" />
-            </Pressable>
+            />
             <YStack gap="$s4_5" justifyContent="center" alignItems="center">
               <Square
                 size={80}
@@ -572,7 +573,9 @@ export default function Bridge() {
           justifyContent="space-between"
           alignItems="center"
         >
-          <Pressable
+          <IconButton
+            icon={ArrowLeft}
+            aria-label={t("Back")}
             onPress={() => {
               if (router.canGoBack()) {
                 router.back();
@@ -580,19 +583,17 @@ export default function Bridge() {
                 router.replace("/(main)/(home)");
               }
             }}
-          >
-            <ArrowLeft size={24} color="$uiNeutralPrimary" />
-          </Pressable>
+          />
           <Text primary emphasized subHeadline>
             {t("Add funds")}
           </Text>
-          <Pressable
+          <IconButton
+            icon={CircleHelp}
+            aria-label={t("Help")}
             onPress={() => {
               openBrowser("https://li.fi/").catch(reportError); // TODO replace with article
             }}
-          >
-            <CircleHelp color="$uiNeutralPrimary" />
-          </Pressable>
+          />
         </View>
         <ScrollView showsVerticalScrollIndicator={false} flex={1}>
           <View padded>
diff --git a/src/components/add-funds/Fees.tsx b/src/components/add-funds/Fees.tsx
index e1072e113..e536d39c8 100644
--- a/src/components/add-funds/Fees.tsx
+++ b/src/components/add-funds/Fees.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useRef, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { Platform, Pressable } from "react-native";
+import { Platform } from "react-native";
 import { WebView } from "react-native-webview";
 
 import { Redirect, useLocalSearchParams, useRouter } from "expo-router";
@@ -21,6 +21,7 @@ import openBrowser from "../../utils/openBrowser";
 import { APIError } from "../../utils/queryClient";
 import reportError from "../../utils/reportError";
 import { getKYCStatus, getRampProviders } from "../../utils/server";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import Button from "../shared/StyledButton";
 import Text from "../shared/Text";
@@ -131,9 +132,7 @@ export default function Fees() {
     return (
       <SafeView fullScreen>
         <View padded>
-          <Pressable onPress={() => setTOSLink(undefined)}>
-            <ArrowLeft size={24} color="$uiNeutralPrimary" />
-          </Pressable>
+          <IconButton icon={ArrowLeft} aria-label={t("Back")} onPress={() => setTOSLink(undefined)} />
         </View>
         <TOSView
           uri={tosLink}
@@ -152,7 +151,9 @@ export default function Fees() {
       <View gap="$s4_5" fullScreen padded>
         <View gap="$s4_5">
           <View flexDirection="row" gap="$s3_5" justifyContent="space-between" alignItems="center">
-            <Pressable
+            <IconButton
+              icon={ArrowLeft}
+              aria-label={t("Back")}
               onPress={() => {
                 if (router.canGoBack()) {
                   router.back();
@@ -160,9 +161,7 @@ export default function Fees() {
                   router.replace("/(main)/(home)");
                 }
               }}
-            >
-              <ArrowLeft size={24} color="$uiNeutralPrimary" />
-            </Pressable>
+            />
           </View>
         </View>
         <ScrollView flex={1}>
diff --git a/src/components/add-funds/KYC.tsx b/src/components/add-funds/KYC.tsx
index bb4859c88..71d96993b 100644
--- a/src/components/add-funds/KYC.tsx
+++ b/src/components/add-funds/KYC.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 
 import { Redirect, useLocalSearchParams, useRouter } from "expo-router";
 
@@ -17,6 +16,7 @@ import { isValidCurrency } from "../../utils/currencies";
 import { startAddressKYC, startMantecaKYC } from "../../utils/persona";
 import queryClient from "../../utils/queryClient";
 import reportError from "../../utils/reportError";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import Button from "../shared/StyledButton";
 import Text from "../shared/Text";
@@ -81,7 +81,9 @@ export default function KYC() {
       <View gap="$s4_5" fullScreen padded>
         <View gap="$s4_5">
           <View flexDirection="row" gap="$s3" justifyContent="space-between" alignItems="center">
-            <Pressable
+            <IconButton
+              icon={ArrowLeft}
+              aria-label={t("Back")}
               onPress={() => {
                 queryClient.removeQueries({ queryKey: ["ramp", "kyc-tokens", provider] });
                 if (router.canGoBack()) {
@@ -90,9 +92,7 @@ export default function KYC() {
                   router.replace("/(main)/(home)");
                 }
               }}
-            >
-              <ArrowLeft size={24} color="$uiNeutralPrimary" />
-            </Pressable>
+            />
           </View>
         </View>
         <ScrollView flex={1}>
diff --git a/src/components/add-funds/Onboard.tsx b/src/components/add-funds/Onboard.tsx
index 8407546c4..c7f5638d9 100644
--- a/src/components/add-funds/Onboard.tsx
+++ b/src/components/add-funds/Onboard.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 
 import { Redirect, useLocalSearchParams, useRouter } from "expo-router";
 
@@ -20,6 +19,7 @@ import USD from "../../assets/images/usd.svg";
 import USDC from "../../assets/images/usdc.svg";
 import USDT from "../../assets/images/usdt.svg";
 import { isValidCurrency } from "../../utils/currencies";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import Button from "../shared/StyledButton";
 import Text from "../shared/Text";
@@ -50,7 +50,9 @@ export default function Onboard() {
       <View gap="$s4_5" fullScreen padded>
         <View gap="$s4_5">
           <View flexDirection="row" gap="$s3_5" justifyContent="space-between" alignItems="center">
-            <Pressable
+            <IconButton
+              icon={ArrowLeft}
+              aria-label={t("Back")}
               onPress={() => {
                 if (router.canGoBack()) {
                   router.back();
@@ -58,9 +60,7 @@ export default function Onboard() {
                   router.replace("/(main)/(home)");
                 }
               }}
-            >
-              <ArrowLeft size={24} color="$uiNeutralPrimary" />
-            </Pressable>
+            />
           </View>
         </View>
         <ScrollView flex={1}>
diff --git a/src/components/add-funds/Ramp.tsx b/src/components/add-funds/Ramp.tsx
index 4ae4624ed..699750772 100644
--- a/src/components/add-funds/Ramp.tsx
+++ b/src/components/add-funds/Ramp.tsx
@@ -21,6 +21,7 @@ import { isValidCurrency, fees as rampFees } from "../../utils/currencies";
 import reportError from "../../utils/reportError";
 import { getRampProviders, getRampQuote } from "../../utils/server";
 import Button from "../shared/Button";
+import IconButton from "../shared/IconButton";
 import InfoAlert from "../shared/InfoAlert";
 import ModalSheet from "../shared/ModalSheet";
 import SafeView from "../shared/SafeView";
@@ -122,7 +123,9 @@ export default function Ramp() {
       <View gap="$s4_5" fullScreen padded>
         <View gap="$s4_5">
           <View flexDirection="row" gap="$s3_5" justifyContent="space-between" alignItems="center">
-            <Pressable
+            <IconButton
+              icon={ArrowLeft}
+              aria-label={t("Back")}
               onPress={() => {
                 if (router.canGoBack()) {
                   router.back();
@@ -130,9 +133,7 @@ export default function Ramp() {
                   router.replace("/(main)/add-funds");
                 }
               }}
-            >
-              <ArrowLeft size={24} color="$uiNeutralPrimary" />
-            </Pressable>
+            />
             <Text secondary emphasized>
               {deposits.length > 0
                 ? t("{{currency}} via {{methods}}", {
@@ -350,6 +351,7 @@ function DepositCard({ deposit, isLoading, copyToClipboard }: DepositCardPropert
 }
 
 function DetailRow({ label, value, isLoading, onCopy }: DetailRowProperties) {
+  const { t } = useTranslation();
   return (
     <XStack gap="$s3" alignItems="center" justifyContent="space-between">
       <YStack flex={1} minWidth={0}>
@@ -360,9 +362,14 @@ function DetailRow({ label, value, isLoading, onCopy }: DetailRowProperties) {
           {isLoading || !value ? <Skeleton width={100} height={16} /> : value}
         </Text>
       </YStack>
-      <Pressable disabled={isLoading || !value} onPress={onCopy} style={{ flexShrink: 0 }}>
-        <Copy size={24} color={isLoading || !value ? "$uiNeutralPlaceholder" : "$interactiveBaseBrandDefault"} />
-      </Pressable>
+      <IconButton
+        icon={Copy}
+        color={isLoading || !value ? "$uiNeutralPlaceholder" : "$interactiveBaseBrandDefault"}
+        disabled={isLoading || !value}
+        aria-label={t("Copy")}
+        flexShrink={0}
+        onPress={onCopy}
+      />
     </XStack>
   );
 }
diff --git a/src/components/auth/Passkeys.tsx b/src/components/auth/Passkeys.tsx
index 2c85db16c..7fae00b66 100644
--- a/src/components/auth/Passkeys.tsx
+++ b/src/components/auth/Passkeys.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { Pressable, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
 
 import { useRouter } from "expo-router";
 
@@ -17,6 +17,7 @@ import useAuth from "../../utils/useAuth";
 import ActionButton from "../shared/ActionButton";
 import ConnectSheet from "../shared/ConnectSheet";
 import ErrorDialog from "../shared/ErrorDialog";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import Text from "../shared/Text";
 import View from "../shared/View";
@@ -36,7 +37,11 @@ export default function Passkeys() {
     <SafeView fullScreen backgroundColor="$backgroundSoft">
       <View fullScreen padded>
         <View position="absolute" right="$s5" zIndex={1}>
-          <Pressable
+          <IconButton
+            icon={X}
+            size={25}
+            color="$uiNeutralSecondary"
+            aria-label={t("Close")}
             onPress={() => {
               if (router.canGoBack()) {
                 router.back();
@@ -44,9 +49,7 @@ export default function Passkeys() {
                 router.replace("/(auth)");
               }
             }}
-          >
-            <X size={25} color="$uiNeutralSecondary" />
-          </Pressable>
+          />
         </View>
         <View justifyContent="center" alignItems="center" flexGrow={1} flexShrink={1}>
           <View width="100%" aspectRatio={1} justifyContent="center" alignItems="center" flexShrink={1}>
diff --git a/src/components/benefits/BenefitSheet.tsx b/src/components/benefits/BenefitSheet.tsx
index f444d9310..5a1fff26e 100644
--- a/src/components/benefits/BenefitSheet.tsx
+++ b/src/components/benefits/BenefitSheet.tsx
@@ -12,6 +12,7 @@ import { useQuery } from "@tanstack/react-query";
 
 import openBrowser from "../../utils/openBrowser";
 import reportError from "../../utils/reportError";
+import IconButton from "../shared/IconButton";
 import ModalSheet from "../shared/ModalSheet";
 import SafeView from "../shared/SafeView";
 import Button from "../shared/StyledButton";
@@ -61,9 +62,7 @@ export default function BenefitSheet({ benefit, open, onClose }: BenefitSheetPro
         backgroundColor="$backgroundSoft"
       >
         <View position="absolute" top="$s5" right="$s5" zIndex={10}>
-          <Pressable onPress={onClose} hitSlop={15} aria-label={t("Close")}>
-            <X size={25} color="$uiNeutralSecondary" />
-          </Pressable>
+          <IconButton icon={X} size={25} color="$uiNeutralSecondary" aria-label={t("Close")} onPress={onClose} />
         </View>
         <ScrollView $platform-web={{ maxHeight: "100vh" }}>
           <YStack gap="$s3" paddingHorizontal="$s5" paddingVertical="$s7">
diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
index f33abe129..c524a808a 100644
--- a/src/components/card/Card.tsx
+++ b/src/components/card/Card.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { Pressable, RefreshControl } from "react-native";
+import { RefreshControl } from "react-native";
 
 import { useRouter } from "expo-router";
 
@@ -37,6 +37,7 @@ import useAccount from "../../utils/useAccount";
 import useAsset from "../../utils/useAsset";
 import useMarkets from "../../utils/useMarkets";
 import useTabPress from "../../utils/useTabPress";
+import IconButton from "../shared/IconButton";
 import InfoAlert from "../shared/InfoAlert";
 import LatestActivity from "../shared/LatestActivity";
 import PluginUpgrade from "../shared/PluginUpgrade";
@@ -260,27 +261,22 @@ export default function Card() {
                     {t("My Exa Card")}
                   </Text>
                   <View display="flex" flexDirection="row" alignItems="center" gap="$s4">
-                    <Pressable
+                    <IconButton
+                      icon={hidden ? EyeOff : Eye}
+                      color="$uiNeutralSecondary"
                       aria-label={hidden ? t("Show sensitive") : t("Hide sensitive")}
                       onPress={() => {
                         queryClient.setQueryData(["settings", "sensitive"], !hidden);
                       }}
-                      hitSlop={15}
-                    >
-                      {hidden ? (
-                        <EyeOff size={24} color="$uiNeutralSecondary" />
-                      ) : (
-                        <Eye size={24} color="$uiNeutralSecondary" />
-                      )}
-                    </Pressable>
-                    <Pressable
+                    />
+                    <IconButton
+                      icon={CircleHelp}
+                      color="$uiNeutralSecondary"
+                      aria-label={t("Help")}
                       onPress={() => {
                         presentArticle("10022626").catch(reportError);
                       }}
-                      hitSlop={15}
-                    >
-                      <CircleHelp size={24} color="$uiNeutralSecondary" />
-                    </Pressable>
+                    />
                   </View>
                 </XStack>
                 {!isPendingKYC && (usdBalance === 0n || !isKYCApproved) && (
diff --git a/src/components/card/CardDisclaimer.tsx b/src/components/card/CardDisclaimer.tsx
index 02eb64c76..557cf559a 100644
--- a/src/components/card/CardDisclaimer.tsx
+++ b/src/components/card/CardDisclaimer.tsx
@@ -11,6 +11,7 @@ import { presentArticle } from "../../utils/intercom";
 import openBrowser from "../../utils/openBrowser";
 import reportError from "../../utils/reportError";
 import Button from "../shared/Button";
+import IconButton from "../shared/IconButton";
 import ModalSheet from "../shared/ModalSheet";
 import SafeView from "../shared/SafeView";
 import Text from "../shared/Text";
@@ -30,9 +31,7 @@ export default function CardDisclaimer({
     <ModalSheet open={open} onClose={onClose}>
       <SafeView paddingTop={0} fullScreen borderTopLeftRadius="$r4" borderTopRightRadius="$r4">
         <View position="absolute" top="$s5" right="$s5" zIndex={100_000}>
-          <Pressable onPress={onClose} hitSlop={15}>
-            <X size={25} color="$uiNeutralSecondary" />
-          </Pressable>
+          <IconButton icon={X} size={25} color="$uiNeutralSecondary" aria-label={t("Close")} onPress={onClose} />
         </View>
         <ScrollView $platform-web={{ maxHeight: "100vh" }}>
           <View fullScreen flex={1}>
diff --git a/src/components/card/DismissableAlert.tsx b/src/components/card/DismissableAlert.tsx
index ae2dedde7..84369994e 100644
--- a/src/components/card/DismissableAlert.tsx
+++ b/src/components/card/DismissableAlert.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { Pressable } from "react-native";
 
 import { Info, X } from "@tamagui/lucide-icons";
@@ -8,6 +9,7 @@ import Text from "../shared/Text";
 import View from "../shared/View";
 
 export default function DismissableAlert({ text, onDismiss }: { onDismiss: () => void; text: string }) {
+  const { t } = useTranslation();
   return (
     <XStack
       borderRadius="$r3"
@@ -30,19 +32,23 @@ export default function DismissableAlert({ text, onDismiss }: { onDismiss: () =>
         <Text fontSize={15} color="$interactiveOnBaseInformationDefault" paddingRight="$s4">
           {text}
         </Text>
-        <View
-          position="absolute"
-          right="$s3"
-          top="$s3"
-          backgroundColor="$interactiveBaseInformationSoftDefault"
-          borderRadius="$r_0"
-          width={24}
-          height={24}
-          alignItems="center"
-          justifyContent="center"
-        >
-          <Pressable hitSlop={10} onPress={onDismiss}>
-            <X size={18} color="$interactiveOnBaseInformationSoft" />
+        <View position="absolute" right="$s3" top="$s3">
+          <Pressable
+            aria-label={t("Dismiss")}
+            hitSlop={10}
+            onPress={onDismiss}
+            style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}
+          >
+            <View
+              width={24}
+              height={24}
+              borderRadius="$r_0"
+              backgroundColor="$interactiveBaseInformationSoftDefault"
+              justifyContent="center"
+              alignItems="center"
+            >
+              <X size={18} color="$interactiveOnBaseInformationSoft" />
+            </View>
           </Pressable>
         </View>
       </View>
diff --git a/src/components/card/VerificationFailure.tsx b/src/components/card/VerificationFailure.tsx
index 7e023a5df..532070671 100644
--- a/src/components/card/VerificationFailure.tsx
+++ b/src/components/card/VerificationFailure.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 
 import { ArrowRight, X } from "@tamagui/lucide-icons";
 import { ScrollView, YStack } from "tamagui";
@@ -9,6 +8,7 @@ import VerifyIdentity from "../../assets/images/verify-identity.svg";
 import { present } from "../../utils/intercom";
 import reportError from "../../utils/reportError";
 import Button from "../shared/Button";
+import IconButton from "../shared/IconButton";
 import ModalSheet from "../shared/ModalSheet";
 import SafeView from "../shared/SafeView";
 import Text from "../shared/Text";
@@ -20,9 +20,7 @@ export default function VerificationFailure({ open, onClose }: { onClose: () =>
     <ModalSheet open={open} onClose={onClose}>
       <SafeView paddingTop={0} fullScreen borderTopLeftRadius="$r4" borderTopRightRadius="$r4">
         <View position="absolute" top="$s5" right="$s5" zIndex={100_000}>
-          <Pressable onPress={onClose} hitSlop={15}>
-            <X size={25} color="$uiNeutralSecondary" />
-          </Pressable>
+          <IconButton icon={X} size={25} color="$uiNeutralSecondary" aria-label={t("Close")} onPress={onClose} />
         </View>
         <ScrollView $platform-web={{ maxHeight: "100vh" }}>
           <View fullScreen flex={1}>
diff --git a/src/components/defi/ConnectionSheet.tsx b/src/components/defi/ConnectionSheet.tsx
index 305425f06..db4d92fcf 100644
--- a/src/components/defi/ConnectionSheet.tsx
+++ b/src/components/defi/ConnectionSheet.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from "react";
-import { Pressable } from "react-native";
+import { useTranslation } from "react-i18next";
 
 import { ArrowRight, Check, Info, X } from "@tamagui/lucide-icons";
 import { XStack, YStack } from "tamagui";
 
 import Connect from "../../assets/images/connect.svg";
+import IconButton from "../shared/IconButton";
 import ModalSheet from "../shared/ModalSheet";
 import SafeView from "../shared/SafeView";
 import Button from "../shared/StyledButton";
@@ -29,6 +30,7 @@ export default function ConnectionSheet({
   title: string;
 }) {
   const [acknowledged, setAcknowledged] = useState(true);
+  const { t } = useTranslation();
   return (
     <ModalSheet open={open} onClose={onClose} disableDrag heightPercent={90}>
       <SafeView
@@ -40,9 +42,7 @@ export default function ConnectionSheet({
         backgroundColor="$backgroundSoft"
       >
         <View position="absolute" top="$s5" right="$s5" zIndex={100_000}>
-          <Pressable onPress={onClose} hitSlop={15}>
-            <X size={25} color="$uiNeutralSecondary" />
-          </Pressable>
+          <IconButton icon={X} size={25} color="$uiNeutralSecondary" aria-label={t("Close")} onPress={onClose} />
         </View>
         <YStack flex={1} padding="$s4" gap="$s4_5">
           <YStack flex={1} gap="$s4">
diff --git a/src/components/defi/DeFi.tsx b/src/components/defi/DeFi.tsx
index ebdd11650..70bb96620 100644
--- a/src/components/defi/DeFi.tsx
+++ b/src/components/defi/DeFi.tsx
@@ -1,6 +1,5 @@
 import React, { useRef, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 
 import { useRouter } from "expo-router";
 
@@ -21,6 +20,7 @@ import queryClient from "../../utils/queryClient";
 import reportError from "../../utils/reportError";
 import useAccount from "../../utils/useAccount";
 import useTabPress from "../../utils/useTabPress";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import Text from "../shared/Text";
 
@@ -48,13 +48,14 @@ export default function DeFi() {
             <Text emphasized title3>
               {t("DeFi")}
             </Text>
-            <Pressable
+            <IconButton
+              icon={CircleHelp}
+              color="$uiNeutralSecondary"
+              aria-label={t("Help")}
               onPress={() => {
                 setAboutDefiSheetOpen(true);
               }}
-            >
-              <CircleHelp color="$uiNeutralSecondary" />
-            </Pressable>
+            />
           </XStack>
           <DeFiServiceButton
             title={t("USDC funding")}
diff --git a/src/components/defi/IntroSheet.tsx b/src/components/defi/IntroSheet.tsx
index 254354a01..927a69960 100644
--- a/src/components/defi/IntroSheet.tsx
+++ b/src/components/defi/IntroSheet.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 
 import { ArrowRight, Info, X } from "@tamagui/lucide-icons";
 import { XStack, YStack } from "tamagui";
@@ -8,6 +7,7 @@ import { XStack, YStack } from "tamagui";
 import Defi from "../../assets/images/defi.svg";
 import { presentArticle } from "../../utils/intercom";
 import reportError from "../../utils/reportError";
+import IconButton from "../shared/IconButton";
 import ModalSheet from "../shared/ModalSheet";
 import SafeView from "../shared/SafeView";
 import Button from "../shared/StyledButton";
@@ -26,9 +26,7 @@ export default function IntroSheet({ open, onClose }: { onClose: () => void; ope
         backgroundColor="$backgroundSoft"
       >
         <View position="absolute" top="$s5" right="$s5" zIndex={100_000}>
-          <Pressable onPress={onClose} hitSlop={15}>
-            <X size={25} color="$uiNeutralSecondary" />
-          </Pressable>
+          <IconButton icon={X} size={25} color="$uiNeutralSecondary" aria-label={t("Close")} onPress={onClose} />
         </View>
         <YStack flex={1} padding="$s4" gap="$s4_5">
           <YStack flex={1} gap="$s4">
diff --git a/src/components/getting-started/GettingStarted.tsx b/src/components/getting-started/GettingStarted.tsx
index e71e94890..493e4ee93 100644
--- a/src/components/getting-started/GettingStarted.tsx
+++ b/src/components/getting-started/GettingStarted.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 
 import { useRouter } from "expo-router";
 
@@ -17,6 +16,7 @@ import useAccount from "../../utils/useAccount";
 import useBeginKYC from "../../utils/useBeginKYC";
 import useOnboardingSteps from "../../utils/useOnboardingSteps";
 import ActionButton from "../shared/ActionButton";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import Text from "../shared/Text";
 import View from "../shared/View";
@@ -48,7 +48,8 @@ export default function GettingStarted() {
         <View gap="$s4_5" padded paddingBottom={0}>
           <View flexDirection="row" gap="$s3_5" justifyContent="space-around" alignItems="center">
             <View position="absolute" left={0}>
-              <Pressable
+              <IconButton
+                icon={ArrowLeft}
                 aria-label={t("Back")}
                 onPress={() => {
                   if (router.canGoBack()) {
@@ -57,9 +58,7 @@ export default function GettingStarted() {
                     router.replace("/(main)/(home)");
                   }
                 }}
-              >
-                <ArrowLeft size={24} color="$uiNeutralPrimary" />
-              </Pressable>
+              />
             </View>
             <Text color="$uiNeutralPrimary" fontSize={15} fontWeight="bold">
               {t("Getting started")}
diff --git a/src/components/home/CreditLimitSheet.tsx b/src/components/home/CreditLimitSheet.tsx
index 541bb4275..08bfe67e6 100644
--- a/src/components/home/CreditLimitSheet.tsx
+++ b/src/components/home/CreditLimitSheet.tsx
@@ -8,6 +8,7 @@ import { XStack, YStack } from "tamagui";
 import { presentArticle } from "../../utils/intercom";
 import reportError from "../../utils/reportError";
 import Button from "../shared/Button";
+import IconButton from "../shared/IconButton";
 import ModalSheet from "../shared/ModalSheet";
 import Text from "../shared/Text";
 
@@ -28,9 +29,7 @@ export default function CreditLimitSheet({ onClose, open }: { onClose: () => voi
               <Text emphasized headline flex={1}>
                 {t("Credit limit")}
               </Text>
-              <Pressable hitSlop={15} onPress={onClose}>
-                <X size={24} color="$uiNeutralPrimary" />
-              </Pressable>
+              <IconButton icon={X} aria-label={t("Close")} onPress={onClose} />
             </XStack>
             <YStack gap="$s4">
               <Text subHeadline secondary>
diff --git a/src/components/home/InstallmentsSheet.tsx b/src/components/home/InstallmentsSheet.tsx
index 7734843ec..d31c13c3e 100644
--- a/src/components/home/InstallmentsSheet.tsx
+++ b/src/components/home/InstallmentsSheet.tsx
@@ -13,6 +13,7 @@ import MAX_INSTALLMENTS from "@exactly/common/MAX_INSTALLMENTS";
 
 import reportError from "../../utils/reportError";
 import useInstallmentRates from "../../utils/useInstallmentRates";
+import IconButton from "../shared/IconButton";
 import ModalSheet from "../shared/ModalSheet";
 import SafeView from "../shared/SafeView";
 import Skeleton from "../shared/Skeleton";
@@ -60,9 +61,7 @@ export default function InstallmentsSheet({
                 <Text emphasized headline flex={1}>
                   {t("Set installments")}
                 </Text>
-                <Pressable aria-label={t("Close")} role="button" hitSlop={15} onPress={onClose}>
-                  <X size={24} color="$uiNeutralPrimary" />
-                </Pressable>
+                <IconButton icon={X} aria-label={t("Close")} onPress={onClose} />
               </XStack>
               <Text subHeadline secondary>
                 {t(
diff --git a/src/components/home/PayModeSheet.tsx b/src/components/home/PayModeSheet.tsx
index d6df27bae..be6b1b999 100644
--- a/src/components/home/PayModeSheet.tsx
+++ b/src/components/home/PayModeSheet.tsx
@@ -10,6 +10,7 @@ import MAX_INSTALLMENTS from "@exactly/common/MAX_INSTALLMENTS";
 import { presentArticle } from "../../utils/intercom";
 import reportError from "../../utils/reportError";
 import Button from "../shared/Button";
+import IconButton from "../shared/IconButton";
 import ModalSheet from "../shared/ModalSheet";
 import Text from "../shared/Text";
 
@@ -30,9 +31,7 @@ export default function PayModeSheet({ onClose, open }: { onClose: () => void; o
               <Text emphasized headline flex={1}>
                 {t("Exa Card pay mode")}
               </Text>
-              <Pressable hitSlop={15} onPress={onClose}>
-                <X size={24} color="$uiNeutralPrimary" />
-              </Pressable>
+              <IconButton icon={X} aria-label={t("Close")} onPress={onClose} />
             </XStack>
             <Text subHeadline secondary>
               {t("Change the pay mode before each purchase and pay how you want.")}
diff --git a/src/components/home/Portfolio.tsx b/src/components/home/Portfolio.tsx
index 82fd0b536..27c736551 100644
--- a/src/components/home/Portfolio.tsx
+++ b/src/components/home/Portfolio.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { Pressable, RefreshControl } from "react-native";
+import { RefreshControl } from "react-native";
 
 import { useRouter } from "expo-router";
 
@@ -14,6 +14,7 @@ import reportError from "../../utils/reportError";
 import useAccount from "../../utils/useAccount";
 import useMarkets from "../../utils/useMarkets";
 import usePortfolio from "../../utils/usePortfolio";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import Text from "../shared/Text";
 import View from "../shared/View";
@@ -42,7 +43,8 @@ export default function Portfolio() {
         justifyContent="space-between"
         alignItems="center"
       >
-        <Pressable
+        <IconButton
+          icon={ArrowLeft}
           aria-label={t("Back")}
           onPress={() => {
             if (router.canGoBack()) {
@@ -51,16 +53,14 @@ export default function Portfolio() {
               router.replace("/(main)/(home)");
             }
           }}
-        >
-          <ArrowLeft size={24} color="$uiNeutralPrimary" />
-        </Pressable>
-        <Pressable
+        />
+        <IconButton
+          icon={CircleHelp}
+          aria-label={t("Help")}
           onPress={() => {
             presentArticle("10985188").catch(reportError);
           }}
-        >
-          <CircleHelp color="$uiNeutralPrimary" />
-        </Pressable>
+        />
       </View>
       <ScrollView
         backgroundColor="transparent"
diff --git a/src/components/home/SpendingLimitSheet.tsx b/src/components/home/SpendingLimitSheet.tsx
index fb6ef3b58..5e9df4a8a 100644
--- a/src/components/home/SpendingLimitSheet.tsx
+++ b/src/components/home/SpendingLimitSheet.tsx
@@ -8,6 +8,7 @@ import { XStack, YStack } from "tamagui";
 import { presentArticle } from "../../utils/intercom";
 import reportError from "../../utils/reportError";
 import Button from "../shared/Button";
+import IconButton from "../shared/IconButton";
 import ModalSheet from "../shared/ModalSheet";
 import Text from "../shared/Text";
 
@@ -28,9 +29,7 @@ export default function SpendingLimitSheet({ onClose, open }: { onClose: () => v
               <Text emphasized headline flex={1}>
                 {t("Spending limit")}
               </Text>
-              <Pressable hitSlop={15} onPress={onClose}>
-                <X size={24} color="$uiNeutralPrimary" />
-              </Pressable>
+              <IconButton icon={X} aria-label={t("Close")} onPress={onClose} />
             </XStack>
             <YStack gap="$s4">
               <Text subHeadline secondary>
diff --git a/src/components/home/VisaSignatureSheet.tsx b/src/components/home/VisaSignatureSheet.tsx
index 108b37c0c..c0e4ce6dd 100644
--- a/src/components/home/VisaSignatureSheet.tsx
+++ b/src/components/home/VisaSignatureSheet.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, Pressable } from "react-native";
+import { Platform } from "react-native";
 import { SvgUri } from "react-native-svg";
 
 import { useRouter } from "expo-router";
@@ -15,6 +15,7 @@ import SignatureCard from "../../assets/images/signature-full.svg";
 import queryClient from "../../utils/queryClient";
 import reportError from "../../utils/reportError";
 import { setCardStatus } from "../../utils/server";
+import IconButton from "../shared/IconButton";
 import ModalSheet from "../shared/ModalSheet";
 import SafeView from "../shared/SafeView";
 import Button from "../shared/StyledButton";
@@ -73,9 +74,7 @@ export default function VisaSignatureSheet({ open, onClose }: { onClose: () => v
     <ModalSheet key={open ? "open" : "closed"} open={open} onClose={close} disableDrag heightPercent={90}>
       <SafeView paddingTop={0} fullScreen borderTopLeftRadius="$r4" borderTopRightRadius="$r4" backgroundColor="black">
         <View position="absolute" top="$s5" right="$s5" zIndex={100_000}>
-          <Pressable onPress={close} hitSlop={15}>
-            <X size={25} color="$uiNeutralSecondary" />
-          </Pressable>
+          <IconButton icon={X} size={25} color="$uiNeutralSecondary" aria-label={t("Close")} onPress={close} />
         </View>
         <ScrollView contentContainerStyle={scrollContentContainerStyle} $platform-web={{ maxHeight: "100vh" }}>
           <YStack
diff --git a/src/components/home/card-upgrade/CardUpgradeSheet.tsx b/src/components/home/card-upgrade/CardUpgradeSheet.tsx
index d1b08679b..70cde16e8 100644
--- a/src/components/home/card-upgrade/CardUpgradeSheet.tsx
+++ b/src/components/home/card-upgrade/CardUpgradeSheet.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Pressable } from "react-native";
+import { useTranslation } from "react-i18next";
 
 import { X } from "@tamagui/lucide-icons";
 import { ScrollView } from "tamagui";
@@ -11,12 +11,14 @@ import Intro from "./Intro";
 import UpgradeAccount from "./UpgradeAccount";
 import VerifyIdentity from "./VerifyIdentity";
 import queryClient from "../../../utils/queryClient";
+import IconButton from "../../shared/IconButton";
 import ModalSheet from "../../shared/ModalSheet";
 import SafeView from "../../shared/SafeView";
 import View from "../../shared/View";
 
 export default function CardUpgradeSheet({ open, onClose }: { onClose: () => void; open: boolean }) {
   const { data: step } = useQuery<number | undefined>({ queryKey: ["card-upgrade"] });
+  const { t } = useTranslation();
   return (
     <ModalSheet open={open} onClose={onClose} disableDrag>
       <SafeView
@@ -27,9 +29,7 @@ export default function CardUpgradeSheet({ open, onClose }: { onClose: () => voi
         backgroundColor="$backgroundSoft"
       >
         <View position="absolute" top="$s5" right="$s5" zIndex={100_000}>
-          <Pressable onPress={onClose} hitSlop={15}>
-            <X size={25} color="$uiNeutralSecondary" />
-          </Pressable>
+          <IconButton icon={X} size={25} color="$uiNeutralSecondary" aria-label={t("Close")} onPress={onClose} />
         </View>
         <ScrollView $platform-web={{ maxHeight: "100vh" }}>
           {step === undefined ? (
diff --git a/src/components/loans/Amount.tsx b/src/components/loans/Amount.tsx
index 9fdb18a26..107762f6b 100644
--- a/src/components/loans/Amount.tsx
+++ b/src/components/loans/Amount.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 
 import { useRouter } from "expo-router";
 
@@ -18,6 +17,7 @@ import reportError from "../../utils/reportError";
 import useAccount from "../../utils/useAccount";
 import useAsset from "../../utils/useAsset";
 import useMarkets from "../../utils/useMarkets";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import Button from "../shared/StyledButton";
 import Text from "../shared/Text";
@@ -62,7 +62,9 @@ export default function Amount() {
         justifyContent="space-between"
         alignItems="center"
       >
-        <Pressable
+        <IconButton
+          icon={ArrowLeft}
+          aria-label={t("Back")}
           onPress={() => {
             queryClient.setQueryData<Loan>(["loan"], (old) => ({ ...old, amount: undefined }));
             if (router.canGoBack()) {
@@ -72,16 +74,14 @@ export default function Amount() {
             queryClient.resetQueries({ queryKey: ["loan"] }).catch(reportError);
             router.replace("/loan");
           }}
-        >
-          <ArrowLeft size={24} color="$uiNeutralPrimary" />
-        </Pressable>
-        <Pressable
+        />
+        <IconButton
+          icon={CircleHelp}
+          aria-label={t("Help")}
           onPress={() => {
             presentArticle("11541409").catch(reportError);
           }}
-        >
-          <CircleHelp color="$uiNeutralPrimary" />
-        </Pressable>
+        />
       </View>
       <ScrollView
         backgroundColor="$backgroundMild"
@@ -105,13 +105,15 @@ export default function Amount() {
                         maximumFractionDigits: 2,
                       })}
                     </Text>
-                    <Pressable
+                    <IconButton
+                      icon={CircleHelp}
+                      size={16}
+                      color="$uiNeutralSecondary"
+                      aria-label={t("Available funding info")}
                       onPress={() => {
                         presentArticle("11550408").catch(reportError);
                       }}
-                    >
-                      <CircleHelp size={16} color="$uiNeutralSecondary" />
-                    </Pressable>
+                    />
                   </XStack>
                 )}
               </YStack>
diff --git a/src/components/loans/Asset.tsx b/src/components/loans/Asset.tsx
index 34fe60aee..e7e809aeb 100644
--- a/src/components/loans/Asset.tsx
+++ b/src/components/loans/Asset.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 
 import { useRouter } from "expo-router";
 
@@ -12,6 +11,7 @@ import queryClient, { type Loan } from "../../utils/queryClient";
 import reportError from "../../utils/reportError";
 import useMarkets from "../../utils/useMarkets";
 import AssetLogo from "../shared/AssetLogo";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import Button from "../shared/StyledButton";
 import Text from "../shared/Text";
@@ -34,7 +34,9 @@ export default function Asset() {
         justifyContent="space-between"
         alignItems="center"
       >
-        <Pressable
+        <IconButton
+          icon={ArrowLeft}
+          aria-label={t("Back")}
           onPress={() => {
             if (router.canGoBack()) {
               router.back();
@@ -42,16 +44,14 @@ export default function Asset() {
             }
             router.replace("/loan");
           }}
-        >
-          <ArrowLeft size={24} color="$uiNeutralPrimary" />
-        </Pressable>
-        <Pressable
+        />
+        <IconButton
+          icon={CircleHelp}
+          aria-label={t("Help")}
           onPress={() => {
             presentArticle("11541409").catch(reportError);
           }}
-        >
-          <CircleHelp color="$uiNeutralPrimary" />
-        </Pressable>
+        />
       </View>
       <ScrollView
         backgroundColor="$backgroundMild"
diff --git a/src/components/loans/Installments.tsx b/src/components/loans/Installments.tsx
index 65a2a6464..042e21648 100644
--- a/src/components/loans/Installments.tsx
+++ b/src/components/loans/Installments.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 
 import { useRouter } from "expo-router";
 
@@ -14,6 +13,7 @@ import { presentArticle } from "../../utils/intercom";
 import queryClient from "../../utils/queryClient";
 import reportError from "../../utils/reportError";
 import useAccount from "../../utils/useAccount";
+import IconButton from "../shared/IconButton";
 import InstallmentSelector from "../shared/InstallmentSelector";
 import SafeView from "../shared/SafeView";
 import Button from "../shared/StyledButton";
@@ -46,7 +46,9 @@ export default function Installments() {
         justifyContent="space-between"
         alignItems="center"
       >
-        <Pressable
+        <IconButton
+          icon={ArrowLeft}
+          aria-label={t("Back")}
           onPress={() => {
             if (router.canGoBack()) {
               router.back();
@@ -54,16 +56,14 @@ export default function Installments() {
             }
             router.replace("/loan/amount");
           }}
-        >
-          <ArrowLeft size={24} color="$uiNeutralPrimary" />
-        </Pressable>
-        <Pressable
+        />
+        <IconButton
+          icon={CircleHelp}
+          aria-label={t("Help")}
           onPress={() => {
             presentArticle("11541409").catch(reportError);
           }}
-        >
-          <CircleHelp color="$uiNeutralPrimary" />
-        </Pressable>
+        />
       </View>
       <ScrollView
         backgroundColor="$backgroundMild"
diff --git a/src/components/loans/Loans.tsx b/src/components/loans/Loans.tsx
index 408b05ccd..543be54e5 100644
--- a/src/components/loans/Loans.tsx
+++ b/src/components/loans/Loans.tsx
@@ -1,6 +1,6 @@
 import React, { useState, type RefObject } from "react";
 import { useTranslation } from "react-i18next";
-import { Pressable, RefreshControl } from "react-native";
+import { RefreshControl } from "react-native";
 
 import { useRouter } from "expo-router";
 
@@ -18,6 +18,7 @@ import useMarkets from "../../utils/useMarkets";
 import PaymentSheet from "../pay/PaymentSheet";
 import RolloverIntroSheet from "../pay/RolloverIntroSheet";
 import UpcomingPayments from "../pay/UpcomingPayments";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import Text from "../shared/Text";
 import View from "../shared/View";
@@ -50,7 +51,9 @@ export default function Loans() {
             <View backgroundColor="$backgroundSoft" padded>
               <YStack paddingBottom="$s3" gap="$s4_5">
                 <XStack alignItems="center" justifyContent="space-between">
-                  <Pressable
+                  <IconButton
+                    icon={ArrowLeft}
+                    aria-label={t("Back")}
                     onPress={() => {
                       if (router.canGoBack()) {
                         router.back();
@@ -58,19 +61,18 @@ export default function Loans() {
                         router.replace("/defi");
                       }
                     }}
-                  >
-                    <ArrowLeft size={24} color="$uiNeutralPrimary" />
-                  </Pressable>
+                  />
                   <Text emphasized subHeadline textAlign="center">
                     {t("Exactly Protocol")}
                   </Text>
-                  <Pressable
+                  <IconButton
+                    icon={CircleHelp}
+                    color="$uiNeutralSecondary"
+                    aria-label={t("Help")}
                     onPress={() => {
                       presentArticle("11541409").catch(reportError);
                     }}
-                  >
-                    <CircleHelp color="$uiNeutralSecondary" />
-                  </Pressable>
+                  />
                 </XStack>
                 <Text subHeadline secondary>
                   {t(
diff --git a/src/components/loans/Maturity.tsx b/src/components/loans/Maturity.tsx
index 7f4b2e194..c8c0ba48d 100644
--- a/src/components/loans/Maturity.tsx
+++ b/src/components/loans/Maturity.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 
 import { useRouter } from "expo-router";
 
@@ -18,6 +17,7 @@ import queryClient from "../../utils/queryClient";
 import reportError from "../../utils/reportError";
 import useAccount from "../../utils/useAccount";
 import useMarkets from "../../utils/useMarkets";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import Button from "../shared/StyledButton";
 import Text from "../shared/Text";
@@ -54,7 +54,9 @@ export default function Maturity() {
         justifyContent="space-between"
         alignItems="center"
       >
-        <Pressable
+        <IconButton
+          icon={ArrowLeft}
+          aria-label={t("Back")}
           onPress={() => {
             queryClient.setQueryData<Loan>(["loan"], (old) => ({ ...old, maturity: undefined }));
             if (router.canGoBack()) {
@@ -63,16 +65,14 @@ export default function Maturity() {
             }
             router.replace("/loan");
           }}
-        >
-          <ArrowLeft size={24} color="$uiNeutralPrimary" />
-        </Pressable>
-        <Pressable
+        />
+        <IconButton
+          icon={CircleHelp}
+          aria-label={t("Help")}
           onPress={() => {
             presentArticle("11541409").catch(reportError);
           }}
-        >
-          <CircleHelp color="$uiNeutralPrimary" />
-        </Pressable>
+        />
       </View>
       <ScrollView
         backgroundColor="$backgroundMild"
diff --git a/src/components/loans/Receiver.tsx b/src/components/loans/Receiver.tsx
index 0b8949bf6..41abb0b5b 100644
--- a/src/components/loans/Receiver.tsx
+++ b/src/components/loans/Receiver.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 
 import { getStringAsync } from "expo-clipboard";
 import { useRouter } from "expo-router";
@@ -21,6 +20,7 @@ import queryClient from "../../utils/queryClient";
 import reportError from "../../utils/reportError";
 import useAccount from "../../utils/useAccount";
 import useAsset from "../../utils/useAsset";
+import IconButton from "../shared/IconButton";
 import Input from "../shared/Input";
 import SafeView from "../shared/SafeView";
 import Button from "../shared/StyledButton";
@@ -78,7 +78,9 @@ export default function Receiver() {
         justifyContent="space-between"
         alignItems="center"
       >
-        <Pressable
+        <IconButton
+          icon={ArrowLeft}
+          aria-label={t("Back")}
           onPress={() => {
             queryClient.setQueryData<Loan>(["loan"], (old) => ({ ...old, receiver: undefined }));
             if (router.canGoBack()) {
@@ -87,16 +89,14 @@ export default function Receiver() {
             }
             router.replace("/loan/installments");
           }}
-        >
-          <ArrowLeft size={24} color="$uiNeutralPrimary" />
-        </Pressable>
-        <Pressable
+        />
+        <IconButton
+          icon={CircleHelp}
+          aria-label={t("Help")}
           onPress={() => {
             presentArticle("11541409").catch(reportError);
           }}
-        >
-          <CircleHelp color="$uiNeutralPrimary" />
-        </Pressable>
+        />
       </View>
       <ScrollView
         backgroundColor="$backgroundMild"
diff --git a/src/components/loans/Review.tsx b/src/components/loans/Review.tsx
index 87a454782..e71cd5f1b 100644
--- a/src/components/loans/Review.tsx
+++ b/src/components/loans/Review.tsx
@@ -1,6 +1,5 @@
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 
 import { useRouter } from "expo-router";
 
@@ -34,6 +33,7 @@ import useInstallments from "../../utils/useInstallments";
 import exa from "../../utils/wagmi/exa";
 import AssetLogo from "../shared/AssetLogo";
 import GradientScrollView from "../shared/GradientScrollView";
+import IconButton from "../shared/IconButton";
 import PaymentScheduleSheet from "../shared/PaymentScheduleSheet";
 import SafeView from "../shared/SafeView";
 import ExaSpinner from "../shared/Spinner";
@@ -210,7 +210,9 @@ export default function Review() {
           justifyContent="space-between"
           alignItems="center"
         >
-          <Pressable
+          <IconButton
+            icon={ArrowLeft}
+            aria-label={t("Back")}
             onPress={() => {
               if (router.canGoBack()) {
                 router.back();
@@ -218,16 +220,14 @@ export default function Review() {
               }
               router.replace("/loan/receiver");
             }}
-          >
-            <ArrowLeft size={24} color="$uiNeutralPrimary" />
-          </Pressable>
-          <Pressable
+          />
+          <IconButton
+            icon={CircleHelp}
+            aria-label={t("Help")}
             onPress={() => {
               presentArticle("11541409").catch(reportError);
             }}
-          >
-            <CircleHelp color="$uiNeutralPrimary" />
-          </Pressable>
+          />
         </View>
         <ScrollView
           backgroundColor="$backgroundMild"
@@ -401,7 +401,9 @@ export default function Review() {
     <GradientScrollView variant={error ? "error" : success ? (isLatestPlugin ? "info" : "success") : "neutral"}>
       <View flex={1}>
         <YStack gap="$s7" paddingBottom="$s9">
-          <Pressable
+          <IconButton
+            icon={X}
+            aria-label={t("Close")}
             onPress={() => {
               if (error && router.canGoBack()) {
                 router.back();
@@ -409,9 +411,7 @@ export default function Review() {
               }
               router.dismissTo("/activity");
             }}
-          >
-            <X size={24} color="$uiNeutralPrimary" />
-          </Pressable>
+          />
           <XStack justifyContent="center" alignItems="center">
             <Square
               size={80}
diff --git a/src/components/pay/Pay.tsx b/src/components/pay/Pay.tsx
index 47316b572..6ac633a74 100644
--- a/src/components/pay/Pay.tsx
+++ b/src/components/pay/Pay.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Pressable, RefreshControl } from "react-native";
+import { RefreshControl } from "react-native";
 
 import { useRouter } from "expo-router";
 
@@ -33,6 +33,7 @@ import useMarkets from "../../utils/useMarkets";
 import usePendingOperations from "../../utils/usePendingOperations";
 import useTabPress from "../../utils/useTabPress";
 import Amount from "../shared/Amount";
+import IconButton from "../shared/IconButton";
 import InfoSheet from "../shared/InfoSheet";
 import SafeView from "../shared/SafeView";
 import Button from "../shared/StyledButton";
@@ -141,15 +142,14 @@ export default function Pay() {
                 <Text emphasized title3>
                   {t("Payments")}
                 </Text>
-                <Pressable
+                <IconButton
+                  icon={hidden ? EyeOff : Eye}
+                  color="$uiNeutralSecondary"
                   aria-label={hidden ? t("Show sensitive") : t("Hide sensitive")}
                   onPress={() => {
                     queryClient.setQueryData(["settings", "sensitive"], !hidden);
                   }}
-                  hitSlop={15}
-                >
-                  {hidden ? <EyeOff color="$uiNeutralSecondary" /> : <Eye color="$uiNeutralSecondary" />}
-                </Pressable>
+                />
               </XStack>
               <TotalOutstandingCard
                 amount={totalOutstandingUSD}
@@ -299,9 +299,13 @@ function TotalOutstandingCard({
           <Text emphasized headline>
             {t("Total outstanding")}
           </Text>
-          <Pressable aria-label={t("Total outstanding info")} onPress={onInfoPress} hitSlop={15}>
-            <Info size={16} color="$interactiveBaseBrandDefault" />
-          </Pressable>
+          <IconButton
+            icon={Info}
+            size={16}
+            color="$interactiveBaseBrandDefault"
+            aria-label={t("Total outstanding info")}
+            onPress={onInfoPress}
+          />
         </XStack>
         <XStack gap="$s1" alignItems="center" cursor="pointer" onPress={onStatementsPress}>
           <Text emphasized footnote color="$interactiveBaseBrandDefault">
@@ -429,9 +433,13 @@ function FirstMaturityCard({
             </>
           ) : null}
         </YStack>
-        <Pressable aria-label={t("Payment info")} onPress={onInfoPress} hitSlop={15}>
-          <Info size={16} color="$interactiveBaseBrandDefault" />
-        </Pressable>
+        <IconButton
+          icon={Info}
+          size={16}
+          color="$interactiveBaseBrandDefault"
+          aria-label={t("Payment info")}
+          onPress={onInfoPress}
+        />
       </XStack>
       <View padding="$s4">
         <XStack gap="$s3">
diff --git a/src/components/pay/PaymentSheet.tsx b/src/components/pay/PaymentSheet.tsx
index 230462960..e46693678 100644
--- a/src/components/pay/PaymentSheet.tsx
+++ b/src/components/pay/PaymentSheet.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 
 import { useLocalSearchParams, useRouter } from "expo-router";
 
@@ -25,6 +24,7 @@ import reportError from "../../utils/reportError";
 import useAccount from "../../utils/useAccount";
 import useAsset from "../../utils/useAsset";
 import Amount from "../shared/Amount";
+import IconButton from "../shared/IconButton";
 import InfoSheet from "../shared/InfoSheet";
 import ModalSheet from "../shared/ModalSheet";
 import Button from "../shared/StyledButton";
@@ -325,9 +325,13 @@ function DetailsView({
               </>
             )}
           </YStack>
-          <Pressable onPress={onInfoPress} hitSlop={15}>
-            <Info size={16} color="$interactiveBaseBrandDefault" />
-          </Pressable>
+          <IconButton
+            icon={Info}
+            size={16}
+            color="$interactiveBaseBrandDefault"
+            aria-label={t("Payment info")}
+            onPress={onInfoPress}
+          />
         </XStack>
         <YStack>
           <XStack gap="$s3">
diff --git a/src/components/pay/Repay.tsx b/src/components/pay/Repay.tsx
index 81ae441dd..71611b283 100644
--- a/src/components/pay/Repay.tsx
+++ b/src/components/pay/Repay.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useReducer, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { useLocalSearchParams, useRouter } from "expo-router";
@@ -54,6 +53,7 @@ import useSimulateProposal from "../../utils/useSimulateProposal";
 import exa from "../../utils/wagmi/exa";
 import AssetLogo from "../shared/AssetLogo";
 import Failure from "../shared/Failure";
+import IconButton from "../shared/IconButton";
 import Pending from "../shared/Pending";
 import Skeleton from "../shared/Skeleton";
 import Success from "../shared/Success";
@@ -541,7 +541,9 @@ export default function Repay() {
         <View fullScreen gap="$s5" paddingTop="$s4_5">
           <View flexDirection="row" gap="$s3_5" justifyContent="space-around" alignItems="center">
             <View padded position="absolute" left={0}>
-              <Pressable
+              <IconButton
+                icon={ArrowLeft}
+                aria-label={t("Back")}
                 onPress={() => {
                   if (router.canGoBack()) {
                     router.back();
@@ -549,9 +551,7 @@ export default function Repay() {
                     router.replace("/(main)/(home)");
                   }
                 }}
-              >
-                <ArrowLeft size={24} color="$uiNeutralPrimary" />
-              </Pressable>
+              />
             </View>
             <Text color="$uiNeutralPrimary" emphasized subHeadline textAlign="center">
               {t("Pay due {{date}}", { date: dueDateFormatted })}
diff --git a/src/components/roll-debt/RollDebt.tsx b/src/components/roll-debt/RollDebt.tsx
index 319f1a800..449c9b39b 100644
--- a/src/components/roll-debt/RollDebt.tsx
+++ b/src/components/roll-debt/RollDebt.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { useLocalSearchParams, useRouter } from "expo-router";
@@ -21,6 +20,7 @@ import {
 import ProposalType from "@exactly/common/ProposalType";
 import { MATURITY_INTERVAL, WAD } from "@exactly/lib";
 
+import IconButton from "../../components/shared/IconButton";
 import SafeView from "../../components/shared/SafeView";
 import Text from "../../components/shared/Text";
 import View from "../../components/shared/View";
@@ -84,7 +84,8 @@ export default function Pay() {
       <View fullScreen gap="$s5" paddingTop="$s4_5">
         <View flexDirection="row" gap="$s3_5" justifyContent="space-around" alignItems="center">
           <View padded position="absolute" left={0}>
-            <Pressable
+            <IconButton
+              icon={ArrowLeft}
               aria-label={t("Back")}
               onPress={() => {
                 if (router.canGoBack()) {
@@ -93,9 +94,7 @@ export default function Pay() {
                   router.replace("/(main)/(home)");
                 }
               }}
-            >
-              <ArrowLeft size={24} color="$uiNeutralPrimary" />
-            </Pressable>
+            />
           </View>
         </View>
         <ScrollView
diff --git a/src/components/send-funds/Amount.tsx b/src/components/send-funds/Amount.tsx
index 1a4ef8afc..d9da09a3d 100644
--- a/src/components/send-funds/Amount.tsx
+++ b/src/components/send-funds/Amount.tsx
@@ -30,6 +30,7 @@ import AmountSelector from "../shared/AmountSelector";
 import AssetLogo from "../shared/AssetLogo";
 import Blocky from "../shared/Blocky";
 import GradientScrollView from "../shared/GradientScrollView";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import Skeleton from "../shared/Skeleton";
 import ExaSpinner from "../shared/Spinner";
@@ -237,7 +238,9 @@ export default function Amount() {
         <View gap="$s4_5" fullScreen padded>
           <View flexDirection="row" gap="$s3_5" justifyContent="space-around" alignItems="center">
             <View position="absolute" left={0}>
-              <Pressable
+              <IconButton
+                icon={ArrowLeft}
+                aria-label={t("Back")}
                 onPress={() => {
                   if (router.canGoBack()) {
                     router.back();
@@ -245,9 +248,7 @@ export default function Amount() {
                     router.replace("/send-funds/asset");
                   }
                 }}
-              >
-                <ArrowLeft size={24} color="$uiNeutralPrimary" />
-              </Pressable>
+              />
             </View>
             <Text color="$uiNeutralPrimary" fontSize={15} fontWeight="bold">
               {t("Enter amount")}
@@ -382,14 +383,13 @@ export default function Amount() {
     <GradientScrollView variant={error ? "error" : success ? (isLatestPlugin ? "info" : "success") : "neutral"}>
       <View flex={1}>
         <YStack gap="$s7" paddingBottom="$s9">
-          <Pressable
+          <IconButton
+            icon={X}
             aria-label={t("Close")}
             onPress={() => {
               router.dismissTo("/activity");
             }}
-          >
-            <X size={24} color="$uiNeutralPrimary" />
-          </Pressable>
+          />
           <XStack justifyContent="center" alignItems="center">
             <Square
               size={80}
diff --git a/src/components/send-funds/QR.tsx b/src/components/send-funds/QR.tsx
index f6f0cf256..8f7c5a287 100644
--- a/src/components/send-funds/QR.tsx
+++ b/src/components/send-funds/QR.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Linking, Pressable, StyleSheet } from "react-native";
+import { Linking, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { CameraView, useCameraPermissions } from "expo-camera";
@@ -15,6 +15,7 @@ import { zeroAddress } from "viem";
 import { Address } from "@exactly/common/validation";
 
 import reportError from "../../utils/reportError";
+import IconButton from "../shared/IconButton";
 import Button from "../shared/StyledButton";
 import Text from "../shared/Text";
 import View from "../shared/View";
@@ -171,8 +172,10 @@ export default function QR() {
         </Button.Icon>
       </Button>
       <View position="absolute" borderRadius="$r_0" backgroundColor="transparent" top={top} left="$s4" padding="$s3">
-        <Pressable
-          hitSlop={15}
+        <IconButton
+          icon={ArrowLeft}
+          color="white"
+          aria-label={t("Back")}
           onPress={() => {
             if (router.canGoBack()) {
               router.back();
@@ -180,9 +183,7 @@ export default function QR() {
               router.replace("/send-funds");
             }
           }}
-        >
-          <ArrowLeft size={24} color="white" />
-        </Pressable>
+        />
       </View>
     </View>
   );
diff --git a/src/components/send-funds/Receiver.tsx b/src/components/send-funds/Receiver.tsx
index 6a1f9c1eb..50b487c65 100644
--- a/src/components/send-funds/Receiver.tsx
+++ b/src/components/send-funds/Receiver.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 
 import { useLocalSearchParams, useRouter } from "expo-router";
 
@@ -19,6 +18,7 @@ import RecentContacts from "./RecentContacts";
 import { presentArticle } from "../../utils/intercom";
 import queryClient from "../../utils/queryClient";
 import reportError from "../../utils/reportError";
+import IconButton from "../shared/IconButton";
 import Input from "../shared/Input";
 import SafeView from "../shared/SafeView";
 import Button from "../shared/StyledButton";
@@ -57,7 +57,8 @@ export default function ReceiverSelection() {
       <View gap="$s4_5" fullScreen padded>
         <View flexDirection="row" gap="$s3_5" justifyContent="space-around" alignItems="center">
           <View position="absolute" left={0}>
-            <Pressable
+            <IconButton
+              icon={ArrowLeft}
               aria-label={t("Back")}
               onPress={() => {
                 queryClient.setQueryData(["withdrawal"], { receiver: undefined, market: undefined, amount: 0n });
@@ -67,9 +68,7 @@ export default function ReceiverSelection() {
                   router.replace("/(main)/(home)");
                 }
               }}
-            >
-              <ArrowLeft size={24} color="$uiNeutralPrimary" />
-            </Pressable>
+            />
           </View>
           <Text color="$uiNeutralPrimary" fontSize={15} fontWeight="bold">
             {t("Send to")}
diff --git a/src/components/settings/Settings.tsx b/src/components/settings/Settings.tsx
index 857027120..672f5242d 100644
--- a/src/components/settings/Settings.tsx
+++ b/src/components/settings/Settings.tsx
@@ -17,6 +17,7 @@ import { logout as logoutOnesignal } from "../../utils/onesignal";
 import queryClient from "../../utils/queryClient";
 import reportError from "../../utils/reportError";
 import useAccount from "../../utils/useAccount";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import Text from "../shared/Text";
 import View from "../shared/View";
@@ -32,7 +33,8 @@ export default function Settings() {
       <View fullScreen padded gap="$s5">
         <View flexDirection="row" gap="$s3" justifyContent="space-around" alignItems="center">
           <View position="absolute" left={0}>
-            <Pressable
+            <IconButton
+              icon={ArrowLeft}
               aria-label={t("Back")}
               onPress={() => {
                 if (router.canGoBack()) {
@@ -41,9 +43,7 @@ export default function Settings() {
                   router.replace("/(main)/(home)");
                 }
               }}
-            >
-              <ArrowLeft size={24} color="$uiNeutralPrimary" />
-            </Pressable>
+            />
           </View>
           <Text emphasized subHeadline color="$uiNeutralPrimary">
             {t("Settings")}
diff --git a/src/components/shared/Failure.tsx b/src/components/shared/Failure.tsx
index e685ba388..f773eecef 100644
--- a/src/components/shared/Failure.tsx
+++ b/src/components/shared/Failure.tsx
@@ -8,6 +8,7 @@ import { Square, XStack, YStack } from "tamagui";
 import { marketUSDCAddress } from "@exactly/common/generated/chain";
 
 import GradientScrollView from "./GradientScrollView";
+import IconButton from "./IconButton";
 import SafeView from "./SafeView";
 import AssetLogo from "../shared/AssetLogo";
 import Text from "../shared/Text";
@@ -40,9 +41,7 @@ export default function Failure({
     <GradientScrollView variant="error">
       <SafeView flex={1} backgroundColor="transparent">
         <YStack gap="$s7" paddingBottom="$s9">
-          <Pressable onPress={onClose}>
-            <X size={24} color="$uiNeutralPrimary" />
-          </Pressable>
+          <IconButton icon={X} aria-label={t("Close")} onPress={onClose} />
           <XStack justifyContent="center" alignItems="center">
             <Square borderRadius="$r4" backgroundColor="$interactiveBaseErrorSoftDefault" size={80}>
               <X size={48} color="$uiErrorSecondary" strokeWidth={2} />
diff --git a/src/components/shared/IconButton.tsx b/src/components/shared/IconButton.tsx
new file mode 100644
index 000000000..09d5c6661
--- /dev/null
+++ b/src/components/shared/IconButton.tsx
@@ -0,0 +1,33 @@
+import type { ComponentPropsWithoutRef, ComponentType } from "react";
+import React from "react";
+
+import type { ArrowRight } from "@tamagui/lucide-icons";
+import { Stack, styled } from "tamagui";
+
+export default function IconButton({
+  icon: Icon,
+  color = "$uiNeutralPrimary",
+  size = 24,
+  ...properties
+}: ComponentPropsWithoutRef<typeof Frame> & {
+  color?: string;
+  icon: ComponentType<ComponentPropsWithoutRef<typeof ArrowRight>>;
+  size?: number;
+}) {
+  return (
+    <Frame role="button" aria-disabled={properties.disabled} {...properties}>
+      <Icon size={size} color={color} />
+    </Frame>
+  );
+}
+
+const Frame = styled(Stack, {
+  alignItems: "center",
+  justifyContent: "center",
+  minWidth: 48,
+  minHeight: 48,
+  margin: -12,
+  cursor: "pointer",
+  pressStyle: { opacity: 0.7 },
+  variants: { disabled: { true: { opacity: 0.5, cursor: "default" } } } as const,
+});
diff --git a/src/components/shared/Pending.tsx b/src/components/shared/Pending.tsx
index 41224dc6c..670424b30 100644
--- a/src/components/shared/Pending.tsx
+++ b/src/components/shared/Pending.tsx
@@ -1,6 +1,5 @@
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 
 import { X } from "@tamagui/lucide-icons";
 import { Square, XStack, YStack } from "tamagui";
@@ -8,6 +7,7 @@ import { Square, XStack, YStack } from "tamagui";
 import { marketUSDCAddress } from "@exactly/common/generated/chain";
 
 import GradientScrollView from "./GradientScrollView";
+import IconButton from "./IconButton";
 import AssetLogo from "../shared/AssetLogo";
 import ExaSpinner from "../shared/Spinner";
 import Text from "../shared/Text";
@@ -40,9 +40,7 @@ export default function Pending({
     <GradientScrollView variant="neutral">
       <View flex={1}>
         <YStack gap="$s7" paddingBottom="$s9">
-          <Pressable onPress={onClose}>
-            <X size={24} color="$uiNeutralPrimary" />
-          </Pressable>
+          <IconButton icon={X} aria-label={t("Close")} onPress={onClose} />
           <XStack justifyContent="center" alignItems="center">
             <Square borderRadius="$r4" backgroundColor="$backgroundStrong" size={80}>
               <ExaSpinner backgroundColor="transparent" color="$uiNeutralPrimary" />
diff --git a/src/components/shared/ProfileHeader.tsx b/src/components/shared/ProfileHeader.tsx
index 39f7a116a..3bc53bb21 100644
--- a/src/components/shared/ProfileHeader.tsx
+++ b/src/components/shared/ProfileHeader.tsx
@@ -13,6 +13,7 @@ import shortenHex from "@exactly/common/shortenHex";
 
 import Blocky from "./Blocky";
 import CopyAddressSheet from "./CopyAddressSheet";
+import IconButton from "./IconButton";
 import StatusIndicator from "./StatusIndicator";
 import queryClient from "../../utils/queryClient";
 import reportError from "../../utils/reportError";
@@ -62,9 +63,12 @@ export default function ProfileHeader() {
           )}
         </View>
         <View display="flex" flexDirection="row" alignItems="center" gap="$s4">
-          <Pressable aria-label={hidden ? t("Show sensitive") : t("Hide sensitive")} onPress={toggle} hitSlop={15}>
-            {hidden ? <EyeOff color="$uiNeutralSecondary" /> : <Eye color="$uiNeutralSecondary" />}
-          </Pressable>
+          <IconButton
+            icon={hidden ? EyeOff : Eye}
+            color="$uiNeutralSecondary"
+            aria-label={hidden ? t("Show sensitive") : t("Hide sensitive")}
+            onPress={toggle}
+          />
           {count > 0 && (
             <Pressable
               aria-label={t("Pending proposals")}
@@ -78,15 +82,14 @@ export default function ProfileHeader() {
               <ClockArrowUp color="$uiNeutralSecondary" />
             </Pressable>
           )}
-          <Pressable
+          <IconButton
+            icon={Settings}
+            color="$uiNeutralSecondary"
             aria-label={t("Settings")}
             onPress={() => {
               router.push("/settings");
             }}
-            hitSlop={15}
-          >
-            <Settings color="$uiNeutralSecondary" />
-          </Pressable>
+          />
         </View>
       </View>
       <CopyAddressSheet
diff --git a/src/components/shared/Success.tsx b/src/components/shared/Success.tsx
index 9d4935412..89cb86ac8 100644
--- a/src/components/shared/Success.tsx
+++ b/src/components/shared/Success.tsx
@@ -12,6 +12,7 @@ import { exaPluginAddress, marketUSDCAddress } from "@exactly/common/generated/c
 import { useReadUpgradeableModularAccountGetInstalledPlugins } from "@exactly/common/generated/hooks";
 
 import GradientScrollView from "./GradientScrollView";
+import IconButton from "./IconButton";
 import SafeView from "./SafeView";
 import View from "./View";
 import useAccount from "../../utils/useAccount";
@@ -56,9 +57,7 @@ export default function Success({
       <SafeView flex={1} backgroundColor="transparent">
         <YStack gap="$s5" justifyContent="space-between">
           <YStack>
-            <Pressable onPress={onClose}>
-              <X size={24} color="$uiNeutralPrimary" />
-            </Pressable>
+            <IconButton icon={X} aria-label={t("Close")} onPress={onClose} />
             <YStack gap="$s7" paddingBottom="$s9">
               <XStack justifyContent="center" alignItems="center">
                 <Square
diff --git a/src/components/swaps/Failure.tsx b/src/components/swaps/Failure.tsx
index af2913eb0..1ba9163c6 100644
--- a/src/components/swaps/Failure.tsx
+++ b/src/components/swaps/Failure.tsx
@@ -13,6 +13,7 @@ import { formatUnits } from "viem";
 import queryClient from "../../utils/queryClient";
 import reportError from "../../utils/reportError";
 import AssetLogo from "../shared/AssetLogo";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import Text from "../shared/Text";
 import View from "../shared/View";
@@ -64,9 +65,7 @@ export default function Failure({
           >
             <View flex={1}>
               <YStack gap="$s7" paddingBottom="$s9">
-                <Pressable onPress={onClose}>
-                  <X size={24} color="$uiNeutralPrimary" />
-                </Pressable>
+                <IconButton icon={X} aria-label={t("Close")} onPress={onClose} />
                 <XStack justifyContent="center" alignItems="center">
                   <Square borderRadius="$r4" backgroundColor="$interactiveBaseErrorSoftDefault" size={80}>
                     <X size={48} color="$uiErrorSecondary" strokeWidth={2} />
diff --git a/src/components/swaps/Pending.tsx b/src/components/swaps/Pending.tsx
index e9aa77234..2df637396 100644
--- a/src/components/swaps/Pending.tsx
+++ b/src/components/swaps/Pending.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 
 import { LinearGradient } from "expo-linear-gradient";
 
@@ -10,6 +9,7 @@ import { ScrollView, Square, styled, useTheme, XStack, YStack } from "tamagui";
 import { formatUnits } from "viem";
 
 import AssetLogo from "../shared/AssetLogo";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import ExaSpinner from "../shared/Spinner";
 import Text from "../shared/Text";
@@ -36,6 +36,7 @@ export default function Pending({
 }) {
   const theme = useTheme();
   const {
+    t,
     i18n: { language },
   } = useTranslation();
   return (
@@ -60,9 +61,7 @@ export default function Pending({
           >
             <View flex={1}>
               <YStack gap="$s7" paddingBottom="$s9">
-                <Pressable onPress={onClose}>
-                  <X size={24} color="$uiNeutralPrimary" />
-                </Pressable>
+                <IconButton icon={X} aria-label={t("Close")} onPress={onClose} />
                 <XStack justifyContent="center" alignItems="center">
                   <Square borderRadius="$r4" backgroundColor="$backgroundStrong" size={80}>
                     <ExaSpinner backgroundColor="transparent" color="$uiNeutralPrimary" />
diff --git a/src/components/swaps/Success.tsx b/src/components/swaps/Success.tsx
index 5c9cf362a..5f6d0fd82 100644
--- a/src/components/swaps/Success.tsx
+++ b/src/components/swaps/Success.tsx
@@ -14,6 +14,7 @@ import queryClient from "../../utils/queryClient";
 import reportError from "../../utils/reportError";
 import AssetLogo from "../shared/AssetLogo";
 import Button from "../shared/Button";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import ExaSpinner from "../shared/Spinner";
 import Text from "../shared/Text";
@@ -71,9 +72,7 @@ export default function Success({
           >
             <View flex={1}>
               <YStack gap="$s7" paddingBottom="$s9">
-                <Pressable onPress={onClose} aria-label={t("Close")}>
-                  <X size={24} color="$uiNeutralPrimary" />
-                </Pressable>
+                <IconButton icon={X} aria-label={t("Close")} onPress={onClose} />
                 <XStack justifyContent="center" alignItems="center">
                   <Square borderRadius="$r4" backgroundColor="$interactiveBaseInformationSoftDefault" size={80}>
                     <ExaSpinner backgroundColor="transparent" color="$uiInfoSecondary" />
diff --git a/src/components/swaps/Swaps.tsx b/src/components/swaps/Swaps.tsx
index 232059312..723244a61 100644
--- a/src/components/swaps/Swaps.tsx
+++ b/src/components/swaps/Swaps.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState, type RefObject } from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { router } from "expo-router";
@@ -35,6 +34,7 @@ import useMarkets from "../../utils/useMarkets";
 import usePortfolio from "../../utils/usePortfolio";
 import useSimulateProposal from "../../utils/useSimulateProposal";
 import Button from "../shared/Button";
+import IconButton from "../shared/IconButton";
 import SafeView from "../shared/SafeView";
 import Text from "../shared/Text";
 import View from "../shared/View";
@@ -375,7 +375,8 @@ export default function Swaps() {
           justifyContent="space-between"
           alignItems="center"
         >
-          <Pressable
+          <IconButton
+            icon={ArrowLeft}
             aria-label={t("Back")}
             onPress={() => {
               if (router.canGoBack()) {
@@ -384,19 +385,17 @@ export default function Swaps() {
                 router.replace("/(main)/(home)/defi");
               }
             }}
-          >
-            <ArrowLeft size={24} color="$uiNeutralPrimary" />
-          </Pressable>
+          />
           <Text primary emphasized subHeadline>
             {t("Swaps")}
           </Text>
-          <Pressable
+          <IconButton
+            icon={CircleHelp}
+            aria-label={t("Help")}
             onPress={() => {
               presentArticle("11757863").catch(reportError);
             }}
-          >
-            <CircleHelp color="$uiNeutralPrimary" />
-          </Pressable>
+          />
         </View>
         <ScrollView ref={swapsScrollReference} showsVerticalScrollIndicator={false} flex={1}>
           <View padded>
diff --git a/src/i18n/es.json b/src/i18n/es.json
index 18628273d..e2cc7af35 100644
--- a/src/i18n/es.json
+++ b/src/i18n/es.json
@@ -76,6 +76,7 @@
   "Available for {{count}} installments or less_other": "Disponible para {{count}} cuotas o menos",
   "Available for repayment": "Disponible para el pago",
   "Available funding": "Financiamiento disponible",
+  "Available funding info": "Información de financiamiento disponible",
   "Available in 200+ countries and regions.": "Disponible en más de 200 países y regiones.",
   "Available limit: {{asset}}": "Límite disponible: {{asset}}",
   "Available:": "Disponible:",
@@ -179,6 +180,7 @@
   "Destination network": "Red de destino",
   "Destination": "Destino",
   "Details": "Detalles",
+  "Dismiss": "Descartar",
   "Disconnect from {{name}}": "Desconectarte de {{name}}",
   "Disconnect": "Desconectar",
   "Dollars": "Dólares",
diff --git a/src/i18n/pt.json b/src/i18n/pt.json
index 6655dc273..54d495f14 100644
--- a/src/i18n/pt.json
+++ b/src/i18n/pt.json
@@ -76,6 +76,7 @@
   "Available for {{count}} installments or less_other": "Disponível para {{count}} parcelas ou menos",
   "Available for repayment": "Disponível para pagamento",
   "Available funding": "Financiamento disponível",
+  "Available funding info": "Informações sobre financiamento disponível",
   "Available in 200+ countries and regions.": "Disponível em mais de 200 países e regiões.",
   "Available limit: {{asset}}": "Limite disponível: {{asset}}",
   "Available:": "Disponível:",
@@ -179,6 +180,7 @@
   "Destination network": "Rede de destino",
   "Destination": "Destino",
   "Details": "Detalhes",
+  "Dismiss": "Descartar",
   "Disconnect from {{name}}": "Desconectar de {{name}}",
   "Disconnect": "Desconectar",
   "Dollars": "Dólares",