tabler/tabler-icons
49.0
Weak · 1 October 2026
2k
lines of production code
TypeScript
with JavaScript
2
measurements over time
What this system is
This system is a comprehensive icon library that distributes 6,220 SVG icons across multiple formats including raw SVGs, PNGs, PDFs, EPS files, and webfonts. It provides framework-specific integration packages for major JavaScript UI libraries such as React, Vue, Angular, Svelte, Preact, SolidJS, and Astro, ensuring type-safe and tree-shakeable usage. The repository also includes a modernized preview site built with Astro and a robust build infrastructure using pnpm workspaces to manage these diverse distribution channels.
How it got here
2020–2023 — Monorepo modernization and framework expansion
13 changes.
The project restructured its repository into a pnpm monorepo with a modern Astro-based build infrastructure, replacing the previous Jekyll setup. This period focused on expanding framework support by releasing dedicated packages for Preact, SolidJS, Angular, and Svelte 5, alongside core format packages for EPS, PDF, and PNG. Comprehensive test harnesses were also established to validate icon rendering and integration across all supported UI libraries.
2024–2026 — Framework expansion and modernization
8 changes.
This period focused on expanding framework support by introducing new packages for Preact, Svelte 5, Angular, and Astro, alongside an SVG sprite generator. It also involved modernizing existing React, React Native, and Vue implementations to ensure compatibility with recent type definition updates and improve accessibility.
Features
Initial release of @tabler/icons-preact package
This change introduces the new \@tabler/icons-preact\ package, providing an implementation of Tabler Icons specifically for Preact applications. The package exports individual icons as ES module components that support tree-shaking, allowing developers to import and use icons like \IconArrowDown\ directly in their JSX. It includes standard props for customization such as \size\, \color\, \stroke\, and \title\, and ships with TypeScript declarations. The release also includes a build system using Rollup, configuration for Vitest testing, and comprehensive test coverage to ensure correct rendering of SVG attributes and classes.
(repo-wide) · high confidence
Initial release of Preact icon components
This change introduces the \icons-preact\ package, providing Preact-compatible components for Tabler Icons. It includes a component generator (\createPreactComponent\) that renders SVG icons with support for customization via props such as \color\, \size\, \stroke\, and \className\, while also allowing arbitrary attribute spreading and child content. The implementation ensures accessibility by adding \\<title\>\ elements to SVGs and exports standard types (\Icon\, \IconProps\) and a complete icon list for programmatic access.
packages/icons-preact/src, packages/icons-solidjs/src · high confidence
Initial release of the core @tabler/icons package
The core \@tabler/icons\ package is now available, providing a collection of 6,220 free, MIT-licensed SVG icons. Users can install the package via npm, yarn, or pnpm to access outline and filled icon sets, which are distributed as individual SVG files, category-grouped directories, and metadata JSON files (\icons.json\, \tabler-nodes.json\). The package includes a build script to generate these assets and supports usage as HTML image sources, CSS background images, or inline SVGs that inherit CSS styles like color and stroke-width.
packages/icons · high confidence
Introduce @tabler/icons-sprite package for SVG sprite generation
A new \@tabler/icons-sprite\ package has been added, providing pre-built SVG sprite files that allow users to reference icons via the \\<use\>\ element. The package includes a build script that generates three distinct sprite variants: \tabler-sprite.svg\ (outline icons with a fixed 2px stroke), \tabler-sprite-nostroke.svg\ (outline icons without stroke attributes for CSS customization), and \tabler-sprite-filled.svg\ (filled icons). This enables more efficient icon usage by bundling all icons into a single file that can be served via CDN or local distribution.
packages/icons-sprite · high confidence
New @tabler/icons-svelte-runes package for Svelte 5
A new package, @tabler/icons-svelte-runes, is available for Svelte 5 applications, utilizing the runes reactivity system ($props, $derived) instead of the legacy export let syntax used in the standard @tabler/icons-svelte package. The package provides the same icon API (size, color, stroke, class) and TypeScript definitions, allowing users to migrate by simply changing the import path. It includes a build system to generate individual icon components, a test suite using Vitest and Testing Library to verify rendering and props, and documentation with usage examples for dynamic icons and reactive sizing.
packages/icons-svelte-runes · high confidence
New Angular and Astro packages for Tabler Icons
This release adds two new framework-specific packages: \@tabler/icons-angular\ and \@tabler/icons-astro\. The Angular package provides a \TablerIconComponent\ that supports both standalone and NgModule applications, allowing icons to be rendered by name via a \provideTablerIcons()\ provider or directly via \TablerIcon\ objects for tree-shaking. The Astro package exports individual icon components (e.g., \IconArrowRight\) that can be imported and used in Astro templates with props for size, color, and stroke.
packages/icons-angular · high confidence
New EPS, PDF, and PNG icon packages available
Users can now install and use Tabler Icons in EPS, PDF, and PNG formats via the new @tabler/icons-eps, @tabler/icons-pdf, and @tabler/icons-pkg npm packages. Each package provides all 6,220 icons split by style (outline and filled) in the respective format, with PNG icons rendered at 240x240 pixels with a transparent background. Files are also accessible via jsDelivr CDN, and build scripts are included to generate these assets from the source icons.
packages/icons-eps, packages/icons-pdf, packages/icons-png · high confidence
New SolidJS icon package with SSR and JSX support
This change introduces the \@tabler/icons-solidjs\ package, providing a SolidJS implementation of the Tabler Icons library. The package exports individual icons as Solid components, allowing users to pass standard props like \size\, \color\, and \stroke\. It includes specific support for Server-Side Rendering (SSR) via Vite, ensuring the JSX source is correctly emitted for compilation. The package also ships with TypeScript declarations and a test suite to verify rendering and prop handling.
packages/icons-solidjs · high confidence
Architecture
Repository restructured with Astro preview site and pnpm workspaces
The repository has been reorganized to use pnpm workspaces and Turborepo for monorepo management, introducing a new Astro-based preview site (replacing the previous Jekyll/Eleventy setup) and adding standard configuration files like .editorconfig, .npmignore, and pnpm-workspace.yaml. This change establishes a modern build infrastructure with specific dependency catalogs (e.g., Astro 7.2.8, Vitest 4.1.11) and updates the license year to 2026, while also introducing an aliases.json file to map deprecated icon names to their current equivalents.
(repo-wide) · high confidence
Behavioural changes
Placeholder directories added for icon packages
Empty placeholder directories (\.gitkeep\) have been added to the \src/icons\ paths within the Preact, React, and Vue icon packages. This change establishes the directory structure for these packages, likely in preparation for future icon assets, but does not currently introduce any new icons or behavioral changes for users.
packages/icons-preact/src/icons, packages/icons-react/src/icons, packages/icons-vue/src/icons · low confidence
Preview site rebuilt with Astro
The preview site has been migrated from Eleventy to Astro. This change introduces new Astro-specific components, including a global layout, an index page that displays new and categorized icons, and a tags page that presents icons in a sortable table with copy-to-clipboard functionality. The underlying data processing logic has been updated to use Astro's build-time environment, and the styling has been consolidated into a new SCSS file to support the new framework's structure.
(repo-wide) · high confidence
Rebuilt React Native icon components with native SVG rendering and fixed type compatibility
The React Native icon implementation has been rewritten to render directly using \react-native-svg\ instead of relying on React's SVG types, which resolves type-checking breakages caused by the removal of \ReactSVG\ in \@types/react\ 19. This change ensures that outline and filled icons render correctly by applying the appropriate stroke and fill attributes natively, and adds support for the \title\ prop to improve accessibility. The package now exports the \Icon\ type and provides a factory function for creating components, ensuring compatibility with modern React versions while maintaining the existing visual appearance of the icons.
packages/icons-react-native/src · high confidence
Refactored build scripts to use environment variables for versioning
The build scripts in the \.build\ directory have been updated to use environment variables for versioning, improving consistency and clarity in version handling across scripts. This change ensures that version information is managed more robustly during the build process.
.build · high confidence
Svelte Icon component restructured for outline/filled variants
The icon rendering logic has been refactored to support distinct 'outline' and 'filled' visual styles via a new \type\ prop. The \Icon.svelte\ component now delegates default SVG attributes (such as stroke width, line caps, and fill colors) to a new \defaultAttributes\ module, which applies specific defaults based on the selected type. This change introduces a behavioral shift where outline icons use stroke-based styling while filled icons use fill-based styling, and requires users to explicitly specify the icon type to control the rendering mode.
packages/icons-svelte/src · high confidence
Vue icon components now support title tags and robust stroke fallbacks
The Vue icon implementation has been refactored to improve accessibility and rendering consistency. Icon components now accept a \title\ prop, which is rendered as a child \\<title\>\ element within the SVG for better screen-reader support. Additionally, the \stroke\ attribute now correctly falls back to the default value (2) when undefined, and the \currentColor\ color is applied consistently to ensure icons inherit the text color of their parent element by default.
packages/icons-vue/src · high confidence
Webfont build pipeline now uses unstroke for outline icons and supports multiple stroke weights
The webfont generation process has been updated to use the 'unstroke' library to convert outline SVGs to filled outlines, replacing the previous stroke-to-outline pipeline. This new build script processes icons across multiple stroke weights (defined in the 'strokes' configuration) and generates the resulting font files (TTF, WOFF, WOFF2) along with corresponding SCSS and HTML preview pages for each weight.
packages/icons-webfont/.build · high confidence
Fixes
Replaces deprecated ReactSVG types with explicit SVG element definitions
The icons-react package no longer depends on the \ReactSVG\ type from \@types/react\, which was removed in version 19 and caused type-checking failures for users not using \skipLibCheck\. Instead, the package now defines its own \SvgElementName\ type that explicitly lists all valid SVG element names (such as \path\, \circle\, \g\, etc.), ensuring compatibility with newer React type definitions while maintaining the same functional behavior for icon rendering.
packages/icons-react/src · high confidence
Test coverage
Added Svelte test application for icon rendering; Added test harnesses and validation for multiple framework integrations; Added test harnesses for Preact, React, and Vue frameworks.
Dependencies
Tabler Icons 3.48.0 release with Angular 21 and Svelte 5 support
This release updates the icon library to version 3.48.0, introducing official support for Angular 21 (upgrading peer dependencies from version 18) and Svelte 5 via a new \@tabler/icons-svelte-runes\ package. The core \@tabler/icons-svelte\ package now supports Svelte 5 alongside versions 3 and 4. Additionally, the release adds Astro support through \@tabler/icons-astro\, updates the webfont build pipeline to use \unstroke\ instead of the previous \webfont\ tools, and upgrades the root build environment to pnpm 10.30.3 with updated dev dependencies like svgo 4.1.0 and release-it 21.0.0.
(dependencies) · high confidence
Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.
How this codebase got here
Score
- CAI 43 → 49 (+6.3)
- Rubric changed (rubric-2026.09.11 → rubric-2026.09.18) — scores are not directly comparable.
Lenses
- Code Health 94 → 95 (+0.8)
- Architecture 88 → 92 (+3.5)
- Maturity 62 → 62 (+0.0)
- Readiness 52 → 54 (+2.3)
- Security 39 → 73 (+33.6)
- Accessibility 32 → 32 (+0.0)
Resolved (116)
- Critical CVE: [GHSA redacted] (pnpm-lock.yaml)
- Critical CVE: [GHSA redacted] (pnpm-lock.yaml)
- Critical CVE: [GHSA redacted] (pnpm-lock.yaml)
- Critical CVE: [GHSA redacted] (pnpm-lock.yaml)
- Critical CVE: [GHSA redacted] (pnpm-lock.yaml)
- Critical CVE: [GHSA redacted] (pnpm-lock.yaml)
- Critical CVE: [GHSA redacted] (pnpm-lock.yaml)
- Critical vulnerability: [GHSA redacted] (pnpm-lock.yaml)
- Documentation: no installation or build instructions (README.md)
- High CVE: [GHSA redacted] (pnpm-lock.yaml)
- High CVE: [GHSA redacted] (pnpm-lock.yaml)
- High CVE: [GHSA redacted] (pnpm-lock.yaml)
- High CVE: [GHSA redacted] (pnpm-lock.yaml)
- High CVE: [GHSA redacted] (pnpm-lock.yaml)
- High CVE: [GHSA redacted] (pnpm-lock.yaml)
- High CVE: [GHSA redacted] (pnpm-lock.yaml)
- High CVE: [GHSA redacted] (pnpm-lock.yaml)
- High CVE: [GHSA redacted] (pnpm-lock.yaml)
- High CVE: [GHSA redacted] (pnpm-lock.yaml)
- High CVE: [GHSA redacted] (pnpm-lock.yaml)
- …and 96 more
New (12)
- Critical CVE: [GHSA redacted] (pnpm-lock.yaml)
- Documentation: no architecture or design documentation (packages/icons-sprite/README.md)
- Documentation: no architecture or design documentation (packages/icons-svelte-runes/README.md)
- High CVE: [GHSA redacted] (pnpm-lock.yaml)
- High CVE: [GHSA redacted] (pnpm-lock.yaml)
- High CVE: [GHSA redacted] (pnpm-lock.yaml)
- High CVE: [GHSA redacted] (pnpm-lock.yaml)
- Low CVE: [GHSA redacted] (pnpm-lock.yaml)
- Medium CVE: [GHSA redacted] (pnpm-lock.yaml)
- Medium CVE: [GHSA redacted] (pnpm-lock.yaml)
- Medium vulnerability: [GHSA redacted] (pnpm-lock.yaml)
- No ADRs found
Changes since last survey
- 25 commits — 19 feature/other, 6 fixes
By area
- icons/outline — 11 commits
- (root) — 8 commits
- .github/ISSUE_TEMPLATE — 1 commit
- icons/filled — 1 commit
- packages/icons-preact — 1 commit
- packages/icons-solidjs — 1 commit
- packages/icons-webfont — 1 commit
- test/test-react-rsc — 1 commit
Notable commits
- fix: Fix square-dashed icon drawn as a solid square (#1614)
- fix: Fix filled home webfont glyph having zero width in Chrome (#1616)
- fix: Run tests in CI, fix ReactSVG type rot, add type and RSC guards (#1579)
- fix: Update dependencies to fix Dependabot alerts (#1612)
- fix: fix(solidjs): preserve JSX source export for Vite SSR (#1590)
- fix: fix: correct invalid unicode codepoint for align-right-2 icon (#1583)
- change: Add airpods-l, airpods-r, folder-stats, folder-user, map-pinned, reduce-motion, reference-image and secret-phrases icons (#1609)
- change: Add cash-coin, edit-bulk and sticker-smile icons (#1607)
- change: Add duplicate, folder-ai, folder-sparkle, git-branch-, git-merge-queue, git-pull-request-, message--ai, message--sparkle, model-ai, pencil-ai and stack-* icons (#1613)
- change: Add gpu and gpu-2 icons (#1606)
- change: Add orbit, orbit-vertical and orbits icons (#1605)
- change: Add voice and voice-2 icons (#1610)
- change: Add security policy (#1611)
- change: Bump @angular/common from 21.2.5 to 21.2.20 (#1596)
- change: Bump @angular/compiler from 21.2.5 to 21.2.20 (#1594)
- change: Bump @angular/core from 21.2.5 to 21.2.20 (#1595)
- change: Bump adm-zip from 0.5.16 to 0.6.1 (#1604)
- change: Bump astro from 7.0.9 to 7.2.8 (#1593)
- change: Bump svgo from 4.0.0 to 4.1.0 (#1592)
- change: Bump vitest from 4.0.16 to 4.1.11 (#1603)
- …and 5 more
Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.
Survey your own repository
tabler/tabler-icons was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.
About this page
- The score is its most recent published measurement, taken on 1 October 2026 at a pinned commit. It is not a live figure and does not change until the project is measured again.
- Measured at commit 74929e50416e2b7c0abb8368cdc74bdcb2560ab6 — the exact code this score is about.
- Scored under rubric-2026.09.18 — the same rubric and the same method as every other entry in this index.
- Measured by watchdog.canine.dev using codehealth-analyzer preprod-e569280dd5e2.