thesvg

7,400+ SVG icons. Brands, AWS, Azure, GCP, and more. Search, copy, ship.

Browse Icons  •  Install  •  Extensions  •  CDN  •  API  •  Packages  •  Compare  •  Contribute

## Why theSVG? Most icon libraries focus on UI icons. Brand logos are scattered across press kits, Figma files, and random GitHub repos. **theSVG** is the single source for SVG icons - brand logos, cloud architecture diagrams, and more. Searchable, versioned, and available as npm packages, CDN, CLI, API, and MCP server. - **7,400+ icons** across multiple collections - **4,600+ brand icons** across 115+ categories - **858 Auth Badge icons** - circular icon badges for 2FA/authenticator apps - **739 AWS Architecture icons** (2026-Q1) - **626 Azure Service icons** (2026-Q1) - **256 community-curated icons** - dev tools, databases, frameworks - **214 Google Cloud icons** (2026-Q1) - **12,300+ SVG variants** - color, mono, light, dark, wordmark - **Tree-shakeable** - import one icon, ship only that icon - **TypeScript-first** - fully typed, dual ESM/CJS - **Framework-agnostic** - React, Vue, Svelte, plain HTML, or CDN - **AI-ready** - MCP server for Claude, Cursor, and Windsurf ## Collections theSVG organizes icons into collections: | Collection | Icons | Description | |------------|-------|-------------| | **Brand Icons** | 4,675 | Brand logos from 115+ categories | | **Auth Badges** | 858 | Circular icon badges styled for 2FA/authenticator apps | | **AWS Architecture** | 739 | Official AWS service, resource, category, and group icons (2026-Q1) | | **Azure Services** | 626 | Microsoft Azure service icons (2026-Q1) | | **Community** | 256 | Dev tools, databases, and frameworks sourced from the open-source community | | **Google Cloud** | 214 | Google Cloud Platform icons (2026-Q1) | | **Kubernetes** | 38 | Official Kubernetes/CNCF architecture icons | ### AWS Architecture Icons Browse all AWS service and resource icons at [thesvg.org/collection/aws](https://thesvg.org/collection/aws). Icons are sourced from the official [AWS Architecture Icons](https://aws.amazon.com/architecture/icons/) package and distributed unmodified under [CC BY-ND 2.0](https://creativecommons.org/licenses/by-nd/2.0/). Updated quarterly. ### Auth Badges Browse the full set at [thesvg.org/collection/auth-badges](https://thesvg.org/collection/auth-badges). Circular, flat-color badge icons designed for authenticator-app entry lists and 2FA UI - a distinct visual style from the primary brand-mark collection above. Distributed under CC0-1.0 (public domain). ## Install **npm** ```bash npm install thesvg ``` **Homebrew** ```bash brew tap glincker/thesvg brew install thesvg ``` ```ts import github from "thesvg/github"; github.svg; // raw SVG string github.title; // "GitHub" github.hex; // "181717" github.variants; // { default: "", mono: "" } ``` Or use the scoped package for tree-shaking: ```bash npm install @thesvg/icons ``` ## Packages | Package | Description | | |---------|-------------|---| | [`thesvg`](https://www.npmjs.com/package/thesvg) | All icons in one package | [](https://www.npmjs.com/package/thesvg) | | [`@thesvg/icons`](https://www.npmjs.com/package/@thesvg/icons) | Core icon data, tree-shakeable | [](https://www.npmjs.com/package/@thesvg/icons) | | [`@thesvg/react`](https://www.npmjs.com/package/@thesvg/react) | Typed React components | [](https://www.npmjs.com/package/@thesvg/react) | | [`@thesvg/vue`](https://www.npmjs.com/package/@thesvg/vue) | Typed Vue 3 components | [](https://www.npmjs.com/package/@thesvg/vue) | | [`@thesvg/svelte`](https://www.npmjs.com/package/@thesvg/svelte) | Typed Svelte components | [](https://www.npmjs.com/package/@thesvg/svelte) | | [`@thesvg/cli`](https://www.npmjs.com/package/@thesvg/cli) | CLI tool (`npx @thesvg/cli add github`) | [](https://www.npmjs.com/package/@thesvg/cli) | | [`@thesvg/mcp-server`](https://www.npmjs.com/package/@thesvg/mcp-server) | MCP server for AI assistants | [](https://www.npmjs.com/package/@thesvg/mcp-server) | ## Extensions Use theSVG icons everywhere you build, design, and ship. Browse the full ecosystem at [thesvg.org/extensions](https://thesvg.org/extensions). | Extension | Status | Description | |-----------|--------|-------------| | [Figma Plugin](https://www.figma.com/community/plugin/1612997159050367763) | Published | Browse 7,400+ brand SVGs, variant picker, recents row, keyboard shortcuts. Insert as editable vectors. | | [VS Code](https://marketplace.visualstudio.com/items?itemName=glincker.thesvg) | Published | Search 7,400+ icons from the command palette. Copy SVG, JSX, CDN link, or insert at cursor. | | [Raycast](https://www.raycast.com/thegdsks/thesvg) | Published | Search, preview, and copy any brand SVG in one keystroke. Filter by category, preview variants. | | [MCP Server](https://www.npmjs.com/package/@thesvg/mcp-server) | Published | AI tool calls for Claude, Cursor, Windsurf. Fetch icons by name or category. | | [Agent Skill](https://skills.sh/glincker/thesvg) | Published | Drop-in skill for AI agents. Install via `npx skills add glincker/thesvg`. Teaches the icon CDN and registry. | | [`@thesvg/cli`](https://www.npmjs.com/package/@thesvg/cli) | Published | shadcn-style installer. `npx @thesvg/cli add github` drops the SVG into your project. | | [Homebrew](https://github.com/glincker/homebrew-thesvg) | Published | `brew tap glincker/thesvg && brew install thesvg` | | [CDN via jsDelivr](https://www.jsdelivr.com/package/gh/glincker/thesvg) | Published | Serve any icon via global CDN. Drop into HTML, CSS, Markdown, Notion, Webflow, Framer. | | [Iconify](https://icon-sets.iconify.design/thesvg-color/) | Published | Brand icons available as [`thesvg`](https://icon-sets.iconify.design/thesvg/) (mono) and [`thesvg-color`](https://icon-sets.iconify.design/thesvg-color/) sets. Works with any Iconify-consuming tool: Mermaid architecture diagrams, Iconify's VS Code and Figma plugins, `@iconify/react`, and more. | | [Browser Extension](https://github.com/glincker/thesvg/tree/main/extensions/browser) | Beta | Chrome, Firefox, Edge popup with 7,400+ brand SVGs. MV3, no telemetry. | | [JetBrains](https://github.com/glincker/thesvg/issues?q=label%3Aextension) | Open | IntelliJ, WebStorm, PyCharm, Rider tool window. Help wanted. | | [Neovim](https://github.com/glincker/thesvg/tree/main/extensions/neovim) | Published | Lua plugin with Telescope picker. Insert SVG URL or inline content at cursor. | | [Alfred Workflow](https://github.com/glincker/thesvg/tree/main/extensions/alfred) | Published | macOS quick access. Search anywhere, copy SVG, CDN URL, or markdown. | | [Sketch / Blender / Webflow / Notion](https://github.com/glincker/thesvg/issues?q=label%3Aextension) | Open | Tracking issues open. Build a plugin and we will list it here. | > **Build your own:** the API and CDN are fully open with no auth required. Ship a plugin or workflow, then open a PR and we will add it to the table. ## CDN Use any icon directly without installing: ```html ``` **URL pattern:** `https://thesvg.org/icons/{slug}/{variant}.svg` ## Usage ### React ```tsx import { Github, Figma } from "@thesvg/react"; export function Logos() { return ; } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### CDN ```html ``` ### CLI ```bash npx @thesvg/cli add github npx @thesvg/cli search "ai" ``` ## Variants Icons support up to 7 variants to match any design context: | Variant | Key | Description | |---------|-----|-------------| | Default | `default` | Primary brand color | | Mono | `mono` | Inherits text color | | Light | `light` | White, for dark backgrounds | | Dark | `dark` | Black, for light backgrounds | | Wordmark | `wordmark` | Full text logo | | Wordmark Light | `wordmarkLight` | White text logo | | Wordmark Dark | `wordmarkDark` | Dark text logo | Not every icon has all variants. `default` is always present. ## API thesvg ships as a fully static site, served from a CDN. There is no dynamic API; instead, two pre-built JSON manifests cover every use case. Search, filter, and pagination happen on the client. Base URL: `https://thesvg.org` | Endpoint | Description | |----------|-------------| | `GET /api/registry.json` | Full icon manifest (slug, title, aliases, categories, hex, url, variant keys) | | `GET /api/categories.json` | Category list with counts | | `GET /icons/{slug}/{variant}.svg` | Raw SVG file (e.g. `/icons/openai/default.svg`) | ```bash # Fetch the manifest once, filter client-side curl "https://thesvg.org/api/registry.json" | jq '.icons[] | select(.slug | contains("openai"))' # Then pull the SVG you want curl "https://thesvg.org/icons/openai/default.svg" ``` ### Mirrors For high-traffic apps, use jsDelivr (free, GitHub-backed) instead of hitting `thesvg.org` directly: ``` https://cdn.jsdelivr.net/gh/glincker/thesvg@main/src/data/icons.json https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/{slug}/{variant}.svg ``` `src/data/icons.json` is the source-of-truth manifest (the same data that builds `/api/registry.json`, with full per-icon fields including `license` and `dateAdded`). You can also clone the repo (~30 MB) and self-host. The codebase is MIT-licensed; individual brand icons remain trademarks of their respective owners (see [LEGAL.md](./LEGAL.md)). > A gated, token-based API is on the roadmap at `api.thesvg.org` for advanced features (search relevance, usage analytics, webhooks). Until then, the static manifest above is the supported integration path. ## Categories Icons are organized into 115+ categories: `AI` `Analytics` `Identity` `Automotive` `Aviation` `Browser` `Cloud` `CMS` `Community` `Crypto` `Database` `Design` `DevTool` `Education` `Entertainment` `Finance` `Food` `Framework` `Gaming` `Hardw