How do I use thesvg icons with Tailwind CSS?

[thegdsks]

The honest answer: thesvg ships SVG files, not a Tailwind plugin (yet). But integration is straightforward depending on whether you want full-color brand marks or monochrome icons that pick up Tailwind text colors.

Full-color brand mark (most common):

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

<div className="flex items-center gap-2">
  <Github className="h-6 w-6" />
  <span>Sign in with GitHub</span>
</div>

The brand color is baked into the SVG, so Tailwind utilities like text-red-500 won't override it (which is what you want for a brand mark).

Monochrome icon that adapts to Tailwind colors:

Use the mono variant. Most brands ship one:

import { GithubMono } from '@thesvg/react';

<GithubMono className="h-6 w-6 text-slate-400 hover:text-white" />

The mono variants use currentColor for fill, so any Tailwind text-color utility cascades through.

No React, just <img>:

<img src="https://thesvg.org/icons/github/default.svg" class="h-6 w-6" alt="GitHub" />

Tailwind's h- and w- utilities work since the SVGs no longer carry fixed width/height attributes after the v2.3.0 cleanup.

Dark mode:

For brands with light and dark variants (Adobe family, Granola, Dracula, NVIDIA, etc.), pick at runtime:

import { useTheme } from 'next-themes';

const { theme } = useTheme();
const variant = theme === 'dark' ? 'dark' : 'light';

<img src={`https://thesvg.org/icons/granola/${variant}.svg`} className="h-6 w-6" />

If you'd find a proper @thesvg/tailwind plugin useful (something like <i class="i-thesvg:github" />), open an issue. It's on the roadmap but priority depends on demand.