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..46e635494f6 100644
--- a/src/app/components/stacks-transaction-item/increase-fee-button.tsx
+++ b/src/app/components/stacks-transaction-item/increase-fee-button.tsx
@@ -30,8 +30,8 @@ export function IncreaseFeeButton(props: IncreaseFeeButtonProps) {
       type="button"
       zIndex={999}
     >
-      <HStack gap="space.00">
-        <ChevronsRightIcon color="stacks" mr="3px" />
+      <HStack gap="space.01">
+        <ChevronsRightIcon color="stacks" 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..5ca57d6005a 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 = 'sm',
   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/arrow-down-icon.tsx b/src/app/ui/icons/arrow-down-icon.tsx
index 16454af1f0b..465190c2763 100644
--- a/src/app/ui/icons/arrow-down-icon.tsx
+++ b/src/app/ui/icons/arrow-down-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function ArrowDownIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M12 9.60939L8.47142 13.138C8.21107 13.3983 7.78896 13.3983 7.52861 13.138L4 9.60939M8.00001 12.7761L8.00001 2.77606"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function ArrowDownIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/arrow-left-icon.tsx b/src/app/ui/icons/arrow-left-icon.tsx
index 22e65c9f8a5..35371b1713b 100644
--- a/src/app/ui/icons/arrow-left-icon.tsx
+++ b/src/app/ui/icons/arrow-left-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function ArrowLeftIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M6.44521 12.2214L2.74995 8.52618C2.4896 8.26583 2.4896 7.84373 2.74995 7.58338L6.44521 3.8881M3.11188 8.05478H13.4452"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function ArrowLeftIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/arrow-up-icon.tsx b/src/app/ui/icons/arrow-up-icon.tsx
index 1b579bccfc5..87aedf9271b 100644
--- a/src/app/ui/icons/arrow-up-icon.tsx
+++ b/src/app/ui/icons/arrow-up-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function ArrowUpIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M3.8335 6.50014L7.52875 2.80488C7.7891 2.54453 8.21121 2.54453 8.47156 2.80488L12.1668 6.50014M8.00015 3.16681V13.5001"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function ArrowUpIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/bitcoin-icon.tsx b/src/app/ui/icons/bitcoin-icon.tsx
index 095d8aaf5bc..7a0e256c669 100644
--- a/src/app/ui/icons/bitcoin-icon.tsx
+++ b/src/app/ui/icons/bitcoin-icon.tsx
@@ -1,6 +1,16 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function BitcoinIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M11.9791 6.92221C12.1456 5.76637 11.2984 5.14502 10.1399 4.73051L10.5157 3.16478L9.59822 2.92726L9.23238 4.45173C8.99118 4.3893 8.74345 4.3304 8.49729 4.27203L8.86575 2.73752L7.94878 2.5L7.57274 4.06518C7.3731 4.01795 7.17711 3.97127 6.98687 3.92213L6.98791 3.91725L5.72261 3.58906L5.47854 4.607C5.47854 4.607 6.15928 4.76906 6.1449 4.7791C6.5165 4.87546 6.58365 5.1309 6.57242 5.3334L6.14438 7.11711C6.16999 7.12389 6.20318 7.13367 6.23976 7.14887C6.20919 7.141 6.17652 7.13231 6.14281 7.12389L5.54282 9.6226C5.49735 9.73987 5.38212 9.91576 5.12237 9.84899C5.13151 9.86283 4.45548 9.67607 4.45548 9.67607L4 10.767L5.19396 11.0762C5.41608 11.134 5.63376 11.1946 5.84804 11.2516L5.46835 12.8352L6.38479 13.0727L6.76083 11.5059C7.01117 11.5765 7.2542 11.6417 7.492 11.703L7.11727 13.2625L8.03475 13.5L8.41445 11.9193C9.97896 12.2269 11.1554 12.1028 11.6506 10.6329C12.0497 9.44941 11.6308 8.76672 10.8076 8.32154C11.4071 8.17794 11.8586 7.76832 11.9791 6.92221ZM9.8828 9.97576C9.59927 11.1593 7.68093 10.5195 7.05899 10.359L7.56281 8.261C8.18475 8.42224 10.1791 8.74147 9.8828 9.97576ZM10.1666 6.9051C9.90788 7.98168 8.31123 7.4347 7.79329 7.30061L8.25008 5.39774C8.76802 5.53184 10.436 5.78211 10.1666 6.9051Z"
+          fill="currentColor"
+        />
+      </IconSmall>
+    );
 
-export function BitcoinIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/checkmark-circle-icon.tsx b/src/app/ui/icons/checkmark-circle-icon.tsx
index e3691961df3..330d12bbf19 100644
--- a/src/app/ui/icons/checkmark-circle-icon.tsx
+++ b/src/app/ui/icons/checkmark-circle-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function CheckmarkCircleIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M10.0002 6.33325L7.00016 9.99992L5.66683 8.66659M14.1668 7.99992C14.1668 11.4057 11.4059 14.1666 8.00016 14.1666C4.59441 14.1666 1.8335 11.4057 1.8335 7.99992C1.8335 4.59416 4.59441 1.83325 8.00016 1.83325C11.4059 1.83325 14.1668 4.59416 14.1668 7.99992Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function CheckmarkCircleIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/checkmark-icon.tsx b/src/app/ui/icons/checkmark-icon.tsx
index 3b295eff251..6f0b82b9abd 100644
--- a/src/app/ui/icons/checkmark-icon.tsx
+++ b/src/app/ui/icons/checkmark-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function CheckmarkIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M1.8335 10.0625L6.00016 13.5L14.1668 2.5"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function CheckmarkIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/chevron-down-icon.tsx b/src/app/ui/icons/chevron-down-icon.tsx
index 0c510a5e561..b0342be2da0 100644
--- a/src/app/ui/icons/chevron-down-icon.tsx
+++ b/src/app/ui/icons/chevron-down-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function ChevronDownIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M12.0001 6.13822L8.47148 9.66678C8.21113 9.92713 7.78902 9.92713 7.52867 9.66678L4 6.13818"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function ChevronDownIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/chevron-up-icon.tsx b/src/app/ui/icons/chevron-up-icon.tsx
index c6e71ee8fee..25179c0fa3c 100644
--- a/src/app/ui/icons/chevron-up-icon.tsx
+++ b/src/app/ui/icons/chevron-up-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function ChevronUpIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M12.0001 9.86202L8.47148 6.33347C8.21113 6.07312 7.78902 6.07312 7.52867 6.33347L4 9.86206"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function ChevronUpIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/chevrons-right-icon.tsx b/src/app/ui/icons/chevrons-right-icon.tsx
index 25c803db0a7..fb3419200e6 100644
--- a/src/app/ui/icons/chevrons-right-icon.tsx
+++ b/src/app/ui/icons/chevrons-right-icon.tsx
@@ -1,6 +1,26 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function ChevronsRightIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M9 5L11.8842 7.73484C12.0386 7.88128 12.0386 8.11872 11.8842 8.26516L9 11"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M4 5L6.88417 7.73484C7.03861 7.88128 7.03861 8.11872 6.88417 8.26516L4 11"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function ChevronsRightIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/circle-icon.tsx b/src/app/ui/icons/circle-icon.tsx
index 7dd37a92a96..704adddab4d 100644
--- a/src/app/ui/icons/circle-icon.tsx
+++ b/src/app/ui/icons/circle-icon.tsx
@@ -1,6 +1,20 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function CircleIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <circle
+          cx="8.00016"
+          cy="7.99992"
+          r="6.16667"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="square"
+        />
+      </IconSmall>
+    );
 
-export function CircleIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2" />
diff --git a/src/app/ui/icons/close-icon.tsx b/src/app/ui/icons/close-icon.tsx
index eca53677613..4b23f9407f9 100644
--- a/src/app/ui/icons/close-icon.tsx
+++ b/src/app/ui/icons/close-icon.tsx
@@ -1,6 +1,18 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function CloseIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M3.1665 3.16675L12.8332 12.8334M12.8332 3.16675L3.1665 12.8334"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+        />
+      </IconSmall>
+    );
 
