shadcn-logos

shadcn-logos

Copy company logo components into your project. Like shadcn/ui, but for logos.

bunx shadcn-logos@latest add vercel github react

shadcn-logos is not a logo library. Just like shadcn/ui copies UI components into your project, this copies logo components into your project. You get the actual code, so you own it and can style or change it however you like. Logos come from the SVGL registry (650+ brands) plus a small bundled set.

Why

• Copy, don't import. The component lives in your repo. No dependency in node_modules to fight, no version lock-in.
• A size prop that works. <VercelLogo size={32} /> drives width and height. Extra props (className, style, events) forward to the <svg>.
• Your stack. React, Vue, Svelte, or raw optimized SVG.
• Dark mode by default. currentColor mode makes monochrome logos inherit your text color; fill="none" is preserved.
• Clean output. SVGs are minified with svgo; React markup is valid JSX (fill-rule becomes fillRule, and so on).
• Typed. TypeScript components with a typed props interface, validated config, and a tested core.

Why not shadcn add straight from SVGL?

SVGL now publishes its own shadcn registry (npx shadcn@latest add https://svgl.app/r/vercel.json). If you are on React and want each brand's original colors, that works well. shadcn-logos adds Vue, Svelte, and raw SVG output; a size prop; currentColor theming so monochrome logos follow your text color; svgo-minified markup; and fuzzy names (add nextjs github stripe) instead of exact registry slugs.

Quick start

1. Add a logo

No install needed, run it on demand:

bunx shadcn-logos@latest add vercel

Or set up a config once and add many:

bunx shadcn-logos@latest init -y      # detect framework + TypeScript, write logos.config.json
shadcn-logos add vercel github react  # add several at once
shadcn-logos add vercel --dry-run     # preview without writing files
shadcn-logos add vercel --wordmark --dark  # wordmark, dark-theme variant

2. Use it

import { VercelLogo } from './src/components/logos/vercel'

export function Header() {
  return <VercelLogo size={32} className="text-black dark:text-white" />
}

3. Customize it (you own the code)

Open the generated file and change anything: add classes, hard-code a color, tweak the viewBox, wrap it in your own component. There is no library to override.

Documentation

Full documentation lives in docs/:

• Getting started — install, configure, add your first logo.
• Commands — every command, flag, and exit code.
• Configuration — the logos.config.json file, field by field.
• Frameworks and output — React, Vue, Svelte, and raw SVG, plus the size prop and currentColor.
• Troubleshooting — common errors and fixes.
• Architecture — how it works, for contributors.

Commands

Full reference: docs/commands.md.

Supported frameworks

See docs/frameworks.md for real output examples.

What you get

🎨 650+ logos from top companies and tools 📁 Actual component code, copy not import ⚡ Optimized SVGs, small file sizes 🌗 Dark variants and wordmarks when available (--dark, --wordmark) ✨ Fully customizable, edit the code however you want 🔧 TypeScript-ready with full type definitions

Contributing

• Add a logo: drop an SVG in logos/, add a definition to data/logos.ts, open a PR. See CONTRIBUTING_LOGOS.md.
• Contribute code: see CONTRIBUTING.md. The short version:

bun install
bun run check   # lint + type-check + test + build

Credits

• Logo data: SVGL and the free SVGL API by @pheralb.
• Inspired by: shadcn/ui, which made copying components into your project the norm.

License

MIT — use it in any project.