@financedistrict/apps-web3icons

Mono web3 icons — tokens, networks, wallets, exchanges — tinted with your DS color tokens. A thin wrapper over @web3icons/react (MIT) that locks the mono variant and renders with currentColor.

import { TokenIcon, NetworkIcon } from "@financedistrict/apps-web3icons";

<TokenIcon symbol="btc" />                        // inherits text-foreground
<NetworkIcon name="ethereum" className="text-primary" />
<TokenIcon symbol="usdc" size={32} title="USD Coin" />

Components

| Component | Identify with | | -------------- | ----------------------------------- | | TokenIcon | symbol (or address + network) | | NetworkIcon | name (e.g. "ethereum") | | WalletIcon | name (e.g. "metamask") | | ExchangeIcon | name (e.g. "coinbase") |

Props

• The identifying prop above (required).
• size?: number | string — default 24.
• title?: string — accessible label (adds role="img" + aria-label to a wrapping <span>). Omit for decorative icons (aria-hidden).
• className?: string — merged after the default text-foreground on the wrapper <span>; a text-* class overrides the tint.
• Native SVG props pass through to the icon.

Color is always currentColor — set it with a text-* token class. The variant and color props are intentionally not exposed (mono only).

Trade-off: not tree-shakable

These wrap web3icons' dynamic components, which load at runtime and are client-only (no React Server Components). To optimize a hot path, import the tree-shakable static component straight from @web3icons/react (import { TokenBTC } from "@web3icons/react") — it already defaults to mono.