theSVGtheSVG
^K
ExtensionsSubmit
npm
theSVG|The Open SVG Brand Library
CompareSubmitLegalContactGitHubGLINR

All brand logos and trademarks are the property of their respective owners. Icons are provided for identification and development purposes only. This project is not affiliated with or endorsed by any of the brands listed. For official assets, visit the brand's website. Trademark Policy

Built with by the open-source community

HomeAll Icons
APISubmit

Categories

No authentication required

API Reference

Fetch 4,009 brand icons programmatically. Open API with CORS enabled, cached responses, and multiple output formats.

Quick Start

CDN

Direct URL to any icon SVG file

thesvg.org/icons/github/default.svg

Search

Find icons by name or category

thesvg.org/api/registry?q=google

Registry

Full metadata + inline SVG

thesvg.org/api/registry/github

Base URL

url
https://thesvg.org

All endpoints return JSON with CORS headers enabled. Responses are cached for 24 hours.

Endpoints

GET/icons/{slug}/{variant}.svg

Serve an SVG file directly. Use in HTML img tags, CSS background-image, or any context that accepts image URLs.

Parameters

NameTypeDescription
slugrequiredstringIcon identifier (e.g. github, vercel)
variantrequiredstringdefault, light, dark, mono, wordmark, wordmark-light, wordmark-dark

Example

bashRequest
curl https://thesvg.org/icons/github/default.svg

# HTML
<img src="https://thesvg.org/icons/github/default.svg" alt="GitHub" />

# Markdown
![GitHub](https://thesvg.org/icons/github/default.svg)

Response

xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 .297c-6.63 0-12 ..."/>
</svg>
GET/api/registry

Search and list icons. Returns a paginated index with slug, title, categories, and available variants.

Parameters

NameTypeDescription
qstringSearch query (fuzzy match on name, slug, aliases)
categorystringFilter by category (e.g. AI, Browser, Design). 56 categories available.
limitnumberMax results to return (default: 50, max: 200)

Example

bashRequest
# Search for icons
curl "https://thesvg.org/api/registry?q=google"

# Filter by category
curl "https://thesvg.org/api/registry?category=AI&limit=10"

Response

json
{
  "total": 212,
  "count": 10,
  "limit": 10,
  "icons": [
    {
      "slug": "openai",
      "title": "OpenAI",
      "categories": ["AI"],
      "variants": ["default", "light", "dark", "wordmark"]
    }
  ]
}
GET/api/registry/{slug}

Get full metadata for a single icon including inline SVG content for all variants.

Parameters

NameTypeDescription
slugrequiredstringIcon identifier
formatstringSet to 'raw' to return SVG with image/svg+xml content type

Example

bashRequest
# Full metadata + inline SVGs
curl "https://thesvg.org/api/registry/github"

# Raw SVG only
curl "https://thesvg.org/api/registry/github?format=raw"

Response

json
{
  "name": "github",
  "title": "GitHub",
  "categories": ["Software"],
  "hex": "181717",
  "url": "https://github.com",
  "variants": {
    "default": {
      "url": "https://thesvg.org/icons/github/default.svg",
      "svg": "<svg xmlns=\"...\" ...>...</svg>"
    },
    "light": { "url": "...", "svg": "..." },
    "dark": { "url": "...", "svg": "..." }
  },
  "cdn": {
    "jsdelivr": "https://cdn.jsdelivr.net/.../github/{variant}.svg",
    "direct": "https://thesvg.org/icons/github/{variant}.svg"
  }
}

CDN via jsDelivr

For maximum performance, use jsDelivr CDN which provides global edge caching.

urljsDelivr URL pattern
https://cdn.jsdelivr.net/gh/GLINCKER/thesvg@main/public/icons/{slug}/{variant}.svg

# Examples
https://cdn.jsdelivr.net/gh/GLINCKER/thesvg@main/public/icons/github/default.svg
https://cdn.jsdelivr.net/gh/GLINCKER/thesvg@main/public/icons/vercel/wordmark.svg

Usage Examples

typescriptJavaScript / TypeScript
// Fetch icon metadata
const res = await fetch("https://thesvg.org/api/registry/github");
const data = await res.json();
console.log(data.variants.default.svg);

// Search for icons
const search = await fetch("https://thesvg.org/api/registry?q=cloud&limit=5");
const results = await search.json();
results.icons.forEach(icon => console.log(icon.slug));
tsxReact Component
function BrandIcon({ slug, variant = "default" }) {
  return (
    <img
      src={`https://thesvg.org/icons/${slug}/${variant}.svg`}
      alt={slug}
      width={24}
      height={24}
    />
  );
}

<BrandIcon slug="github" />
<BrandIcon slug="vercel" variant="wordmark" />
htmlHTML with Dark Mode
<!-- Direct embed -->
<img src="https://thesvg.org/icons/github/default.svg" alt="GitHub" width="24" />

<!-- With dark mode support -->
<picture>
  <source media="(prefers-color-scheme: dark)"
          srcset="https://thesvg.org/icons/github/dark.svg" />
  <img src="https://thesvg.org/icons/github/light.svg" alt="GitHub" width="24" />
</picture>

Caching & Limits

Cache TTL24 hours (CDN + API)
CORSEnabled for all origins
AuthenticationNone required
Max results per request200
Response formatJSON (API) / SVG+XML (CDN)

Build something cool?

If you build a tool, plugin, or integration using the API, open a PR to list it on the Extensions page.

View ExtensionsGitHub

On this page

  • Quick Start
  • Base URL
  • CDN - Direct SVG
  • Search & List
  • Registry Detail
  • CDN via jsDelivr
  • Usage Examples
  • Caching & Limits