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 merged (shallow spread) on top of any `IconContext` defaults.

IconContext

Wrap a subtree with IconContext.Provider to apply default props to every icon inside it. Per-icon props always take precedence over context defaults.

import { IconContext } from 'react-web3-icons';

// Apply a default size and color to all icons in the subtree
<IconContext.Provider value={{ size: 24, className: 'text-gray-700' }}>
  <Ethereum />      {/* size=24, text-gray-700 */}
  <Bitcoin size={48} /> {/* size=48 (overrides context), text-gray-700 */}
</IconContext.Provider>

Context value accepts all IconProps.

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 !== 'IconContext' &&
    name !== 'DEPRECATED_ICON_NAMES',
);

React Server Components

Icons use useId and useContext, so they cannot render in React Server Components directly. Mark the importing file as a Client Component:

// my-component.tsx
'use client';

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

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

Alternatively, create a small re-export wrapper:

// icons.tsx — client boundary
'use client';
export { Ethereum, Bitcoin } from 'react-web3-icons';

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} />;
}