Logoforge

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

PropTypeDefaultDescription
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.
titlestringthe brand nameAccessible name (role="img"). Pass "" for decorative logos (aria-hidden).
…propsSVGProps—className, style, width, height, onClick… go straight to the <svg>.

Examples

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 */}

What installing changes in your project

npx shadcn add @logoforge/stripe writes one file, components/logos/stripe.tsx. No npm dependency is installed, no CSS is added, no other file is touched: the component imports nothing but react. Removing a logo is deleting that file.

The shadcn CLI expects a components.json. If your project has none, the CLI offers to run shadcn init first — and that step does edit your global CSS (theme variables) and adds a lib/utils helper. Not using shadcn? Skip the CLI: open the logo page, click Copy React and paste the component into your project. Same file, zero setup.

Requirements

  • React 18 or 19, any framework: Next.js, Vite, Remix, React Router, Astro islands…
  • TypeScript is optional — rename the file to .jsx and drop the type lines if you use plain JavaScript.
  • Automatic dark mode (mode="auto") works with Tailwind CSS v3 and v4, using the .dark class strategy (the shadcn default). Without Tailwind, pass mode="light" or mode="dark" from your own theme state — or use variant="mono", which works everywhere.

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.

Vue, Svelte, Angular, plain HTML

The components are React-only, but every logo is also a plain SVG file that works in any stack:

  • As an image: <img src="https://logoforge.terravidhal.me/logos/stripe/icon.svg" alt="Stripe" />
  • Inline: Copy SVG on the logo page and paste it into a .vue, .svelte or HTML template — the mono file uses currentColor, so it takes your text color.
  • In bulk: download the files, or fetch them through the JSON API.