Add brand logos to a project from the command line

Before you start

• Node.js 18 or later, because the CLI uses the built in fetch.
• A project folder to add files to.

Copy a file or import a package

Copying suits a handful of logos you want to own: a file in your repository with no runtime package behind it. If you want every logo behind one typed import instead, use a component package for React or for Vue and Svelte.

Find and add logos

1. Step 1Find the slug

   Every logo has a slug. Search by brand name, slug or keyword, and quote a search with spaces. --limit shows more than the first results.

   npx @thesvg/cli search github
   npx @thesvg/cli search "version control" --limit 30

2. Step 2Browse a category

   list shows logos from the registry, optionally narrowed to one category.

   npx @thesvg/cli list --category AI --limit 100

3. Step 3Add a logo

   With no flags, add saves the default variant as an SVG file. It picks the folder from your project: ./public/icons when a public folder exists, else ./src/icons when a src folder exists, else ./icons.

   npx @thesvg/cli add github

4. Step 4Add several at once, into your own folder

   Pass several slugs in one call, and --dir to choose the output folder. The folder is created if it does not exist.

   npx @thesvg/cli add github figma stripe --dir ./src/assets/icons

5. Step 5Pick a variant

   --variant takes default, light, dark, mono or wordmark. The file name carries the variant, so the dark GitHub mark lands as github-dark.svg. If a brand does not have the variant you asked for, the CLI says so, lists the ones it has, and falls back to default.

   npx @thesvg/cli add github --variant dark

6. Step 6Write a React or Vue component instead

   --format jsx writes a typed React component in a .tsx file, and --format vue writes a single file component with the SVG in its template.

   npx @thesvg/cli add github --format jsx --dir ./components/icons
   npx @thesvg/cli add github --format vue

7. Step 7Install it for repeated use

   npx runs the CLI without installing it. If you add logos often, install it globally and call thesvg directly.

   npm install -g @thesvg/cli
   thesvg add github

What a component file looks like

With --format jsx, github.tsx exports GithubIcon, a component typed with the standard SVG props, wrapped around the logo markup. The generated <svg> does not spread those props yet, so add {...props} to it once if you want to pass className or aria-label from the call site.

import type { SVGProps } from "react";

export function GithubIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="...">{/* the logo paths */}</svg>
  );
}

export default GithubIcon;