-export function CloseIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path d="M5 5L19 19M19 5L5 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
diff --git a/src/app/ui/icons/cloud-off-icon.tsx b/src/app/ui/icons/cloud-off-icon.tsx
index f83e7f5feb1..5d162933da9 100644
--- a/src/app/ui/icons/cloud-off-icon.tsx
+++ b/src/app/ui/icons/cloud-off-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function CloudOffIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M6.34998 3.52169C6.853 3.29365 7.41159 3.16667 7.99984 3.16667C10.209 3.16667 11.9998 4.95753 11.9998 7.16667C11.9998 7.22295 11.9987 7.27896 11.9964 7.33468C12.0252 7.33379 12.0541 7.33333 12.0832 7.33333C13.602 7.33333 14.8332 8.56455 14.8332 10.0833C14.8332 10.6307 14.6732 11.1408 14.3975 11.5693M1.99984 2L13.9998 14M4.21748 5.86187C2.49655 6.08226 1.1665 7.55247 1.1665 9.33333C1.1665 11.2663 2.73351 12.8333 4.6665 12.8333H12.0832C12.3136 12.8333 12.5375 12.805 12.7514 12.7516L4.78542 4.78558C4.54463 5.11011 4.35182 5.47237 4.21748 5.86187Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function CloudOffIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/code-icon.tsx b/src/app/ui/icons/code-icon.tsx
index ff7dd8b4ff6..88367fce155 100644
--- a/src/app/ui/icons/code-icon.tsx
+++ b/src/app/ui/icons/code-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function CodeIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M6.49984 13.5L9.49984 2.5M12.1665 5.16667L14.1881 7.31465C14.5505 7.6997 14.5505 8.30033 14.1881 8.68538L12.1665 10.8333M3.83317 10.8333L1.81155 8.68538C1.44915 8.30033 1.44915 7.6997 1.81155 7.31465L3.83317 5.16667"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function CodeIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/copy-icon.tsx b/src/app/ui/icons/copy-icon.tsx
index d3c8690f4c2..0b416dfb90f 100644
--- a/src/app/ui/icons/copy-icon.tsx
+++ b/src/app/ui/icons/copy-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function CopyIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M5.8335 5.83325V2.16659C5.8335 1.98249 5.98273 1.83325 6.16683 1.83325H13.8335C14.0176 1.83325 14.1668 1.98249 14.1668 2.16659V9.83325C14.1668 10.0173 14.0176 10.1666 13.8335 10.1666H10.1668M9.8335 5.83325H2.16683C1.98273 5.83325 1.8335 5.98249 1.8335 6.16659V13.8333C1.8335 14.0173 1.98273 14.1666 2.16683 14.1666H9.8335C10.0176 14.1666 10.1668 14.0173 10.1668 13.8333V6.16659C10.1668 5.98249 10.0176 5.83325 9.8335 5.83325Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function CopyIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/credit-card-icon.tsx b/src/app/ui/icons/credit-card-icon.tsx
index 59305cbbf25..aab9b722d4a 100644
--- a/src/app/ui/icons/credit-card-icon.tsx
+++ b/src/app/ui/icons/credit-card-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function CreditCardIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M1.8335 6.50011V12.1642C1.8335 12.5324 2.13197 12.8308 2.50016 12.8308L13.4976 12.8308C13.8657 12.8308 14.1642 12.5324 14.1642 12.1642V6.50011M1.8335 6.50011V3.83537C1.8335 3.46718 2.13197 3.1687 2.50016 3.1687H13.4969C13.8643 3.1687 14.1625 3.466 14.1631 3.83343C14.1646 4.72232 14.1642 5.61122 14.1642 6.50011M1.8335 6.50011H14.1642M4.50016 8.83341H6.50016"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function CreditCardIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/docs/icons.mdx b/src/app/ui/icons/docs/icons.mdx
index ea705b58f15..0cf54de7f4b 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" width="16px" />
         </IconItem>
       );
     })}
diff --git a/src/app/ui/icons/download-icon.tsx b/src/app/ui/icons/download-icon.tsx
index 6d71dcece1b..261dc111813 100644
--- a/src/app/ui/icons/download-icon.tsx
+++ b/src/app/ui/icons/download-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function DownloadIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M13.5 9.83333V12.8333C13.5 13.2015 13.2015 13.5 12.8333 13.5H3.16667C2.79848 13.5 2.5 13.2015 2.5 12.8333V9.83333M7.99999 10V2.5M7.99999 10L5.66667 7.66667M7.99999 10L10.3333 7.66667"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function DownloadIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/edit-icon.tsx b/src/app/ui/icons/edit-icon.tsx
index 8c0ac5cf34a..0fc0e8c262c 100644
--- a/src/app/ui/icons/edit-icon.tsx
+++ b/src/app/ui/icons/edit-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function EditIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M8.8335 4.16673L10.8621 2.13813C11.1224 1.87778 11.5446 1.87778 11.8049 2.13813L13.8621 4.19532C14.1224 4.45567 14.1224 4.87778 13.8621 5.13813L11.8335 7.16673M8.8335 4.16673L2.02876 10.9715C1.90373 11.0965 1.8335 11.2661 1.8335 11.4429V14.1667H4.55735C4.73416 14.1667 4.90373 14.0965 5.02876 13.9715L11.8335 7.16673M8.8335 4.16673L11.8335 7.16673"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function EditIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/error-circle-icon.tsx b/src/app/ui/icons/error-circle-icon.tsx
index 3b149f33a89..adf2afe9be7 100644
--- a/src/app/ui/icons/error-circle-icon.tsx
+++ b/src/app/ui/icons/error-circle-icon.tsx
@@ -1,6 +1,20 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function ErrorCircleIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <rect x="7" y="9.83325" width="2" height="2" rx="1" fill="currentColor" />
+        <path
+          d="M7.9978 5.08333V8.33333M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function ErrorCircleIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <rect x="10.75" y="14.75" width="2.5" height="2.5" rx="1.25" fill="currentColor" />
diff --git a/src/app/ui/icons/error-icon.tsx b/src/app/ui/icons/error-icon.tsx
index fce54b76709..b541d67fe40 100644
--- a/src/app/ui/icons/error-icon.tsx
+++ b/src/app/ui/icons/error-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function ErrorIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M8.00004 6.50001V8.83335M7.42478 2.14882L1.75453 11.8297C1.49422 12.2742 1.81473 12.8333 2.32978 12.8333H13.6703C14.1853 12.8333 14.5059 12.2742 14.2455 11.8297L8.57529 2.14882C8.31779 1.70918 7.68229 1.70918 7.42478 2.14882Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+        />
+        <ellipse cx="8.00016" cy="10.4999" rx="0.666667" ry="0.666667" fill="currentColor" />
+      </IconSmall>
+    );
 
