Token Components

Headless UI components for rendering token image, name, and symbol

TokenIcon

Show the default native icon of a network

Code

import { TokenProvider, TokenIcon } from "thirdweb/react";

function App() {
  return (
    <TokenProvider
      address={NATIVE_TOKEN_ADDRESS}
      client={THIRDWEB_CLIENT}
      chain={ethereum}
    >
      <TokenIcon className="h-auto w-20 rounded-full" />
    </TokenProvider>
  );
}

Preview

Override the token's icon using the iconResolver prop.

Code

import { TokenProvider, TokenIcon } from "thirdweb/react";

function App() {
  const USDC_ADDRESS = "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48";
  return (
    <TokenProvider
      address={USDC_ADDRESS}
      client={THIRDWEB_CLIENT}
      chain={ethereum}
    >
      <TokenIcon
        className="h-auto w-20 rounded-full"
        iconResolver="/usdc.svg"
      />
    </TokenProvider>
  );
}

Preview

TokenName

Show the name of the token

Code

import { TokenProvider, TokenName } from "thirdweb/react";

function App() {
  return (
    <TokenProvider
      address={USDC_ADDRESS}
      client={THIRDWEB_CLIENT}
      chain={ethereum}
    >
      <TokenName loadingComponent={<span>Loading...</span>} />
    </TokenProvider>
  );
}

Preview

TokenSymbol

Show the symbol of the token

Code

import { TokenProvider, TokenSymbol } from "thirdweb/react";

function App() {
  return (
    <TokenProvider
      address={USDC_ADDRESS}
      client={THIRDWEB_CLIENT}
      chain={ethereum}
    >
      <TokenSymbol loadingComponent={<span>Loading...</span>} />
    </TokenProvider>
  );
}

Preview