How do I use Web3 Icons in a Next.js app with server components?

Stick to the tree-shakable individual icon components from @web3icons/react, as the dynamic components are client-side only. Import icons directly in server components to avoid hydration issues.

Web3 Icons vs Crypto Icons: which is better for cryptocurrency projects?

Web3 Icons offers more icons and variants specifically for web3, including networks and wallets, while Crypto Icons might be lighter for basic tokens. Choose Web3 Icons for comprehensiveness and design flexibility, but compare based on your project's scope.

How to add a missing token icon to Web3 Icons?

Refer to the Contributing Guide in the README; you'll need to submit a pull request with the SVG file and metadata. The project relies on community contributions for updates.

Does Web3 Icons work with Vue.js or Svelte?

Yes, but only via the @web3icons/core package for raw SVGs. You'll have to handle the integration yourself, as there are no pre-built components for these frameworks.

How to optimize bundle size when using dynamic icons?

Use the individual icon components for static imports to leverage tree-shaking. Reserve dynamic components for cases where icon selection is runtime-dependent and bundle size is less critical.

Can I use Web3 Icons in a static site generator like Gatsby?

Yes, with the tree-shakable React components. Avoid dynamic components if you need build-time optimization, as they rely on client-side loading.

Open-Awesome

Web3 Icons

MITTypeScript@web3icons/react@4.1.19

A comprehensive collection of 2,500+ optimized SVG icons for cryptocurrencies, networks, wallets, and exchanges, available as React components.

Visit Website GitHub

255 stars35 forks0 contributors

What is Web3 Icons?

Web3 Icons is an open-source icon library specifically designed for the web3 ecosystem. It provides over 2,500 optimized SVG icons for cryptocurrencies, blockchain networks, wallets, and exchanges. The project solves the problem of fragmented and inconsistent icon sourcing for developers building blockchain-related applications by offering a single, comprehensive, and well-maintained collection.

Target Audience

Frontend and full-stack developers building cryptocurrency exchanges, wallets, dashboards, DeFi applications, or any web3 interface that requires displaying token logos, network badges, or wallet icons.

Value Proposition

Developers choose Web3 Icons for its unparalleled comprehensiveness, hand-curated quality, and developer-friendly delivery as tree-shakable React components and optimized SVGs. It saves significant time compared to manually collecting and maintaining icon assets from various sources.

Overview

2000+ crypto svg icons for react

Use Cases

Best For

Building cryptocurrency exchange or trading platform interfaces
Creating wallet connection UIs that display wallet logos
Developing portfolio trackers or DeFi dashboards that show token icons
Designing blockchain explorer websites with network badges
Adding web3 branding to documentation or marketing sites
Prototyping blockchain applications quickly with consistent iconography

Not Ideal For

Applications that require server-side rendering with zero client-side JavaScript for icons
Projects outside the web3 ecosystem needing general-purpose or non-crypto icons
Teams wanting pre-styled, drop-in icon components without managing SVG assets or React imports

Pros & Cons

Pros

Comprehensive Web3 Coverage

With over 2,500 hand-curated icons covering tokens, networks, wallets, and exchanges, it's the most extensive library specifically for the web3 space, as highlighted in the badges and metadata.

Design Flexibility

Most icons come in mono, branded, and background variants, allowing developers to maintain consistent styling across different UI contexts without manual editing.

Bundle Size Optimization

Tree-shakable React components ensure only imported icons are included in the bundle, minimizing performance impact for static usage.

Developer Convenience

Dynamic components like TokenIcon and NetworkIcon provide easy runtime loading based on symbols or addresses, though with trade-offs noted in the README.

Cons

Server-Side Rendering Limitations

Dynamic components are explicitly client-side only and not tree-shakable, making them unsuitable for SSR-heavy applications like Next.js with server components.

Framework Specificity

While React components are well-supported, other frameworks like Vue or Angular only get raw SVGs via the core package, requiring extra integration effort.

Bundle Size for Dynamic Use

Using dynamic components can increase bundle size since they load icons at runtime without tree-shaking, a trade-off the README admits for convenience.

Frequently Asked Questions

Related Projects

Devicon

Set of icons representing programming languages, designing & development tools

Stars11,751

Forks2,450

Last commit1 month ago

Browser Logos

🗂 High resolution web browser logos

Stars6,042

Forks387

Last commit9 months ago

Dev icons

devicons - Crisp and clear logos & icons for developers.

Stars2,755

Forks209

Last commit2 months ago

Cryptocurrency icons

A set of icons for all the main cryptocurrencies and altcoins, in a range of styles and sizes.

Stars2,739

Forks672

Last commit1 year ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub