Use brand SVG logos in a React app

Before you start

• A React app on React 18 or later, or a Next.js App Router project.
• A package manager: npm, pnpm, yarn or bun.

Why components and not copied files

Pasting SVG files into public/ works until a brand updates its mark or you need the dark version. A typed component gives you every variant behind one import, autocompletes the variant names that exist for that brand, and lets the bundler drop every logo you do not use.

Add a logo

1. Step 1Install the React package

   Add @thesvg/react. React is a peer dependency, so nothing else comes with it.

   npm install @thesvg/react

2. Step 2Import a logo by name

   Each brand is a named export in PascalCase, built from its slug: github becomes Github and visual-studio-code becomes VisualStudioCode. Size it with props or classes like any SVG.

   import { Figma, Github } from "@thesvg/react";
   
   export function Logos() {
     return (
       <div className="flex gap-4">
         <Github width={24} height={24} />
         <Figma width={24} height={24} />
       </div>
     );
   }

3. Step 3Pick a variant

   Pass variant to choose another mark, such as mono, light, dark or wordmark. The accepted names are typed per brand, so an unknown variant is a type error, and at runtime it falls back to default.

   <Github />                    {/* the brand colour mark */}
   <Github variant="mono" />     {/* follows the text colour */}
   <Github variant="wordmark" /> {/* the full text logo */}

4. Step 4Label it or hide it

   A logo that carries meaning gets a role and a label. A logo next to the brand name in text is decoration, so hide it from screen readers.

   // Meaningful on its own
   <Github role="img" aria-label="GitHub" width={24} height={24} />
   
   // Next to the word GitHub already
   <Github aria-hidden="true" width={24} height={24} />

5. Step 5Import per icon for the smallest bundle

   Named imports from the package root are tree shaken by modern bundlers. If your build does not tree shake, for example a CommonJS environment, import each logo from its own path so only that logo is included.

   import Github from "@thesvg/react/github";
   import VisualStudioCode from "@thesvg/react/visual-studio-code";

Server components and Next.js

The components have no client state, so they render as server components without a "use client" directive. In the App Router that keeps the SVG markup in the HTML and out of the client bundle.

import { Github } from "@thesvg/react";

export default function Page() {
  return <Github className="size-6" aria-hidden="true" />;
}

Without a build step

For a static page, an email template or a docs site, link the SVG file directly. The URL pattern is https://thesvg.org/icons/{slug}/{variant}.svg, and default is always present.

<img src="https://thesvg.org/icons/github/default.svg" width="32" height="32" alt="GitHub" />