# theSVG: 7,400+ Brand and Cloud SVG Icons as Typed npm Imports

> theSVG packages brand logos, AWS, Azure and GCP architecture icons as typed, tree-shakeable npm exports, plus a CDN, CLI, API and MCP server. The collection is broad and the licensing is layered, which is the part worth reading before you adopt it.

**glincker/thesvg** — 7,400+ brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg

- Repository: https://github.com/glincker/thesvg
- Website: https://thesvg.org/
- Stars: 2,770 · Forks: 220
- Language: TypeScript
- License: MIT
- Published: 2026-09-28 · Updated: 2026-09-28 · Language: en
- Canonical page: https://hysenlabs.com/projects/glincker-thesvg

## What thesvg Solves That Generic Icon Libraries Do Not

Most icon libraries ship interface glyphs: arrows, chevrons, file types. Brand logos are a different problem. They live in press kits, Figma community files and one-off GitHub repositories, each with its own naming and its own licence. theSVG takes that scattered set and puts it in one package with one import style. The README frames the gap directly, saying brand logos are "scattered across press kits, Figma files, and random GitHub repos."

The target reader is a developer building an integrations page, a cloud architecture diagram, an authenticator-app entry list, or a marketing site that needs a wall of customer logos. The package is TypeScript-first with dual ESM and CJS output, so it fits a Next.js app as easily as a plain bundler setup. The collections are not uniform in kind: 4,675 brand icons, 858 Auth Badge icons drawn in a circular flat-color style for 2FA screens, and cloud architecture sets for AWS (739), Azure (626) and Google Cloud (214), all dated 2026-Q1. A Kubernetes set of 38 icons rounds it out.

That mix is the actual value proposition. You are not choosing between a brand-logo library and a cloud-diagram library; the same import path covers both. The cost is that the licences differ per collection, which I cover below.

## How thesvg Ships Icons: Per-File Exports and Variants

The package is not a single barrel file. The README shows a default import from a per-icon subpath, and the exported object carries the SVG string alongside metadata:

```ts
import github from "thesvg/github";

github.svg;        // raw SVG string
github.title;      // "GitHub"
github.hex;        // "181717"
github.variants;   // { default: "<svg...>", mono: "<svg...>" }
```

Because the import is a subpath rather than a named export from an index, a bundler can drop everything you did not import. The README calls this tree-shakeable and states you "import one icon, ship only that icon." The hex field is the brand color as a bare hex string without the leading hash, which is convenient for generating contrast-aware UI without parsing the SVG.

The variants field is where the 12,300+ figure comes from. The README lists color, mono, light, dark and wordmark as variant kinds, and says the package exposes over 12,300 SVG variants across the icon total. The variants object in the example only shows default and mono, so the full variant set is not guaranteed on every icon. If your design depends on a wordmark variant for a specific brand, check that icon's variants object rather than assuming the full set exists.

The repository also generates API data, llms.txt, draw.io libraries and Excalidraw libraries as build steps before the Next.js build runs, which tells you the diagram-tool exports are generated artifacts rather than hand-maintained files.

## Installing thesvg and Rendering Your First Brand Icon

The README gives two install paths. npm is the primary one:

```bash
npm install thesvg
```

Homebrew is offered for a CLI-style install, which is unusual for an icon library and suggests the tap wraps the search or export tooling rather than the JavaScript package:

```bash
brew tap glincker/thesvg
brew install thesvg
```

The README also mentions a scoped package, `@thesvg/icons`, described as the option to use "for tree-shaking." If you are already importing per-icon subpaths from `thesvg`, the practical difference between the two packages is not spelled out in the README, and that is a gap: the tree-shaking claim is attached to both. Pick one and pin it.

Once installed, the first real use is a React component that renders the raw SVG string. The package exports the SVG as a string, not a component, so you inject it:

```ts
import github from "thesvg/github";

export function GitHubMark() {
  return <span dangerouslySetInnerHTML={{ __html: github.svg }} />;
}
```

You should see the GitHub mark at whatever size your container gives it, because the raw SVG string carries its own viewBox. If you would rather not use dangerouslySetInnerHTML, the repository's own site depends on dompurify, which is a signal that sanitizing injected SVG is a real concern in this codebase rather than a theoretical one.

## Thesvg's Licence Stack Is Not Uniform

This is the section to read twice. The package is MIT, but MIT covers the package code, not necessarily every icon inside it. The README states that AWS Architecture icons are sourced from the official AWS Architecture Icons package and "distributed unmodified under CC BY-ND 2.0." That licence permits redistribution but forbids derivatives, which matters if you plan to recolor, restyle or combine those icons into a modified mark. The Auth Badges collection is separately stated as CC0-1.0, public domain.

The repository root carries LICENSING.md, LEGAL.md, TRADEMARK.md and DISCLAIMER.md as separate files. That layout is a deliberate signal that the maintainers treat the licences as layered rather than uniform. Brand logos are also trademarks of their owners regardless of the SVG file's licence, and TRADEMARK.md exists precisely because an MIT-licensed file does not grant you the right to imply endorsement by the brand.

The README does not state which licence covers the 4,675 brand icons or the Azure and GCP sets. That information is presumably in LICENSING.md, which is not reproduced here. Check it before shipping a commercial product that leans on the cloud collections.

## Where thesvg Is the Wrong Choice

The cloud collections are dated. AWS, Azure and GCP are all labeled 2026-Q1, and the README says AWS is "updated quarterly." Quarterly is fine for architecture diagrams and bad for anything that needs to track a cloud provider's icon redesign the week it ships. If your product screenshots must match the current AWS console exactly, this package will lag by up to a quarter.

Second, the package is large in aggregate. The README advertises 7,400+ icons and 12,300+ variants. Tree-shaking protects your production bundle, but it does not protect your install size, your lockfile, or the time your editor spends indexing node_modules. A project that needs twelve brand logos is not the target audience for a 7,400-icon dependency.

Third, the raw string export pushes rendering decisions onto you. There is no first-party React component in the example, only an SVG string and a variants map. If you want a component with props for size and color, you are writing it. The repository itself uses lucide-react and phosphor-icons alongside its own icons, which suggests the maintainers do not treat thesvg as a replacement for a UI icon set.

Finally, the repository is a monorepo with a Next.js site, extensions, scripts and workspace packages. The root package.json is marked private with version 0.1.0 while the published package is at 3.3.8. That is normal for this layout, but it means the version you install is not the version at the repository root.

## thesvg vs Svgl and Simple Icons

The related searches around this project include Svgl, Simple Icons and Brandfetch, and the comparison is worth making concrete.

Simple Icons is the closest analogue for brand marks. Its approach is a uniform, monochrome, single-path-per-brand set with one consistent visual style. theSVG takes the opposite approach: it preserves brand color (the hex field) and ships multiple variants including color, mono, light, dark and wordmark. If you want every logo to look like it belongs to the same family, Simple Icons' uniformity is the feature. If you want the actual brand color and a wordmark option, thesvg's variant model is the feature. The trade-off is consistency versus fidelity.

Svgl is a web-first logo resource, and Brandfetch is an API for retrieving brand assets programmatically. thesvg overlaps with both but ships as an installable npm package with per-icon subpath exports, which neither of those is primarily. The relevant question is whether you want icons resolved at build time from a dependency or fetched at runtime from an API. Build-time means no network dependency and no rate limit; runtime means you always get the latest asset without a version bump.

The cloud architecture sets are the harder differentiator. Simple Icons and Svgl do not target AWS, Azure and GCP architecture diagrams. That is where thesvg has no direct equivalent in the list above, and it is also where the CC BY-ND 2.0 constraint applies.

## Maintenance Cadence and What an Upgrade Costs You

The last push to the repository was on 2026-09-20, and the most recent release listed is thesvg@3.3.8 on 2026-09-18, with @thesvg/cli@0.7.3 on 2026-09-13. Releases are frequent and the CLI is versioned separately from the icon package, so a CLI upgrade and an icon upgrade are two different operations. The repository uses Changesets with a GitHub changelog generator, so version bumps come with generated changelog entries rather than hand-written release notes.

The upgrade cost is mostly mechanical, but two things bite. First, because icons are imported by subpath, a renamed or removed icon is a build error, not a silent fallback. That is better than a missing image at runtime, but it means a minor version bump can break your build if an icon slug changes. Second, the quarterly cloud collections mean an upgrade can swap out a large number of AWS or Azure files at once, which will show up as a large diff even though you changed one version number.

On licence implications, the practical step is to read LICENSING.md and TRADEMARK.md at the repository root and map each collection you import to its stated terms. The README confirms CC BY-ND 2.0 for AWS and CC0-1.0 for Auth Badges; the rest is not stated in the README. That is a documentation gap you should close yourself rather than assume MIT covers everything.

## Conclusion

Adopt thesvg if you need brand logos and cloud architecture icons in the same import path and you are willing to track per-collection licences. Do not adopt it if you need a single uniform licence across every icon, or if your icon set must be frozen for a long release cycle, because the AWS, Azure and GCP collections are marked as quarterly updates. Before wiring it into a build, check the LICENSING.md and TRADEMARK.md files at the repository root against the collections you actually import, and confirm which subpath exports exist in the version you pin.

## FAQ

### How do I install thesvg?

The README gives npm install thesvg as the primary path, and also documents a Homebrew tap via brew tap glincker/thesvg followed by brew install thesvg. A scoped package, @thesvg/icons, is mentioned as the option to use for tree-shaking.

### Does thesvg work with React?

The README's example imports an icon from a subpath and reads its svg property as a raw SVG string, which you can render in React. The package is described as framework-agnostic and TypeScript-first with dual ESM and CJS output, so React, Vue, Svelte and plain HTML are all listed as supported.

### What licence does thesvg use?

The package is MIT, but the README states the AWS Architecture icons are distributed unmodified under CC BY-ND 2.0 and the Auth Badges collection is CC0-1.0. The repository root carries separate LICENSING.md, LEGAL.md and TRADEMARK.md files, so the licences are layered rather than uniform across collections.

### How many icons does thesvg include?

The README states 7,400+ icons in total and 12,300+ SVG variants. The collections break down as 4,675 brand icons, 858 Auth Badges, 739 AWS Architecture icons, 626 Azure Service icons, 256 community icons, 214 Google Cloud icons and 38 Kubernetes icons.

### What opens a .svg file?

This question is about the SVG file format generally, not about thesvg. The README for this project does not cover SVG viewers or editors.

## Sources

- [glincker/thesvg on GitHub](https://github.com/glincker/thesvg)
- [License: MIT](https://github.com/glincker/thesvg/blob/main/LICENSE)
- [Project website](https://thesvg.org/)
- [README](https://github.com/glincker/thesvg/blob/main/README.md)
- [Releases](https://github.com/glincker/thesvg/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/glincker-thesvg