-export function ErrorIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/exit-icon.tsx b/src/app/ui/icons/exit-icon.tsx
index 35c443baa04..9a0cd78af27 100644
--- a/src/app/ui/icons/exit-icon.tsx
+++ b/src/app/ui/icons/exit-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function ExitIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M7.49984 13.3332H3.33317C2.96498 13.3332 2.6665 13.0347 2.6665 12.6665L2.6665 3.33317C2.6665 2.96498 2.96498 2.6665 3.33317 2.6665L7.49984 2.6665M13.3332 7.99983L5.83317 7.99983M13.3332 7.99983L10.3332 10.9998M13.3332 7.99983L10.3332 4.99984"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function ExitIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/expand-icon.tsx b/src/app/ui/icons/expand-icon.tsx
index 8e034d4af0b..eac407f0560 100644
--- a/src/app/ui/icons/expand-icon.tsx
+++ b/src/app/ui/icons/expand-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function ExpandIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M4 8.66667V11.3333C4 11.7015 4.29848 12 4.66667 12H7.33333M8.66667 4H11.3333C11.7015 4 12 4.29848 12 4.66667V7.33333"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function ExpandIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/external-link-icon.tsx b/src/app/ui/icons/external-link-icon.tsx
index 1a792b61c1f..2186a7ab6f6 100644
--- a/src/app/ui/icons/external-link-icon.tsx
+++ b/src/app/ui/icons/external-link-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function ExternalLinkIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M12.1667 9.33333V12.4333C12.1667 12.8067 12.1667 12.9934 12.094 13.136C12.0301 13.2614 11.9281 13.3634 11.8027 13.4273C11.6601 13.5 11.4734 13.5 11.1 13.5H3.56667C3.1933 13.5 3.00661 13.5 2.86401 13.4273C2.73856 13.3634 2.63658 13.2614 2.57266 13.136C2.5 12.9934 2.5 12.8067 2.5 12.4333V4.9C2.5 4.52663 2.5 4.33995 2.57266 4.19734C2.63658 4.0719 2.73856 3.96991 2.86401 3.906C3.00661 3.83333 3.1933 3.83333 3.56667 3.83333H6.16667M9.16667 2.5H13.5M13.5 2.5V6.83333M13.5 2.5L7.33333 8.66667"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function ExternalLinkIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/eye-icon.tsx b/src/app/ui/icons/eye-icon.tsx
index 98d77416f13..824c80ac886 100644
--- a/src/app/ui/icons/eye-icon.tsx
+++ b/src/app/ui/icons/eye-icon.tsx
@@ -1,6 +1,16 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function EyeIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M1.4876 7.70132L0.825953 7.34816H0.825953L1.4876 7.70132ZM14.5127 7.70139L15.1744 7.34823V7.34823L14.5127 7.70139ZM1.4876 8.29823L0.825953 8.65139H0.825953L1.4876 8.29823ZM14.5127 8.29831L15.1744 8.65147V8.65147L14.5127 8.29831ZM2.14925 8.05448C3.66308 5.21831 5.88695 3.91649 8.00015 3.9165C10.1134 3.91652 12.3372 5.21838 13.8511 8.05455L15.1744 7.34823C13.4608 4.13793 10.7858 2.41652 8.00016 2.4165C5.21449 2.41648 2.53948 4.13786 0.825953 7.34816L2.14925 8.05448ZM0.825953 8.65139C2.53948 11.8617 5.21449 13.5831 8.00015 13.5831C10.7858 13.5831 13.4608 11.8618 15.1744 8.65147L13.8511 7.94515C12.3372 10.7813 10.1134 12.0831 8.00016 12.0831C5.88695 12.0831 3.66308 10.7812 2.14925 7.94507L0.825953 8.65139ZM0.825953 7.34816C0.609448 7.75378 0.609448 8.24577 0.825953 8.65139L2.14925 7.94507C2.15986 7.96496 2.16357 7.98381 2.16357 7.99977C2.16357 8.01574 2.15986 8.03459 2.14925 8.05448L0.825953 7.34816ZM13.8511 8.05455C13.8405 8.03466 13.8367 8.01581 13.8367 7.99985C13.8367 7.98389 13.8405 7.96503 13.8511 7.94515L15.1744 8.65147C15.3909 8.24584 15.3909 7.75385 15.1744 7.34823L13.8511 8.05455ZM9.41683 7.99984C9.41683 8.78224 8.78256 9.4165 8.00016 9.4165V10.9165C9.61099 10.9165 10.9168 9.61067 10.9168 7.99984H9.41683ZM8.00016 9.4165C7.21776 9.4165 6.58349 8.78224 6.58349 7.99984H5.08349C5.08349 9.61067 6.38933 10.9165 8.00016 10.9165V9.4165ZM6.58349 7.99984C6.58349 7.21743 7.21776 6.58317 8.00016 6.58317V5.08317C6.38933 5.08317 5.08349 6.38901 5.08349 7.99984H6.58349ZM8.00016 6.58317C8.78256 6.58317 9.41683 7.21743 9.41683 7.99984H10.9168C10.9168 6.38901 9.61099 5.08317 8.00016 5.08317V6.58317Z"
+          fill="currentColor"
+        />
+      </IconSmall>
+    );
 
-export function EyeIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/eye-slash-icon.tsx b/src/app/ui/icons/eye-slash-icon.tsx
index 9d835871ebe..766e451343c 100644
--- a/src/app/ui/icons/eye-slash-icon.tsx
+++ b/src/app/ui/icons/eye-slash-icon.tsx
@@ -1,6 +1,16 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function EyeSlashIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M6.03842 2.70791C5.64178 2.8273 5.41702 3.24561 5.5364 3.64225C5.65579 4.03889 6.0741 4.26365 6.47074 4.14426L6.03842 2.70791ZM14.5138 7.70372L13.8521 8.05676L13.8521 8.05676L14.5138 7.70372ZM12.5734 9.81279C12.2998 10.1238 12.3302 10.5977 12.6413 10.8713C12.9523 11.1448 13.4262 11.1144 13.6998 10.8034L12.5734 9.81279ZM14.5141 8.29605L13.8524 7.94305V7.94305L14.5141 8.29605ZM2.36387 1.30317C2.07097 1.01027 1.5961 1.01027 1.30321 1.30317C1.01031 1.59606 1.01031 2.07093 1.30321 2.36383L2.36387 1.30317ZM1.48626 7.70425L0.824522 7.35125L0.824522 7.35125L1.48626 7.70425ZM11.647 11.647L12.1774 11.1167L11.647 11.647ZM13.6365 14.6972C13.9294 14.9901 14.4043 14.9901 14.6972 14.6972C14.9901 14.4043 14.9901 13.9294 14.6972 13.6365L13.6365 14.6972ZM1.48694 8.29724L0.825253 8.65032H0.825253L1.48694 8.29724ZM6.99847 6.99843C7.29136 6.70554 7.29136 6.23066 6.99847 5.93777C6.70558 5.64488 6.2307 5.64488 5.93781 5.93777L6.99847 6.99843ZM10.0626 10.0626C10.3555 9.76967 10.3555 9.29479 10.0626 9.0019C9.76971 8.70901 9.29483 8.70901 9.00194 9.0019L10.0626 10.0626ZM6.47074 4.14426C9.02797 3.37457 11.98 4.54773 13.8521 8.05676L15.1755 7.35068C13.0488 3.36448 9.43407 1.68587 6.03842 2.70791L6.47074 4.14426ZM13.6998 10.8034C14.2447 10.1837 14.7408 9.46459 15.1759 8.64906L13.8524 7.94305C13.4678 8.66397 13.0364 9.28622 12.5734 9.81279L13.6998 10.8034ZM13.8521 8.05676C13.8335 8.02178 13.833 7.97946 13.8524 7.94305L15.1759 8.64906C15.3926 8.24277 15.3915 7.75553 15.1755 7.35068L13.8521 8.05676ZM1.30321 2.36383L3.82301 4.88363L4.88367 3.82297L2.36387 1.30317L1.30321 2.36383ZM2.14799 8.05725C2.88809 6.66987 3.80086 5.64887 4.78062 4.96968L3.92606 3.73691C2.72511 4.56942 1.66143 5.78239 0.824522 7.35125L2.14799 8.05725ZM3.82301 4.88363L11.1167 12.1773L12.1774 11.1167L4.88367 3.82297L3.82301 4.88363ZM11.1167 12.1773L13.6365 14.6972L14.6972 13.6365L12.1774 11.1167L11.1167 12.1773ZM0.825253 8.65032C2.1195 11.0758 3.95905 12.6524 5.99639 13.2795C8.04114 13.909 10.2089 13.5565 12.0743 12.2634L11.2198 11.0306C9.713 12.0751 8.02022 12.3331 6.4377 11.8459C4.84776 11.3565 3.29334 10.0894 2.14863 7.94416L0.825253 8.65032ZM0.824522 7.35125C0.607309 7.75843 0.609698 8.24636 0.825253 8.65032L2.14863 7.94416C2.16683 7.97826 2.16789 8.01995 2.14799 8.05725L0.824522 7.35125ZM8.0002 9.41683C7.2178 9.41683 6.58354 8.78257 6.58354 8.00016H5.08354C5.08354 9.61099 6.38937 10.9168 8.0002 10.9168V9.41683ZM6.58354 8.00016C6.58354 7.60876 6.74128 7.25562 6.99847 6.99843L5.93781 5.93777C5.41082 6.46476 5.08354 7.19496 5.08354 8.00016H6.58354ZM9.00194 9.0019C8.74475 9.25909 8.39161 9.41683 8.0002 9.41683V10.9168C8.80541 10.9168 9.53561 10.5896 10.0626 10.0626L9.00194 9.0019Z"
+          fill="currentColor"
+        />
+      </IconSmall>
+    );
 
