From 2d3fb8abe04db938f185d365f07e6fe8913b4da9 Mon Sep 17 00:00:00 2001
From: Fara Woolf <fara@trustmachines.co>
Date: Fri, 16 Feb 2024 13:25:04 -0600
Subject: [PATCH] refactor: existing icons to use variants, closes #4950

---
 .../components/account/account-list-item.layout.tsx   |  1 -
 src/app/components/available-balance.tsx              |  2 +-
 .../bitcoin-transaction-icon.tsx                      |  4 ++--
 .../fees-row/components/fee-estimate-item.tsx         |  4 ++--
 .../fees-row/components/fees-row.layout.tsx           |  2 +-
 .../stacks-transaction-item/increase-fee-button.tsx   |  2 +-
 .../components/transaction/token-transfer-icon.tsx    |  4 ++--
 src/app/components/transaction/transaction-icon.tsx   |  4 ++--
 .../stacks-transaction/ft-transfer-item.tsx           |  2 +-
 .../stacks-transaction/stx-transfer-item.tsx          |  2 +-
 .../collectibles/components/collectibes.layout.tsx    |  6 +++---
 .../collectibles/components/image-unavailable.tsx     |  2 +-
 src/app/features/feedback-button/feedback-button.tsx  |  2 +-
 .../ledger/components/ledger-screen-detail.tsx        |  5 ++---
 src/app/features/message-signer/hash-drawer.tsx       |  2 +-
 .../components/psbt-request-details-header.tsx        |  4 ++--
 src/app/pages/fund/components/fast-checkout-badge.tsx |  3 +--
 .../pages/fund/components/zero-percent-fees-badge.tsx |  2 +-
 src/app/pages/home/components/account-actions.tsx     |  6 +++---
 src/app/pages/home/components/account-info-card.tsx   |  2 +-
 src/app/pages/home/components/send-button.tsx         |  6 ++----
 .../components/recipient-dropdown-item.tsx            |  2 +-
 .../swap/components/select-asset-trigger-button.tsx   |  2 +-
 .../swap/components/swap-details/swap-details.tsx     |  2 +-
 src/app/pages/swap/components/swap-toggle-button.tsx  |  2 +-
 src/app/ui/components/button/button.stories.tsx       |  2 +-
 .../dowpdown-menu/dropdown-menu.stories.tsx           |  2 +-
 src/app/ui/components/item/item.layout.tsx            |  6 ++++--
 src/app/ui/components/select/select.stories.tsx       | 11 ++++++-----
 src/app/ui/components/spinner.tsx                     |  2 +-
 src/app/ui/components/tooltip/tooltip.stories.tsx     |  2 +-
 src/app/ui/icons/docs/icons.mdx                       |  6 +++---
 32 files changed, 52 insertions(+), 54 deletions(-)

diff --git a/src/app/components/account/account-list-item.layout.tsx b/src/app/components/account/account-list-item.layout.tsx
index f353437b7ec..79f95f4237b 100644
--- a/src/app/components/account/account-list-item.layout.tsx
+++ b/src/app/components/account/account-list-item.layout.tsx
@@ -44,7 +44,6 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
               color="accent.text-subdued"
               position="absolute"
               right={0}
