npm
Sign UpSign In

@thesvg/icons
TypeScript icon, indicating that this package has built-in type declarations

3.0.17 • Public • Published

theSVG - 4,400+ Brand SVG Icons

@thesvg/icons

4,400+ brand SVG icons for developers. Tree-shakeable, typed, open source.
Browse all icons →

npm version npm downloads license GitHub stars

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 4,400+
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.

thesvg.org

Readme

Keywords