-export function EyeSlashIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/function-icon.tsx b/src/app/ui/icons/function-icon.tsx
index dd1887697dd..2e926669b75 100644
--- a/src/app/ui/icons/function-icon.tsx
+++ b/src/app/ui/icons/function-icon.tsx
@@ -1,6 +1,16 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function FunctionIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M10.6354 2.49637C9.83016 2.4218 9.12006 3.02583 9.04685 3.85359L8.86384 6.00872H10.9283V7.50017H8.73206L8.40996 11.281C8.37719 11.6711 8.26908 12.0507 8.09186 12.3982C7.91463 12.7456 7.67177 13.0539 7.37723 13.3054C7.08269 13.557 6.74227 13.7467 6.37552 13.8639C6.00877 13.981 5.62291 14.0232 5.24012 13.988C4.78605 13.9487 4.3472 13.8023 3.95836 13.5602C3.56953 13.3182 3.2414 12.9872 3 12.5935L4.0981 11.4749C4.27379 12.0267 4.75695 12.4518 5.36457 12.504C6.16984 12.5785 6.87994 11.9745 6.95315 11.1467L7.26794 7.50017H5.07174V6.00872H7.39239L7.59004 3.71935C7.72914 2.07877 9.14934 0.863238 10.7599 1.01238C11.7189 1.09441 12.5242 1.63879 13 2.40688L11.9019 3.52547C11.7262 2.97363 11.243 2.54857 10.6354 2.49637Z"
+          fill="currentColor"
+        />
+      </IconSmall>
+    );
 
-export function FunctionIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/hamburger-icon.tsx b/src/app/ui/icons/hamburger-icon.tsx
index f90c6ee9e0c..91cd88dba34 100644
--- a/src/app/ui/icons/hamburger-icon.tsx
+++ b/src/app/ui/icons/hamburger-icon.tsx
@@ -1,6 +1,18 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function HamburgerIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M1.8335 4.8335H14.1668M1.8335 11.1668H14.1668"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+        />
+      </IconSmall>
+    );
 
-export function HamburgerIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/headset-icon.tsx b/src/app/ui/icons/headset-icon.tsx
index 9b4c4b07c7d..e21e4b5b7ef 100644
--- a/src/app/ui/icons/headset-icon.tsx
+++ b/src/app/ui/icons/headset-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function HeadsetIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M2.6665 9.33317V7.99984C2.6665 5.05432 5.05432 2.6665 7.99984 2.6665C10.9454 2.6665 13.3332 5.05432 13.3332 7.99984V9.33317M2.6665 9.33317V12.6665C2.6665 13.0347 2.96498 13.3332 3.33317 13.3332H4.6665C5.03469 13.3332 5.33317 13.0347 5.33317 12.6665V9.99984C5.33317 9.63165 5.03469 9.33317 4.6665 9.33317H2.6665ZM13.3332 9.33317V12.6665C13.3332 13.0347 13.0347 13.3332 12.6665 13.3332H11.3332C10.965 13.3332 10.6665 13.0347 10.6665 12.6665V9.99984C10.6665 9.63165 10.965 9.33317 11.3332 9.33317H13.3332Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="square"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function HeadsetIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/icon/icon.stories.tsx b/src/app/ui/icons/icon/icon.stories.tsx
index dcd61b924bc..c217886ce0a 100644
--- a/src/app/ui/icons/icon/icon.stories.tsx
+++ b/src/app/ui/icons/icon/icon.stories.tsx
@@ -13,7 +13,7 @@ type Story = StoryObj<typeof Icon>;
 
 export const ExampleIcon: Story = {
   parameters: {
-    controls: { include: ['width'] },
+    controls: { include: ['variant'] },
   },
-  args: { width: 'md' },
+  args: { width: 'default' },
 };
diff --git a/src/app/ui/icons/icon/icon.tsx b/src/app/ui/icons/icon/icon.tsx
index b69925c2a6e..71689d92890 100644
--- a/src/app/ui/icons/icon/icon.tsx
+++ b/src/app/ui/icons/icon/icon.tsx
@@ -1,24 +1,22 @@
 import { styled } from 'leather-styles/jsx';
 import type { HTMLStyledProps } from 'leather-styles/types';
 
-export type IconProps = HTMLStyledProps<'svg'>;
+type IconVariant = 'default' | 'small';
 
-export function Icon({
-  children,
-  height = 'auto',
-  opacity = '1',
-  width = 'sm',
-  ...props
-}: IconProps) {
+export interface IconProps extends HTMLStyledProps<'svg'> {
+  variant?: IconVariant;
+}
+export function Icon({ children, opacity = '1', ...props }: IconProps) {
+  return (
+    <styled.svg fill="none" height="24" opacity={opacity} viewBox="0 0 24 24" width="24" {...props}>
+      {children}
+    </styled.svg>
+  );
+}
+
+export function IconSmall({ children, opacity = '1', ...props }: IconProps) {
   return (
-    <styled.svg
-      fill="none"
-      height={height}
-      opacity={opacity}
-      viewBox="0 0 24 24"
-      width={width}
-      {...props}
-    >
+    <styled.svg fill="none" height="16" opacity={opacity} viewBox="0 0 16 16" width="16" {...props}>
       {children}
     </styled.svg>
   );
diff --git a/src/app/ui/icons/inbox-icon.tsx b/src/app/ui/icons/inbox-icon.tsx
index b9466523add..4648a508ac3 100644
--- a/src/app/ui/icons/inbox-icon.tsx
+++ b/src/app/ui/icons/inbox-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function InboxIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M2.5 8.5H5.38013C5.61417 9.73377 6.69814 10.6667 8 10.6667C9.30186 10.6667 10.3858 9.73376 10.6199 8.5L13.5 8.5M2.5 13.5H13.5V2.5L2.50003 2.5L2.5 13.5Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="square"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function InboxIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/index.ts b/src/app/ui/icons/index.ts
index a28839db780..4c0ecb53492 100644
--- a/src/app/ui/icons/index.ts
+++ b/src/app/ui/icons/index.ts
@@ -33,7 +33,6 @@ export * from './lettermark-icon';
 export * from './ledger-icon';
 export * from './list-icon';
 export * from './lock-icon';
-export * from './logomark-icon';
 export * from './megaphone-icon';
 export * from './moon-icon';
 export * from './placeholder-icon';
diff --git a/src/app/ui/icons/info-circle-icon.tsx b/src/app/ui/icons/info-circle-icon.tsx
index 4fd25eb3137..f246855b61e 100644
--- a/src/app/ui/icons/info-circle-icon.tsx
+++ b/src/app/ui/icons/info-circle-icon.tsx
@@ -1,6 +1,29 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function InfoCircleIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M7.16683 7.33325H8.00016L8.00016 10.8333M14.1668 7.99992C14.1668 11.4057 11.4059 14.1666 8.00016 14.1666C4.59441 14.1666 1.8335 11.4057 1.8335 7.99992C1.8335 4.59416 4.59441 1.83325 8.00016 1.83325C11.4059 1.83325 14.1668 4.59416 14.1668 7.99992Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <rect
+          x="7.5415"
+          y="4.875"
+          width="0.916667"
+          height="0.916667"
+          rx="0.458333"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeWidth="0.25"
+        />
+      </IconSmall>
+    );
 
-export function InfoCircleIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/key-icon.tsx b/src/app/ui/icons/key-icon.tsx
index 9bf9052e80a..89f3f7b3128 100644
--- a/src/app/ui/icons/key-icon.tsx
+++ b/src/app/ui/icons/key-icon.tsx
@@ -1,6 +1,24 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function KeyIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M1.1665 8C1.1665 9.933 2.73351 11.5 4.6665 11.5C5.72692 11.5 6.67718 11.0284 7.31903 10.2835C7.54559 10.0206 7.85988 9.83333 8.20696 9.83333H9.04637C9.23379 9.83333 9.41744 9.78066 9.57637 9.68133L10.1365 9.33125C10.4608 9.12858 10.8722 9.12858 11.1965 9.33125L11.7566 9.68133C11.9156 9.78066 12.0992 9.83333 12.2866 9.83333H13.1926C13.4926 9.83333 13.7767 9.69871 13.9666 9.46657L14.6484 8.63324C14.9498 8.26487 14.9498 7.73513 14.6484 7.36676L13.9666 6.53343C13.7767 6.30129 13.4926 6.16667 13.1926 6.16667H8.20696C7.85988 6.16667 7.54559 5.97939 7.31903 5.71646C6.67718 4.97158 5.72692 4.5 4.6665 4.5C2.73351 4.5 1.1665 6.067 1.1665 8Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M5.1665 8C5.1665 8.27614 4.94265 8.5 4.6665 8.5C4.39036 8.5 4.1665 8.27614 4.1665 8C4.1665 7.72386 4.39036 7.5 4.6665 7.5C4.94265 7.5 5.1665 7.72386 5.1665 8Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function KeyIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <circle cx="7" cy="12" r="1.5" fill="currentColor" />
diff --git a/src/app/ui/icons/ledger-icon.tsx b/src/app/ui/icons/ledger-icon.tsx
index 2a76fec1f10..e63fd272c9f 100644
--- a/src/app/ui/icons/ledger-icon.tsx
+++ b/src/app/ui/icons/ledger-icon.tsx
@@ -1,6 +1,16 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function LedgerIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M0 11V15.0612L6 15L6 14H1V11H0ZM14 11L14 14H9V15L15 15.061L15 11H14ZM6 5V11H10L10 10H7V5H6ZM0 1V5H1L1 2H6L6 1H0ZM9 1L9 2H14L14 5H15L15 1H9Z"
+          fill="currentColor"
+        />
+      </IconSmall>
+    );
 
