Skip to main content
Install Logo.dev’s React components with one shadcn CLI command. Each component lands in your project as code you own, with fallbacks, retina images, dark mode, and key handling already wired.
Get your publishable key from the Logo.dev dashboard to get started.

​
Install a component

In any project set up with shadcn/ui, install from the registry URL: 
npx shadcn@latest add https://www.logo.dev/r/logo.json
Or install from the logo-dev/logo-api repo, pinned to a branch, tag, or commit: 
npx shadcn@latest add logo-dev/logo-api/logo
The CLI copies the source into your project, installs any shadcn primitives the component composes, and adds the environment variables it needs to .env.local:
  • NEXT_PUBLIC_LOGO_DEV_TOKEN: your publishable key, safe in client code. Every component reads it.
  • LOGO_DEV_SECRET_KEY: your secret key, server-only. Only brand-search needs it.
Both come from the dashboard.

​
What’s in the registry

ComponentInstall nameWhat it does
LogologoA logo that never breaks: domain, name, ticker, crypto, or ISIN lookup with retina srcSet, dark-mode variants, and layered fallbacks
Logo Avatarlogo-avatarA logo in a shadcn Avatar shell with initials fallback, for CRM rows and transaction feeds
Brand Searchbrand-searchCompany autocomplete backed by the Search API, plus a server route that keeps your secret key private
Logo Walllogo-wallA customer or integration logo grid with grayscale-to-color hover
AttributionattributionThe attribution link free plans require in production
Logo liblogo-libThe typed URL builder underneath all of the above, useful on its own
Render a logo from any identifier your data already has: 
import { Logo } from "@/components/ui/logo";

<Logo domain="stripe.com" size={40} />
<Logo ticker="AAPL" label="Apple" size={40} />
<Logo domain="acme.dev" fallback="initials" size={40} />
theme="auto" (the default) renders light and dark variants toggled by Tailwind’s dark: variant, so the right logo shows in both color schemes without a theme provider. fallback controls what renders when no logo exists: the API’s generated monogram (default), a local initials tile, or any React node you pass.

​
Logo Avatar

Drop a logo into account lists and transaction feeds: 
import { LogoAvatar } from "@/components/ui/logo-avatar";

<LogoAvatar domain="stripe.com" size={32} />
<LogoAvatar ticker="AMZN" label="Amazon" size={32} />
Let users pick their company by typing a name: 
import { BrandSearch } from "@/components/brand-search";

<BrandSearch onSelect={(brand) => save(brand.domain)} />
Typing is debounced at 200ms with stale requests aborted, and each suggestion shows the company’s logo. The install includes app/api/logo-dev/search/route.ts, a Next.js route that proxies the Search API so your secret key never reaches the browser. Not on Next.js? Recreate that proxy in your backend and pass its path via the endpoint prop.
The proxy route ships without authentication, so anyone who can reach it can spend your Search API quota. Add rate limiting or your own auth before you deploy it to production.

​
Logo Wall

Build a customer logo grid from a list of domains: 
import { LogoWall } from "@/components/logo-wall";

<LogoWall brands={["stripe.com", "vercel.com", "linear.app", "notion.so"]} />
Logos render muted grayscale and regain color on hover. The wall includes the Logo.dev attribution link by default, which free plans require in production. On a paid plan, turn it off with attribution={false}.

​
Requirements

The components target React 19 (React 18.3 works, without ref forwarding) and Tailwind CSS v4 with shadcn/ui tokens. They have zero npm dependencies of their own: shadcn primitives like avatar, command, and popover install from ui.shadcn.com as needed.

​
Next steps

Use cases

The patterns these components implement, with live demos.

logo-dev/logo-api

Component source, issues, and contributions.