@thesvg/icons
3,800+ brand SVG icons for developers. Tree-shakeable, typed, open source.
Browse all icons →
---
## Install
```bash
npm install @thesvg/icons
```
Also available as [`thesvg`](https://www.npmjs.com/package/thesvg) for convenience:
```bash
npm install thesvg
```
## Quick Start
```ts
// Import a single icon (tree-shakeable - only this icon ships to your bundle)
import github from "@thesvg/icons/github";
github.svg; // raw SVG string
github.title; // "GitHub"
github.hex; // "181717"
github.categories; // ["DevTool", "VCS"]
github.variants; // { default: "", mono: "" }
```
## Usage
### Named exports
```ts
import { svg, title, hex, categories, variants } from "@thesvg/icons/github";
```
### Barrel import
```ts
import { github, vercel, stripe } from "@thesvg/icons";
```
> **Note:** Barrel imports include all icons and skip tree-shaking. Prefer per-icon imports.
### React
```tsx
import { svg } from "@thesvg/icons/github";
export function GitHubLogo() {
return ;
}
```
### Variants
Each icon can have multiple variants: `default`, `mono`, `light`, `dark`, `wordmark`, and more.
```ts
import github from "@thesvg/icons/github";
const darkSvg = github.variants["dark"];
const monoSvg = github.variants["mono"];
```
## Icon Shape
Every icon module exports:
```ts
interface IconModule {
slug: string; // "github"
title: string; // "GitHub"
hex: string; // "181717"
categories: string[]; // ["DevTool", "VCS"]
aliases: string[]; // ["gh"]
svg: string; // raw SVG (default variant)
variants: Record;// all variant SVGs
license: string; // "MIT"
url: string; // brand URL
}
```
## Tree-Shaking
The package is marked `"sideEffects": false`. Bundlers (webpack, Vite, Rollup, esbuild) will only include icons you import.
```ts
// Your bundle only includes the GitHub icon (~3KB), not all 3,800+
import github from "@thesvg/icons/github";
```
## CDN
Use icons directly without a bundler:
```html
```
## Packages
| Package | Description |
|---------|-------------|
| [`@thesvg/icons`](https://www.npmjs.com/package/@thesvg/icons) | Core icon data (this package) |
| [`thesvg`](https://www.npmjs.com/package/thesvg) | Convenience wrapper |
| [`@thesvg/react`](https://www.npmjs.com/package/@thesvg/react) | Typed React components |
| [`@thesvg/cli`](https://www.npmjs.com/package/@thesvg/cli) | CLI tool |
## Contributing
Found a missing icon or incorrect data? [Open an issue](https://github.com/glincker/thesvg/issues) or [submit an icon](https://thesvg.org/submit) on the website.
## License
Icons are distributed under their respective upstream licenses (CC0-1.0, MIT, etc.). See each icon's `license` field.
The package code is [MIT](./LICENSE).
thesvg.org