Logoforge: 900+ Brand Logos for React & shadcn/ui

Logoforge is a React and shadcn/ui component registry that allows you to use 900+ brand logos as typed local React files.

The TypeScript props mirror the SVG files each brand actually has. A component only exposes its real mono, wordmark, and dark options.

Features

• Brand-color SVGs and currentColor mono variants for applicable logos.
• Dark files for marks that need light artwork on dark backgrounds.
• Icon and wordmark lockups when both forms exist.
• Grid, marquee, and bento logo-cloud registry sections.
• Raw SVG endpoints and a static JSON metadata API.
• Six MCP tools for search, category lookup, logo metadata, SVG source, React source, and logo-cloud generation.
• African brand set with MTN, M-Pesa, Flutterwave, Paystack, Moniepoint, OPay, Kuda, and other regional brands.

Use Cases

• Customer and partner logo rows on SaaS landing pages.
• Integration directories and documentation pages for developer products.
• Payment, authentication, cloud, database, and analytics provider lists.
• Shared design-system asset folders that need brand-color, mono, wordmark, or dark files.

How To Use Logoforge

Install Logos with the shadcn CLI

@logoforge is part of the shadcn Registry Directory. If the project does not yet have a components.json file, initialize shadcn first:

npx shadcn@latest init

Install one logo or pass several registry items in one command:

npx shadcn@latest add @logoforge/stripe @logoforge/vercel

Basic Usage

Import the generated files from components/logos/:

import { StripeLogo } from "@/components/logos/stripe";
import { VercelLogo } from "@/components/logos/vercel";
export function PartnerLogos() {
  return (
    <div className="flex items-center gap-6">
      <StripeLogo className="size-8" />
      <StripeLogo
        variant="mono"
        className="size-8 text-muted-foreground"
      />
      <VercelLogo type="wordmark" className="h-6 w-auto" />
    </div>
  );
}

Logo Props and Variant Rules

Dark Mode

For a logo with dedicated dark artwork, mode="auto" uses Tailwind’s .dark class to swap the light and dark SVG files. Logoforge generates the required classes for Tailwind CSS 3 and 4.

mode="light" and mode="dark" select a file directly when that icon or wordmark has a dark variant. These forced modes do not rely on Tailwind theme switching.

import { VercelLogo } from "@/components/logos/vercel";
export function VercelMarks() {
  return (
    <div className="flex items-center gap-6">
      <VercelLogo mode="auto" className="size-8" />
      <VercelLogo mode="dark" className="size-8" />
      <VercelLogo variant="mono" className="size-8 text-foreground" />
    </div>
  );
}

Available Logos

Build a Logo Cloud

Select brands in the Logoforge cloud builder and choose a grid, marquee, or bento layout. The generated shadcn command installs the section plus every logo file imported by that section.

Use Raw SVG Files

Each available asset also has a direct SVG file:

https://logoforge.terravidhal.me/logos/<slug>/<variant>.svg

JSON API

Read all logo metadata or one logo record from the static JSON API. It requires no API key and accepts cross-origin requests.

curl https://logoforge.terravidhal.me/api/logos.json
curl https://logoforge.terravidhal.me/api/logos/stripe.json

MCP Server

The MCP server exposes search_logos, list_categories, get_logo, get_logo_svg, get_logo_component, and build_logo_cloud tools for your AI coding agents like Claude Code:

claude mcp add --transport http logoforge https://logoforge.terravidhal.me/mcp

Alternatives and Related Resources

• Keyline Icons: 580+ SVG Icons for React and shadcn/ui
• Animated Icon Components for React and Next.js – Its Hover
• Searchable, Customizable Icon Picker for shadcn/ui
• Brand Logos & Tech Stack Icons for Web Dev – Coloryfy.css