tabler-icons - Open-source SVG Icons for Versatile Use in Modern Web Development

Introduction to Tabler Icons

Tabler Icons offers a remarkable collection of 5,700 high-quality SVG icons freely available under the MIT license. Crafted meticulously on a 24x24 grid with a 2px stroke, these icons provide web developers with an extensive set of visually appealing graphical assets to enhance their projects.

What Are Tabler Icons?

Tabler Icons serves as a comprehensive library for developers, providing both outline and filled versions of icons. The outline version includes 4,882 icons, while the filled version comprises 818 icons. By visiting tabler-icons.io, users can easily browse through the entire collection and find icons that best suit their project needs.

How to Use Tabler Icons

Installation

Developers can effortlessly incorporate Tabler Icons into their projects via npm with the command:

npm install @tabler/icons --save

Alternatively, users can download the icons directly from GitHub.

Usage in HTML

Icons can be integrated into HTML as an <img>, used as a background-image, or placed inline. For example, an icon image can be added via:

<img src="path/to/icon.svg" alt="icon title" />

Developers can also paste SVG content directly into HTML to modify attributes like size, color, and stroke width using CSS:

<a href="">
  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-disabled" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.25" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    ...
  </svg>
  Click me
</a>

.icon-tabler {
  color: red;
  width: 32px;
  height: 32px;
  stroke-width: 1.25;
}

Icons can also be displayed using SVG sprite:

<svg width="24" height="24">
  <use xlink:href="path/to/tabler-sprite.svg#tabler-activity" />
</svg>

Framework Integration

Tabler Icons can be integrated seamlessly into various frameworks, enhancing development flexibility:

React: Available via @tabler/icons-react. Developers can import and customize icon components effortlessly.
Vue: Available as @tabler/icons-vue. Developers can use components in Vue templates with customizable options for color, size, and stroke width.
Angular: Available through angular-tabler-icons. Developers can manage icons through a modular approach in Angular projects.
Svelte: Available as @tabler/icons-svelte. Svelte users can import and configure icons within their applications.

Additional Usage

Tabler Icons are accessible over a CDN, ensuring convenient usage without local installation. Developers working with different platforms like HTML, CSS, or mobile applications using Jetpack Compose can utilize these icons with ease.

Customization & Flexibility

The library supports multiple stroke widths, allowing customization based on design requirements. Developers can also compile font files with specific subsets of icons to optimize file size and performance.

Sponsorship and Support

Tabler Icons is an open-source project open to sponsorship and donations through GitHub and PayPal. By supporting the project, users can contribute to its ongoing development and growth.

Conclusion

Whether for web applications, mobile projects, or other digital interfaces, Tabler Icons provides a versatile, high-quality icon set suitable for various design needs. With easy integration options and vast customization capabilities, Tabler Icons stands as a valuable resource for developers worldwide.