React component

Each logo compiles to one typed component with no dependency but React. The props below are generated per logo: TypeScript only offers the options that logo really has.

Props

Prop	Type	Default	Description
variant	"color" \| "mono"	"color"	Brand colors, or a single currentColor shape. Only logos with a mono file accept "mono".
type	"icon" \| "wordmark"	"icon"	The mark alone, or the full lockup. Only on logos that have a wordmark.
mode	"auto" \| "light" \| "dark"	"auto"	auto swaps files with your .dark class; light / dark force one file. Only on logos with a dark variant.
title	string	the brand name	Accessible name (role="img"). Pass "" for decorative logos (aria-hidden).
…props	SVGProps	—	className, style, width, height, onClick… go straight to the <svg>.

Examples

<GithubLogo className="size-8" />                    {/* color, auto dark mode */}
<GithubLogo variant="mono" className="size-5 text-muted-foreground" />
<StripeLogo type="wordmark" className="h-7 w-auto" />
<VercelLogo mode="dark" />                           {/* always the dark file */}
<SlackLogo title="" />                               {/* decorative */}

Sizing

The SVG defaults to height="1em" with its width following the aspect ratio, so it scales with the surrounding text. Set an explicit size with classes (size-8, h-6 w-auto) or width / height props.

Dark mode

Logos that would vanish on a dark page — near-black marks like GitHub, Vercel or Notion — ship a dark file. With mode="auto" the component renders both and hides one with Tailwind's dark: variant, so it follows the same .dark class as the rest of your shadcn UI, with no flash and no JavaScript. Not using Tailwind? Pass mode="light" or mode="dark" from your own theme state.

Mono

variant="mono" paints with currentColor: set a text color and the logo follows it — ideal for grayscale logo clouds. Badge-style marks (Adobe apps, AWS services) get a knockout mono where the symbol is cut out of its shape. A handful of logos have no mono because one would lose their detail.

Accessibility

By default the logo is announced as an image named after the brand. Next to a visible label, pass title="" so screen readers don't read the name twice.

Without React

Use the SVG files directly (getting started) or fetch them through the JSON API.