explaingit

tabler/tabler-icons

📈 Trending★ 20,672JavaScriptAudience · developerComplexity · 2/5ActiveLicenseSetup · easy

TLDR

A collection of 6,000+ free SVG icons in outline and filled styles, ready to use in web projects with npm packages for React, Vue, Svelte, and Angular.

Mindmap

mindmap
  root((repo))
    What it does
      6000+ SVG icons
      Outline and filled
      24x24 grid design
    How to use
      npm packages
      CDN and webfont
      Component libraries
    Customization
      Size control
      Color options
      Stroke width
    Supported frameworks
      React
      Vue
      Svelte
      Angular
    Access
      Icon gallery
      Direct SVG files
      Sprite sheets

Things people build with this

USE CASE 1

Add professional icons to a React, Vue, or Angular web app without designing them yourself.

USE CASE 2

Build a design system or component library with a consistent icon set across your product.

USE CASE 3

Use icons in a static website via CDN or webfont without installing dependencies.

USE CASE 4

Customize icon appearance (size, color, stroke) to match your app's design language.

Tech stack

JavaScriptSVGReactVueSvelteAngularnpm

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

Tabler Icons is a free, MIT-licensed collection of SVG icons for web projects, over 6,000 of them at the count shown in the README (about 5,057 in the outline style and 1,053 in the filled style). Every icon is drawn on a consistent 24-by-24 pixel grid using a 2-pixel stroke, so they share a uniform look and line up well with other icons in the set when you mix and match. Because each icon is a vector (SVG), it stays sharp at any size and its color, stroke width, and dimensions can all be changed with regular CSS. You can pull the icons into a project in several ways. The simplest is to download the SVG file and drop it into HTML as an image, a CSS background, or inline so its colour and stroke pick up your styles. There is also an SVG sprite version so a single file can supply any icon by name. For component-based frameworks, the project publishes ready-made packages: @tabler/icons-react for React, @tabler/icons-vue for Vue, angular-tabler-icons for Angular, and @tabler/icons-svelte for Svelte 4 with a separate @tabler/icons-svelte-runes package for Svelte 5. An icon webfont package is also available, and everything is served over the jsdelivr CDN if you do not want to install anything. The component packages let you pass size, color, stroke width, and other SVG properties as props rather than editing the SVG by hand. TypeScript type declarations are bundled. The project is aimed at anyone building web UIs and is suitable for personal or commercial use under the MIT license. The full README is longer than what was provided.

Copy-paste prompts

Prompt 1
Show me how to install and use Tabler Icons in a React component with custom size and color.
Prompt 2
How do I add Tabler Icons to my Vue 3 project and customize the stroke width?
Prompt 3
I want to use Tabler Icons via CDN in my HTML project without npm, what's the simplest way?
Prompt 4
Can I browse all 6000 Tabler Icons before deciding which ones to use in my design?
Prompt 5
How do I use Tabler Icons in a Svelte 5 project with the new runes syntax?
Open on GitHub → Explain another repo

Generated 2026-05-21 · Model: sonnet-4-6 · Verify against the repo before relying on details.