antoncoding · antoncoding · Jan 13, 2026 · Jan 13, 2026 · Jan 13, 2026 · Jan 13, 2026
diff --git a/.claude/skills/icons/SKILL.md b/.claude/skills/icons/SKILL.md
@@ -0,0 +1,58 @@
+---
+name: icons
+description: Icon usage conventions and semantic mappings. Use when adding, modifying, or choosing icons.
+---
+
+# Icon Standards
+
+## Libraries
+- **Radix** (`@radix-ui/react-icons`): UI primitives (dropdowns, modals, tables)
+- **react-icons**: Domain icons (status, features)
+
+## Standard Icons
+
+| Concept | Icon | Import |
+|---------|------|--------|
+| Error | `MdError` | `react-icons/md` |
+| Warning | `IoWarningOutline` | `react-icons/io5` |
+| Success | `GrStatusGood` | `react-icons/gr` |
+| Info | `FaRegLightbulb` | `react-icons/fa` |
+| Help | `BsQuestionCircle` | `react-icons/bs` |
+| Close | `Cross2Icon` | `@radix-ui/react-icons` |
+| Search | `FiSearch` | `react-icons/fi` |
+| External link | `ExternalLinkIcon` | `@radix-ui/react-icons` |
+| Settings | `GearIcon` | `@radix-ui/react-icons` |
+| Copy | `LuCopy` | `react-icons/lu` |
+| Trash | `TrashIcon` | `@radix-ui/react-icons` |
+| Chevrons | `ChevronDownIcon` etc | `@radix-ui/react-icons` |
+| Arrows | `ArrowDownIcon` etc | `@radix-ui/react-icons` |
+| Filter | `GoFilter` | `react-icons/go` |
+| Star | `GoStar` / `GoStarFill` | `react-icons/go` |
+| User | `LuUser` | `react-icons/lu` |
+| Reload | `ReloadIcon` | `@radix-ui/react-icons` |
+
+## Domain Icons
+
+| Concept | Icon | Import |
+|---------|------|--------|
+| Swap | `LuArrowRightLeft` | `react-icons/lu` |
+| Withdraw | `BsArrowUpCircle` | `react-icons/bs` |
+| Deposit | `BsArrowDownCircle` | `react-icons/bs` |
+| History | `GoHistory` | `react-icons/go` |
+| Rewards | `FiGift` | `react-icons/fi` |
+| Fire | `HiFire` | `react-icons/hi2` |
+| Morpho | `PiButterflyDuotone` | `react-icons/pi` |
+
+## Custom Components
+
+| Component | Path |
+|-----------|------|
+| `SpinnerIcon` | `@/components/icons/SpinnerIcon` |
+| `RefetchIcon` | `@/components/ui/refetch-icon` |
+| `TokenIcon` | `@/components/shared/token-icon` |
+| `NetworkIcon` | `@/components/shared/network-icon` |
+
+## Rules
+1. Use standard icon for each concept (no alternatives)
+2. Size: `16-18px` inline, `20-24px` standalone
+3. Check this doc before adding new icons
diff --git a/src/components/Info/info.tsx b/src/components/Info/info.tsx
@@ -1,7 +1,7 @@
 import { FaRegLightbulb } from 'react-icons/fa';
 import { GrStatusGood } from 'react-icons/gr';
-import { MdWarning } from 'react-icons/md';
 import { MdError } from 'react-icons/md';
