refactor: existing icons to use variants, closes #4950

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)"
             />
           ) : (

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>

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 {

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>
   );

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>

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>

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" />;
 }

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':

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 ? (

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,

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}

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>

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>

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>

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 {

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

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>

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>

src/app/pages/home/components/account-actions.tsx

@@ -34,15 +34,15 @@ 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 } })}
       />
 
       {(!!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)}
           />

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>

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 (

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>
   );

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>
   );

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>
     );
   });

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>
   );
 }

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,

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>

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>

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>
                     }

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',

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>