Install

npm install @thesvg/icons

Also available as thesvg for convenience:

npm install thesvg

Quick Start

// 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: "<svg...>", mono: "<svg...>" }

Usage

Named exports

import { svg, title, hex, categories, variants } from "@thesvg/icons/github";

Barrel import

import { github, vercel, stripe } from "@thesvg/icons";

Note: Barrel imports include all icons and skip tree-shaking. Prefer per-icon imports.

React

import { svg } from "@thesvg/icons/github";

export function GitHubLogo() {
  return <div dangerouslySetInnerHTML={{ __html: svg }} />;
}

Variants

Each icon can have multiple variants: default, mono, light, dark, wordmark, and more.

import github from "@thesvg/icons/github";

const darkSvg = github.variants["dark"];
const monoSvg = github.variants["mono"];

Icon Shape

Every icon module exports:

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<string, string>;// 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.

// 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:

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

Packages

| Package | Description | |---------|-------------| | @thesvg/icons | Core icon data (this package) | | thesvg | Convenience wrapper | | @thesvg/react | Typed React components | | @thesvg/cli | CLI tool |

Contributing

Found a missing icon or incorrect data? Open an issue or submit an icon 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.