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 (500+ 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 30+ case test suite.

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

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

Command	What it does
init	Create logos.config.json (use -y for defaults).
add <logos...>	Add logos. --dry-run to preview, --force to overwrite, --silent for quiet output.
list	Browse the catalog. --category, --search, --limit.
search <query>	Find logos by name.
cache	Manage the response cache. --stats, --clear.

Full reference: docs/commands.md.

Supported frameworks

Framework	Output	size prop
React	.tsx / .jsx component	width/height bound to size
Vue	.vue component	:width/:height bound to size
Svelte	.svelte component	width/height bound to size
Raw SVG	optimized .svg file	n/a

See docs/frameworks.md for real output examples.

What you get

🎨 500+ logos from top companies and tools 📁 Actual component code, copy not import ⚡ Optimized SVGs, small file sizes 🌗 Dark/light variants when available ✨ 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.