{"id":14191719,"url":"https://github.com/0xa3k5/web3icons","last_synced_at":"2026-02-03T13:07:04.550Z","repository":{"id":227478158,"uuid":"768276429","full_name":"0xa3k5/web3icons","owner":"0xa3k5","description":"2000+ crypto svg icons for react","archived":false,"fork":false,"pushed_at":"2026-01-28T16:10:00.000Z","size":66362,"stargazers_count":201,"open_issues_count":4,"forks_count":29,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-01-29T06:58:02.405Z","etag":null,"topics":["blockchain","chain","crypto","icons","logos","network","react-icons","svg-icons","token","wallet","web3"],"latest_commit_sha":null,"homepage":"https://web3icons.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/0xa3k5.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2024-03-06T19:40:19.000Z","updated_at":"2026-01-28T16:12:58.000Z","dependencies_parsed_at":"2024-03-20T09:21:15.165Z","dependency_job_id":"20569b16-ef74-4a44-96e8-02e1984e32bb","html_url":"https://github.com/0xa3k5/web3icons","commit_stats":{"total_commits":236,"total_committers":11,"mean_commits":"21.454545454545453","dds":0.1313559322033898,"last_synced_commit":"75b01aff61b4e28ae56bf5c4dadcaeefff6c09c2"},"previous_names":["token-icons/monorepo","0xa3k5/token-icons","0xa3k5/web3icons"],"tags_count":324,"template":false,"template_full_name":null,"purl":"pkg:github/0xa3k5/web3icons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xa3k5%2Fweb3icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xa3k5%2Fweb3icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xa3k5%2Fweb3icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xa3k5%2Fweb3icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0xa3k5","download_url":"https://codeload.github.com/0xa3k5/web3icons/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xa3k5%2Fweb3icons/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29046503,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-03T10:09:22.136Z","status":"ssl_error","status_checked_at":"2026-02-03T10:09:16.814Z","response_time":96,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blockchain","chain","crypto","icons","logos","network","react-icons","svg-icons","token","wallet","web3"],"created_at":"2024-08-18T17:01:33.486Z","updated_at":"2026-02-03T13:07:04.509Z","avatar_url":"https://github.com/0xa3k5.png","language":"TypeScript","funding_links":[],"categories":["Software Development","TypeScript","Logos"],"sub_categories":["JavaScript"],"readme":"![Web3 Icons](https://raw.githubusercontent.com/0xa3k5/web3icons/main/apps/figma-plugin/src/assets/cover.png)\n\n# Web3 Icons\n\n![Tokens](https://img.shields.io/badge/dynamic/json?style=flat\u0026color=FF3D00\u0026label=tokens\u0026query=length\u0026url=https://raw.githubusercontent.com/0xa3k5/web3icons/main/packages/common/src/metadata/tokens.json) ![Networks](https://img.shields.io/badge/dynamic/json?style=flat\u0026color=FF3D00\u0026label=networks\u0026query=length\u0026url=https://raw.githubusercontent.com/0xa3k5/web3icons/main/packages/common/src/metadata/networks.json) ![Wallets](https://img.shields.io/badge/dynamic/json?style=flat\u0026color=FF3D00\u0026label=wallets\u0026query=length\u0026url=https://raw.githubusercontent.com/0xa3k5/web3icons/main/packages/common/src/metadata/wallets.json) ![NPM Version](https://img.shields.io/npm/v/%40web3icons%2Freact?style=flat\u0026label=%40web3icons%2Freact) ![NPM Version](https://img.shields.io/npm/v/%40web3icons%2Fcore?style=flat\u0026label=%40web3icons%2Fcore)\n\n_(previously named token-icons)_\n\nWeb3 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.\n\n- All of the icons are carefully curated by hand.\n- `type` refers to `wallet`, `token` and `network`\n- `variant` refers to `mono` and `branded` (not every icon comes with both variants, but vast majority does.)\n\n\u003e Find the data table of all supported icons [here](https://github.com/0xa3k5/web3icons/blob/main/docs/icons.md)\n\n---\n\n### Website\n\nThe 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.\n\n### Contributing\n\nWe 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).\n\n### Monorepo structure\n\n- [`@web3icons/core`](https://github.com/0xa3k5/web3icons/tree/main/packages/core): npm package that serves optimized svgs as svg files\n- [`@web3icons/react`](https://github.com/0xa3k5/web3icons/tree/main/packages/react): React components for web3 icons\n- [`@web3icons/utils`](https://github.com/0xa3k5/web3icons/tree/main/packages/utils): Private utility and build scripts for the monorepo\n- [`apps/website`](https://github.com/0xa3k5/web3icons/tree/main/apps/website): Next.js app for https://tokenicons.io\n- [`apps/figma-plugin`](https://github.com/0xa3k5/web3icons/tree/main/apps/figma-plugin): Figma plugin for web3 icons\n\n---\n\n## Installation\n\nTo use Web3 Icons in your project, you can install the necessary packages from npm:\n\n```\nnpm i @web3icons/core @web3icons/react\n```\n\n```\nyarn add @web3icons/core @web3icons/react\n```\n\n```\nbun i @web3icons/core @web3icons/react\n```\n\n\u003e [!NOTE]\n\u003e You can install either of the packages based on your project's needs.\n\n# `@web3icons/react`\n\n### Tree-shaking\n\n`@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.\n\n\u003e All of the dynamic components (`\u003cTokenIcon /\u003e, \u003cNetworkIcon /\u003e`, `\u003cWalletIcon /\u003e`) also only imports the icons that are used.\n\n## Usage\n\nThere 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.\n\n1. [Using Individual React Components](#using-individual-components)\n2. [Using Dynamic Components](#using-dynamic-components)\n   1. `\u003cTokenIcon /\u003e`\n   2. `\u003cNetworkIcon /\u003e`\n   3. `\u003cWalletIcon /\u003e`\n\n### Using Individual Components\n\nAll the icons from the React library is prefixed with `Token`, `Network` or `Wallet`\n\n### Props Overview\n\nAll 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.\n\n- **`variant?`**: Determines the style of the icon. It can be either `'mono'` (monochromatic) or `'branded'` (brand-specific). Default is `'mono'`.\n- **`size?`**: Specifies the size of the icon. It can be a string or a number.\n- **`color?`**: Specifies the color of the icon. Accepts any valid CSS color value.\n- **`className?`**: Adds a custom CSS class to the icon for additional styling.\n- **`fallback?`**: Renders the fallback when the component can't find a match. (can be passed a string (url) or a ReactNode)\n\n### Tokens\n\n[List of all the available tokens](https://github.com/0xa3k5/web3icons/blob/main/docs/icons.md#tokens)\n\nCryptocurrency coins and tokens, the react components are prefixed with `Token`, followed by uppercase symbol. `TokenETH`, `TokenBTC`, `TokenGRT`\n\n### Networks\n\n[List of all the available networks](https://github.com/0xa3k5/web3icons/blob/main/docs/icons.md#networks)\n\nNetworks and chains, react components are prefixed with `Network` followed by the PascalCase name of the network. `NetworkBinanceSmartChain`, `NetworkEthereum`, `NetworkAvalanche`\n\n### Wallets\n\n[List of all the available wallets](https://github.com/0xa3k5/web3icons/blob/main/docs/icons.md#networks)\n\nCrypto wallets, react components are prefixed with `Wallet` followed by the PascalCase name of the wallet. `WalletRainbow`, `WalletMetamask`, `WalletCoinbase`\n\n```jsx\nimport {\n  TokenBTC,\n  TokenETH,\n  TokenGRT,\n  NetworkBinanceSmartChain,\n  NetworkEthereum,\n  NetworkAvalanche,\n  WalletLedger,\n  WalletMetamask,\n  WalletSafe,\n} from '@web3icons/react'\n\nconst App = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cdiv\u003e\n        {/* Token Icons */}\n        \u003cTokenBTC size={64} variant=\"branded\" className=\"my-custom-class\" /\u003e\n        \u003cTokenETH size={64} variant=\"branded\" className=\"my-custom-class\" /\u003e\n        \u003cTokenGRT size={64} variant=\"branded\" className=\"my-custom-class\" /\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        {/* Network Icons */}\n        \u003cNetworkEthereum\n          size={64}\n          variant=\"branded\"\n          className=\"my-custom-class\"\n        /\u003e\n        \u003cNetworkAvalanche\n          size={64}\n          variant=\"branded\"\n          className=\"my-custom-class\"\n        /\u003e\n        \u003cNetworkBinanceSmartChain\n          size={64}\n          variant=\"branded\"\n          className=\"my-custom-class\"\n        /\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        {/* Wallet Icons */}\n        \u003cWalletLedger size={64} variant=\"branded\" className=\"my-custom-class\" /\u003e\n        \u003cWalletMetamask\n          size={64}\n          variant=\"branded\"\n          className=\"my-custom-class\"\n        /\u003e\n        \u003cWalletSafe size={64} variant=\"branded\" className=\"my-custom-class\" /\u003e\n      \u003c/div\u003e\n    \u003c/\u003e\n  )\n}\n\nexport default App\n```\n\n## Using Dynamic Components\n\nAll 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.\n\n\u003e [!IMPORTANT]\n\u003e Dynamic components are client side components, so they are not compatible with server side rendering.\n\n### Shared Props Overview\n\n- **`variant?`**: Determines the style of the icon (`'mono'` or `'branded'`). Defaults to `'mono'`.\n- **`size?`**: Specifies the size of the icon. It can be a string or a number.\n- **`color?`**: Specifies the color of the icon. Accepts any valid CSS color value.\n- **`className?`**: Adds a custom CSS class to the icon for additional styling.\n\n## `\u003cTokenIcon /\u003e`\n\n### Props\n\nThese properties are used specifically for token icons. You must provide either the `symbol` prop or both `address` and `network` props together.\n\n- **`symbol`**: The ticker symbol of the token (e.g., `'ETH'`, `'BTC'`). _If `symbol` is provided, `address` and `network` should not be provided._\n- **`address`**: The contract address of the token. _Must be used with the `network` prop._\n- **`network`**: The blockchain network where the token is deployed (e.g., `'ethereum'`, `'bsc'`). _Must be used with the `address` prop._\n\n### Example Usage\n\n```jsx\nimport { TokenIcon } from '@web3icons/react'\n\n// Renders Ethereum icon in mono variant\n\u003cTokenIcon symbol=\"eth\" size={32} color=\"#000\" /\u003e\n\n// Renders GRT icon in branded variant\n\u003cTokenIcon address=\"0xc944e90c64b2c07662a292be6244bdf05cda44a7\" network=\"ethereum\" size=\"2rem\" /\u003e\n```\n\n## `\u003cNetworkIcon /\u003e`\n\n`\u003cNetworkIcon /\u003e` 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)\n\n### Props\n\n- **`network`**: The blockchain network (e.g., `'ethereum'`, `'bsc'`).\n\n### Example Usage\n\n```jsx\nimport { NetworkIcon } from '@web3icons/react'\n\n// from networks.json:\n// {\n// \"id\": \"binance-smart-chain\",\n// \"name\": \"BNB Smart Chain\",\n// \"shortname\": \"BSC\",\n// \"nativeCoinId\": \"binancecoin\",\n// \"variants\": [\"branded\", \"mono\"]\n// }\n\n\u003cNetworkIcon network=\"bsc\" size={32} variant=\"branded\" /\u003e // matches the shortname\n\u003cNetworkIcon network=\"binance-smart-chain\" size={32} variant=\"branded\" /\u003e // matches the id\n\u003cNetworkIcon network=\"bnb smart chain\" size={32} variant=\"branded\" /\u003e // matches the name\n```\n\n## `\u003cWalletIcon /\u003e`\n\n`\u003cWalletIcon /\u003e` 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)\n\n```jsx\nimport { WalletIcon } from '@web3icons/react'\n\n// from wallets.json:\n// {\n// \"id\": \"wallet-connect\",\n// \"name\": \"Wallet Connect\",\n// \"variants\": [\"branded\", \"mono\"]\n// }\n\n\u003cWalletIcon name=\"wallet-connect\" size={32} variant=\"branded\" /\u003e // matches the id\n\u003cWalletIcon name=\"wallet connect\" size={32} variant=\"branded\" /\u003e // matches the name\n\n```\n\n---\n\n# `@web3icons/core`\n\nFor 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.\n\n- Token names are always ticker in uppercase. `ETH`, `BTC`, `GRT`\n- Network names are always kebab-case. `ethereum`, `binance-smart-chain`, `bitcoin`\n- Wallet names are always kebab-case. `metamask`, `coinbase-wallet`, `rabby`\n\n### Example file paths:\n\n- `svgs/tokens/branded/BTC.svg`\n- `svgs/networks/mono/ethereum.svg`\n- `svgs/wallets/branded/metamask.svg`\n\n### Importing the individual SVGs\n\nIf you need to directly import the SVGs, here is the naming convention that you can use: `{type} {variant} {symbol}`\n\n- **`Tokens`**: prefixed with `token` followed by `variant` and the uppercase ticker. `tokenBrandedBTC`, `tokenMonoGRT`\n- **`Networks`**: prefixed with `network` followed by `variant` and the PascalCase network name. `networkMonoMetis`, `networkBrandedBinanceSmartChain`\n- **`Wallets`**: prefixed with `wallet` followed by `variant` and the PascalCase wallet name. `walletBrandedRainbow`, `walletBrandedImtoken`, `walletBrandedWalletConnect`\n\n## Metadata\n\nThe `@web3icons/core` package also provides comprehensive metadata for each cryptocurrency token in a convenient JSON format, which you can import directly into your project.\n\nIf you need the json file, you can import it directly:\n\n```js\nimport { tokens, networks, wallets } from '@web3icons/core/metadata'\n```\n\n### Importing the `svgs` object\n\n`svgs` object contains objects for each type\n\n\u003e [!NOTE]\n\u003e This would import thousands of svgs into your project and would increase the bundle size, it is not recommended for general use.\n\n```jsx\nimport { svgs } from '@web3icons/core'\n\nconst IconDisplay = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cimg src={svgs.tokens.brandedETH} alt=\"Ethereum Branded Token Icon\" /\u003e\n      \u003cimg\n        src={svgs.networks.brandedEthereum}\n        alt=\"Ethereum Branded Network Icon\"\n      /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Dynamic import\n\n```js\nconst type = 'tokens'\nconst variant = 'branded'\nconst iconName = 'BTC'\n\nconst svgModule = await import(\n  `@web3icons/core/svgs/${type}/${variant}/${iconName}.svg`\n)\nconst response = await fetch(svgModule.default.src)\nconst svgContent = await response.text()\n\nconsole.log(svgContent)\n```\n\n---\n\n## License\n\n[MIT](https://github.com/0xa3k5/web3icons/blob/main/LICENSE)\n\n## Give a Star ⭐️\n\nIf you like this project, please give it a star ⭐️ on GitHub. This helps me to maintain the project and make it better for everyone.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xa3k5%2Fweb3icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0xa3k5%2Fweb3icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xa3k5%2Fweb3icons/lists"}