leather-io · pete-watters · Dec 18, 2025 · Dec 18, 2025 · Dec 18, 2025 · Dec 19, 2025
diff --git a/apps/extension/src/app/components/crypto-asset-item/crypto-asset-item-placeholder.tsx b/apps/extension/src/app/components/crypto-asset-item/crypto-asset-item-placeholder.tsx
@@ -1,12 +1,12 @@
-import { Box, type BoxProps, Circle } from 'leather-styles/jsx';
+import { Box, type BoxProps } from 'leather-styles/jsx';
 
 import { ItemLayout, SkeletonLoader } from '@leather.io/ui';
 
 export function CryptoAssetItemPlaceholder({ ...props }: BoxProps) {
   return (
     <Box my="space.02" {...props}>
       <ItemLayout
-        img={<Circle bgColor="ink.text-non-interactive" size="36px" />}
+        img={<SkeletonLoader isLoading width="48px" height="48px" borderRadius="round" />}
         titleLeft={<SkeletonLoader isLoading height="20px" width="126px" />}
         captionLeft={<SkeletonLoader isLoading height="20px" width="78px" />}
         titleRight={<SkeletonLoader isLoading width="126px" />}

diff --git a/apps/extension/src/app/components/icon-wrapper.tsx b/apps/extension/src/app/components/icon-wrapper.tsx
diff --git a/apps/extension/src/app/components/loaders/btc-balance-loader.tsx b/apps/extension/src/app/components/loaders/btc-balance-loader.tsx
@@ -22,7 +22,9 @@ export function BtcAssetItemBalanceLoader({
   const isLoading = nativeSegwitBalance.state === 'loading';
   if (isLoading) return <CryptoAssetItemPlaceholder />;
   if (nativeSegwitBalance.state === 'error') {
-    return <CryptoAssetItemError caption="BTC" icon={<BtcAvatarIcon />} title="Bitcoin" />;
+    return (
+      <CryptoAssetItemError caption="BTC" icon={<BtcAvatarIcon size="xl" />} title="Bitcoin" />
+    );
   }
 
   return children(nativeSegwitBalance.value, isLoading, false);

diff --git a/apps/extension/src/app/components/loaders/stx-balance-loader.tsx b/apps/extension/src/app/components/loaders/stx-balance-loader.tsx
@@ -40,7 +40,7 @@ export function StxAssetItemBalanceLoader({
   const isLoading = stxBalance.state === 'loading';
   if (isLoading) return <CryptoAssetItemPlaceholder />;
   if (stxBalance.state === 'error') {
-    return <CryptoAssetItemError caption="STX" icon={<StxAvatarIcon />} title="Stacks" />;
+    return <CryptoAssetItemError caption="STX" icon={<StxAvatarIcon size="xl" />} title="Stacks" />;
   }
 
   return children(stxBalance.value, isLoading, false);

diff --git a/apps/extension/src/app/components/loaders/usdcx-balance-loader.tsx b/apps/extension/src/app/components/loaders/usdcx-balance-loader.tsx
@@ -1,13 +1,11 @@
 import type { Sip10Balance } from '@leather.io/services';
+import { UsdcxAvatarIcon } from '@leather.io/ui';
 
-import { StacksAssetAvatar } from '@app/components/stacks-asset-avatar';
 import { useUsdcxAccountBalance } from '@app/query/stacks/sip10/sip10-balance.hooks';
 
 import { CryptoAssetItemError } from '../crypto-asset-item/crypto-asset-item-error';
 import { CryptoAssetItemPlaceholder } from '../crypto-asset-item/crypto-asset-item-placeholder';
 
-const USDCX_CONTRACT_ID_MAINNET = 'SP120SBRBQJ00MCWS7TM5R8WJNTTKD5K0HFRC2CNE.usdcx::usdcx-token';
-
 interface UsdcxAssetItemBalanceLoaderProps {
   accountIndex: number;
   children(balance: Sip10Balance, isLoading: boolean): React.ReactNode;
@@ -25,15 +23,7 @@ export function UsdcxAssetItemBalanceLoader({
 
   if (usdcxBalance.state === 'error') {
     return (
-      <CryptoAssetItemError
-        caption="USDCx"
-        icon={
-          <StacksAssetAvatar color="white" gradientString={USDCX_CONTRACT_ID_MAINNET}>
-            U
-          </StacksAssetAvatar>
-        }
-        title="USDCx"
-      />
+      <CryptoAssetItemError caption="USDCx" icon={<UsdcxAvatarIcon size="xl" />} title="USDCx" />
     );
   }
 

diff --git a/apps/extension/src/app/components/rpc-transaction-request/transaction-recipients.layout.tsx b/apps/extension/src/app/components/rpc-transaction-request/transaction-recipients.layout.tsx
@@ -2,12 +2,11 @@ import { SharedComponentsSelectors } from '@tests/selectors/shared-component.sel
 import { HStack } from 'leather-styles/jsx';
 
 import type { Money } from '@leather.io/models';
-import { AddressDisplayer, Approver, ItemLayout, UserIcon } from '@leather.io/ui';
+import { AddressDisplayer, Approver, Avatar, ItemLayout, UserIcon } from '@leather.io/ui';
 
 import type { TransferRecipient } from '@shared/models/form.model';
 
 import { formatCurrency } from '@app/common/currency-formatter';
-import { IconWrapper } from '@app/components/icon-wrapper';
 import { Divider } from '@app/components/layout/divider';
 
 interface TransactionRecipientsLayoutProps {
@@ -46,9 +45,12 @@ export function TransactionRecipientsLayout({
 
         <Approver.Subheader>To address</Approver.Subheader>
         <HStack key={address} alignItems="center" gap="space.04" pb="space.03">
-          <IconWrapper>
-            <UserIcon />
-          </IconWrapper>
+          <Avatar
+            size="lg"
+            bg="ink.component-background-hover"
+            outlineColor="ink.component-background-hover"
+            icon={<UserIcon />}
+          />
           <AddressDisplayer
             data-testid={SharedComponentsSelectors.AddressDisplayer}
             address={address}

diff --git a/apps/extension/src/app/components/sbtc-deposit-status-item/sbtc-deposit-status-item.tsx b/apps/extension/src/app/components/sbtc-deposit-status-item/sbtc-deposit-status-item.tsx
@@ -1,7 +1,6 @@
-import SbtcAvatarIconSrc from '@assets/avatars/sbtc-avatar-icon.png';
 import { HStack } from 'leather-styles/jsx';
 
-import { Avatar, Caption, Link, Title } from '@leather.io/ui';
+import { Caption, Link, SbtcAvatarIcon, Title } from '@leather.io/ui';
 import { noop, satToBtc, truncateMiddle } from '@leather.io/utils';
 
 import { analytics } from '@shared/utils/analytics';
@@ -65,7 +64,7 @@ export function SbtcDepositTransactionItem({ deposit }: SbtcDepositTransactionIt
     <TransactionItemLayout
       openTxLink={!depositFailed ? openTxLink : noop}
       txCaption={truncateMiddle(bitcoinTxid, 4)}
-      txIcon={<Avatar fallback="ST" image={SbtcAvatarIconSrc} />}
+      txIcon={<SbtcAvatarIcon size="xl" />}
       txStatus={
         <HStack>
           <Caption color={getDepositStatusTextColor(status)}>{getDepositStatus(status)}</Caption>

diff --git a/apps/extension/src/app/components/src20/src20-image.tsx b/apps/extension/src/app/components/src20/src20-image.tsx
@@ -1,8 +1,9 @@
 import { useState } from 'react';
 
 import { css } from 'leather-styles/css';
+import { styled } from 'leather-styles/jsx';
 
-import { Src20AvatarIcon } from '@leather.io/ui';
+import { BitcoinFilledCircleIcon, Src20AvatarIcon } from '@leather.io/ui';
 
 interface Src20ImageProps {
   alt?: string;
@@ -17,24 +18,29 @@ export function Src20Image(props: Src20ImageProps) {
   if (isError) return <Src20AvatarIcon />;
 
   return (
-    <img
-      alt={alt}
-      onError={() => setIsError(true)}
-      loading="lazy"
-      onLoad={event => {
-        const target = event.target as HTMLImageElement;
-        setWidth(target.naturalWidth);
-        setIsLoading(false);
-      }}
-      src={src}
-      className={css({
-        width: 'xl',
-        borderRadius: '100%',
-        objectFit: 'cover',
-        // display: 'none' breaks onLoad event firing
-        opacity: isLoading ? '0' : '1',
-        imageRendering: width <= 40 ? 'pixelated' : 'auto',
-      })}
-    />
+    <styled.div position="relative" width="xl" height="xl">
+      <img
+        alt={alt}
+        onError={() => setIsError(true)}
+        loading="lazy"
+        onLoad={event => {
+          const target = event.target as HTMLImageElement;
+          setWidth(target.naturalWidth);
+          setIsLoading(false);
+        }}
+        src={src}
+        className={css({
+          borderRadius: '100%',
+          objectFit: 'cover',
+          // display: 'none' breaks onLoad event firing
+          opacity: isLoading ? '0' : '1',
+          imageRendering: width <= 40 ? 'pixelated' : 'auto',
+        })}
+        style={{ width: '100%', height: '100%' }}
+      />
+      <styled.div position="absolute" bottom="-1px" right="-1px">
+        <BitcoinFilledCircleIcon width={16} height={16} />
+      </styled.div>
+    </styled.div>
   );
 }
diff --git a/apps/extension/src/app/components/stacks-asset-avatar.tsx b/apps/extension/src/app/components/stacks-asset-avatar.tsx
diff --git a/apps/extension/src/app/components/stacks-transaction-item/stacks-transaction-icon.tsx b/apps/extension/src/app/components/stacks-transaction-item/stacks-transaction-icon.tsx
@@ -1,9 +1,14 @@
-import { BoxProps } from 'leather-styles/jsx';
+import { Box, BoxProps } from 'leather-styles/jsx';
 
 import { StacksTx } from '@leather.io/models';
-import { BarsThreeIcon, DynamicColorCircle, ErrorCircleIcon, StxAvatarIcon } from '@leather.io/ui';
+import {
+  AssetAvatarIcon,
+  Avatar,
+  BarsThreeIcon,
+  ErrorCircleIcon,
+  getAvatarUrl,
+} from '@leather.io/ui';
 
-import { TransactionIconWrapper } from '../transaction/transaction-icon-wrapper';
 import { TransactionTypeIcon } from '../transaction/transaction-type-icon';
 
 interface TransactionIconProps extends BoxProps {
@@ -13,30 +18,55 @@ export function StacksTransactionIcon({ transaction, ...rest }: TransactionIconP
   switch (transaction.tx_type) {
     case 'coinbase':
       return (
-        <TransactionIconWrapper icon={<BarsThreeIcon />} transaction={transaction} {...rest} />
+        <Box position="relative" flexShrink={0} {...rest}>
+          <Avatar
+            size="xl"
+            bg="stacks"
+            color="ink.background-primary"
+            outlineColor="ink.border-transparent"
+            icon={<BarsThreeIcon />}
+          />
+          <TransactionTypeIcon transaction={transaction} />
+        </Box>
       );
     case 'smart_contract':
       return (
-        <DynamicColorCircle value={`${transaction.smart_contract.contract_id}`} {...rest}>
+        <Box position="relative" {...rest}>
+          <Avatar image={getAvatarUrl(`${transaction.smart_contract.contract_id}`)} size="xl" />
           <TransactionTypeIcon transaction={transaction} />
-        </DynamicColorCircle>
+        </Box>
       );
     case 'contract_call':
       return (
-        <DynamicColorCircle
-          value={`${transaction.contract_call.contract_id}::${transaction.contract_call.function_name}`}
-          {...rest}
-        >
+        <Box position="relative" {...rest}>
+          <Avatar
+            image={getAvatarUrl(
+              `${transaction.contract_call.contract_id}::${transaction.contract_call.function_name}`
+            )}
+            size="xl"
+          />
           <TransactionTypeIcon transaction={transaction} />
-        </DynamicColorCircle>
+        </Box>
       );
     case 'token_transfer':
       return (
-        <TransactionIconWrapper icon={<StxAvatarIcon />} transaction={transaction} {...rest} />
+        <Box position="relative" flexShrink={0} {...rest}>
+          <AssetAvatarIcon asset={{ protocol: 'nativeStx' }} size="xl" />
+          <TransactionTypeIcon transaction={transaction} />
+        </Box>
       );
     case 'poison_microblock':
       return (
-        <TransactionIconWrapper icon={<ErrorCircleIcon />} transaction={transaction} {...rest} />
+        <Box position="relative" flexShrink={0} {...rest}>
+          <Avatar
+            size="xl"
+            bg="stacks"
+            color="ink.background-primary"
+            outlineColor="ink.border-transparent"
+            icon={<ErrorCircleIcon />}
+          />
+          <TransactionTypeIcon transaction={transaction} />
+        </Box>
       );
     default:
       return null;

diff --git a/apps/extension/src/app/components/transaction/transaction-icon-wrapper.tsx b/apps/extension/src/app/components/transaction/transaction-icon-wrapper.tsx
diff --git a/apps/extension/src/app/components/tx-asset-item.tsx b/apps/extension/src/app/components/tx-asset-item.tsx
@@ -1,8 +1,8 @@
 import { HStack, HstackProps, styled } from 'leather-styles/jsx';
 
-import { isValidUrl } from '@shared/utils/urls';
+import { AssetAvatarIcon } from '@leather.io/ui';
 
-import { StacksAssetAvatar } from '@app/components/stacks-asset-avatar';
+import { isValidUrl } from '@shared/utils/urls';
 
 interface TxAssetItemProps extends HstackProps {
   iconString: string;
@@ -12,15 +12,23 @@ interface TxAssetItemProps extends HstackProps {
 export function TxAssetItem(props: TxAssetItemProps) {
   const { iconString, amount, ticker, ...rest } = props;
   const imageCanonicalUri = isValidUrl(iconString) ? iconString : undefined;
+  const isStx = iconString === 'STX';
 
   return (
     <HStack alignItems="center" flexGrow={1} justifyContent="space-between" width="100%" {...rest}>
       <HStack>
-        <StacksAssetAvatar
-          gradientString={iconString}
-          img={imageCanonicalUri}
-          isStx={iconString === 'STX'}
-          size="32"
+        <AssetAvatarIcon
+          asset={
+            isStx
+              ? { protocol: 'nativeStx' }
+              : {
+                  protocol: 'sip10',
+                  contractId: iconString,
+                  imageCanonicalUri: imageCanonicalUri ?? '',
+                  name: ticker,
+                }
+          }
+          size="md"
         />
         <styled.span textStyle="heading.04">{ticker}</styled.span>
       </HStack>