-export function LedgerIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path d="M15 14H11V8.5" stroke="currentColor" strokeWidth="2" />
diff --git a/src/app/ui/icons/list-icon.tsx b/src/app/ui/icons/list-icon.tsx
index bca10955378..fa5275c65f4 100644
--- a/src/app/ui/icons/list-icon.tsx
+++ b/src/app/ui/icons/list-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function ListIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M1.8335 8.00016H8.8335M1.8335 3.8335H14.1668M1.8335 12.1668H14.1668"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function ListIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/lock-icon.tsx b/src/app/ui/icons/lock-icon.tsx
index 57dc77b1e2c..fc24662f0ad 100644
--- a/src/app/ui/icons/lock-icon.tsx
+++ b/src/app/ui/icons/lock-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function LockIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M10.8332 6.5V4.83333C10.8332 3.26853 9.56464 2 7.99984 2C6.43503 2 5.1665 3.26853 5.1665 4.83333V6.5M7.99984 9.33333V11.3333M3.83317 14.1667H12.1665C12.5347 14.1667 12.8332 13.8682 12.8332 13.5V7.16667C12.8332 6.79848 12.5347 6.5 12.1665 6.5H3.83317C3.46498 6.5 3.1665 6.79848 3.1665 7.16667V13.5C3.1665 13.8682 3.46498 14.1667 3.83317 14.1667Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function LockIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/megaphone-icon.tsx b/src/app/ui/icons/megaphone-icon.tsx
index b1b2c0c4c1c..237bc00e253 100644
--- a/src/app/ui/icons/megaphone-icon.tsx
+++ b/src/app/ui/icons/megaphone-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function MegaphoneIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M12.1654 9.96376C13.2699 9.96376 14.1654 9.06833 14.1654 7.96376C14.1654 6.85919 13.2699 5.96376 12.1654 5.96376M8.38489 12.7971C8.11034 13.5739 7.36951 14.1304 6.4987 14.1304C5.39413 14.1304 4.4987 13.235 4.4987 12.1304V11.1304M4.50016 4.79709V11.1304M12.1654 3.36732V12.5602C12.1654 13.009 11.7309 13.3296 11.302 13.1972L2.30202 10.4184C2.02261 10.3321 1.83203 10.0738 1.83203 9.7814L1.83203 6.14612C1.83203 5.85369 2.02261 5.5954 2.30202 5.50912L11.302 2.73032C11.7309 2.59792 12.1654 2.91851 12.1654 3.36732Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function MegaphoneIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/moon-icon.tsx b/src/app/ui/icons/moon-icon.tsx
index 95064c3e8a2..c3ceba8e5de 100644
--- a/src/app/ui/icons/moon-icon.tsx
+++ b/src/app/ui/icons/moon-icon.tsx
@@ -1,6 +1,22 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function MoonIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.06224 1.68697C8.19169 1.90998 8.18093 2.18765 8.0346 2.39997C7.59072 3.04404 7.33089 3.82401 7.33089 4.66667C7.33089 6.87581 9.12175 8.66667 11.3309 8.66667C12.1736 8.66667 12.9536 8.40681 13.5977 7.96289C13.81 7.81655 14.0877 7.80578 14.3107 7.93523C14.5337 8.06467 14.6621 8.31113 14.6403 8.56807C14.3511 11.9831 11.4884 14.6642 7.99892 14.6642C4.31771 14.6642 1.3335 11.68 1.3335 7.99876C1.3335 4.50931 4.01443 1.64673 7.42939 1.35737C7.68633 1.3356 7.93278 1.46396 8.06224 1.68697ZM6.28018 2.94961C4.17883 3.66469 2.66683 5.6554 2.66683 7.99876C2.66683 10.9436 5.05409 13.3308 7.99892 13.3308C10.3423 13.3308 12.3331 11.8188 13.0481 9.71733C12.509 9.90059 11.9313 10 11.3309 10C8.38537 10 5.99756 7.61219 5.99756 4.66667C5.99756 4.06636 6.09695 3.48869 6.28018 2.94961Z"
+          fill="currentColor"
+        />
+        <path
+          d="M10.8251 3.34507L11.3661 2.26296C11.489 2.01728 11.8396 2.01728 11.9624 2.26296L12.5035 3.34507C12.5357 3.40958 12.588 3.46189 12.6525 3.49414L13.7347 4.0352C13.9803 4.15804 13.9803 4.50864 13.7347 4.63148L12.6525 5.17254C12.588 5.20479 12.5357 5.2571 12.5035 5.32161L11.9624 6.40372C11.8396 6.64941 11.489 6.64941 11.3661 6.40372L10.8251 5.32161C10.7928 5.2571 10.7405 5.20479 10.676 5.17254L9.5939 4.63148C9.34821 4.50864 9.34821 4.15804 9.5939 4.0352L10.676 3.49414C10.7405 3.46189 10.7928 3.40958 10.8251 3.34507Z"
+          fill="currentColor"
+        />
+      </IconSmall>
+    );
 
-export function MoonIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/plus-icon.tsx b/src/app/ui/icons/plus-icon.tsx
index 11cc38fac45..626ec117b5f 100644
--- a/src/app/ui/icons/plus-icon.tsx
+++ b/src/app/ui/icons/plus-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function PlusIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M8 2.5V8M8 8V13.5M8 8H2.5M8 8H13.5"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function PlusIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/qr-code-icon.tsx b/src/app/ui/icons/qr-code-icon.tsx
index 16c64e22c47..9b97a317aad 100644
--- a/src/app/ui/icons/qr-code-icon.tsx
+++ b/src/app/ui/icons/qr-code-icon.tsx
@@ -1,6 +1,23 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function QrCodeIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <rect x="2.75" y="2.75" width="3.5" height="3.5" stroke="currentColor" strokeWidth="1.5" />
+        <rect x="2.75" y="9.75" width="3.5" height="3.5" stroke="currentColor" strokeWidth="1.5" />
+        <rect x="9.75" y="2.75" width="3.5" height="3.5" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M9.5 9.5V11.2875H11.5" stroke="currentColor" strokeWidth="1.5" />
+        <path
+          d="M12.7998 14.0264V11.7096L14.0315 11.7098"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        />
+        <rect x="9" y="12.8506" width="1.24319" height="1.2" fill="currentColor" />
+        <line x1="13.4019" y1="9.75" x2="11.5" y2="9.75" stroke="currentColor" strokeWidth="1.5" />
+      </IconSmall>
+    );
 
