{"_id":"@aave-dao/react-web3-icons","_rev":"2-4871237fd6df22f470b07865dac86a89","name":"@aave-dao/react-web3-icons","dist-tags":{"latest":"1.52.2"},"versions":{"1.50.0":{"name":"@aave-dao/react-web3-icons","version":"1.50.0","keywords":["BGD labs","React","Web3","Assets","Chains","SVG","Icons"],"author":{"name":"BGD labs"},"license":"MIT","_id":"@aave-dao/react-web3-icons@1.50.0","maintainers":[{"name":"npm_avaralabs","email":"npm@avaralabs.com"}],"contributors":[{"url":"https://github.com/smbdy","name":"Karen Kakosyan"},{"url":"https://github.com/Argeare5","name":"Oleksandr Tkach"},{"url":"https://github.com/isArlekin","name":"Aleksey Gorbunov"}],"homepage":"https://github.com/aave-dao/web3-icons/blob/main/README.md","bugs":{"url":"https://github.com/aave-dao/web3-icons/issues"},"dist":{"shasum":"e0b92392d21442aaeb40f9c3ecef953eb6a453ec","tarball":"https://registry.npmjs.org/@aave-dao/react-web3-icons/-/react-web3-icons-1.50.0.tgz","fileCount":6523,"integrity":"sha512-PtCzFIaVr5iGlL9/zUVu5FuQV/e7jXz005JL30vnC4ZaWBEwBjWumbM7xBhI4LRn2YuA6LJYEdczt17cM+PWYg==","signatures":[{"sig":"MEYCIQDpu1gTR3QAs/NNz4tVU9ZDlNwPON0qUe4MA+BuG1eOHQIhAL8pxljKUf+mKrff/lci7OQn6g8s3HxzYbNFIIBUc6ET","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":36678739},"main":"dist/index.js","type":"module","module":"dist/index.js","engines":{"node":">=18"},"gitHead":"42a86262811abc6b450f8d199206dcc332a8ec65","private":false,"scripts":{"build":"tsup","start":"tsup src/index.ts --watch","ci:publish":"npm run build && npm publish --access=public","ci:publish:beta":"npm run build && npm publish --tag beta --access=public"},"typings":"dist/index.d.ts","_npmUser":{"name":"npm_avaralabs","email":"npm@avaralabs.com"},"repository":{"url":"git+https://github.com/aave-dao/web3-icons.git","type":"git"},"_npmVersion":"11.16.0","description":"Svg set of web3 icons.","directories":{},"sideEffects":false,"_nodeVersion":"26.3.1","dependencies":{"to-words":"4.1.0","tailwind-merge":"2.6.0","@loadable/component":"5.16.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","cssnano":"^7.0.6","postcss":"^8.4.47","tailwindcss":"^3.4.14","@types/react":"^18.3.3","autoprefixer":"^10.4.20","@types/loadable__component":"5.13.9"},"peerDependencies":{"react":">=18.3.1 || ^19.0.0","react-dom":">=18.3.1 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-web3-icons_1.50.0_1782204864688_0.033924351625175486","host":"s3://npm-registry-packages-npm-production"}},"1.52.2":{"name":"@aave-dao/react-web3-icons","description":"Svg set of web3 icons.","version":"1.52.2","author":{"name":"BGD labs"},"license":"MIT","private":false,"publishConfig":{"access":"public"},"contributors":[{"name":"Karen Kakosyan","url":"https://github.com/smbdy"},{"name":"Oleksandr Tkach","url":"https://github.com/Argeare5"},{"name":"Aleksey Gorbunov","url":"https://github.com/isArlekin"}],"repository":{"type":"git","url":"git+https://github.com/aave-dao/web3-icons.git"},"bugs":{"url":"https://github.com/aave-dao/web3-icons/issues"},"homepage":"https://github.com/aave-dao/web3-icons/blob/main/README.md","scripts":{"start":"tsup src/index.ts --watch","build":"tsup","ci:publish":"npm run build && npm publish --access=public","ci:publish:beta":"npm run build && npm publish --tag beta --access=public"},"main":"dist/index.js","type":"module","typings":"dist/index.d.ts","module":"dist/index.js","sideEffects":false,"engines":{"node":">=20"},"devDependencies":{"@types/loadable__component":"5.13.9","@types/react":"^18.3.3","autoprefixer":"^10.4.20","cssnano":"^7.0.6","postcss":"^8.4.47","tailwindcss":"^3.4.14","tsup":"^8.3.5"},"dependencies":{"@loadable/component":"5.16.4","to-words":"4.1.0","tailwind-merge":"2.6.0"},"peerDependencies":{"react":">=18.3.1 || ^19.0.0","react-dom":">=18.3.1 || ^19.0.0"},"keywords":["BGD labs","React","Web3","Assets","Chains","SVG","Icons"],"gitHead":"abc9feb50b38e1781196a5992bd28bdcf7a39285","_id":"@aave-dao/react-web3-icons@1.52.2","_nodeVersion":"24.16.0","_npmVersion":"11.13.0","dist":{"integrity":"sha512-fFoyoc1QMOrbbGUVIOgPPEdoPTseP9OXop0MxTQwNruNQ49wZtB0USVs2j8gbnw3YjS6BkoxFylFjBLwkXaCcg==","shasum":"d3166e7e380900cf3ee437b2bd8704347c1b7447","tarball":"https://registry.npmjs.org/@aave-dao/react-web3-icons/-/react-web3-icons-1.52.2.tgz","fileCount":6583,"unpackedSize":36816588,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aave-dao%2freact-web3-icons@1.52.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCugerBSwGfzxqx+duQFKazeCMjQ1kKmbBGya5DaJW+YAIhAPdi1Lc4tUcApnTlWX8z7KyDcrEmDt+fvuuhx/HOmpA5"}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:815326a7-16b2-42f8-ac64-9437a3c76e3f"}},"directories":{},"maintainers":[{"name":"npm_avaralabs","email":"npm@avaralabs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-web3-icons_1.52.2_1782300280564_0.9680603586917791"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-23T08:54:24.467Z","modified":"2026-06-24T11:24:41.174Z","1.50.0":"2026-06-23T08:54:25.027Z","1.52.2":"2026-06-24T11:24:40.884Z"},"bugs":{"url":"https://github.com/aave-dao/web3-icons/issues"},"author":{"name":"BGD labs"},"license":"MIT","homepage":"https://github.com/aave-dao/web3-icons/blob/main/README.md","keywords":["BGD labs","React","Web3","Assets","Chains","SVG","Icons"],"repository":{"type":"git","url":"git+https://github.com/aave-dao/web3-icons.git"},"description":"Svg set of web3 icons.","contributors":[{"name":"Karen Kakosyan","url":"https://github.com/smbdy"},{"name":"Oleksandr Tkach","url":"https://github.com/Argeare5"},{"name":"Aleksey Gorbunov","url":"https://github.com/isArlekin"}],"maintainers":[{"name":"npm_avaralabs","email":"npm@avaralabs.com"}],"readme":"# React web3 icons\n\nPackage with some of web3 assets, chains and web3 wallets icons for easy use in the React.js ecosystem.\n\n### Installation\n#### npm\nnpm i @aave-dao/react-web3-icons\n#### yarn\nyarn add @aave-dao/react-web3-icons\n#### pnpm\npnpm add @aave-dao/react-web3-icons\n\n### Usage\n### 1) You can use `Web3Icon` component.\n#### DynamicIcon type parameters\n| Parameter | Type | Description |\n|:----------------|:-----------------------------| :------ |\n| `symbol?` | `string` | The symbol parameter is not case sensitive, you can pass it as AAVE or aave or AaVe. The result will always be the AAVE asset token icon.\n| `chainId?` | `number` | Id of the chain.\n| `walletKey?` | `string` | Name of the wallet for example \"Metamask\".\n| `brandKey?` | `string` | Address of the pool or name of the brand for example \"Lido\".\n| `mono?` | `boolean` | If true then the icon is displayed in black and white.\n| `assetTag?` | `\"a\", \"stata\", \"stk\"` | Asset tag, can be `a`, a circle is added around the standard icon, and can be `stata`, a circle with cuts is added around the standard icon, and `stk` umbrella circle is added around the standart icon. (automatically determined when the asset symbol is passed from the contract)\n| `formatSymbol?` | `(symbol: string) => string` | If you have a special condition for asset symbol formatting, you can replace the formatting function inside the component.\n| `iconsPack?` | `Record` | Need to pass iconsPack from library, to using static imports. This option is not recommended for the `symbol` icon.\n\n```tsx\nimport { Web3Icon } from \"@aave-dao/react-web3-icons\";\nimport { assetsIconsPack } from \"@aave-dao/react-web3-icons/dist/iconsPacks/assetsIconsPack\";\nimport { chainsIconsPack } from \"@aave-dao/react-web3-icons/dist/iconsPacks/chainsIconsPack\";\nimport { walletsIconsPack } from \"@aave-dao/react-web3-icons/dist/iconsPacks/walletsIconsPack\";\nimport { brandsIconsPack } from \"@aave-dao/react-web3-icons/dist/iconsPacks/brandsIconsPack\";\nexport const ExampleUsage = () => {\n return (\n \n \n \n \n \n {/* static variants */}\n \n \n \n \n
\n );\n};\n```\n### 2) You can import either full or mono icon directly from the package\n```tsx\nimport { AaaveIcon } from \"@aave-dao/react-web3-icons/dist/components/icons/full\";\nimport { AaaveIcon as AaaveMonoIcon } from \"@aave-dao/react-web3-icons/dist/components/icons/mono\";\nexport const UsageExample = () => {\n return (\n <>\n \n \n \n );\n};\n```\n### 3) You can get chain or asset name without rpc call. Also you can check installed browser wallet name, and get icon for this wallet.\n#### Get asset name\n| Parameter | Type | Description |\n|:-----------|:---------------------------------| :------ |\n| `symbol` | `string` | The `symbol` parameter is not case sensitive, you can pass it as `AAVE` or `aave` or `AaVe`. The result will always be the AAVE asset token icon.\n| `formatSymbol` | `(symbol: string) => string` | If you have a special condition for asset symbol formatting, you can replace the formatting function inside the component.\n```tsx\nimport { Web3Icon } from \"@aave-dao/react-web3-icons\";\nexport const UsageExample = () => {\n const assetName = getAssetName({ symbol: \"aave\" });\n return (\n \n {assetName}\n \n
\n );\n};\n```\n#### Get chain name\n| Parameter | Type | Description |\n|:-----------|:---------------------------------| :------ |\n| `chainId` | `number` | Id of the chain.\n```tsx\nimport { Web3Icon } from \"@aave-dao/react-web3-icons\";\nexport const UsageExample = () => {\n const chainName = getChainName({ chainId: 1 });\n return (\n \n {chainName}\n \n
\n );\n};\n```\n#### Check installed wallet name and use icon from package\n```tsx\nimport { getWeb3WalletName } from \"@aave-dao/react-web3-icons/dist/utils\";\nimport dynamic from \"next/dynamic\";\nimport { Web3Icon } from \"@aave-dao/react-web3-icons\";\nconst InstalledBrowserWalletWallet = () => {\n const walletName = getWeb3WalletName();\n return (\n \n {walletName}\n \n
\n );\n};\nexport default dynamic(() => Promise.resolve(InstalledBrowserWalletWallet), {\n ssr: false,\n});\n```\n\n## Copyright\n2024 BGD Labs\n","readmeFilename":"README.md"}