Typed React SVG components for all 3,800+ brand icons from thesvg.org.

• Zero runtime dependencies (React is a peer dep)
• TypeScript strict mode with full SVGProps<SVGSVGElement> support
• forwardRef on every component for imperative access
• Tree-shakeable ESM, import only what you use
• Individual icon imports for maximum bundle efficiency
• Compatible with Next.js 16, Turbopack, and React 19
• Works as Server Components (no "use client" needed)

npm install @thesvg/react

pnpm add @thesvg/react

yarn add @thesvg/react

bun add @thesvg/react

React 18 or later is required as a peer dependency.

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

export function MyComponent() {
  return (
    <div>
      <Github width={24} height={24} />
      <VisualStudioCode width={24} height={24} className="text-blue-500" />
      <Figma width={32} height={32} aria-label="Figma" />
    </div>
  );
}

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

Each icon is a separate module so bundlers that do not support tree-shaking (e.g. CommonJS environments) will still include only the icons you import.

Icons work as Server Components by default. No "use client" directive needed:

// app/page.tsx (Server Component)
import { Github, Figma } from '@thesvg/react';

export default function Page() {
  return (
    <div className="flex gap-4">
      <Github className="w-6 h-6" />
      <Figma className="w-6 h-6" />
    </div>
  );
}

<Github className="w-8 h-8 text-gray-700 dark:text-gray-300 hover:text-black transition-colors" />

Every component accepts SVGProps<SVGSVGElement>. You can import the shared type:

import type { SvgIconProps } from '@thesvg/react';

function IconButton({ icon: Icon, ...props }: { icon: React.ComponentType<SvgIconProps> }) {
  return <Icon width={20} height={20} {...props} />;
}

Every component accepts all standard SVG props via SVGProps<SVGSVGElement>:

// Fixed size
<Github width={24} height={24} />

// Responsive via CSS
<Github className="w-6 h-6" />

// Scale with font-size (em units)
<Github width="1em" height="1em" />

import { useRef } from 'react';
import Github from '@thesvg/react/github';

function MyComponent() {
  const svgRef = useRef<SVGSVGElement>(null);
  return <Github ref={svgRef} width={24} height={24} />;
}

// Meaningful icon - label it
<Github aria-label="GitHub" role="img" width={24} height={24} />

// Decorative icon - hide from screen readers
<Github aria-hidden="true" width={24} height={24} />

Slugs are converted to PascalCase component names:

Slugs that start with a digit are prefixed with I to produce a valid JavaScript identifier.

• Tree-shaking: Named imports from the barrel (@thesvg/react) are tree-shaken by Webpack 5, Rollup, Vite, esbuild, and Turbopack
• Individual imports: @thesvg/react/github always includes only the single icon regardless of bundler
• No runtime deps: Only react as a peer dependency
• Server Components: Works without "use client", keeping icons out of the client bundle in Next.js

v1.0.0 fixes the ESM output to emit valid JavaScript (previously .js files contained TypeScript syntax that some bundlers could not parse).

Breaking changes:

• SvgIconProps is no longer re-exported from the runtime barrel (index.js). Import it as a type: import type { SvgIconProps } from '@thesvg/react' (the .d.ts barrel still exports it, so TypeScript consumers are unaffected).
• SVG style attributes are now converted to React style objects. If you were working around string styles, you can remove those workarounds.

Over 3,800 brand icons are available. Browse the full list at thesvg.org.

MIT - see LICENSE.

Brand icons and logos are the property of their respective trademark holders. See thesvg.org for details.