-export function QrCodeIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/question-circle-icon.tsx b/src/app/ui/icons/question-circle-icon.tsx
index ed391fe8629..89ba6619c60 100644
--- a/src/app/ui/icons/question-circle-icon.tsx
+++ b/src/app/ui/icons/question-circle-icon.tsx
@@ -1,6 +1,17 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function QuestionCircleIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M8.36683 7.93325L8.16683 8.08325V8.33325V8.66659C8.16683 8.75863 8.09221 8.83325 8.00016 8.83325C7.90812 8.83325 7.8335 8.75863 7.8335 8.66659V8.33325C7.8335 8.07095 7.95699 7.82396 8.16683 7.66659L8.96683 7.06659L9.16683 6.91659V6.66659V5.99992V5.49992H8.66683H7.3335H6.8335V5.99992V6.66659C6.8335 6.75863 6.75888 6.83325 6.66683 6.83325C6.57478 6.83325 6.50016 6.75863 6.50016 6.66659V5.99992C6.50016 5.53968 6.87326 5.16659 7.3335 5.16659H8.66683C9.12707 5.16659 9.50016 5.53968 9.50016 5.99992V6.66659C9.50016 6.92888 9.37667 7.17587 9.16683 7.33325L8.36683 7.93325ZM8.00016 2.16659C4.7785 2.16659 2.16683 4.77826 2.16683 7.99992C2.16683 11.2216 4.7785 13.8333 8.00016 13.8333C11.2218 13.8333 13.8335 11.2216 13.8335 7.99992C13.8335 4.77826 11.2218 2.16659 8.00016 2.16659ZM1.8335 7.99992C1.8335 4.59416 4.59441 1.83325 8.00016 1.83325C11.4059 1.83325 14.1668 4.59416 14.1668 7.99992C14.1668 11.4057 11.4059 14.1666 8.00016 14.1666C4.59441 14.1666 1.8335 11.4057 1.8335 7.99992ZM8.16683 10.6666C8.16683 10.7586 8.09221 10.8333 8.00016 10.8333C7.90812 10.8333 7.8335 10.7586 7.8335 10.6666C7.8335 10.5745 7.90812 10.4999 8.00016 10.4999C8.09221 10.4999 8.16683 10.5745 8.16683 10.6666Z"
+          fill="currentColor"
+          stroke="currentColor"
+        />
+      </IconSmall>
+    );
 
-export function QuestionCircleIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/refresh-icon.tsx b/src/app/ui/icons/refresh-icon.tsx
new file mode 100644
index 00000000000..479ed95039e
--- /dev/null
+++ b/src/app/ui/icons/refresh-icon.tsx
@@ -0,0 +1,28 @@
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function RefreshIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M12.8412 2.5V4.83333C12.8412 5.01743 12.692 5.16667 12.5079 5.16667H10.1746M3.16667 13.5V11.1667C3.16667 10.9826 3.31591 10.8333 3.5 10.8333H5.83333M2.54255 8.6875C2.51447 8.46228 2.5 8.23283 2.5 8C2.5 4.96243 4.96243 2.5 8 2.5C9.78439 2.5 11.4074 3.34975 12.4214 4.66667M13.4574 7.3125C13.4855 7.53772 13.5 7.76717 13.5 8C13.5 11.0376 11.0376 13.5 8 13.5C6.21561 13.5 4.59258 12.6502 3.57856 11.3333"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
+
+  return (
+    <Icon {...props}>
+      <path
+        d="M5 20V16.5C5 16.2239 5.22386 16 5.5 16H8.75M19.0118 4V7.5C19.0118 7.77614 18.788 8 18.5118 8H15.0118M4 12C4 7.58172 7.58172 4 12 4C14.6362 4 17.0303 5.27512 18.5 7.24224M20 12C20 16.4183 16.4183 20 12 20C9.36378 20 6.96969 18.7249 5.5 16.7578"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Icon>
+  );
+}
diff --git a/src/app/ui/icons/reload-icon.tsx b/src/app/ui/icons/reload-icon.tsx
index 95be65a5698..287ea1c3dda 100644
--- a/src/app/ui/icons/reload-icon.tsx
+++ b/src/app/ui/icons/reload-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function ReloadIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M13.1729 9.83333C12.4178 11.9695 10.3806 13.5 7.98584 13.5C4.94827 13.5 2.48584 11.0376 2.48584 8C2.48584 4.96243 4.94827 2.5 7.98584 2.5C9.86394 2.5 11.1192 3.30292 12.3332 4.6726M12.8332 2.66667V5C12.8332 5.18409 12.6839 5.33333 12.4998 5.33333H10.1665"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function ReloadIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/send-icon.tsx b/src/app/ui/icons/send-icon.tsx
index 0c57260166c..c8a82ffc3bf 100644
--- a/src/app/ui/icons/send-icon.tsx
+++ b/src/app/ui/icons/send-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function SendIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M4.00023 8.00006H6.16689M4.00023 8.00006L2.25471 2.7635C2.1608 2.48177 2.45439 2.22714 2.72001 2.35995L13.4039 7.70192C13.6496 7.82476 13.6496 8.17536 13.4039 8.2982L2.72001 13.6402C2.45439 13.773 2.1608 13.5183 2.25471 13.2366L4.00023 8.00006Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function SendIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/stacks-icon.tsx b/src/app/ui/icons/stacks-icon.tsx
index 7ac4fa5bb0b..7862874041b 100644
--- a/src/app/ui/icons/stacks-icon.tsx
+++ b/src/app/ui/icons/stacks-icon.tsx
@@ -1,6 +1,16 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function StacksIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M10.3332 9.5L12.9999 13.5H10.9999L7.99988 9.5L4.99988 13.5H2.99988L5.66655 9.5H1.99988V8H13.9999L13.9995 9.5H10.3332ZM13.9992 5.6665L13.9995 6.99984H1.99951V5.6665H5.66618L3.06828 1.6665H4.99951L7.99951 5.6665L10.9995 1.6665H12.9995L10.3328 5.6665H13.9992Z"
+          fill="currentColor"
+        />
+      </IconSmall>
+    );
 
-export function StacksIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/star-icon.tsx b/src/app/ui/icons/star-icon.tsx
index caaff97ea5b..bebbedebb62 100644
--- a/src/app/ui/icons/star-icon.tsx
+++ b/src/app/ui/icons/star-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function StarIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M7.69983 1.35512C7.82047 1.10363 8.17953 1.10363 8.30017 1.35512L10.0126 4.92472C10.0612 5.02597 10.1578 5.09587 10.2694 5.1105L14.2103 5.62721C14.488 5.66363 14.5991 6.00504 14.3957 6.19709L11.5139 8.91815C11.4319 8.99551 11.3949 9.109 11.4155 9.21962L12.1391 13.1067C12.1902 13.381 11.8996 13.5919 11.6535 13.459L8.15842 11.5722C8.05959 11.5188 7.94041 11.5188 7.84158 11.5722L4.34646 13.459C4.10042 13.5919 3.80982 13.381 3.86088 13.1067L4.5845 9.21962C4.6051 9.109 4.56807 8.99551 4.48614 8.91815L1.60434 6.19709C1.40094 6.00504 1.51202 5.66363 1.78975 5.62721L5.7306 5.1105C5.8422 5.09587 5.93882 5.02597 5.98739 4.92472L7.69983 1.35512Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function StarIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/sun-icon.tsx b/src/app/ui/icons/sun-icon.tsx
index dc228463b6d..599ceaa64ab 100644
--- a/src/app/ui/icons/sun-icon.tsx
+++ b/src/app/ui/icons/sun-icon.tsx
@@ -1,6 +1,26 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function SunIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <g clipPath="url(#clip0_13346_191323)">
+          <path
+            d="M8.00016 2.00016V1.3335M8.00016 14.6668V14.0002M12.2401 3.7602L12.7134 3.28686M3.28693 12.7135L3.76027 12.2402M14.0002 8.00018H14.6668M1.3335 8.00018H2.00016M12.2401 12.2402L12.7134 12.7135M3.28693 3.28686L3.76027 3.7602M10.3572 5.64314C11.6589 6.94489 11.6589 9.05544 10.3572 10.3572C9.05544 11.6589 6.94489 11.6589 5.64314 10.3572C4.34139 9.05544 4.34139 6.94489 5.64314 5.64314C6.94489 4.34139 9.05544 4.34139 10.3572 5.64314Z"
+            stroke="#12100F"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_13346_191323">
+            <rect width="16" height="16" fill="white" />
+          </clipPath>
+        </defs>
+      </IconSmall>
+    );
 
