API Reference

Usage guide and complete API reference for react-web3-icons.

Getting Started

Install via your package manager:

npm install react-web3-icons
# or
pnpm add react-web3-icons
# or
yarn add react-web3-icons

Import and use any icon component:

import { Ethereum, BitcoinCircle, MetaMask } from 'react-web3-icons';

export function MyComponent() {
  return (
    <div>
      <Ethereum size={32} />
      <BitcoinCircle className="text-orange-500" size={48} />
      <MetaMask title="MetaMask wallet" size={24} />
    </div>
  );
}

Icon Props

All icon components accept the following props in addition to standard SVG attributes.

Icon component props
Prop	Type	Default	Description
size	string \| number	"1em"	Sets both `width` and `height`. Accepts any valid CSS size or a unitless number (treated as pixels).
className	string	—	CSS class applied to the root `<svg>`. Use `text-*` utilities to set the color of `currentColor` mono icons.
title	string	—	Accessible label rendered as a `<title>` element inside the SVG. When provided, `aria-hidden` is removed automatically.
titleId	string	—	Optional ID for the `<title>` element. When both `title` and `titleId` are provided, the SVG sets `aria-labelledby` to that ID.
aria-hidden	boolean	true	Defaults to `true` (decorative). Set to `false` or supply a `title` to expose the icon to screen readers.
style	CSSProperties	—	Inline styles applied to the SVG element.

Import Patterns

Two ways to import icons:

Named import from root entry

import { Ethereum, BitcoinMono } from 'react-web3-icons';

Category subpath (better tree-shaking)

import { Ethereum } from 'react-web3-icons/chain';
import { Bitcoin, Doge } from 'react-web3-icons/coin';
import { MetaMask } from 'react-web3-icons/wallet';

Available subpath categories

react-web3-icons/bridge
react-web3-icons/chain
react-web3-icons/coin
react-web3-icons/defi
react-web3-icons/devtool
react-web3-icons/dex
react-web3-icons/domain
react-web3-icons/exchange
react-web3-icons/explorer
react-web3-icons/marketplace
react-web3-icons/node
react-web3-icons/portfolio
react-web3-icons/storage
react-web3-icons/tracker
react-web3-icons/wallet

Naming Conventions

Icon names use PascalCase. Variant suffixes describe visual differences:

Naming convention suffixes
Suffix	Description
(none)	Default colored variant
Mono	Single-color; uses currentColor — controlled via CSS color
Circle	Icon enclosed in a circle background
CircleMono	Circle variant in single-color
Square	Icon enclosed in a square/rounded background
Wordmark	Full logo with logotype text
Symbol	Symbol-only mark without text
Flat	Single-color simplification of the default design
Alt	Meaningfully different design or color scheme
Light	White/light-colored artwork for dark backgrounds

Example: Ethereum, EthereumMono, EthereumCircle, EthereumCircleMono

Deprecation Policy

When a project rebrands, the old name stays as a deprecated re-export alias and is removed only in a major release (after at least one minor release and 90 days).

A DEPRECATED_ICON_NAMES set is exported to help you filter deprecated aliases at runtime:

import { DEPRECATED_ICON_NAMES } from 'react-web3-icons';
// or from the dedicated subpath (smaller bundle):
import { DEPRECATED_ICON_NAMES } from 'react-web3-icons/deprecated';

// Get only current (non-deprecated) icon names:
import * as icons from 'react-web3-icons';
const activeNames = Object.keys(icons).filter(
  name =>
    !DEPRECATED_ICON_NAMES.has(name) && name !== 'DEPRECATED_ICON_NAMES',
);

React Server Components

Static icons are pure, hook-free components — they render in React Server Components with no 'use client' directive:

// app/page.tsx — Server Component, no directive needed
import { Ethereum } from 'react-web3-icons';

export default function Page() {
  return <Ethereum size={24} />;
}

Only the dynamic components (react-web3-icons/dynamic) are client-only — they lazy-load icon chunks at runtime.

Beyond React

The same icon set ships in three framework-agnostic forms. Raw SVG files live under the svg/ subpath:

import ethereumSvgUrl from 'react-web3-icons/svg/chain/Ethereum.svg';
// or on a CDN:
// https://cdn.jsdelivr.net/npm/react-web3-icons/dist/svg/chain/Ethereum.svg

IconifyJSON collections (web3 colored, web3-mono currentColor) work with Iconify's React, Vue, Svelte, and Web Component packages and with unplugin-icons:

npm install @iconify/react

import { addCollection, Icon } from '@iconify/react';
import web3Icons from 'react-web3-icons/iconify.json';

addCollection(web3Icons);
<Icon icon="web3:chain-ethereum" />;

The manifest is a flat catalog of every export (name, category, and any registered chain ID / slug / ticker); base entries of each artwork unit also carry variants, search aliases, and the brand color. Built for icon pickers and search indexes:

import { ICON_MANIFEST } from 'react-web3-icons/manifest';

const chains = ICON_MANIFEST.filter(
  e => e.category === 'chain' && !e.deprecated && e.variants,
);
// [{ name: 'Ethereum', chainId: 1, slug: 'ethereum', variants: ['', 'Mono', …], brandColor: '#…' }, …]

TypeScript

The IconName union type enumerates every exported icon name and is useful for type-safe dynamic icon selection:

import type { IconName } from 'react-web3-icons';
import * as icons from 'react-web3-icons';

function DynamicIcon({ name, size }: { name: IconName; size?: number }) {
  const Icon = icons[name];
  return <Icon size={size} />;
}