One command. 3,300+ logos. Zero dependencies.

Add production-ready logo components directly to your project

# First time setup (enables React components)
npx logocn@latest init

# Then add any logo
npx logocn@latest add apple

Quick Start

Option 1: SVG Files Only

Get SVG files instantly without any setup:

npx logocn@latest add github twitter linkedin

SVG files will be saved to components/logos/

Option 2: React Components (Recommended)

Enable React component generation for better DX:

Initialize (one-time setup)

npx logocn@latest init

This detects your framework and enables component generation. If you already have logos, components will be generated for them automatically.

Add logos

npx logocn@latest add github

Import and use

import { GithubLogo } from '@/components/logos'

<GithubLogo className="w-8 h-8" />

Installation

No installation required. LogoCN uses npx to run directly:

npx logocn@latest add [logo-name]

Or install globally for frequent use:

npm install -g logocn

Commands

Command	Description
init	Initialize React component generation (one-time setup)
add [logo]	Add a logo to your project (use --keep-svgs to keep original files)
list	List all available logos
search [query]	Search for logos
remove [logo]	Remove a logo from your project
config	View or modify configuration
uninstall	Remove LogoCN and clean up all files

Usage Examples

Basic Usage

import { AppleLogo } from '@/components/logos'

export default function App() {
  return <AppleLogo className="w-12 h-12" />
}

With Tailwind CSS

<AppleLogo className="w-8 h-8 text-gray-900 dark:text-white hover:text-blue-600 transition-colors" />

Payment Methods

import { VisaLogo, MastercardLogo, PaypalLogo, StripeLogo } from '@/components/logos'

export function PaymentMethods() {
  return (
    <div className="flex items-center gap-4">
      <VisaLogo className="h-8" />
      <MastercardLogo className="h-8" />
      <PaypalLogo className="h-8" />
      <StripeLogo className="h-8" />
    </div>
  )
}

Social Links

import { TwitterLogo, GithubLogo, LinkedinLogo } from '@/components/logos'

export function SocialLinks() {
  return (
    <nav className="flex gap-4">
      <a href="https://twitter.com/yourhandle">
        <TwitterLogo className="w-5 h-5" />
      </a>
      <a href="https://github.com/yourusername">
        <GithubLogo className="w-5 h-5" />
      </a>
      <a href="https://linkedin.com/in/yourprofile">
        <LinkedinLogo className="w-5 h-5" />
      </a>
    </nav>
  )
}

Configuration

LogoCN creates a logocn.config.json file after initialization:

{
  "framework": "nextjs",
  "logoDirectory": "components/logos",
  "typescript": true,
  "keepOriginalSvgs": false,  // Keep or remove SVG files after component generation
  "generateComponent": true,
  "version": "0.1.1"
}

You can modify settings using the config command:

# Change logo directory
npx logocn@latest config --set logoDirectory=./public/logos

# Keep SVG files after component generation
npx logocn@latest config --set keepOriginalSvgs=true

# View current configuration
npx logocn@latest config

Premium Features

Transform 3,300 logos into 15,000+ variants. Save 10+ hours per project with professional polish.

Free Tier

Perfect for most projects

3,300+ public brand logos
Basic React components
TypeScript support
MIT License

Premium - $49/year

Professional features & variants

Wordmark variants (logo + text)
Dark/Light mode pairs
Size-optimized (16px, 24px, 48px)
Monochrome variants
Badge styles (App Store, Sign in, etc)
Animation presets
Responsive components
Collection bundles
Export all formats (PNG, ICO, WEBP)
Auto-update command
Priority support

Launching Sep 2025

Premium Examples

Wordmark Variants

# Get logo with company name
npx logocn@latest add github --wordmark

// Use in your app
import { GithubWordmark } from '@/components/logos'

<GithubWordmark className="h-8" /> // Shows GitHub icon + text

Dark/Light Mode

# Generate mode-specific variants
npx logocn@latest add spotify --modes

// Automatic contrast optimization
import { SpotifyLogoDark, SpotifyLogoLight } from '@/components/logos'

<SpotifyLogoDark />  // White logo for dark backgrounds
<SpotifyLogoLight /> // Green logo for light backgrounds

Size Optimization

# Generate size-specific versions
npx logocn@latest add twitter --sizes=16,24,48

// Each optimized for its size
import { TwitterLogo16, TwitterLogo24, TwitterLogo48 } from '@/components/logos'

<TwitterLogo16 />  // Simplified for tiny size
<TwitterLogo48 />  // Full detail for larger display

Collection Bundles

# Add entire collections at once
npx logocn@latest add-collection social-media

// Adds: Facebook, Twitter, Instagram, LinkedIn, TikTok, YouTube
// All with consistent sizing and styling

npx logocn@latest add-collection payment-methods
// Adds: Visa, Mastercard, PayPal, Stripe, etc.

Framework Guides

Next.js

# Add a logo
npx logocn@latest add vercel

# Use in your component
import { VercelLogo } from '@/components/logos'

export default function Footer() {
  return (
    <footer>
      <VercelLogo className="w-20 h-5" />
    </footer>
  )
}

React

# Add logos to your React app
npx logocn@latest add react

# Import and use
import { ReactLogo } from './components/logos'

function App() {
  return <ReactLogo className="logo" />
}

Vue

# Add logos to your Vue app
npx logocn@latest add vue

# Use in your component
<template>
  <VueLogo class="w-32 h-32" />
</template>

<script setup>
import { VueLogo } from '@/components/logos'
</script>