-              size="18px"
               top="calc(50% - 8px)"
             />
           ) : (
diff --git a/src/app/components/available-balance.tsx b/src/app/components/available-balance.tsx
index 8a401e9ad4c..7b6c66e8756 100644
--- a/src/app/components/available-balance.tsx
+++ b/src/app/components/available-balance.tsx
@@ -20,7 +20,7 @@ export function AvailableBalance(props: { balance: Money; balanceTooltipLabel?:
         </styled.span>
         <BasicTooltip label={balanceTooltipLabel} side="top">
           <Box>
-            <InfoCircleIcon color="accent.text-subdued" width="xs" />
+            <InfoCircleIcon color="accent.text-subdued" variant="small" />
           </Box>
         </BasicTooltip>
       </HStack>
diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx
index 653d3dd9eee..2cb6caa1193 100644
--- a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx
+++ b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx
@@ -8,8 +8,8 @@ import { ArrowUpIcon } from '@app/ui/icons/arrow-up-icon';
 
 function TxStatusIcon(props: { address: string; tx: BitcoinTx }) {
   const { address, tx } = props;
-  if (isBitcoinTxInbound(address, tx)) return <ArrowDownIcon width="xs" />;
-  return <ArrowUpIcon width="xs" />;
+  if (isBitcoinTxInbound(address, tx)) return <ArrowDownIcon variant="small" />;
+  return <ArrowUpIcon variant="small" />;
 }
 
 interface TransactionIconProps extends CircleProps {
diff --git a/src/app/components/fees-row/components/fee-estimate-item.tsx b/src/app/components/fees-row/components/fee-estimate-item.tsx
index dd009f61693..cb4227027f3 100644
--- a/src/app/components/fees-row/components/fee-estimate-item.tsx
+++ b/src/app/components/fees-row/components/fee-estimate-item.tsx
@@ -25,7 +25,7 @@ export function FeeEstimateItem({
 }: FeeEstimateItemProps) {
   const selectedIcon = useMemo(() => {
     const isSelected = index === selectedItem;
-    return isSelected ? <CheckmarkIcon /> : <></>;
+    return isSelected ? <CheckmarkIcon variant="small" /> : <></>;
   }, [index, selectedItem]);
 
   return (
@@ -47,7 +47,7 @@ export function FeeEstimateItem({
     >
       <HStack gap="space.01">
         <styled.span textStyle="label.02">{labels[index]}</styled.span>
-        {!disableFeeSelection && (isVisible ? selectedIcon : <ChevronDownIcon />)}
+        {!disableFeeSelection && (isVisible ? selectedIcon : <ChevronDownIcon variant="small" />)}
       </HStack>
     </Link>
   );
diff --git a/src/app/components/fees-row/components/fees-row.layout.tsx b/src/app/components/fees-row/components/fees-row.layout.tsx
index bc82a82eb8d..b93a895da17 100644
--- a/src/app/components/fees-row/components/fees-row.layout.tsx
+++ b/src/app/components/fees-row/components/fees-row.layout.tsx
@@ -33,7 +33,7 @@ export function FeesRowLayout(props: FeesRowLayoutProps) {
               <InfoCircleIcon
                 color="accent.text-subdued"
                 onClick={() => openInNewTab(url)}
-                width="xs"
+                variant="small"
               />
             </HStack>
           </BasicTooltip>
diff --git a/src/app/components/stacks-transaction-item/increase-fee-button.tsx b/src/app/components/stacks-transaction-item/increase-fee-button.tsx
index ceb1a3dc41d..0d06f28f50c 100644
--- a/src/app/components/stacks-transaction-item/increase-fee-button.tsx
+++ b/src/app/components/stacks-transaction-item/increase-fee-button.tsx
@@ -31,7 +31,7 @@ export function IncreaseFeeButton(props: IncreaseFeeButtonProps) {
       zIndex={999}
     >
       <HStack gap="space.00">
-        <ChevronsRightIcon color="stacks" mr="3px" />
+        <ChevronsRightIcon color="stacks" mr="3px" variant="small" />
         <styled.span textStyle="label.03">Increase fee</styled.span>
       </HStack>
     </styled.button>
diff --git a/src/app/components/transaction/token-transfer-icon.tsx b/src/app/components/transaction/token-transfer-icon.tsx
index 80aba1289a5..3785f97c668 100644
--- a/src/app/components/transaction/token-transfer-icon.tsx
+++ b/src/app/components/transaction/token-transfer-icon.tsx
@@ -9,7 +9,7 @@ export function TokenTransferIcon(props: { tx: StacksTx }) {
   const currentAccountStxAddress = useCurrentAccountStxAddressState();
   const isSent = tx.sender_address === currentAccountStxAddress;
 
-  if (isSent) return <ArrowUpIcon width="xs" />;
+  if (isSent) return <ArrowUpIcon variant="small" />;
 
-  return <ArrowDownIcon width="xs" />;
+  return <ArrowDownIcon variant="small" />;
 }
diff --git a/src/app/components/transaction/transaction-icon.tsx b/src/app/components/transaction/transaction-icon.tsx
index aa7bb1e70d4..77a5e2bda4e 100644
--- a/src/app/components/transaction/transaction-icon.tsx
+++ b/src/app/components/transaction/transaction-icon.tsx
@@ -11,9 +11,9 @@ export function TransactionIcon(props: { tx: StacksTx }) {
 
   switch (tx.tx_type) {
     case 'coinbase':
-      return <PlusIcon width="xs" />;
+      return <PlusIcon variant="small" />;
     case 'smart_contract':
-      return <CodeIcon width="xs" />;
+      return <CodeIcon variant="small" />;
     case 'token_transfer':
       return <TokenTransferIcon tx={tx} />;
     case 'contract_call':
diff --git a/src/app/features/activity-list/components/transaction-list/stacks-transaction/ft-transfer-item.tsx b/src/app/features/activity-list/components/transaction-list/stacks-transaction/ft-transfer-item.tsx
index 5fcd925eb79..7a3a1e5151f 100644
--- a/src/app/features/activity-list/components/transaction-list/stacks-transaction/ft-transfer-item.tsx
+++ b/src/app/features/activity-list/components/transaction-list/stacks-transaction/ft-transfer-item.tsx
@@ -49,7 +49,7 @@ export function FtTransferItem({ ftTransfer, parentTx }: FtTransferItemProps) {
     assetMetadata.image_canonical_uri &&
     assetMetadata.name &&
     getImageCanonicalUri(assetMetadata.image_canonical_uri, assetMetadata.name);
-  const icon = isOriginator ? <ArrowUpIcon width="xs" /> : <ArrowDownIcon width="xs" />;
+  const icon = isOriginator ? <ArrowUpIcon variant="small" /> : <ArrowDownIcon variant="small" />;
   const title = `${assetMetadata.name || 'Token'} Transfer`;
   const value = `${isOriginator ? '-' : ''}${displayAmount.toFormat()}`;
   const transferIcon = ftImageCanonicalUri ? (
diff --git a/src/app/features/activity-list/components/transaction-list/stacks-transaction/stx-transfer-item.tsx b/src/app/features/activity-list/components/transaction-list/stacks-transaction/stx-transfer-item.tsx
index 393e42920fa..be853b65956 100644
--- a/src/app/features/activity-list/components/transaction-list/stacks-transaction/stx-transfer-item.tsx
+++ b/src/app/features/activity-list/components/transaction-list/stacks-transaction/stx-transfer-item.tsx
@@ -23,7 +23,7 @@ export function StxTransferItem({ stxTransfer, parentTx }: StxTransferItemProps)
   const isOriginator = stxTransfer.sender === currentAccount?.address;
 
   const caption = getTxCaption(parentTx.tx) ?? '';
-  const icon = isOriginator ? <ArrowUpIcon width="xs" /> : <ArrowDownIcon width="xs" />;
+  const icon = isOriginator ? <ArrowUpIcon variant="small" /> : <ArrowDownIcon variant="small" />;
   const title = 'Stacks Token Transfer';
   const value = `${isOriginator ? '-' : ''}${stacksValue({
     value: stxTransfer.amount,
diff --git a/src/app/features/collectibles/components/collectibes.layout.tsx b/src/app/features/collectibles/components/collectibes.layout.tsx
index 106ecedf1a5..0b76464de15 100644
--- a/src/app/features/collectibles/components/collectibes.layout.tsx
+++ b/src/app/features/collectibles/components/collectibes.layout.tsx
@@ -3,7 +3,7 @@ import { token } from 'leather-styles/tokens';
 
 import { LoadingSpinner } from '@app/components/loading-spinner';
 import { Spinner } from '@app/ui/components/spinner';
-import { ReloadIcon } from '@app/ui/icons/reload-icon';
+import { RefreshIcon } from '@app/ui/icons/refresh-icon';
 
 interface CollectiblesLayoutProps {
   title: string;
@@ -27,9 +27,9 @@ export function CollectiblesLayout({
         <HStack columnGap="space.02">
           <styled.span textStyle="label.01">{title}</styled.span>
           {isLoading ? (
-            <Spinner color={token('colors.accent.text-primary')} opacity={0.5} size="16px" />
+            <Spinner color={token('colors.accent.text-primary')} opacity={0.5} />
           ) : (
-            <ReloadIcon cursor="pointer" onClick={() => onRefresh()} />
+            <RefreshIcon cursor="pointer" onClick={() => onRefresh()} variant="small" />
           )}
         </HStack>
         {subHeader}
diff --git a/src/app/features/collectibles/components/image-unavailable.tsx b/src/app/features/collectibles/components/image-unavailable.tsx
index 1c4af16722c..309beed9a49 100644
--- a/src/app/features/collectibles/components/image-unavailable.tsx
+++ b/src/app/features/collectibles/components/image-unavailable.tsx
@@ -7,7 +7,7 @@ import { CollectiblePlaceholderLayout } from './_collectible-types/collectible-p
 export function ImageUnavailable() {
   return (
     <CollectiblePlaceholderLayout>
-      <EyeSlashIcon width="md" />
+      <EyeSlashIcon />
       <styled.span pt="space.02" px="space.04" textStyle="label.03">
         Image currently unavailable
       </styled.span>
diff --git a/src/app/features/feedback-button/feedback-button.tsx b/src/app/features/feedback-button/feedback-button.tsx
index eb90f25d5b2..a4a50951090 100644
--- a/src/app/features/feedback-button/feedback-button.tsx
+++ b/src/app/features/feedback-button/feedback-button.tsx
@@ -42,7 +42,7 @@ export function FeedbackButton() {
       onClick={openFeedbackDialog}
     >
       <Flex>
-        <MegaphoneIcon mr="space.01" mt="2px" />
+        <MegaphoneIcon mr="space.01" mt="2px" variant="small" />
         Give feedback
       </Flex>
     </Button>
diff --git a/src/app/features/ledger/components/ledger-screen-detail.tsx b/src/app/features/ledger/components/ledger-screen-detail.tsx
index 89d353c8642..9c9cac7e5f3 100644
--- a/src/app/features/ledger/components/ledger-screen-detail.tsx
+++ b/src/app/features/ledger/components/ledger-screen-detail.tsx
@@ -1,5 +1,4 @@
 import { Flex, styled } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
 
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 import { Caption } from '@app/ui/components/typography/caption';
@@ -21,10 +20,10 @@ export function LedgerScreenDetail(props: LedgerScreenDetailProps) {
             <Flex cursor="question" display="inline-flex">
               {title}
               <InfoCircleIcon
+                color="accent.text-subdued"
                 ml="space.01"
                 mt="space.01"
-                width="xs"
-                style={{ color: token('colors.accent.text-subdued') }}
+                variant="small"
               />
             </Flex>
           </BasicTooltip>
diff --git a/src/app/features/message-signer/hash-drawer.tsx b/src/app/features/message-signer/hash-drawer.tsx
index 6534674ae77..af2bfe91359 100644
--- a/src/app/features/message-signer/hash-drawer.tsx
+++ b/src/app/features/message-signer/hash-drawer.tsx
@@ -10,7 +10,7 @@ interface ShowHashButtonProps {
 }
 function ShowHashButton(props: ShowHashButtonProps) {
   const { expanded } = props;
-  return expanded ? <ChevronUpIcon /> : <ChevronDownIcon />;
+  return expanded ? <ChevronUpIcon variant="small" /> : <ChevronDownIcon variant="small" />;
 }
 
 interface HashDrawerProps {
diff --git a/src/app/features/psbt-signer/components/psbt-request-details-header.tsx b/src/app/features/psbt-signer/components/psbt-request-details-header.tsx
index b349638e794..f89ed659e7f 100644
--- a/src/app/features/psbt-signer/components/psbt-request-details-header.tsx
+++ b/src/app/features/psbt-signer/components/psbt-request-details-header.tsx
@@ -31,9 +31,9 @@ export function PsbtRequestDetailsHeader() {
         >
           <Box width="12px">
             {isPsbtMutable ? (
-              <UnlockIcon style={{ color: tokenLabelColor }} width="xs" />
+              <UnlockIcon style={{ color: tokenLabelColor }} variant="small" />
             ) : (
-              <LockIcon style={{ color: tokenLabelColor }} width="xs" />
+              <LockIcon style={{ color: tokenLabelColor }} variant="small" />
             )}
           </Box>
           <styled.span
diff --git a/src/app/pages/fund/components/fast-checkout-badge.tsx b/src/app/pages/fund/components/fast-checkout-badge.tsx
index 64a28804f2f..5d649bbcb29 100644
--- a/src/app/pages/fund/components/fast-checkout-badge.tsx
+++ b/src/app/pages/fund/components/fast-checkout-badge.tsx
@@ -1,5 +1,4 @@
 import { HStack, styled } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
 
 import { ZapIcon } from '@app/ui/icons/zap-icon';
 
@@ -15,7 +14,7 @@ export function FastCheckoutBadge() {
       paddingY="space.01"
       gap="space.01"
     >
-      <ZapIcon style={{ color: token('colors.success.label') }} width="xs" />
+      <ZapIcon color="success.label" variant="small" />
       <styled.span color="success.label" textStyle="caption.02">
         Fast checkout
       </styled.span>
diff --git a/src/app/pages/fund/components/zero-percent-fees-badge.tsx b/src/app/pages/fund/components/zero-percent-fees-badge.tsx
index a6d78aee9ff..6df4bb75f06 100644
--- a/src/app/pages/fund/components/zero-percent-fees-badge.tsx
+++ b/src/app/pages/fund/components/zero-percent-fees-badge.tsx
@@ -14,7 +14,7 @@ export function ZeroPercentFeesBadge() {
       paddingY="space.01"
       gap="space.01"
     >
-      <StarIcon color="warning.label" width="xs" />
+      <StarIcon color="warning.label" variant="small" />
       <styled.span color="warning.label" textStyle="caption.02">
         0 % Fees
       </styled.span>
diff --git a/src/app/pages/home/components/account-actions.tsx b/src/app/pages/home/components/account-actions.tsx
index b59973a1d4c..02ac19609f8 100644
--- a/src/app/pages/home/components/account-actions.tsx
+++ b/src/app/pages/home/components/account-actions.tsx
@@ -34,7 +34,7 @@ export function AccountActions(props: FlexProps) {
       <SendButton />
       <ActionButton
         data-testid={HomePageSelectors.ReceiveCryptoAssetBtn}
-        icon={<InboxIcon width="md" />}
+        icon={<InboxIcon />}
         label="Receive"
         onClick={() => navigate(receivePath, { state: { backgroundLocation: location } })}
       />
@@ -42,7 +42,7 @@ export function AccountActions(props: FlexProps) {
       {(!!stacksAccount || !!btcAccount) && (
         <ActionButton
           data-testid={HomePageSelectors.FundAccountBtn}
-          icon={<CreditCardIcon width="md" />}
+          icon={<CreditCardIcon />}
           label="Buy"
           onClick={() => navigate(RouteUrls.FundChooseCurrency)}
         />
@@ -51,7 +51,7 @@ export function AccountActions(props: FlexProps) {
         [ChainID.Mainnet]: (
           <ActionButton
             data-testid={HomePageSelectors.SwapBtn}
-            icon={<SwapIcon width="md" />}
+            icon={<SwapIcon />}
             label="Swap"
             onClick={() => navigate(RouteUrls.Swap)}
           />
diff --git a/src/app/pages/home/components/account-info-card.tsx b/src/app/pages/home/components/account-info-card.tsx
index 751044fdc6b..51af4414422 100644
--- a/src/app/pages/home/components/account-info-card.tsx
+++ b/src/app/pages/home/components/account-info-card.tsx
@@ -39,7 +39,7 @@ export function AccountInfoCard() {
             {name}
           </styled.p>
           <Box mt="space.01" ml="space.02">
-            <ChevronDownIcon />
+            <ChevronDownIcon variant="small" />
           </Box>
         </Flex>
       </Link>
diff --git a/src/app/pages/home/components/send-button.tsx b/src/app/pages/home/components/send-button.tsx
index d871a6c65da..76fc5aa68d0 100644
--- a/src/app/pages/home/components/send-button.tsx
+++ b/src/app/pages/home/components/send-button.tsx
@@ -29,7 +29,7 @@ function SendButtonSuspense() {
     <ActionButton
       data-testid={HomePageSelectors.SendCryptoAssetBtn}
       label="Send"
-      icon={<SendIcon width="md" />}
+      icon={<SendIcon />}
       onClick={() =>
         whenWallet({
           ledger: () =>
@@ -45,9 +45,7 @@ function SendButtonSuspense() {
   );
 }
 
-const SendButtonFallback = memo(() => (
-  <ActionButton label="Send" icon={<SendIcon width="md" />} disabled />
-));
+const SendButtonFallback = memo(() => <ActionButton label="Send" icon={<SendIcon />} disabled />);
 
 export function SendButton() {
   return (
diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx
index 0f2dadfc72e..75be88e61be 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx
@@ -34,7 +34,7 @@ export function RecipientDropdownItem({
     >
       <HStack gap="space.01">
         <styled.span textStyle="label.02">{labels[index]}</styled.span>
-        {isVisible ? <></> : <ChevronDownIcon />}
+        {isVisible ? <></> : <ChevronDownIcon variant="small" />}
       </HStack>
     </styled.button>
   );
diff --git a/src/app/pages/swap/components/select-asset-trigger-button.tsx b/src/app/pages/swap/components/select-asset-trigger-button.tsx
index 5a15462b376..c364a4aadf2 100644
--- a/src/app/pages/swap/components/select-asset-trigger-button.tsx
+++ b/src/app/pages/swap/components/select-asset-trigger-button.tsx
@@ -30,7 +30,7 @@ export function SelectAssetTriggerButton({
       <HStack>
         {icon && <styled.img src={icon} width="32px" height="32px" alt="Swap asset" />}
         <styled.span textStyle="label.01">{symbol}</styled.span>
-        <ChevronDownIcon />
+        <ChevronDownIcon variant="small" />
       </HStack>
     </Button>
   );
diff --git a/src/app/pages/swap/components/swap-details/swap-details.tsx b/src/app/pages/swap/components/swap-details/swap-details.tsx
index 4a8d4fd4d53..4314ddc3717 100644
--- a/src/app/pages/swap/components/swap-details/swap-details.tsx
+++ b/src/app/pages/swap/components/swap-details/swap-details.tsx
@@ -22,7 +22,7 @@ function RouteNames(props: { swapSubmissionData: SwapSubmissionData }) {
     return (
       <HStack gap="space.01" key={route.name}>
         <styled.span>{route.name}</styled.span>
-        {insertIcon && <ChevronUpIcon transform="rotate(90deg)" />}
+        {insertIcon && <ChevronUpIcon transform="rotate(90deg)" variant="small" />}
       </HStack>
     );
   });
diff --git a/src/app/pages/swap/components/swap-toggle-button.tsx b/src/app/pages/swap/components/swap-toggle-button.tsx
index ba9ca9beb5c..bd02266c8e4 100644
--- a/src/app/pages/swap/components/swap-toggle-button.tsx
+++ b/src/app/pages/swap/components/swap-toggle-button.tsx
@@ -44,7 +44,7 @@ export function SwapToggleButton() {
       onClick={onToggleSwapAssets}
       type="button"
     >
-      <SwapIcon transform="rotate(90deg)" />
+      <SwapIcon transform="rotate(90deg)" variant="small" />
     </styled.button>
   );
 }
diff --git a/src/app/ui/components/button/button.stories.tsx b/src/app/ui/components/button/button.stories.tsx
index aa917186955..db8f59fecbb 100644
--- a/src/app/ui/components/button/button.stories.tsx
+++ b/src/app/ui/components/button/button.stories.tsx
@@ -93,7 +93,7 @@ export const WithToken: Story = {
       <HStack>
         <BtcIcon />
         <styled.span textStyle="label.01">Button</styled.span>
-        <ChevronDownIcon />
+        <ChevronDownIcon variant="small" />
       </HStack>
     ),
     trigger: true,
diff --git a/src/app/ui/components/dowpdown-menu/dropdown-menu.stories.tsx b/src/app/ui/components/dowpdown-menu/dropdown-menu.stories.tsx
index 1422e65adb8..dc4a27f9ce7 100644
--- a/src/app/ui/components/dowpdown-menu/dropdown-menu.stories.tsx
+++ b/src/app/ui/components/dowpdown-menu/dropdown-menu.stories.tsx
@@ -24,7 +24,7 @@ export const DropdownMenu: Story = {
         <styled.button>
           <HStack gap="space.02" width="100%">
             <styled.span textStyle="label.02">Options</styled.span>
-            <ChevronDownIcon />
+            <ChevronDownIcon variant="small" />
           </HStack>
         </styled.button>
       </Component.Trigger>
diff --git a/src/app/ui/components/item/item.layout.tsx b/src/app/ui/components/item/item.layout.tsx
index 4d0cbcde9e1..236e96144c7 100644
--- a/src/app/ui/components/item/item.layout.tsx
+++ b/src/app/ui/components/item/item.layout.tsx
@@ -45,7 +45,7 @@ export function ItemLayout({
                 {titleLeft}
               </styled.span>
             )}
-            {isSelected && <CheckmarkIcon />}
+            {isSelected && <CheckmarkIcon variant="small" />}
           </HStack>
           {isValidElement(captionLeft) ? (
             captionLeft
@@ -72,7 +72,9 @@ export function ItemLayout({
               </styled.span>
             )}
           </Stack>
-          {showChevron && <ChevronUpIcon color={itemChevronStyles} transform="rotate(90deg)" />}
+          {showChevron && (
+            <ChevronUpIcon color={itemChevronStyles} transform="rotate(90deg)" variant="small" />
+          )}
         </HStack>
       </Flex>
     </Flag>
diff --git a/src/app/ui/components/select/select.stories.tsx b/src/app/ui/components/select/select.stories.tsx
index 7fd9f294228..ce31ac46c23 100644
--- a/src/app/ui/components/select/select.stories.tsx
+++ b/src/app/ui/components/select/select.stories.tsx
@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { HStack, styled } from 'leather-styles/jsx';
 
-import { CheckmarkIcon } from '../../icons/checkmark-icon';
-import { ChevronDownIcon } from '../../icons/chevron-down-icon';
-import { PlaceholderIcon } from '../../icons/placeholder-icon';
+import { CheckmarkIcon } from '@app/ui/icons/checkmark-icon';
+import { ChevronDownIcon } from '@app/ui/icons/chevron-down-icon';
+import { PlaceholderIcon } from '@app/ui/icons/placeholder-icon';
+
 import { Select as Component, SelectItem } from './select';
 import { SelectItemLayout } from './select-item.layout';
 
@@ -24,7 +25,7 @@ export const Select: Story = {
       <Component.Trigger>
         <Component.Value placeholder="Options" />
         <Component.Icon>
-          <ChevronDownIcon />
+          <ChevronDownIcon variant="small" />
         </Component.Icon>
       </Component.Trigger>
       <Component.Portal>
@@ -42,7 +43,7 @@ export const Select: Story = {
                           <styled.span textStyle="label.02">{item.label}</styled.span>
                         </Component.ItemText>
                         <Component.ItemIndicator>
-                          <CheckmarkIcon />
+                          <CheckmarkIcon variant="small" />
                         </Component.ItemIndicator>
                       </HStack>
                     }
diff --git a/src/app/ui/components/spinner.tsx b/src/app/ui/components/spinner.tsx
index 800268302a8..6098c8bcd7d 100644
--- a/src/app/ui/components/spinner.tsx
+++ b/src/app/ui/components/spinner.tsx
@@ -9,7 +9,7 @@ interface SpinnerProps extends SquareProps {
 
 export function Spinner({
   emptyColor = 'transparent',
-  size = '1.5rem',
+  size = '16px',
   label = 'Loading...',
   thickness = '2px',
   speed = '0.85s',
diff --git a/src/app/ui/components/tooltip/tooltip.stories.tsx b/src/app/ui/components/tooltip/tooltip.stories.tsx
index 3ca05dc106d..bd41b1edc44 100644
--- a/src/app/ui/components/tooltip/tooltip.stories.tsx
+++ b/src/app/ui/components/tooltip/tooltip.stories.tsx
@@ -24,7 +24,7 @@ export const Tooltip: Story = {
     <RadixTooltip.Provider delayDuration={300}>
       <Component {...args}>
         <Box>
-          <InfoCircleIcon color="accent.text-subdued" width="xs" />
+          <InfoCircleIcon color="accent.text-subdued" variant="small" />
         </Box>
       </Component>
     </RadixTooltip.Provider>
diff --git a/src/app/ui/icons/docs/icons.mdx b/src/app/ui/icons/docs/icons.mdx
index ea705b58f15..fdc4e40f3f9 100644
--- a/src/app/ui/icons/docs/icons.mdx
+++ b/src/app/ui/icons/docs/icons.mdx
@@ -20,7 +20,7 @@ import { iconsList } from './icons-list';
 <div className="spacer" />
 
 <div>
-  <h3 style={{ marginTop: 32, marginBottom: 24 }}>Small 16x16</h3>
+  <h3 style={{ marginTop: 32, marginBottom: 24 }}>Default 24x24</h3>
   <IconGallery>
     {iconsList.map(item => {
       const IconComponent = Icon[item];
@@ -36,13 +36,13 @@ import { iconsList } from './icons-list';
 <div className="spacer" />
 
 <div>
-  <h3 style={{ marginTop: 32, marginBottom: 24 }}>Medium 24x24</h3>
+  <h3 style={{ marginTop: 32, marginBottom: 24 }}>Small 16x16</h3>
   <IconGallery>
     {iconsList.map(item => {
       const IconComponent = Icon[item];
       return (
         <IconItem key={item} name={item}>
-          <IconComponent width="md" />
+          <IconComponent variant="small" />
         </IconItem>
       );
     })}