4,000+ Brand SVG Icons for Developers – theSVG

theSVG is an open-source icon library that provides 4,000+ brand SVG icons as React, Vue, and Svelte components, inline CDN assets, or downloadable PNG files.

Features:

• 4,000+ brand icons:AI tools, dev frameworks, social platforms, payment processors, cloud services, databases, and 55+ other categories.
• Each icon supports up to seven variants: default, mono, light, dark, wordmark, wordmarkLight, and wordmarkDark.
• The @thesvg/icons scoped package lets you import a single icon.
• Dedicated typed component packages exist for React, Vue 3, and Svelte
• A public HTTP API at thesvg.org exposes search, single-icon metadata, category listing, and raw SVG file delivery.
• @thesvg/cli lets you pull icons into your project from the terminal.
• @thesvg/mcp-server integrates theSVG into Claude, Cursor, and Windsurf AI assistants.

Installation:

1. Install the full thesvg package:

# NPM
$ npm install thesvg

2. For a tree-shakeable setup where you import only specific icons, use the scoped package:

# NPM
$ npm install @thesvg/icons

3. For framework-specific typed components, install the relevant adapter:

# React
npm install @thesvg/react

# Vue 3
npm install @thesvg/vue

# Svelte
npm install @thesvg/svelte

Usages:

1. The thesvg package exposes icon objects directly. Each object contains the raw SVG string, the brand title, the primary hex color, and all available variants.

// Import a single icon object from the main package
import vercel from "thesvg/vercel";

// Raw SVG markup string
console.log(vercel.svg);

// Human-readable brand name: "Vercel"
console.log(vercel.title);

// Primary brand hex code (no leading #): "000000"
console.log(vercel.hex);

// Object of all available SVG variants for this icon
// Variants: default, mono, light, dark, wordmark, etc.
console.log(vercel.variants);

2. Use the icons as React components.

// Import typed React icon components
import { Figma, Notion, Linear } from "@thesvg/react";
export function TechStack() {
  return (
    <div className="flex gap-4 items-center">
      {/* Render the Figma logo at 32px with a custom CSS class */}
      <Figma width={32} height={32} className="text-gray-800" />
      {/* Render the Notion logo in the same row */}
      <Notion width={32} height={32} className="text-gray-800" />
      {/* Render the Linear logo in the same row */}
      <Linear width={32} height={32} className="text-gray-800" />
    </div>
  );
}

3. Use the icons as Vue components.

<script setup lang="ts">
// Import typed Vue components
import { Stripe, Supabase } from "@thesvg/vue";
</script>
<template>
  <div class="logo-row">
    <!-- Render the Stripe logo at 40px wide -->
    <Stripe width="40" height="40" />
    <!-- Render the Supabase logo next to it -->
    <Supabase width="40" height="40" />
  </div>
</template>

4. Use the icons as Svelte components.

<script>
  // Import Svelte icon components from the dedicated adapter
  import { Tailwind, Prisma } from "@thesvg/svelte";
</script>
<!-- Render both brand icons at 28px -->
<Tailwind width="28" height="28" />
<Prisma width="28" height="28" />

5. Or drop the icons directly into any HTML file via the thesvg.org CDN or jsDelivr.

<!-- URL pattern: https://thesvg.org/icons/{slug}/{variant}.svg -->
<!-- Default (full color) version of the Vercel logo -->
<img
  src="https://thesvg.org/icons/vercel/default.svg"
  width="32"
  height="32"
  alt="Vercel"
/>
<!-- Mono variant — inherits the current text color via CSS -->
<img
  src="https://thesvg.org/icons/vercel/mono.svg"
  width="32"
  height="32"
  alt="Vercel"
  style="color: #6366f1;"
/>
<!-- Wordmark variant — full horizontal logo lockup -->
<img
  src="https://thesvg.org/icons/vercel/wordmark.svg"
  width="120"
  height="32"
  alt="Vercel Wordmark"
/>

<img
  src="https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/stripe/default.svg"
  width="32"
  height="32"
  alt="Stripe"
/>

6. Use the @thesvg/cli tool to pull icons directly into your project directory.

# Add the Vercel icon to your project
npx @thesvg/cli add vercel

# Search icons by keyword — useful for browsing the AI category
npx @thesvg/cli search "payment"

7. The public API at https://thesvg.org supports icon search, metadata retrieval, category listing, and raw SVG delivery.

GET /api/icons?q={query}&category={category}&limit={n}
  — Search the icon library by keyword and optional category filter.

GET /api/icons/{slug}
  — Fetch full metadata for a single icon, including all variants.

GET /api/categories
  — List all 55+ categories with icon counts.

GET /api/registry/{slug}
  — shadcn-compatible registry endpoint for direct component consumption.

GET /icons/{slug}/{variant}.svg
  — Serve a raw SVG file for a specific icon and variant.

# Search for icons in the "Payment" category
curl "https://thesvg.org/api/icons?category=Payment&limit=10"

# Get full metadata for the Stripe icon
curl "https://thesvg.org/api/icons/stripe"

# List all available categories
curl "https://thesvg.org/api/categories"

Icon Variants:

Variant	Key	Description
Default	default	Primary brand color. Always present.
Mono	mono	Inherits the current text color.
Light	light	White fill — for dark backgrounds.
Dark	dark	Black fill — for light backgrounds.
Wordmark	wordmark	Full horizontal logo with text.
Wordmark Light	wordmarkLight	White wordmark version.
Wordmark Dark	wordmarkDark	Dark wordmark version.

MCP server for AI assistants:

The @thesvg/mcp-server package connects theSVG to AI-powered editors. Configure it in your Claude, Cursor, or Windsurf workspace to let your AI assistant search and insert brand icons on demand.

# Install the MCP server globally
npm install -g @thesvg/mcp-server

FAQs:

Q: Can I use the brand icons in a commercial project?
A: The theSVG codebase and tooling are MIT-licensed. The brand icons themselves remain the intellectual property of their respective trademark holders. Check each brand’s trademark usage guidelines before commercial use.

Q: The CDN URL returns a 404 for the variant I requested. What’s wrong?
A: Not every icon ships with all seven variants. The default variant is the only one guaranteed to exist for every icon. Query the REST API at GET /api/icons/{slug} first to confirm which variants are available for a given slug, then reference only those in your markup.

Q: How do I get the correct hex color to style the mono icon?
A: Import the icon object from thesvg/{slug} and read the .hex property. It returns the brand’s primary color as a six-digit hex string.

Q: My bundle includes icons I’m not using. How do I fix that?
A: Switch from the thesvg package to @thesvg/icons. The scoped package is designed for tree-shaking. Import individual icons by path (import { Vercel } from "@thesvg/icons/vercel") so your bundler can drop everything else at build time.

Q: How do I integrate theSVG into a Next.js App Router project?
A: Install @thesvg/react and import components inside a Client Component or a Server Component. The components are pure SVG output with no client-side interactivity, so they work in both contexts. For image-based usage in Next.js, use the CDN URL with the built-in <Image> component and set unoptimized={true} if you need the raw SVG format.

The post 4,000+ Brand SVG Icons for Developers – theSVG appeared first on CSS Script.