Tabler Icons Set

A set of over 550 free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24×24 grid and a 2px stroke.

A set of over 550 free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24×24 grid and a 2px stroke.

You can add Tabler Icons to your project via an NPM module, or paste the SVG code directly in HTML.

Installation

npm install tabler-icons --save

Usage

All icons are built with SVG, so you can place them as <img>background-image and inline in HTML code.

HTML image

If you load an icon as an image, you can modify its size using CSS.

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

Inline HTML

You can paste the content of the icon file into your HTML code to display it on the page.

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

Thanks to that, you can change the size, color and the stroke-width of the icons with CSS code.

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

SVG sprite

Add an icon to be displayed on your page with the following markup (activity in the above example can be replaced with any valid icon name):

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

Multiple strokes

All icons in this repository have been created with the value of the stroke-width property, so if you change the value, you can get different icon variants that will fit in well with your design.


0 Shares:
Leave a Reply

Your email address will not be published. Required fields are marked *

three × 3 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like

8 Credit / Debit Card Icons

8 Credit / Debit Card Icons used everywhere on the internet specially on e-commerce web sites, on-line stores, donation buttons or affiliate links
Read More

10 Free Famous Fonts

Top of 10 Famous Fonts. You saw they a lot of times in TV shows, movies, publications, music, food…
Read More

Clockwise Sans Serif Font

Clockwise – a friendly sans serif font with 4 weights and italics. It includes over 315 glyphs, including:…