Getting Started

You will need:

• Node.js 20+
• Git

1. Fork this repository and clone it locally:

git clone https://github.com/zenobank/crypto-logos.git

2. Move into the project folder:

cd crypto-logos

3. Install dependencies:

pnpm install

4. Run the development server:

pnpm dev

5. Add your logo files

Add your .svg or .png files into public/library.

6. Add logo metadata

Go to src/api/logos-data.ts and add the information about your logo following the LogoItem model.

• Data model:

interface LogoItem {
  id: string;
  name: string;
  mainCategory: string;
  secondaryCategories: string[];
  logo: LogoDownloadableFiles;
  websiteLink?: string;
  brandKitLink?: string;
}

interface LogoAsset {
  url: string;
  format: LogoFileFormat;
}

type LogoFileFormat = 'svg' | 'png';

interface LogoDownloadableFiles {
  icon: LogoVariantGroup;
  text?: LogoVariantGroup;
}

interface LogoVariantGroup {
  light: LogoAsset[];
  dark?: LogoAsset[];
}

Note

• id: unique key (lowercase, no spaces, usually the brand name).
• name: display name (e.g. Solana (SOL)).
• mainCategory: primary category (e.g. chains).
• secondaryCategories: extra categories (e.g. ["tokens"]).
• websiteLink (optional): official website.
• brandKitLink (optional): brand guidelines / press kit.
• logo: logo files users can download:
  • icon: required.
  • text: optional (wordmark logo).
  • Each supports light and optionally dark.
  • Each variant is an array so you can provide multiple formats (SVG, PNG, etc.).

• Full example with all properties:

{
  id: 'ethereum',
  name: 'Ethereum (ETH)',
  mainCategory: 'chains',
  secondaryCategories: ['tokens', 'defi'],
  websiteLink: 'https://ethereum.org',
  brandKitLink: 'https://ethereum.org/assets',
  logo: {
    icon: {
      light: [
        { url: '/library/ethereum-icon-light.svg', format: 'svg' },
        { url: '/library/ethereum-icon-light.png', format: 'png' }
      ],
      dark: [
        { url: '/library/ethereum-icon-dark.svg', format: 'svg' },
        { url: '/library/ethereum-icon-dark.png', format: 'png' }
      ]
    },
    text: {
      light: [{ url: '/library/ethereum-text-light.svg', format: 'svg' }],
      dark: [{ url: '/library/ethereum-text-dark.svg', format: 'svg' }]
    }
  }
}

And create a pull request with your logo.