Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/0xa3k5/web3icons
The most comprehensive source for cryptocurrency token & network logos as React components and SVGs.
https://github.com/0xa3k5/web3icons
crypto cryptocurrency icons logos react-icons svg-icons token web3
Last synced: about 1 month ago
JSON representation
The most comprehensive source for cryptocurrency token & network logos as React components and SVGs.
- Host: GitHub
- URL: https://github.com/0xa3k5/web3icons
- Owner: 0xa3k5
- License: mit
- Created: 2024-03-06T19:40:19.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-08-05T17:50:00.000Z (5 months ago)
- Last Synced: 2024-08-05T20:49:02.280Z (5 months ago)
- Topics: crypto, cryptocurrency, icons, logos, react-icons, svg-icons, token, web3
- Language: TypeScript
- Homepage: https://tokenicons.io
- Size: 33 MB
- Stars: 34
- Watchers: 2
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
- awesome-web3 - @web3icons/react - Web3 icons as React components. Includes tokens, coins, networks, wallets. (Software Development / JavaScript)
- awesome-icons - Web3 Icons - Web3 icons as React components. Includes tokens, coins, networks, wallets. (Logos)
README
# Web3 Icons
    
_(previously named token-icons)_
Web3 Icons is the most comprehensive and up-to-date source for tokens, coins, networks and wallet logos as icon format. More than 2,500 icons are ready as optimized SVGs as well as React components.
- All of the icons are carefully curated by hand.
- `type` refers to `wallet`, `token` and `network`
- `variant` refers to `mono` and `branded` (not every icon comes with both variants, but vast majority does.)
> Find the data table of all supported icons [here](https://github.com/0xa3k5/web3icons/blob/main/docs/icons.md)
---
### Website
The Web3 Icons website ([https://tokenicons.io](https://tokenicons.io/)) provides a searchable collection of all available icons. You can browse, search, and download icons directly from the website.
### Contributing
We welcome contributions to `web3icons`! If you'd like to contribute, please refer to our [Contributing Guide](https://github.com/0xa3k5/web3icons/blob/main/CONTRIBUTING.md).
### Monorepo structure
- [`@web3icons/core`](https://github.com/0xa3k5/web3icons/tree/main/packages/core): npm package that serves optimized svgs as svg files
- [`@web3icons/react`](https://github.com/0xa3k5/web3icons/tree/main/packages/react): React components for web3 icons
- [`@web3icons/utils`](https://github.com/0xa3k5/web3icons/tree/main/packages/utils): Private utility and build scripts for the monorepo
- [`apps/website`](https://github.com/0xa3k5/web3icons/tree/main/apps/website): Next.js app for https://tokenicons.io
- [`apps/figma-plugin`](https://github.com/0xa3k5/web3icons/tree/main/apps/figma-plugin): Figma plugin for web3 icons
---
## Installation
To use Web3 Icons in your project, you can install the necessary packages from npm:
```
npm i @web3icons/core @web3icons/react
```
```
yarn add @web3icons/core @web3icons/react
```
```
bun i @web3icons/core @web3icons/react
```
> [!NOTE]
> You can install either of the packages based on your project's needs.
# `@web3icons/react`
### Tree-shaking
`@web3icons/react` is designed to be tree-shaken, meaning that it only includes the Icon Components that are actually used in your project. This can help reduce the size of your bundle and improve performance.
> All of the dynamic components (`, `, ``) also only imports the icons that are used.
## Usage
There are two main ways to use any icon your project needs in a React environment. You can individually import the components or you can import the dynamic component for each `type` of the icons.
1. [Using Individual React Components](#using-individual-components)
2. [Using Dynamic Components](#using-dynamic-components)
1. ``
2. ``
3. ``
### Using Individual Components
All the icons from the React library is prefixed with `Token`, `Network` or `Wallet`
### Props Overview
All of the components extend the [`SVGSVGElement`](https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement) and accepts a `size` prop as number or string.
- **`variant?`**: Determines the style of the icon. It can be either `'mono'` (monochromatic) or `'branded'` (brand-specific). Default is `'mono'`.
- **`size?`**: Specifies the size of the icon. It can be a string or a number.
- **`color?`**: Specifies the color of the icon. Accepts any valid CSS color value.
- **`className?`**: Adds a custom CSS class to the icon for additional styling.
- **`fallback?`**: Renders the fallback when the component can't find a match. (can be passed a string (url) or a ReactNode)
### Tokens
[List of all the available tokens](https://github.com/0xa3k5/web3icons/blob/main/docs/icons.md#tokens)
Cryptocurrency coins and tokens, the react components are prefixed with `Token`, followed by uppercase symbol. `TokenETH`, `TokenBTC`, `TokenGRT`
### Networks
[List of all the available networks](https://github.com/0xa3k5/web3icons/blob/main/docs/icons.md#networks)
Networks and chains, react components are prefixed with `Network` followed by the PascalCase name of the network. `NetworkBinanceSmartChain`, `NetworkEthereum`, `NetworkAvalanche`
### Wallets
[List of all the available wallets](https://github.com/0xa3k5/web3icons/blob/main/docs/icons.md#networks)
Crypto wallets, react components are prefixed with `Wallet` followed by the PascalCase name of the wallet. `WalletRainbow`, `WalletMetamask`, `WalletCoinbase`
```jsx
import {
TokenBTC,
TokenETH,
TokenGRT,
NetworkBinanceSmartChain,
NetworkEthereum,
NetworkAvalanche,
WalletLedger,
WalletMetamask,
WalletSafe,
} from '@web3icons/react'
const App = () => {
return (
<>
{/* Token Icons */}
{/* Network Icons */}
{/* Wallet Icons */}
>
)
}
export default App
```
## Using Dynamic Components
All of the Dynamic Components are designed to provide ease of use, they accept a various custom props which allows the component to correctly import the desired icon.
> [!IMPORTANT]
> Dynamic components are client side components, so they are not compatible with server side rendering.
### Shared Props Overview
- **`variant?`**: Determines the style of the icon (`'mono'` or `'branded'`). Defaults to `'mono'`.
- **`size?`**: Specifies the size of the icon. It can be a string or a number.
- **`color?`**: Specifies the color of the icon. Accepts any valid CSS color value.
- **`className?`**: Adds a custom CSS class to the icon for additional styling.
## ``
### Props
These properties are used specifically for token icons. You must provide either the `symbol` prop or both `address` and `network` props together.
- **`symbol`**: The ticker symbol of the token (e.g., `'ETH'`, `'BTC'`). _If `symbol` is provided, `address` and `network` should not be provided._
- **`address`**: The contract address of the token. _Must be used with the `network` prop._
- **`network`**: The blockchain network where the token is deployed (e.g., `'ethereum'`, `'bsc'`). _Must be used with the `address` prop._
### Example Usage
```jsx
import { TokenIcon } from '@web3icons/react'
// Renders Ethereum icon in mono variant
// Renders GRT icon in branded variant
```
## ``
`` tries to find a match comparing the passed `network` value with the `id` or `name` or `shortName` from the [`networks.json`](https://github.com/0xa3k5/web3icons/blob/main/packages/core/src/metadata/networks.json)
### Props
- **`network`**: The blockchain network (e.g., `'ethereum'`, `'bsc'`).
### Example Usage
```jsx
import { NetworkIcon } from '@web3icons/react'
// from networks.json:
// {
// "id": "binance-smart-chain",
// "name": "BNB Smart Chain",
// "shortname": "BSC",
// "nativeCoinId": "binancecoin",
// "variants": ["branded", "mono"]
// }
// matches the shortname
// matches the id
// matches the name
```
## ``
`` tries to find a match comparing the passed `name` value with the `id` or `name` from the [`wallets.json`](https://github.com/0xa3k5/web3icons/blob/main/packages/core/src/metadata/wallets.json)
```jsx
import { WalletIcon } from '@web3icons/react'
// from wallets.json:
// {
// "id": "wallet-connect",
// "name": "Wallet Connect",
// "variants": ["branded", "mono"]
// }
// matches the id
// matches the name
```
---
# `@web3icons/core`
For projects that don’t use React, icons are also available as `*.svg` files in the `dist/svgs` folder. Which contains folders for types (`tokens`, `networks`, `wallets`) and variants (`branded` and `mono`) svg icons.
- Token names are always ticker in uppercase. `ETH`, `BTC`, `GRT`
- Network names are always kebab-case. `ethereum`, `binance-smart-chain`, `bitcoin`
- Wallet names are always kebab-case. `metamask`, `coinbase-wallet`, `rabby`
### Example file paths:
- `svgs/tokens/branded/BTC.svg`
- `svgs/networks/mono/ethereum.svg`
- `svgs/wallets/branded/metamask.svg`
### Importing the individual SVGs
If you need to directly import the SVGs, here is the naming convention that you can use: `{type} {variant} {symbol}`
- **`Tokens`**: prefixed with `token` followed by `variant` and the uppercase ticker. `tokenBrandedBTC`, `tokenMonoGRT`
- **`Networks`**: prefixed with `network` followed by `variant` and the PascalCase network name. `networkMonoMetis`, `networkBrandedBinanceSmartChain`
- **`Wallets`**: prefixed with `wallet` followed by `variant` and the PascalCase wallet name. `walletBrandedRainbow`, `walletBrandedImtoken`, `walletBrandedWalletConnect`
## Metadata
The `@web3icons/core` package also provides comprehensive metadata for each cryptocurrency token in a convenient JSON format, which you can import directly into your project.
If you need the json file, you can import it directly:
```js
import { tokens, networks, wallets } from '@web3icons/core/metadata'
```
### Importing the `svgs` object
`svgs` object contains objects for each type
> [!NOTE]
> This would import thousands of svgs into your project and would increase the bundle size, it is not recommended for general use.
```jsx
import { svgs } from '@web3icons/core'
const IconDisplay = () => {
return (
)
}
```
### Dynamic import
```js
const type = 'tokens'
const variant = 'branded'
const iconName = 'BTC'
const svgModule = await import(
`@web3icons/core/svgs/${type}/${variant}/${iconName}.svg`
)
const response = await fetch(svgModule.default.src)
const svgContent = await response.text()
console.log(svgContent)
```
---
## License
[MIT](https://github.com/0xa3k5/web3icons/blob/main/LICENSE)
## Give a Star ⭐️
If you like this project, please give it a star ⭐️ on GitHub. This helps me to maintain the project and make it better for everyone.