7,600+ Brand SVG Icons for Developers – theSVG

theSVG is an open-source SVG icon library with 7,600+ brand and cloud icons for websites, apps, and architecture diagrams.

It includes color, monochrome, light, dark, and wordmark variants, plus a collection of 120+ UI icons.

You can use direct SVG URLs, npm imports, or components for React, Vue, Svelte, and React Native.

Features:

• 7,600+ SVG icons across brand logos, cloud architecture assets, and authentication badges.
• 120+ UI icons in 7 styles.
• Up to seven variants per brand, including monochrome, light, dark, and wordmark options.
• Individual icon imports from typed, tree-shakeable npm packages.
• React, Vue, Svelte, Solid, Preact, Astro, and React Native component packages.
• SVG downloads and PNG exports.
• SVG delivery through the theSVG website or jsDelivr CDN.
• CLI commands for adding, listing, and searching brand and UI icons.
• Static JSON manifests for searching and filtering icons.
• An MCP server for retrieving icons through AI assistants.

How to Use theSVG:

1. Display a Brand SVG Icon in HTML

Use the SVG URL directly in an <img> element. No JavaScript or npm installation is required.

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

For a GitHub-backed CDN URL, use jsDelivr:

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

External SVGs loaded through <img> do not inherit your page’s CSS color. To recolor an icon that uses currentColor, render the SVG inline or use a framework component.

2. Install Brand Icons with npm

Install thesvg to import brand icons as JavaScript objects.

npm install thesvg
# Alternative raw-data package:
npm install @thesvg/icons

Import a single icon from either package:

import github from "thesvg/github";
// Or: import github from "@thesvg/icons/github";
console.log(github.svg);        // Raw default SVG markup
console.log(github.title);      // "GitHub"
console.log(github.hex);        // "181717"
console.log(github.categories); // Brand categories
console.log(github.variants);   // Available SVG variants

3. Use Brand SVG Components in React, Vue, and Svelte

Install the adapter for your framework.

# React
npm install @thesvg/react
# Vue 3
npm install @thesvg/vue
# Svelte
npm install @thesvg/svelte

React:

Use the variant prop to select an available brand mark. It defaults to "default". These SVG components also work in Next.js Server Components.

import { Github, Figma } from "@thesvg/react";
export function BrandLogos() {
  return (
    <div>
      <Github width={32} height={32} aria-label="GitHub" />
      <Figma width={32} height={32} aria-label="Figma" />
      <Github variant="mono" width={32} height={32} />
    </div>
  );
}

Vue 3:

<script setup>
import { Github, Figma } from "@thesvg/vue";
</script>
<template>
  <Github width="32" height="32" aria-label="GitHub" />
  <Figma width="32" height="32" aria-label="Figma" />
</template>

Svelte:

<script>
  import { Github, Figma } from "@thesvg/svelte";
</script>
<Github width="32" height="32" aria-label="GitHub" />
<Figma width="32" height="32" aria-label="Figma" />

React Native:

Install the icon adapter and react-native-svg:

npm install @thesvg/react-native react-native-svg

import { Github } from "@thesvg/react-native";
export function BrandIcon() {
  return <Github size={28} variant="mono" />;
}

Brand icons are also available for Solid, Preact, and Astro.

# Solid
npm install @thesvg/solid
# Preact
npm install @thesvg/preact
# Astro
npm install @thesvg/astro

4. Insert Brand Icons with Vanilla JavaScript

For a bundled JavaScript project, @thesvg/web replaces placeholder elements with inline SVGs. Install the helper and the icon data package:

npm install @thesvg/web @thesvg/icons

Add a placeholder to the HTML:

<i data-thesvg="github" data-thesvg-size="32" aria-label="GitHub"></i>

In your bundled application, run the helper after the placeholder exists in the DOM:

import github from "@thesvg/icons/github";
import { createIcons } from "@thesvg/web";
createIcons({ icons: { github } });

5. Use the UI Icons

Each UI icon has seven styles: outline, glass, duotone, offset, fill, pixel, and depth. These UI icons use currentColor and have a 24-by-24 coordinate grid.

For React 18+, install the UI adapter:

npm install @thesvg/ui-react

import {
  BellIcon,
  BellGlassIcon,
  BellPixelIcon
} from "@thesvg/ui-react";
export function Notifications() {
  return (
    <div style={{ color: "#2563eb" }}>
      <BellIcon size={24} aria-label="Notifications" />
      <BellGlassIcon size={24} />
      <BellPixelIcon size={24} />
    </div>
  );
}

For raw UI SVG files and their JSON manifest, install @thesvg/ui. JSON module imports require a runtime or bundler that accepts import attributes:

npm install @thesvg/ui

import manifest from "@thesvg/ui/ui-icons.json" with { type: "json" };
// SVG file layout: @thesvg/ui/svg/<slug>/<look>.svg

You can also embed a UI SVG file from the npm CDN:

<img src="https://cdn.jsdelivr.net/npm/@thesvg/ui/dist/svg/bell/outline.svg"
     width="24" height="24" alt="Notifications" />

