Background

Chain Components

Blockchain icons resource for cracked frontend devs

npm install chain-components

Usage

Import components from package and use freely in pages & components:

import { ArbitrumLightIcon } from 'chain-components';

export default function Page() {
  return (
    <ArbitrumLightIcon />
  );
}

Style with Tailwind using className prop:

export default function Page() {
  return (
    <ArbitrumLightIcon className='h-8 w-8' />
  );
}

Make it a circle:

<BaseDarkIcon className='h-8 w-8 rounded-full'/>

Pass props if you're not using Tailwind:

export default function Page() {
  return (
    <ArbitrumLightIcon
      width={500}
      height={500}
    />
  );
}

Download component library:

Download or copy chainComponents.tsx into your React or Next.js app's desired directory. Import components from the local directory and use them freely in pages & components:

import { ArbitrumLightIcon } from '@/chain-components.ts';

export default function Page() {
  return (
    <ArbitrumLightIcon className='h-8 w-8' />
  );
}

Download SVG Library:

Download or copy chainComponents.tsx into your React or Next.js app's public/chain-components directory. This is a good resource for designers, or if you just use Next Image tags:

import ArbitrumLightIcon from 'public/images/chainComponents/ArbitrumLightIcon';

export default function Page() {
  return (
    <Image
      src={ArbitrumLightIcon}
      width={500}
      height={500}
      alt="ArbitrumLightIcon"
    />
  );
}

Copy in component code:

Select any icon to copy the formatted react component code, or download a single tsx file. Example:

export const BaseDarkIcon = (props) => {
  return (
    <svg viewBox="0 0 456 526" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M203.123 14.5656C218.593 5.63395 237.653 5.63395 253.123 14.5656L430.52 116.985C445.99 125.917 455.52 142.423 455.52 160.287V365.131C455.52 382.995 445.989 399.502 430.519 408.433L253.122 510.846C237.653 519.777 218.594 519.777 203.125 510.846L25.728 408.433C10.2573 399.502 0.726807 382.995 0.726807 365.131V160.287C0.726807 142.423 10.2568 125.917 25.7268 116.985L203.123 14.5656Z" fill="url(#paint0_linear_705_126)"/>
      <path d="M227.843 421.694C315.815 421.694 387.123 350.513 387.123 262.694C387.123 174.875 315.815 103.694 227.843 103.694C144.388 103.694 75.9285 167.778 69.1233 249.326H279.652V276.063H69.1233C75.9285 357.611 144.388 421.694 227.843 421.694Z" fill="url(#paint1_radial_705_126)"/>
      <path d="M227.843 421.694C315.815 421.694 387.123 350.513 387.123 262.694C387.123 174.875 315.815 103.694 227.843 103.694C144.388 103.694 75.9285 167.778 69.1233 249.326H279.652V276.063H69.1233C75.9285 357.611 144.388 421.694 227.843 421.694Z" fill="url(#paint2_radial_705_126)"/>
      <defs>
        <linearGradient id="paint0_linear_705_126" x1="326.886" y1="53.8995" x2="28.0167" y2="628.41" gradientUnits="userSpaceOnUse">
          <stop stopColor="#0052FF"/>
          <stop offset="1" stopColor="#003199"/>
        </linearGradient>
        <radialGradient id="paint1_radial_705_126" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(316.319 164.909) rotate(121.405) scale(300.86)">
          <stop stopColor="white"/>
          <stop offset="1" stopColor="white" stopOpacity="0.73"/>
        </radialGradient>
        <radialGradient id="paint2_radial_705_126" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(316.319 164.909) rotate(121.405) scale(300.86)">
          <stop stopColor="white"/>
          <stop offset="1" stopColor="white" stopOpacity="0.73"/>
        </radialGradient>
      </defs>
    </svg>
  );
};

Copy in SVG code:

Select any icon to copy or download the raw SVG code.

Github

Docs

Download

Chains Tokens