blockscout · tom2drum · Oct 24, 2025 · Oct 24, 2025 · Oct 24, 2025
diff --git a/toolkit/components/charts/ChartWidget.tsx b/toolkit/components/charts/ChartWidget.tsx
@@ -157,7 +157,7 @@ export const ChartWidget = React.memo(({
               hidden={ !zoomRange }
               aria-label="Reset zoom"
               size="md"
-              variant="icon_secondary"
+              variant="icon_background"
               onClick={ handleZoomReset }
             >
               <Icon><RepeatIcon/></Icon>

diff --git a/toolkit/components/charts/parts/ChartMenu.tsx b/toolkit/components/charts/parts/ChartMenu.tsx
@@ -132,7 +132,7 @@ const ChartMenu = ({
     <>
       <MenuRoot>
         <MenuTrigger asChild>
-          <IconButton variant="icon_secondary" size="md" aria-label="Open chart options menu" loadingSkeleton={ isLoading }>
+          <IconButton variant="icon_background" size="md" aria-label="Open chart options menu" loadingSkeleton={ isLoading }>
             <Icon><DotsIcon/></Icon>
           </IconButton>
         </MenuTrigger>

diff --git a/toolkit/theme/foundations/colors.ts b/toolkit/theme/foundations/colors.ts
@@ -34,7 +34,7 @@ const DEFAULT_THEME_COLORS = {
       },
       bg: {
         _light: { value: '{colors.blue.50}' },
-        _dark: { value: '{colors.whiteAlpha.100}' },
+        _dark: { value: '{colors.whiteAlpha.50}' },
       },
     },
     option: {

diff --git a/toolkit/theme/foundations/semanticTokens.ts b/toolkit/theme/foundations/semanticTokens.ts
@@ -111,6 +111,11 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
           DEFAULT: { value: '{colors.text.primary}' },
         },
       },
+      icon_background: {
+        bg: {
+          DEFAULT: { value: { _light: '{colors.gray.50}', _dark: '{colors.whiteAlpha.50}' } },
+        },
+      },
       pagination: {
         fg: {
           DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.gray.50}' } },

diff --git a/toolkit/theme/recipes/button.recipe.ts b/toolkit/theme/recipes/button.recipe.ts
@@ -259,6 +259,28 @@ export const recipe = defineRecipe({
           color: 'hover',
         },
       },
+      icon_background: {
+        bg: 'button.icon_background.bg',
+        color: 'icon.secondary',
+        border: 'none',
+        _hover: {
+          color: 'hover',
+        },
+        _selected: {
+          bg: 'selected.control.bg',
+          color: 'selected.control.text',
+          _hover: {
+            bg: 'selected.control.bg',
+            color: 'hover',
+          },
+          _expanded: {
+            color: 'hover',
+          },
+        },
+        _expanded: {
+          color: 'hover',
+        },
+      },
       pagination: {
         borderWidth: '2px',
         borderStyle: 'solid',

diff --git a/...reenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/...reenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
diff --git a/...ess/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-1.png b/...ess/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-1.png
diff --git a/...ddress/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png b/...ddress/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png
diff --git a/ui/address/details/AddressFavoriteButton.tsx b/ui/address/details/AddressFavoriteButton.tsx
@@ -64,7 +64,7 @@ const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
             <IconButton
               className={ className }
               aria-label="edit"
-              variant="icon_secondary"
+              variant="icon_background"
               size="md"
               selected={ Boolean(watchListId) }
               onClick={ onClick }

diff --git a/ui/address/details/AddressQrCode.tsx b/ui/address/details/AddressQrCode.tsx
@@ -62,7 +62,7 @@ const AddressQrCode = ({ hash, className, isLoading }: Props) => {
         <IconButton
           className={ className }
           aria-label="Show QR code"
-          variant="icon_secondary"
+          variant="icon_background"
           size="md"
           onClick={ onOpen }
         >

diff --git a/ui/address/tokenSelect/TokenSelect.tsx b/ui/address/tokenSelect/TokenSelect.tsx
@@ -75,7 +75,7 @@ const TokenSelect = () => {
         >
           <IconButton
             aria-label="Show all tokens"
-            variant="icon_secondary"
+            variant="icon_background"
             size="md"
             onClick={ handleIconButtonClick }
           >

diff --git a/...ct/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/...ct/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
diff --git a/...ct/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-2.png b/...ct/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-2.png
diff --git a/...okenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-1.png b/...okenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-1.png
diff --git a/...okenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-2.png b/...okenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-2.png
diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_filter-1.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_filter-1.png
diff --git a/...ddress/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_long-values-1.png b/...ddress/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_long-values-1.png
diff --git a/...dress/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_native-token-1.png b/...dress/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_native-token-1.png
diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-1.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-1.png
diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-2.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-2.png
diff --git a/...hots__/BlockDetails.pw.tsx_dark-color-mode_regular-block-mobile-dark-mode-1.png b/...hots__/BlockDetails.pw.tsx_dark-color-mode_regular-block-mobile-dark-mode-1.png
diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_genesis-block-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_genesis-block-1.png
diff --git a/..._screenshots__/BlockDetails.pw.tsx_default_regular-block-mobile-dark-mode-1.png b/..._screenshots__/BlockDetails.pw.tsx_default_regular-block-mobile-dark-mode-1.png
diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_rootstock-custom-fields-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_rootstock-custom-fields-1.png
diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_with-blob-txs-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_with-blob-txs-1.png
diff --git a/...__screenshots__/BlockDetails.pw.tsx_mobile_regular-block-mobile-dark-mode-1.png b/...__screenshots__/BlockDetails.pw.tsx_mobile_regular-block-mobile-dark-mode-1.png
diff --git a/ui/marketplace/Banner/FeaturedApp.tsx b/ui/marketplace/Banner/FeaturedApp.tsx
@@ -129,7 +129,7 @@ const FeaturedApp = ({
               <IconButton
                 aria-label="Mark as favorite"
                 title="Mark as favorite"
-                variant="icon_secondary"
+                variant="icon_background"
                 size="md"
                 onClick={ handleFavoriteClick }
                 selected={ isFavorite }

diff --git a/ui/marketplace/Banner/FeaturedAppMobile.tsx b/ui/marketplace/Banner/FeaturedAppMobile.tsx
@@ -143,7 +143,7 @@ const FeaturedAppMobile = ({
             top={{ base: 1, sm: '18px' }}
             aria-label="Mark as favorite"
             title="Mark as favorite"
-            variant="icon_secondary"
+            variant="icon_background"
             size="md"
             onClick={ onFavoriteClick }
             selected={ isFavorite }

diff --git a/ui/marketplace/MarketplaceAppCard.tsx b/ui/marketplace/MarketplaceAppCard.tsx
@@ -172,7 +172,7 @@ const MarketplaceAppCard = ({
                 <IconButton
                   aria-label="Mark as favorite"
                   title="Mark as favorite"
-                  variant="icon_secondary"
+                  variant="icon_background"
                   size="md"
                   onClick={ handleFavoriteClick }
                   selected={ isFavorite }
@@ -182,9 +182,9 @@ const MarketplaceAppCard = ({
                 <CopyToClipboard
                   text={ isBrowser() ? window.location.origin + `/apps/${ id }` : '' }
                   type="share"
-                  variant="icon_secondary"
+                  variant="icon_background"
                   size="md"
-                  borderRadius="none"
+                  borderRadius="base"
                   ml={ 0 }
                   boxSize={ 8 }
                 />

diff --git a/ui/marketplace/MarketplaceAppModal.tsx b/ui/marketplace/MarketplaceAppModal.tsx
@@ -183,7 +183,7 @@ const MarketplaceAppModal = ({
                 <IconButton
                   aria-label="Mark as favorite"
                   title="Mark as favorite"
-                  variant="icon_secondary"
+                  variant="icon_background"
                   size="md"
                   onClick={ handleFavoriteClick }
                   selected={ isFavorite }
@@ -194,10 +194,11 @@ const MarketplaceAppModal = ({
                 <CopyToClipboard
                   text={ isBrowser() ? window.location.origin + `/apps/${ id }` : '' }
                   type="share"
-                  variant="icon_secondary"
+                  variant="icon_background"
                   size="md"
                   ml={ 0 }
                   boxSize={ 8 }
+                  borderRadius="base"
                 />
               </Flex>
             </Flex>

diff --git a/...eenshots__/MarketplaceAppModal.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/...eenshots__/MarketplaceAppModal.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
diff --git a/...ce/__screenshots__/MarketplaceAppModal.pw.tsx_default_base-view-dark-mode-1.png b/...ce/__screenshots__/MarketplaceAppModal.pw.tsx_default_base-view-dark-mode-1.png
diff --git a/...place/__screenshots__/MarketplaceAppModal.pw.tsx_default_mobile-base-view-1.png b/...place/__screenshots__/MarketplaceAppModal.pw.tsx_default_mobile-base-view-1.png
diff --git a/ui/megaEth/uptime/__screenshots__/Uptime.pw.tsx_default_default-view-1.png b/ui/megaEth/uptime/__screenshots__/Uptime.pw.tsx_default_default-view-1.png
diff --git a/ui/megaEth/uptime/__screenshots__/Uptime.pw.tsx_default_default-view-2.png b/ui/megaEth/uptime/__screenshots__/Uptime.pw.tsx_default_default-view-2.png
diff --git a/ui/optimismSuperchain/address/OpSuperchainAddressTxs.pw.tsx b/ui/optimismSuperchain/address/OpSuperchainAddressTxs.pw.tsx
@@ -50,14 +50,14 @@ test.describe('local txs', () => {
   });
 
   test('base view', async() => {
-    await expect(component).toHaveScreenshot();
+    await expect(component).toHaveScreenshot({ maxDiffPixels: 5 });
   });
 
   test.describe('mobile', () => {
     test.use({ viewport: pwConfig.viewport.mobile });
 
     test('base view', async() => {
-      await expect(component).toHaveScreenshot();
+      await expect(component).toHaveScreenshot({ maxDiffPixels: 5 });
     });
   });
 });
diff --git a/ui/pages/Chart.tsx b/ui/pages/Chart.tsx
@@ -237,9 +237,10 @@ const Chart = () => {
                 text={ config.app.baseUrl + router.asPath }
                 type="link"
                 ml={ 0 }
-                borderRadius="none"
-                variant="icon_secondary"
+                borderRadius="base"
+                variant="icon_background"
                 size="md"
+                boxSize={ 8 }
               />
             )
           )) }

diff --git a/ui/pages/Marketplace.tsx b/ui/pages/Marketplace.tsx
@@ -148,7 +148,7 @@ const Marketplace = () => {
           <MenuRoot>
             <MenuTrigger asChild>
               <IconButton
-                variant="icon_secondary"
+                variant="icon_background"
                 size="md"
                 ml="auto"
               >

diff --git a/ui/pages/__screenshots__/Address.pw.tsx_default_degradation-view-1.png b/ui/pages/__screenshots__/Address.pw.tsx_default_degradation-view-1.png
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_base-view-1.png
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-base-view-1.png
diff --git a/...__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-with-anytrust-DA-1.png b/...__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-with-anytrust-DA-1.png
diff --git a/...__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-with-celestia-DA-1.png b/...__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-with-celestia-DA-1.png
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_with-anytrust-DA-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_with-anytrust-DA-1.png
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_with-celestia-DA-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_with-celestia-DA-1.png
diff --git a/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-details-tab-1.png b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-details-tab-1.png
diff --git a/...s/__screenshots__/Chart.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/...s/__screenshots__/Chart.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png
diff --git a/ui/pages/__screenshots__/Chart.pw.tsx_default_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/Chart.pw.tsx_default_base-view-dark-mode-mobile-1.png
diff --git a/ui/pages/__screenshots__/Chart.pw.tsx_mobile_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/Chart.pw.tsx_mobile_base-view-dark-mode-mobile-1.png
diff --git a/...creenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/...creenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png
diff --git a/...ages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png b/...ages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png
diff --git a/ui/pages/__screenshots__/GasTracker.pw.tsx_mobile_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/GasTracker.pw.tsx_mobile_base-view-dark-mode-mobile-1.png
diff --git a/...es/__screenshots__/Marketplace.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/...es/__screenshots__/Marketplace.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
diff --git a/.../__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-banner-dark-mode-1.png b/.../__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-banner-dark-mode-1.png
diff --git a/...shots__/Marketplace.pw.tsx_dark-color-mode_with-essential-dapps-dark-mode-1.png b/...shots__/Marketplace.pw.tsx_dark-color-mode_with-essential-dapps-dark-mode-1.png
diff --git a/...eenshots__/Marketplace.pw.tsx_dark-color-mode_with-featured-app-dark-mode-1.png b/...eenshots__/Marketplace.pw.tsx_dark-color-mode_with-featured-app-dark-mode-1.png
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_base-view-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_base-view-dark-mode-1.png
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-base-view-1.png
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-banner-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-banner-1.png
diff --git a/...es/__screenshots__/Marketplace.pw.tsx_default_mobile-with-essential-dapps-1.png b/...es/__screenshots__/Marketplace.pw.tsx_default_mobile-with-essential-dapps-1.png
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-featured-app-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-featured-app-1.png
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-banner-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-banner-dark-mode-1.png
diff --git a/...__screenshots__/Marketplace.pw.tsx_default_with-essential-dapps-dark-mode-1.png b/...__screenshots__/Marketplace.pw.tsx_default_with-essential-dapps-dark-mode-1.png
diff --git a/...es/__screenshots__/Marketplace.pw.tsx_default_with-featured-app-dark-mode-1.png b/...es/__screenshots__/Marketplace.pw.tsx_default_with-featured-app-dark-mode-1.png
diff --git a/ui/pages/__screenshots__/ScrollL2TxnBatch.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ScrollL2TxnBatch.pw.tsx_default_base-view-1.png
diff --git a/ui/pages/__screenshots__/ScrollL2TxnBatch.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ScrollL2TxnBatch.pw.tsx_default_mobile-base-view-1.png
diff --git a/ui/pages/__screenshots__/Token.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_base-view-1.png
diff --git a/ui/pages/__screenshots__/Token.pw.tsx_default_bridged-token-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_bridged-token-1.png
diff --git a/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-base-view-1.png
diff --git a/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-with-verified-info-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-with-verified-info-1.png
diff --git a/ui/pages/__screenshots__/Token.pw.tsx_default_scam-token-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_scam-token-1.png
diff --git a/ui/pages/__screenshots__/Token.pw.tsx_default_with-verified-info-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_with-verified-info-1.png
diff --git a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-1.png b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-1.png
diff --git a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-2.png b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-2.png
diff --git a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-3.png b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-3.png
diff --git a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-failed-1.png b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-failed-1.png
diff --git a/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_base-view-1.png
diff --git a/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_mobile-base-view-1.png
diff --git a/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_base-view-1.png
diff --git a/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_mobile-base-view-1.png
diff --git a/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx b/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx
@@ -73,7 +73,7 @@ const AccountActionsMenu = ({ isLoading, className, showUpdateMetadataItem }: Pr
   return (
     <MenuRoot unmountOnExit={ false }>
       <MenuTrigger asChild>
-        <IconButton variant="icon_secondary" size="md" className={ className } onClick={ handleButtonClick } aria-label="Show address menu">
+        <IconButton variant="icon_background" size="md" className={ className } onClick={ handleButtonClick } aria-label="Show address menu">
           <IconSvg name="dots"/>
         </IconButton>
       </MenuTrigger>

diff --git a/...enshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-base-view-1.png b/...enshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-base-view-1.png
diff --git a/...countActionsMenu.pw.tsx_default_with-multiple-items-base-view-with-styles-1.png b/...countActionsMenu.pw.tsx_default_with-multiple-items-base-view-with-styles-1.png
diff --git a/...__screenshots__/AccountActionsMenu.pw.tsx_default_with-one-item-base-view-1.png b/...__screenshots__/AccountActionsMenu.pw.tsx_default_with-one-item-base-view-1.png
diff --git a/...s__/AccountActionsMenu.pw.tsx_default_with-one-item-base-view-with-styles-1.png b/...s__/AccountActionsMenu.pw.tsx_default_with-one-item-base-view-with-styles-1.png
diff --git a/ui/shared/AccountActionsMenu/parts/ButtonItem.tsx b/ui/shared/AccountActionsMenu/parts/ButtonItem.tsx
@@ -21,7 +21,7 @@ const ButtonItem = ({ className, label, onClick, icon, isDisabled }: Props) => {
         className={ className }
         onClick={ onClick }
         disabled={ isDisabled }
-        variant="icon_secondary"
+        variant="icon_background"
         boxSize={ 8 }
       >
         { typeof icon === 'string' ? <IconSvg name={ icon } boxSize={ 6 }/> : icon }

diff --git a/ui/shared/PrevNext.tsx b/ui/shared/PrevNext.tsx
@@ -40,7 +40,7 @@ const PrevNext = ({ className, onClick, prevLabel, nextLabel, isPrevDisabled, is
         <IconButton
           aria-label="prev"
           borderRadius="sm"
-          variant="subtle"
+          variant="icon_background"
           boxSize={ 6 }
           onClick={ handelPrevClick }
           disabled={ isPrevDisabled }
@@ -52,7 +52,7 @@ const PrevNext = ({ className, onClick, prevLabel, nextLabel, isPrevDisabled, is
         <IconButton
           aria-label="next"
           borderRadius="sm"
-          variant="subtle"
+          variant="icon_background"
           boxSize={ 6 }
           ml="10px"
           onClick={ handelNextClick }

diff --git a/ui/shared/address/AddressAddToWallet.tsx b/ui/shared/address/AddressAddToWallet.tsx
@@ -134,7 +134,7 @@ const AddressAddToWallet = ({ className, token, tokenId, isLoading, variant = 'i
         <IconButton
           className={ className }
           aria-label="Add token to wallet"
-          variant="plain"
+          variant="icon_background"
           size="md"
           onClick={ handleClick }
         >

diff --git a/...rt/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/...rt/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
diff --git a/...rt/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png b/...rt/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png
diff --git a/...rt/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-3.png b/...rt/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-3.png
diff --git a/...rt/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-4.png b/...rt/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-4.png
diff --git a/...ared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-1.png b/...ared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-1.png
diff --git a/...ared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png b/...ared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png
diff --git a/...ared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-3.png b/...ared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-3.png
diff --git a/...ared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-4.png b/...ared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-4.png
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-1.png
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-2.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-2.png
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_multiple-charts-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_multiple-charts-1.png
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_multiple-charts-2.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_multiple-charts-2.png
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_multiple-charts-3.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_multiple-charts-3.png
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-values-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-values-1.png
diff --git a/...__screenshots__/ChartWidget.pw.tsx_default_small-variations-in-big-values-1.png b/...__screenshots__/ChartWidget.pw.tsx_default_small-variations-in-big-values-1.png
diff --git a/ui/showcases/IconButton.tsx b/ui/showcases/IconButton.tsx
@@ -15,21 +15,42 @@ const IconButtonShowcase = () => {
         <SamplesStack>
           <Sample label="variant: icon_secondary">
             <IconButton size="md" variant="icon_secondary">
-              <IconSvg name="heart_outline"/>
+              <IconSvg name="info"/>
             </IconButton>
             <IconButton size="md" variant="icon_secondary" data-hover>
-              <IconSvg name="heart_outline"/>
+              <IconSvg name="info"/>
             </IconButton>
             <IconButton size="md" variant="icon_secondary" disabled>
-              <IconSvg name="heart_outline"/>
+              <IconSvg name="info"/>
             </IconButton>
             <IconButton size="md" variant="icon_secondary" selected>
-              <IconSvg name="heart_filled"/>
+              <IconSvg name="info"/>
             </IconButton>
             <IconButton size="md" variant="icon_secondary" selected data-hover>
-              <IconSvg name="heart_filled"/>
+              <IconSvg name="info"/>
             </IconButton>
             <IconButton size="md" variant="icon_secondary" selected disabled>
+              <IconSvg name="info"/>
+            </IconButton>
+          </Sample>
+
+          <Sample label="variant: icon_background">
+            <IconButton size="md" variant="icon_background">
+              <IconSvg name="heart_outline"/>
+            </IconButton>
+            <IconButton size="md" variant="icon_background" data-hover>
+              <IconSvg name="heart_outline"/>
+            </IconButton>
+            <IconButton size="md" variant="icon_background" disabled>
+              <IconSvg name="heart_outline"/>
+            </IconButton>
+            <IconButton size="md" variant="icon_background" selected>
+              <IconSvg name="heart_filled"/>
+            </IconButton>
+            <IconButton size="md" variant="icon_background" selected data-hover>
+              <IconSvg name="heart_filled"/>
+            </IconButton>
+            <IconButton size="md" variant="icon_background" selected disabled>
               <IconSvg name="heart_filled"/>
             </IconButton>
           </Sample>

diff --git a/ui/showcases/Menu.tsx b/ui/showcases/Menu.tsx
@@ -16,7 +16,7 @@ const MenuShowcase = () => {
           <Sample label="variant: subtle">
             <MenuRoot>
               <MenuTrigger asChild>
-                <IconButton variant="icon_secondary" size="md">
+                <IconButton variant="icon_background" size="md">
                   <IconSvg name="dots"/>
                 </IconButton>
               </MenuTrigger>
@@ -30,7 +30,7 @@ const MenuShowcase = () => {
 
             <MenuRoot>
               <MenuTrigger asChild>
-                <IconButton variant="icon_secondary" size="md" loadingSkeleton>
+                <IconButton variant="icon_background" size="md" loadingSkeleton>
                   <IconSvg name="dots"/>
                 </IconButton>
               </MenuTrigger>

diff --git a/...shots__/IconButton.pw.tsx_dark-color-mode_color-theme-overrides-dark-mode-1.png b/...shots__/IconButton.pw.tsx_dark-color-mode_color-theme-overrides-dark-mode-1.png
diff --git a/...cases/__screenshots__/IconButton.pw.tsx_dark-color-mode_default-dark-mode-1.png b/...cases/__screenshots__/IconButton.pw.tsx_dark-color-mode_default-dark-mode-1.png
diff --git a/...__screenshots__/IconButton.pw.tsx_default_color-theme-overrides-dark-mode-1.png b/...__screenshots__/IconButton.pw.tsx_default_color-theme-overrides-dark-mode-1.png
diff --git a/ui/showcases/__screenshots__/IconButton.pw.tsx_default_default-dark-mode-1.png b/ui/showcases/__screenshots__/IconButton.pw.tsx_default_default-dark-mode-1.png
diff --git a/...lockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png b/...lockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png
diff --git a/..._dark-color-mode_blockscout-provider-with-interpretation-mobile-dark-mode-1.png b/..._dark-color-mode_blockscout-provider-with-interpretation-mobile-dark-mode-1.png
diff --git a/...w.tsx_dark-color-mode_noves-provider-with-interpretation-mobile-dark-mode-1.png b/...w.tsx_dark-color-mode_noves-provider-with-interpretation-mobile-dark-mode-1.png
diff --git a/...ng.pw.tsx_default_blockscout-provider-no-interpretation-has-method-called-1.png b/...ng.pw.tsx_default_blockscout-provider-no-interpretation-has-method-called-1.png
diff --git a/...TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-pending-1.png b/...TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-pending-1.png
diff --git a/...g.pw.tsx_default_blockscout-provider-no-interpretation-with-action-button-1.png b/...g.pw.tsx_default_blockscout-provider-no-interpretation-with-action-button-1.png
diff --git a/...lockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png b/...lockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png
diff --git a/...t_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png b/...t_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png
diff --git a/...default_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png b/...default_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png
diff --git a/...ult_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png b/...ult_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png
diff --git a/...with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png b/...with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png
diff --git a/..._default_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png b/..._default_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png
diff --git a/...g.pw.tsx_default_blockscout-provider-with-interpretation-mobile-dark-mode-1.png b/...g.pw.tsx_default_blockscout-provider-with-interpretation-mobile-dark-mode-1.png
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_no-interpretation-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_no-interpretation-mobile-1.png
diff --git a/...eading.pw.tsx_default_noves-provider-with-interpretation-mobile-dark-mode-1.png b/...eading.pw.tsx_default_noves-provider-with-interpretation-mobile-dark-mode-1.png
diff --git a/...lockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png b/...lockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png
diff --git a/...e_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png b/...e_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png
diff --git a/..._mobile_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png b/..._mobile_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png
diff --git a/...ile_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png b/...ile_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png
diff --git a/...with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png b/...with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png
diff --git a/...x_mobile_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png b/...x_mobile_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png
diff --git a/...ng.pw.tsx_mobile_blockscout-provider-with-interpretation-mobile-dark-mode-1.png b/...ng.pw.tsx_mobile_blockscout-provider-with-interpretation-mobile-dark-mode-1.png
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_no-interpretation-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_no-interpretation-mobile-1.png
diff --git a/...Heading.pw.tsx_mobile_noves-provider-with-interpretation-mobile-dark-mode-1.png b/...Heading.pw.tsx_mobile_noves-provider-with-interpretation-mobile-dark-mode-1.png
diff --git a/...OptimisticL2TxnBatchDetails.pw.tsx_default_EIP-4844-blob-container-mobile-1.png b/...OptimisticL2TxnBatchDetails.pw.tsx_default_EIP-4844-blob-container-mobile-1.png
diff --git a/...ptimisticL2TxnBatchDetails.pw.tsx_default_call-data-blob-container-mobile-1.png b/...ptimisticL2TxnBatchDetails.pw.tsx_default_call-data-blob-container-mobile-1.png
diff --git a/...OptimisticL2TxnBatchDetails.pw.tsx_default_celestia-blob-container-mobile-1.png b/...OptimisticL2TxnBatchDetails.pw.tsx_default_celestia-blob-container-mobile-1.png
diff --git a/.../OptimisticL2TxnBatchDetails.pw.tsx_mobile_EIP-4844-blob-container-mobile-1.png b/.../OptimisticL2TxnBatchDetails.pw.tsx_mobile_EIP-4844-blob-container-mobile-1.png
diff --git a/...OptimisticL2TxnBatchDetails.pw.tsx_mobile_call-data-blob-container-mobile-1.png b/...OptimisticL2TxnBatchDetails.pw.tsx_mobile_call-data-blob-container-mobile-1.png
diff --git a/.../OptimisticL2TxnBatchDetails.pw.tsx_mobile_celestia-blob-container-mobile-1.png b/.../OptimisticL2TxnBatchDetails.pw.tsx_mobile_celestia-blob-container-mobile-1.png