For other frameworks, install the corresponding UI package.

# Vue
npm install @thesvg/ui-vue
# Svelte
npm install @thesvg/ui-svelte
# React Native
npm install @thesvg/ui-react-native react-native-svg

6. Add Icons from the CLI

# Add a brand icon
npx @thesvg/cli add github
# Save brand icons as React components
npx @thesvg/cli add github figma --format jsx
# Save a brand icon's dark variant
npx @thesvg/cli add github --variant dark
# Search brand icons
npx @thesvg/cli search "payment"
# Add a UI icon in its default outline look
npx @thesvg/cli add ui:arrow-down
# Add a UI icon in the glass look
npx @thesvg/cli add ui:arrow-down --look glass
# Browse UI icons
npx @thesvg/cli list --ui
npx @thesvg/cli search arrow --ui

7. Access the Static JSON API

# Full icon registry
curl "https://thesvg.org/api/registry.json"
# Categories with counts
curl "https://thesvg.org/api/categories.json"
# Raw SVG
curl "https://thesvg.org/icons/github/default.svg"

For browser-side filtering, fetch the registry once and search its icons array:

const response = await fetch("https://thesvg.org/api/registry.json");
const { icons } = await response.json();
const result = icons.find((icon) => icon.slug === "github");
console.log(result);

8. Connect the MCP Server to an AI Assistant

Add this entry to a MCP client that accepts the standard mcpServers configuration, such as Claude Desktop or Cursor:

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

Set kind: "ui" when requesting UI icons. For get_icon and get_icon_url, the look parameter selects the UI appearance. Existing brand requests use kind: "brand" by default.

theSVG Package Reference:

Brand Icon Packages

UI Icon Packages

Developer Tools

Brand Icon Data Reference:

Modules imported from thesvg/{slug} or @thesvg/icons/{slug} expose these fields:

Brand Component Props:

Brand components accept standard SVG attributes, including sizing, classes, styles, and accessibility attributes. React uses SVGProps<SVGSVGElement> and forwards refs. Its variant prop is typed per icon.

React Native Brand Component Props

These components accept react-native-svg SvgProps, with the following library-specific behavior:

Other Brand Framework Props

Brand Icon Variants:

UI Icon Looks and Component Names:

UI Component Props

Web UI components use currentColor, a 24 default size, and the standard SVG attributes of their framework. React forwards a ref to the SVG. An icon with meaningful content should receive an accessible label.

React Native UI components render through react-native-svg and accept the following props:

Vanilla JavaScript Helper Reference:

The @thesvg/web package exposes two public functions.

Placeholder Attributes

CLI Command Reference:

Public API Endpoints:

MCP Server Tools:

All five tools accept optional kind: "brand" | "ui", default "brand". On get_icon and get_icon_url, variant selects a brand mark (default default) and look selects a UI style (default outline).

Alternatives and Related Resources:

• Brand Logos & Tech Stack Icons for Web Dev – Coloryfy.css – A CSS class and CDN-based option for displaying technology logos.
• Animated Icon Component Library for React/Vue/Svelte/Solid/Web Component – Animated UI glyphs based on Lucide, Heroicons, and Iconoir.
• morphicons: SVG Icon Morphing for JavaScript, React, and Vue – Morphing transitions between compatible SVG icon shapes.
• JavaScript & CSS Icon – More icon resources on CSSScript.

FAQs:

Q: Do I need to change existing brand icon imports when upgrading from v3 to v4?
A: No. v4 preserves the existing brand import names and SVG files. Install the separate @thesvg/ui* packages only if you need the new UI icon collection.

Q: Why does a variant URL return 404?
A: Every brand has a default SVG, but other variants differ by icon. Inspect the icon metadata and the published file URL. Some variant filenames differ from their JavaScript property names.

Q: Why doesn’t the mono icon change color when I style an img element?
A: The external SVG is an image document and cannot inherit your page’s currentColor. Inline the SVG markup or render it as a component to control its color through CSS.

Q: Can I use these icons commercially?
A: theSVG’s code and UI icon collection are MIT-licensed. Brand logos and some architecture assets have their own licenses and trademark restrictions. Check the individual asset’s license and brand guidelines before use.

Q: How do I keep unused icons out of a JavaScript bundle?
A: Import icon modules by slug, such as @thesvg/icons/github, or use an individual component import such as @thesvg/react/github. A full barrel import from @thesvg/icons can include unused icons.

Changelog:

v4.0.3 (11/03/2026)

• Added more icons

v4.0.0 (10/27/2026)

• Added a separate set of 129 UI icons with seven looks and dedicated framework packages.
• Expanded the brand icon collection to 7,600+ icons.
• Added UI icon support to @thesvg/cli 0.8.0 and @thesvg/mcp-server 0.9.0.
• Preserved the brand icon import names and existing SVG files.

v3.4.2 (10/25/2026)

• Fixed missing variant files in distributed icon packages.

v3.4.1 (10/19/2026)

• Added more brand icons.