Launching theSVG: The Open SVG Brand Library

The problem nobody talks about

You need a brand logo for your project. Maybe it is Stripe for a landing page, or Discord for a footer. Sounds simple. It never is.

You end up on Google, downloading a PNG from some random site. Or you find an SVG but it is the wrong color, or it is 400KB because someone exported it from Illustrator without cleaning it up. Maybe you find a decent icon library, but it only has 300 brands and yours is not in it.

I kept running into this. Every new project meant the same scavenger hunt. So I built a solution.

What theSVG is

theSVG is an open SVG brand library. Over 4,000 brand icons, organized into 20+ categories, completely free. No gatekeeping, no approval process, no "submit a PR and wait 3 months."

Every brand deserves a place. That is the philosophy.

What makes it different from dropping SVGs in a folder is the variant system. Each brand can have up to 5 variants:

• default - the standard logo (color preferred, mono fallback)
• mono - single color, great for footers and UI chrome
• light / dark - optimized for specific backgrounds
• wordmark - the text logo variant

Not every brand has all variants, but the structure is there. When you need the Spotify logo on a dark background, you grab the light variant and move on.

The tech stack

I wanted theSVG to feel fast. Really fast. The kind of site where you type a brand name and results appear before you finish the word.

Here is what powers it:

• Next.js 15 with App Router and full SSG. Every page is statically generated at build time.
• Tailwind CSS v4 with shadcn/ui components. Dark theme by default.
• Fuse.js for client-side fuzzy search. The entire icon index loads at build time and search happens in the browser with zero network requests.
• Vercel for hosting with CDN caching and immutable headers.

For the icon grid itself, I use <img> tags instead of inline SVG. When you have 4,000+ icons on a page, inlining SVGs will destroy your DOM. Combined with content-visibility: auto and lazy loading, the grid stays smooth even on lower-end devices.

The npm ecosystem

A website is great for browsing, but developers need icons in their code. So I built a full npm ecosystem around theSVG.

The core package gives you everything:

npm install thesvg

Then there are framework-specific packages. Each one gives you typed components:

npm install @thesvg/react

import { Github, Stripe, Figma } from '@thesvg/react';
 
function Footer() {
  return (
    <div className="flex gap-4">
      <Github width={24} height={24} className="text-gray-500" />
      <Stripe width={24} height={24} />
      <Figma width={24} height={24} />
    </div>
  );
}

The same pattern works for Vue (@thesvg/vue) and Svelte (@thesvg/svelte). All fully typed, all tree-shakeable.

There is also a CLI for quick grabs:

npx @thesvg/cli search "payment"
npx @thesvg/cli add stripe paypal square --format jsx

The full ecosystem:

MCP server for AI assistants

This one is fun. @thesvg/mcp-server lets AI coding assistants like Claude, Cursor, and Windsurf search and fetch brand SVGs directly. You ask your assistant for a Stripe logo and it pulls the actual SVG without you leaving your editor.

It is a small thing, but it fits into how a lot of us work now. If your tools can talk to each other, you move faster.

How it compares

I built a compare page on the site that breaks this down in detail, but here is the short version:

Simple Icons is great but limits itself to monochrome. svgl has nice design but a much smaller collection. Font Awesome is solid for UI icons but brand coverage is limited in the free tier.

theSVG tries to be the answer when you need any brand, in any variant, in any framework.

What is next

The library keeps growing. Community contributions are open and the submission process is straightforward. I am also working on a Figma plugin so designers can pull brand SVGs directly into their workflows.

Other things on the roadmap: icon request voting, automated SVG optimization pipeline, VS Code extension, and better category browsing.

Try it out

• Browse the library: thesvg.org
• GitHub: github.com/GLINCKER/thesvg
• npm: npm install thesvg

If you have brands you want added, open an issue or submit a PR. No gatekeeping.