-export function SunIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/sun-in-cloud-icon.tsx b/src/app/ui/icons/sun-in-cloud-icon.tsx
index 7bc271b7bc7..2cd674c915b 100644
--- a/src/app/ui/icons/sun-in-cloud-icon.tsx
+++ b/src/app/ui/icons/sun-in-cloud-icon.tsx
@@ -1,6 +1,26 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function SunInCloudIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <g clipPath="url(#clip0_13346_191321)">
+          <path
+            d="M7.36732 6.23996C7.57162 4.97012 8.67254 4.00016 10 4.00016C11.4728 4.00016 12.6667 5.19407 12.6667 6.66683C12.6667 7.25173 12.4784 7.79265 12.1591 8.23226M7.36732 6.23996C8.15245 6.52552 8.82287 7.04998 9.29067 7.72544C9.50646 8.03702 9.9163 8.17612 10.2844 8.08603C10.5137 8.02992 10.7534 8.00016 11 8.00016C11.4109 8.00016 11.8025 8.08276 12.1591 8.23226M7.36732 6.23996C6.94071 6.08479 6.48024 6.00016 6 6.00016C3.79086 6.00016 2 7.79102 2 10.0002C2 12.2093 3.79086 14.0002 6 14.0002H11C12.6569 14.0002 14 12.657 14 11.0002C14 9.75419 13.2404 8.68562 12.1591 8.23226M10 1.66683V1.3335M6.69924 3.03364L6.46354 2.79793M13.2982 3.03364L13.5339 2.79793M15.3333 6.3335H15"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_13346_191321">
+            <rect width="16" height="16" fill="white" />
+          </clipPath>
+        </defs>
+      </IconSmall>
+    );
 
-export function SunInCloudIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/support-icon.tsx b/src/app/ui/icons/support-icon.tsx
index 3542f2fba5c..b34e0773697 100644
--- a/src/app/ui/icons/support-icon.tsx
+++ b/src/app/ui/icons/support-icon.tsx
@@ -1,6 +1,17 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function SupportIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M12.3333 3.66667L9.91059 6.08941M6.08593 9.91407L3.66667 12.3333M3.66667 3.66667L6.08593 6.08593M9.91059 9.91059L12.3333 12.3333M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM10.6667 8C10.6667 9.47276 9.47276 10.6667 8 10.6667C6.52724 10.6667 5.33333 9.47276 5.33333 8C5.33333 6.52724 6.52724 5.33333 8 5.33333C9.47276 5.33333 10.6667 6.52724 10.6667 8Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        />
+      </IconSmall>
+    );
 
-export function SupportIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/swap-icon.tsx b/src/app/ui/icons/swap-icon.tsx
index a323c9201b7..31644ba3671 100644
--- a/src/app/ui/icons/swap-icon.tsx
+++ b/src/app/ui/icons/swap-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function SwapIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M11.6665 14.1665L13.4308 12.4022C13.5609 12.272 13.5609 12.061 13.4308 11.9308L11.6665 10.1665M4.33312 1.83317L2.56882 3.59747C2.43865 3.72764 2.43865 3.9387 2.56882 4.06887L4.33312 5.83317M3.49979 3.83317H12.8331C13.2013 3.83317 13.4998 4.13165 13.4998 4.49984V7.1665M2.49979 9.1665V11.4998C2.49979 11.868 2.79826 12.1665 3.16645 12.1665H12.4998"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function SwapIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/trash-icon.tsx b/src/app/ui/icons/trash-icon.tsx
index f7dfd6648ee..0c8f874788f 100644
--- a/src/app/ui/icons/trash-icon.tsx
+++ b/src/app/ui/icons/trash-icon.tsx
@@ -1,6 +1,16 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function TrashIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M3.79325 13.5431L3.04481 13.5914L3.79325 13.5431ZM12.2071 13.5431L12.9555 13.5914V13.5914L12.2071 13.5431ZM1.8335 3.0835C1.41928 3.0835 1.0835 3.41928 1.0835 3.8335C1.0835 4.24771 1.41928 4.5835 1.8335 4.5835V3.0835ZM14.1668 4.5835C14.581 4.5835 14.9168 4.24771 14.9168 3.8335C14.9168 3.41928 14.581 3.0835 14.1668 3.0835V4.5835ZM9.8565 4.02044C9.95975 4.42158 10.3686 4.66307 10.7698 4.55982C11.1709 4.45658 11.4124 4.04769 11.3092 3.64655L9.8565 4.02044ZM2.41839 3.88178L3.04481 13.5914L4.5417 13.4948L3.91527 3.78521L2.41839 3.88178ZM4.45854 14.9168H11.5418V13.4168H4.45854V14.9168ZM12.9555 13.5914L13.5819 3.88178L12.0851 3.78521L11.4586 13.4948L12.9555 13.5914ZM12.8335 3.0835H3.16683V4.5835H12.8335V3.0835ZM1.8335 4.5835H3.16683V3.0835H1.8335V4.5835ZM12.8335 4.5835H14.1668V3.0835H12.8335V4.5835ZM11.5418 14.9168C12.2888 14.9168 12.9074 14.3368 12.9555 13.5914L11.4586 13.4948C11.4615 13.4509 11.4978 13.4168 11.5418 13.4168V14.9168ZM3.04481 13.5914C3.0929 14.3368 3.71154 14.9168 4.45854 14.9168V13.4168C4.50248 13.4168 4.53887 13.4509 4.5417 13.4948L3.04481 13.5914ZM8.00018 2.5835C8.89224 2.5835 9.64369 3.19361 9.8565 4.02044L11.3092 3.64655C10.9299 2.17308 9.59323 1.0835 8.00018 1.0835V2.5835ZM6.14385 4.02044C6.35666 3.19361 7.10811 2.5835 8.00018 2.5835V1.0835C6.40712 1.0835 5.07044 2.17308 4.69119 3.64655L6.14385 4.02044Z"
+          fill="currentColor"
+        />
+      </IconSmall>
+    );
 
-export function TrashIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/unlock-icon.tsx b/src/app/ui/icons/unlock-icon.tsx
index d772f04b5d2..9d705c23bb9 100644
--- a/src/app/ui/icons/unlock-icon.tsx
+++ b/src/app/ui/icons/unlock-icon.tsx
@@ -1,6 +1,19 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function UnlockIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M7.99984 9.3335V11.3335M5.1665 6.50016V4.66683C5.1665 3.10202 6.43503 1.8335 7.99984 1.8335C9.3949 1.8335 10.5545 2.84174 10.7896 4.1693M3.83317 14.1668H12.1665C12.5347 14.1668 12.8332 13.8684 12.8332 13.5002V7.16683C12.8332 6.79864 12.5347 6.50016 12.1665 6.50016H3.83317C3.46498 6.50016 3.1665 6.79864 3.1665 7.16683V13.5002C3.1665 13.8684 3.46498 14.1668 3.83317 14.1668Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function UnlockIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/world-icon.tsx b/src/app/ui/icons/world-icon.tsx
index 3e5b37a887f..cf04e1443e2 100644
--- a/src/app/ui/icons/world-icon.tsx
+++ b/src/app/ui/icons/world-icon.tsx
@@ -1,6 +1,18 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function WorldIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3.16011 5.75696C2.84354 6.43886 2.66683 7.19888 2.66683 8.00016C2.66683 9.23266 3.0849 10.3675 3.78697 11.2706L5.65167 9.40594C4.66342 8.34489 3.88332 7.25658 3.40418 6.2983C3.31326 6.11646 3.23124 5.93549 3.16011 5.75696ZM5.75746 3.15988C5.93593 3.23099 6.11683 3.31298 6.29861 3.40387C7.25689 3.88301 8.3452 4.66312 9.40625 5.65137L11.2706 3.78697C10.3675 3.0849 9.23266 2.66683 8.00016 2.66683C7.19907 2.66683 6.43923 2.84345 5.75746 3.15988ZM12.2194 2.83824C11.0701 1.89776 9.60104 1.3335 8.00016 1.3335C4.31826 1.3335 1.3335 4.31826 1.3335 8.00016C1.3335 9.60104 1.89776 11.0701 2.83824 12.2194L2.34341 12.7142C2.08306 12.9746 2.08306 13.3967 2.34341 13.657C2.60376 13.9174 3.02587 13.9174 3.28621 13.657L3.78106 13.1622C4.9303 14.1026 6.39934 14.6668 8.00016 14.6668C9.83145 14.6668 11.4903 13.9285 12.6952 12.7332C12.7017 12.7269 12.7081 12.7206 12.7145 12.7142C12.7209 12.7078 12.7273 12.7013 12.7336 12.6948C13.9286 11.4899 14.6668 9.83125 14.6668 8.00016C14.6668 6.39934 14.1026 4.9303 13.1622 3.78106L13.6571 3.28612C13.9175 3.02577 13.9175 2.60366 13.6571 2.34331C13.3968 2.08296 12.9747 2.08296 12.7143 2.34331L12.2194 2.83824ZM12.2134 4.72979L10.3491 6.59417C11.3374 7.65529 12.1176 8.74367 12.5968 9.70201C12.6876 9.88362 12.7695 10.0644 12.8405 10.2427C13.1569 9.56094 13.3335 8.80117 13.3335 8.00016C13.3335 6.76771 12.9155 5.6329 12.2134 4.72979ZM11.7734 11.7694C11.7743 11.7681 11.7757 11.766 11.7775 11.7627C11.7811 11.7559 11.7876 11.7416 11.7936 11.7165C11.8061 11.6639 11.8143 11.5741 11.7981 11.4374C11.7652 11.1591 11.6418 10.7735 11.4042 10.2983C10.9987 9.48727 10.3111 8.5152 9.40562 7.53761L7.53792 9.40532C8.51551 10.3108 9.48757 10.9984 10.2986 11.4039C10.7738 11.6415 11.1594 11.7648 11.4377 11.7978C11.5744 11.814 11.6642 11.8058 11.7168 11.7932C11.7419 11.7872 11.7562 11.7808 11.7631 11.7772C11.7663 11.7754 11.7684 11.774 11.7697 11.7731C11.771 11.7718 11.7722 11.7706 11.7734 11.7694ZM10.2432 12.8403C10.0648 12.7692 9.88399 12.6873 9.70232 12.5964C8.74398 12.1173 7.65559 11.3371 6.59448 10.3488L4.72979 12.2134C5.6329 12.9155 6.76771 13.3335 8.00016 13.3335C8.80137 13.3335 9.56131 13.1568 10.2432 12.8403ZM6.59512 8.4625L8.46281 6.59481C7.48529 5.68939 6.5133 5.00193 5.70232 4.59644C5.22708 4.35882 4.84156 4.23547 4.56325 4.20248C4.42656 4.18628 4.33675 4.19448 4.28415 4.20707C4.25906 4.21307 4.24473 4.2195 4.23788 4.22315C4.23168 4.22646 4.22968 4.22847 4.22926 4.22889C4.22884 4.22931 4.22676 4.23137 4.22346 4.23757C4.21981 4.24442 4.21338 4.25875 4.20738 4.28384C4.19479 4.33644 4.18659 4.42625 4.20279 4.56294C4.23577 4.84125 4.35913 5.22677 4.59675 5.70201C5.00224 6.51299 5.6897 7.48498 6.59512 8.4625Z"
+          fill="currentColor"
+        />
+      </IconSmall>
+    );
 
-export function WorldIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/src/app/ui/icons/zap-icon.tsx b/src/app/ui/icons/zap-icon.tsx
index 627e91a8782..f2a92afe60c 100644
--- a/src/app/ui/icons/zap-icon.tsx
+++ b/src/app/ui/icons/zap-icon.tsx
@@ -1,6 +1,18 @@
-import { Icon, IconProps } from './icon/icon';
+import { Icon, IconProps, IconSmall } from './icon/icon';
+
+export function ZapIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <IconSmall {...props}>
+        <path
+          d="M12.881 5.83333H9.33317C9.05703 5.83333 8.83317 5.60948 8.83317 5.33333V2.1057C8.83317 1.61505 8.20012 1.41792 7.92156 1.82183L2.7071 9.3828C2.47835 9.71449 2.71579 10.1667 3.11871 10.1667H6.6665C6.94265 10.1667 7.1665 10.3905 7.1665 10.6667V13.8943C7.1665 14.385 7.79955 14.5821 8.07811 14.1782L13.2926 6.6172C13.5213 6.28551 13.2839 5.83333 12.881 5.83333Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+        />
+      </IconSmall>
+    );
 
-export function ZapIcon(props: IconProps) {
   return (
     <Icon {...props}>
       <path
diff --git a/test-app/src/components/profile.tsx b/test-app/src/components/profile.tsx
index a8b9023fa7c..036c3f89b1e 100644
--- a/test-app/src/components/profile.tsx
+++ b/test-app/src/components/profile.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import { useAuth } from '@common/use-auth';
-import { stacksMainnetNetwork } from '@common/utils';
+import { stacksMainnetNetwork, stacksTestnetNetwork } from '@common/utils';
 import { openProfileUpdateRequestPopup } from '@stacks/connect';
 import { StacksNetwork } from '@stacks/network';
 import { PublicPersonProfile, PublicProfile } from '@stacks/profile';
@@ -70,11 +70,11 @@ export const Profile = () => {
                   },
                 ],
               },
-              stacksMainnetNetwork
+              stacksTestnetNetwork
             )
           }
         >
-          Update profile (Mainnet)
+          Update profile (Testnet)
         </styled.button>
 
         <styled.button
@@ -85,11 +85,11 @@ export const Profile = () => {
               {
                 name: 1,
               } as any,
-              stacksMainnetNetwork
+              stacksTestnetNetwork
             )
           }
         >
-          Try to update invalid profile (Mainnet)
+          Try to update invalid profile (Testnet)
         </styled.button>
       </Flex>
     </Box>
diff --git a/tests/specs/profile/profile.spec.ts b/tests/specs/profile/profile.spec.ts
index fe503453792..e04f3fa8aec 100644
--- a/tests/specs/profile/profile.spec.ts
+++ b/tests/specs/profile/profile.spec.ts
@@ -1,4 +1,3 @@
-import { Page } from '@playwright/test';
 import { TestAppPage } from '@tests/page-object-models/test-app.page';
 import { UpdateProfileRequestPage } from '@tests/page-object-models/update-profile-request.page';
 
@@ -9,19 +8,6 @@ test.describe.configure({ mode: 'serial' });
 test.describe('Profile updating', () => {
   let testAppPage: TestAppPage;
 
-  function interceptGaiaRequest(page: Page): Promise<Buffer> {
-    return new Promise(resolve => {
-      page.on('request', request => {
-        if (request.url().startsWith('https://hub.blockstack.org/store')) {
-          const requestBody = request.postDataBuffer();
-          if (request.method() === 'GET') return;
-          if (requestBody === null) return;
-          resolve(requestBody);
-        }
-      });
-    });
-  }
-
   test.beforeEach(async ({ extensionId, globalPage, onboardingPage, context }) => {
     await globalPage.setupAndUseApiCalls(extensionId);
     await onboardingPage.signInWithTestAccount(extensionId);
@@ -57,12 +43,21 @@ test.describe('Profile updating', () => {
     await testAppPage.clickUpdateProfileButton();
     const profileUpdatingPage = new UpdateProfileRequestPage(await context.waitForEvent('page'));
 
-    const [gaiaRequestBody] = await Promise.all([
-      interceptGaiaRequest(profileUpdatingPage.page),
-      profileUpdatingPage.clickUpdateProfileButton(),
-    ]);
+    const requestPromise = profileUpdatingPage.page.waitForRequest('https://hub.blockstack.org/*');
+
+    await profileUpdatingPage.page.route('https://hub.blockstack.org/*', async route => {
+      await route.abort();
+    });
+
+    await profileUpdatingPage.clickUpdateProfileButton();
+
+    const request = await requestPromise;
+    const requestBody = request.postDataBuffer();
+    if (!requestBody) return;
+
+    const { decodedToken } = JSON.parse(requestBody.toString())[0];
 
-    const { decodedToken } = JSON.parse(gaiaRequestBody.toString())[0];
+    test.expect(decodedToken).toBeDefined();
 
     test.expect(decodedToken?.header?.alg).toEqual('ES256K');
     test.expect(decodedToken?.payload?.claim?.name).toContain('Name ');