How do I use free brand SVG icons in a React app?

[thegdsks]

Short answer: install @thesvg/react, import the brand component, drop it in your JSX.

pnpm add @thesvg/react

import { Github, Figma, Vercel } from '@thesvg/react';

export function Footer() {
  return (
    <div>
      <Github width={24} height={24} />
      <Figma width={24} height={24} />
      <Vercel width={24} height={24} className="text-white" />
    </div>
  );
}

That's it. Tree-shakeable, fully typed, no runtime SVG fetching.

If you don't want a React dep and just need the SVG file, every icon is also available via:

• npm: import githubSvg from 'thesvg/github' returns the raw SVG string + metadata
• CDN: https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/github/default.svg
• Static endpoint: https://thesvg.org/icons/github/default.svg
• Manifest: https://thesvg.org/api/registry.json

5,881 brands across the catalog at thesvg.org, all free. The wrapper code is MIT; brand marks remain trademarks of their respective owners.

Vue and Svelte equivalents (@thesvg/vue, @thesvg/svelte) follow the same pattern.