GitHub

Wallet Icon

PreviousNext

Display wallet icons with size variants and fallback support.

Documentation
WSize sm
WSize default
WSize lg
WSize xl
WSize 2xl

Installation

pnpm dlx shadcn@latest add @wallet-kit/icon

Usage

import { WalletIcon } from "@/components/wallet/icon";
import { useWalletAccount } from "@/hooks/use-wallet";
 
export default function Demo() {
  const { wallet } = useWalletAccount();
 
  return <WalletIcon wallet={wallet} />;
}

API Reference

WalletIcon

Displays a wallet's icon using an Avatar component. Falls back to the first letter of the wallet name if no icon is available.

Props

PropTypeDefaultDescription
walletPick<UiWallet, "icon" | "name">-The wallet object containing icon (optional) and name (optional).
size"sm" | "default" | "lg" | "xl" | "2xl""default"The size variant of the icon.
classNamestring-Additional CSS classes.

Inherits all props from shadcn/ui Avatar.

Size Variants

  • sm: size-6 (24px)
  • default: size-8 (32px)
  • lg: size-10 (40px)
  • xl: size-12 (48px)
  • 2xl: size-16 (64px)

Behavior

  • With Icon: Displays the wallet's icon image
  • Without Icon: Falls back to the first letter of the wallet name (uppercase)
  • No Wallet: Renders null if no wallet is provided

Examples

Basic Usage

import { WalletIcon } from "@/components/wallet/icon";
import { useWalletAccount } from "@/hooks/use-wallet";
 
export default function WalletDisplay() {
  const { wallet } = useWalletAccount();
 
  return (
    <div className="flex items-center gap-2">
      <WalletIcon wallet={wallet} />
      <span>{wallet?.name}</span>
    </div>
  );
}

Size Variants

import { WalletIcon } from "@/components/wallet/icon";
import { useWalletAccount } from "@/hooks/use-wallet";
 
export default function SizeDemo() {
  const { wallet } = useWalletAccount();
 
  return (
    <div className="flex items-center gap-4">
      <WalletIcon size="sm" wallet={wallet} />
      <WalletIcon size="default" wallet={wallet} />
      <WalletIcon size="lg" wallet={wallet} />
      <WalletIcon size="xl" wallet={wallet} />
      <WalletIcon size="2xl" wallet={wallet} />
    </div>
  );
}
  • The component uses shadcn/ui's Avatar component internally
  • Icons are displayed with rounded-sm styling
  • The fallback letter is always uppercase
  • The component gracefully handles missing wallet data
  • Size variants use class-variance-authority for consistent styling

Last updated 11/21/2025

Wallet OnboardingWallet Balance