+import { IoWarningOutline } from 'react-icons/io5';
 
 const levelToCellColor = (level: string) => {
   switch (level) {
@@ -36,7 +36,7 @@ const levelToIcon = (level: string) => {
       );
     case 'warning':
       return (
-        <MdWarning
+        <IoWarningOutline
           className="mr-2"
           size={18}
         />

diff --git a/src/components/SearchOrConnect/SearchOrConnect.tsx b/src/components/SearchOrConnect/SearchOrConnect.tsx
@@ -1,7 +1,8 @@
 'use client';
 
 import { useState } from 'react';
-import { RiArrowRightLine, RiSearchLine } from 'react-icons/ri';
+import { RiArrowRightLine } from 'react-icons/ri';
+import { FiSearch } from 'react-icons/fi';
 import Link from 'next/link';
 import { isAddress } from 'viem';
 import { useConnection } from 'wagmi';
@@ -96,7 +97,7 @@ export default function SearchOrConnect({ path, title }: SearchOrConnectProps) {
               <RiArrowRightLine className="h-4 w-4" />
             ) : (
               <>
-                <RiSearchLine className="h-4 w-4" />
+                <FiSearch className="h-4 w-4" />
                 Search
               </>
             )}

diff --git a/src/components/common/Modal/ModalHeader.tsx b/src/components/common/Modal/ModalHeader.tsx
@@ -1,5 +1,5 @@
 import type React from 'react';
-import { Cross1Icon } from '@radix-ui/react-icons';
+import { Cross2Icon } from '@radix-ui/react-icons';
 import { twMerge } from 'tailwind-merge';
 
 export type ModalHeaderVariant = 'standard' | 'compact';
@@ -85,7 +85,7 @@ export function ModalHeader({
               aria-label={closeButtonAriaLabel}
               className={iconButtonBaseClass}
             >
-              <Cross1Icon className="h-3.5 w-3.5" />
+              <Cross2Icon className="h-3.5 w-3.5" />
             </button>
           )}
         </div>

diff --git a/src/components/common/ProcessModal.tsx b/src/components/common/ProcessModal.tsx
@@ -1,5 +1,5 @@
 import type React from 'react';
-import { FiX } from 'react-icons/fi';
+import { Cross2Icon } from '@radix-ui/react-icons';
 import { Modal, ModalBody } from '@/components/common/Modal';
 import { ProcessStepList } from '@/components/common/ProcessStepList';
 import type { ActiveTransaction } from '@/stores/useTransactionProcessStore';
@@ -75,7 +75,7 @@ export function ProcessModal({ transaction, onDismiss, title, description, child
           onClick={onDismiss}
           className="rounded p-1 text-secondary transition-colors hover:bg-foreground/10 hover:text-foreground"
         >
-          <FiX className="h-4 w-4" />
+          <Cross2Icon className="h-4 w-4" />
         </button>
       </div>
       <ModalBody className="gap-5">

diff --git a/src/components/layout/header/AccountDropdown.tsx b/src/components/layout/header/AccountDropdown.tsx
@@ -1,7 +1,8 @@
 'use client';
 
 import { useCallback } from 'react';
-import { ExitIcon, ExternalLinkIcon, CopyIcon } from '@radix-ui/react-icons';
+import { ExitIcon, ExternalLinkIcon } from '@radix-ui/react-icons';
+import { LuCopy } from 'react-icons/lu';
 import { clsx } from 'clsx';
 import { useConnection, useDisconnect } from 'wagmi';
 import { useAppKit } from '@reown/appkit/react';
@@ -68,7 +69,7 @@ export function AccountDropdown() {
 
         <DropdownMenuItem
           onClick={handleCopyAddress}
-          endContent={<CopyIcon className="h-4 w-4" />}
+          endContent={<LuCopy className="h-4 w-4" />}
         >
           Copy Address
         </DropdownMenuItem>

diff --git a/src/components/layout/header/Navbar.tsx b/src/components/layout/header/Navbar.tsx
@@ -8,7 +8,7 @@ import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import { useTheme } from 'next-themes';
 import { FaRegMoon } from 'react-icons/fa';
-import { FiSettings } from 'react-icons/fi';
+import { GearIcon } from '@radix-ui/react-icons';
 import { LuSunMedium } from 'react-icons/lu';
 import { RiBookLine, RiDiscordFill, RiGithubFill } from 'react-icons/ri';
 import { TbReport } from 'react-icons/tb';
@@ -185,7 +185,7 @@ export function Navbar() {
                 {theme === 'dark' ? 'Light Theme' : 'Dark Theme'}
               </DropdownMenuItem>
               <DropdownMenuItem
-                endContent={<FiSettings className="h-4 w-4" />}
+                endContent={<GearIcon className="h-4 w-4" />}
                 onClick={() => router.push('/settings')}
               >
                 Settings

diff --git a/src/components/layout/header/NavbarMobile.tsx b/src/components/layout/header/NavbarMobile.tsx
@@ -1,14 +1,13 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { HamburgerMenuIcon } from '@radix-ui/react-icons';
+import { HamburgerMenuIcon, GearIcon } from '@radix-ui/react-icons';
 import { clsx } from 'clsx';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useTheme } from 'next-themes';
 import { FaRegMoon } from 'react-icons/fa';
-import { FiSettings } from 'react-icons/fi';
 import { LuSunMedium } from 'react-icons/lu';
 import { RiBookLine, RiDiscordFill, RiGithubFill, RiLineChartLine, RiBriefcaseLine, RiGiftLine } from 'react-icons/ri';
 import { useConnection } from 'wagmi';
@@ -140,7 +139,7 @@ export default function NavbarMobile() {
               {mounted && (theme === 'dark' ? 'Light Theme' : 'Dark Theme')}
             </DropdownMenuItem>
             <DropdownMenuItem
-              startContent={<FiSettings className="h-4 w-4" />}
+              startContent={<GearIcon className="h-4 w-4" />}
               onClick={() => handleNavigation('/settings')}
             >
               Settings

diff --git a/src/components/layout/notification-banner.tsx b/src/components/layout/notification-banner.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { RiCloseLine } from 'react-icons/ri';
+import { Cross2Icon } from '@radix-ui/react-icons';
 import { useActiveNotifications } from '@/hooks/useActiveNotifications';
 import { useNotificationStore } from '@/stores/useNotificationStore';
 
@@ -70,7 +70,7 @@ export function NotificationBanner() {
             className="absolute right-4 p-1 text-primary-foreground/80 transition-colors hover:text-primary-foreground sm:right-6 md:right-8"
             aria-label="Dismiss notification"
           >
-            <RiCloseLine className="h-5 w-5" />
+            <Cross2Icon className="h-5 w-5" />
           </button>
         </div>
       </div>

diff --git a/src/components/shared/account-identity.tsx b/src/components/shared/account-identity.tsx
@@ -5,7 +5,8 @@ import clsx from 'clsx';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
 import { FaCircle } from 'react-icons/fa';
-import { LuExternalLink, LuCopy } from 'react-icons/lu';
+import { ExternalLinkIcon } from '@radix-ui/react-icons';
+import { LuCopy } from 'react-icons/lu';
 import { useConnection, useEnsName } from 'wagmi';
 import { Avatar } from '@/components/Avatar/Avatar';
 import { AccountActionsPopover } from '@/components/shared/account-actions-popover';
@@ -93,7 +94,7 @@ export function AccountIdentity({
     const content = (
       <>
         {vaultName ? <span className="font-zen">{vaultName}</span> : <Name address={address as `0x${string}`} />}
-        {linkTo === 'explorer' && <LuExternalLink className="h-3 w-3" />}
+        {linkTo === 'explorer' && <ExternalLinkIcon className="h-3 w-3" />}
         {showCopy && (
           <LuCopy
             className="h-3 w-3 cursor-pointer transition-colors hover:text-primary"
@@ -168,7 +169,7 @@ export function AccountIdentity({
         <span className="text-xs">
           {vaultName ? <span className="font-zen">{vaultName}</span> : <Name address={address as `0x${string}`} />}
         </span>
-        {linkTo === 'explorer' && <LuExternalLink className="h-3 w-3" />}
+        {linkTo === 'explorer' && <ExternalLinkIcon className="h-3 w-3" />}
         {showCopy && (
           <LuCopy
             className="h-3 w-3 cursor-pointer transition-colors hover:text-primary"
@@ -290,7 +291,7 @@ export function AccountIdentity({
           aria-label="View on explorer"
           onClick={(e) => e.stopPropagation()}
         >
-          <LuExternalLink className="h-4 w-4" />
+          <ExternalLinkIcon className="h-4 w-4" />
         </a>
       )}
     </>

diff --git a/src/components/shared/agent-icon.tsx b/src/components/shared/agent-icon.tsx
@@ -1,6 +1,6 @@
 import { Tooltip } from '@/components/ui/tooltip';
 import Image from 'next/image';
-import { HiQuestionMarkCircle } from 'react-icons/hi';
+import { BsQuestionCircle } from 'react-icons/bs';
 import type { Address } from 'viem';
 import { findAgent } from '@/utils/monarch-agent';
 import { TooltipContent } from './tooltip-content';
@@ -18,7 +18,7 @@ export function AgentIcon({ address, width, height }: AgentIconProps) {
     return (
       <Tooltip content="Unknown agent">
         <div className="flex items-center justify-center rounded-full bg-hovered/50">
-          <HiQuestionMarkCircle
+          <BsQuestionCircle
             className="text-secondary"
             style={{ width, height }}
           />
@@ -46,7 +46,7 @@ export function AgentIcon({ address, width, height }: AgentIconProps) {
         className="hidden items-center justify-center"
         style={{ width, height }}
       >
-        <HiQuestionMarkCircle
+        <BsQuestionCircle
           className="text-secondary"
           style={{ width, height }}
         />
@@ -82,7 +82,7 @@ export function AgentIcon({ address, width, height }: AgentIconProps) {
           className="hidden items-center justify-center"
           style={{ width, height }}
         >
-          <HiQuestionMarkCircle
+          <BsQuestionCircle
             className="text-secondary"
             style={{ width, height }}
           />

diff --git a/src/components/shared/table-pagination.tsx b/src/components/shared/table-pagination.tsx
@@ -2,7 +2,8 @@ import { useState, useEffect } from 'react';
 import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
 import { Input } from '@/components/ui/input';
 import { Tooltip } from '@/components/ui/tooltip';
-import { ChevronLeftIcon, ChevronRightIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
+import { FiSearch } from 'react-icons/fi';
 import { TooltipContent } from '@/components/shared/tooltip-content';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/utils';
@@ -200,7 +201,7 @@ export function TablePagination({
                   <TooltipContent
                     title="Jump to page"
                     detail={`Go to a specific page (1-${totalPages})`}
-                    icon={<MagnifyingGlassIcon />}
+                    icon={<FiSearch />}
                   />
                 }
               >
@@ -211,7 +212,7 @@ export function TablePagination({
                     disabled={isLoading}
                     className="h-8 w-8 font-zen !font-normal"
                   >
-                    <MagnifyingGlassIcon className="h-4 w-4" />
+                    <FiSearch className="h-4 w-4" />
                   </Button>
                 </PopoverTrigger>
               </Tooltip>

diff --git a/src/components/shared/token-icon.tsx b/src/components/shared/token-icon.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { Tooltip } from '@/components/ui/tooltip';
 import Image from 'next/image';
-import { FiExternalLink } from 'react-icons/fi';
+import { ExternalLinkIcon } from '@radix-ui/react-icons';
 import { useTokensQuery } from '@/hooks/queries/useTokensQuery';
 import { TooltipContent } from '@/components/shared/tooltip-content';
 import { getExplorerUrl } from '@/utils/networks';
@@ -74,7 +74,7 @@ export function TokenIcon({
             title={title}
             detail={detail}
             secondaryDetail={secondaryDetail}
-            actionIcon={explorerUrl ? <FiExternalLink className="h-4 w-4" /> : undefined}
+            actionIcon={explorerUrl ? <ExternalLinkIcon className="h-4 w-4" /> : undefined}
             actionHref={explorerUrl ?? undefined}
             onActionClick={(e) => e.stopPropagation()}
           />

diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { FiChevronDown, FiChevronLeft, FiChevronRight } from 'react-icons/fi';
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
 import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
 
 import { cn } from '@/utils/components';
@@ -98,14 +98,14 @@ function Calendar({
         },
         Chevron: ({ className: chevronClassName, orientation, ...chevronProps }) => {
           if (orientation === 'left') {
-            return <FiChevronLeft className={cn('size-3.5', chevronClassName)} {...chevronProps} />;
+            return <ChevronLeftIcon className={cn('size-3.5', chevronClassName)} {...chevronProps} />;
           }
 
           if (orientation === 'right') {
-            return <FiChevronRight className={cn('size-3.5', chevronClassName)} {...chevronProps} />;
+            return <ChevronRightIcon className={cn('size-3.5', chevronClassName)} {...chevronProps} />;
           }
 
-          return <FiChevronDown className={cn('size-3.5', chevronClassName)} {...chevronProps} />;
+          return <ChevronDownIcon className={cn('size-3.5', chevronClassName)} {...chevronProps} />;
         },
         DayButton: CalendarDayButton,
         WeekNumber: ({ children, ...weekProps }) => {

diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
@@ -1,7 +1,8 @@
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import { FaCheck } from "react-icons/fa6";
-import { GoChevronRight, GoCircle } from "react-icons/go";
+import { ChevronRightIcon } from "@radix-ui/react-icons";
+import { GoCircle } from "react-icons/go";
 
 import { cn } from "@/utils/components"
 
@@ -36,7 +37,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <GoChevronRight className="ml-auto" />
+    <ChevronRightIcon className="ml-auto" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =