I built an open-source library of 3,847 brand SVG icons. Here's the full developer toolkit

#react #javascript #webdev #opensource

Every time I start a new project, the same thing happens.

I need a GitHub logo. I Google it. I find a 64x64 PNG from 2019. I try the press kit - login wall. I check Simple Icons - they only have monochrome. I check svgl - close, but missing the variant I need.

30 minutes later I'm manually tracing an SVG in Figma.

Sound familiar?

So I built theSVG

thesvg.org is a free, open-source collection of 3,847 brand SVG icons you can search, copy, and drop into any project.

But it's not just a website with a search bar. It's a full developer toolkit.

The npm packages

npm install @thesvg/icons

import github from "@thesvg/icons/github";

github.svg; // raw SVG string
github.title; // "GitHub"
github.hex; // "181717"
github.variants; // { default, mono, light, dark, wordmark }

Only the icons you import end up in your bundle. The package generates individual entry points per icon, so your bundler drops everything else. One icon costs ~3KB, not 12MB.

React components

npm install @thesvg/react

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

<Github width={24} height={24} className="text-gray-900" />
<Figma width={32} height={32} aria-label="Figma" />

Every component has:

Full SVGProps<SVGSVGElement> typing
forwardRef support
Zero runtime dependencies
Individual imports for bundlers without tree-shaking (@thesvg/react/github)

CLI

npx @thesvg/cli add github vercel nextjs --format jsx

Drops SVG files (or JSX/Vue components) directly into your project. Auto-detects your directory structure - public/icons/ for Next.js, src/icons/ otherwise.

CDN - zero install

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

Every icon has a direct URL. Use it in README files, docs, emails, dashboards. No API key, no account.

Pro tip - use these as tech stack badges in your GitHub README:

![React](https://thesvg.org/icons/react/default.svg)
![TypeScript](https://thesvg.org/icons/typescript/default.svg)
![Next.js](https://thesvg.org/icons/nextjs/default.svg)

MCP server for AI assistants

{
  "mcpServers": {
    "thesvg": {
      "command": "npx",
      "args": ["@thesvg/mcp-server"]
    }
  }
}

Claude, Cursor, and Windsurf can search and embed brand icons natively. Ask your AI assistant "add a GitHub icon" and it pulls the real SVG.

5 variants per icon

Most icon libraries give you one version. We give you up to five:

Variant	Use case
`default`	Brand colors - the standard logo
`mono`	Single color - works with any theme
`light`	Optimized for light backgrounds
`dark`	Optimized for dark backgrounds
`wordmark`	Full text logo with brand name

import github from "@thesvg/icons/github";

const darkLogo = github.variants["dark"];
const wordmark = github.variants["wordmark"];

Not every icon has all variants, but default is always present.

20+ categories

AI, Software, Framework, Language, Design, Cloud, Browser, CMS, Analytics, Auth, Database, DevOps, E-commerce, Finance, Gaming, Music, Social, Streaming... and more.

Filter by category on the site or via the API:

GET https://thesvg.org/api/icons?category=AI&limit=50

The engineering bits

A few problems I had to solve that might be interesting:

SVG security. SVGs from the wild can contain embedded <script> tags, onload event handlers, or javascript: URIs. The build pipeline scans every SVG and strips anything dangerous before it enters the repo.

Tree-shaking at scale. With 3,847 icons and 5 variants each, the naive approach (one barrel export) would ship ~12MB to every user. Instead, the build generates per-icon entry points. Your bundler only touches the icons you import.

OIDC publishing. No npm tokens stored as GitHub secrets. The release workflow authenticates directly with npm via OpenID Connect. Every published package gets a provenance signature.

Variant normalization. Different sources name variants differently - logo-dark, dark-mode, inverted, on-light. Everything gets normalized to a consistent {slug}/{variant}.svg structure.

The full package list

Package	What
`thesvg`	All icons, one import
`@thesvg/icons`	Core data + TypeScript types
`@thesvg/react`	3,847 typed React components
`@thesvg/cli`	CLI: search, add, export
`@thesvg/mcp-server`	MCP server for AI assistants