2020-03-10 23:09:22 +01:00
# Tabler Icons
2020-03-01 16:06:35 +01:00
2020-03-11 22:27:55 +01:00
A set of over 300 free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid and a `2px` stroke.
2020-03-10 23:15:59 +01:00
2020-03-21 22:36:30 +01:00
**If you want to support my project and help me grow it, you can [become a sponsor on GitHub ](https://github.com/sponsors/codecalm ) or just [donate me on PayPal ](https://paypal.me/codecalm ) :)**
2020-03-10 23:15:59 +01:00
## Preview
2020-03-01 19:02:17 +01:00
2020-03-21 22:33:22 +01:00
![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/icons.png)
2020-03-05 23:48:52 +01:00
2020-03-10 23:00:25 +01:00
2020-03-19 10:07:07 +01:00
## Installation
```
npm install tabler-icons --save
```
2020-03-19 10:08:08 +01:00
or just [download from Github ](https://github.com/tabler/tabler-icons/releases ).
2020-03-19 10:07:07 +01:00
2020-03-10 23:15:59 +01:00
## Usage
All icons are built with SVG, so you can place them as `<img>` , `background-image` and inline in HTML code.
2020-03-10 23:30:00 +01:00
### HTML image
2020-03-12 11:59:18 +01:00
If you load an icon as an image, you can modify its size using CSS.
2020-03-10 23:30:00 +01:00
```html
< img src = "path/to/icon.svg" alt = "icon title" / >
```
2020-03-10 23:20:23 +01:00
### Inline HTML
2020-03-11 22:27:55 +01:00
You can paste the content of the icon file into your HTML code to display it on the page.
2020-03-10 23:30:00 +01:00
2020-03-10 23:15:59 +01:00
```html
2020-03-10 23:20:23 +01:00
< a href = "" >
2020-03-10 23:30:00 +01:00
< svg xmlns = "http://www.w3.org/2000/svg"
2020-03-19 12:52:47 +01:00
class="icon icon-tabler icon-tabler-disabled"
2020-03-10 23:30:00 +01:00
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
2020-03-10 23:20:23 +01:00
< / a >
2020-03-10 23:00:25 +01:00
```
2020-03-11 22:27:55 +01:00
Thanks to that, you can change the size, color and the `stroke-width` of the icons with CSS code.
2020-03-10 23:30:00 +01:00
```css
.icon-tabler {
color: red;
width: 32px;
height: 32px;
stroke-width: 1.25;
}
```
### SVG sprite
2020-03-11 22:27:55 +01:00
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):
2020-03-10 23:30:00 +01:00
```html
< svg width = "24" height = "24" >
2020-03-10 23:31:42 +01:00
< use xlink:href = "path/to/tabler-sprite.svg #tabler -activity" />
2020-03-10 23:30:00 +01:00
< / svg >
```
2020-03-10 23:15:59 +01:00
## Multiple strokes
2020-03-05 23:48:52 +01:00
2020-03-11 22:27:55 +01:00
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.
2020-03-10 23:00:25 +01:00
2020-03-21 22:33:22 +01:00
![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/icons-stroke.png)
2020-03-10 23:09:22 +01:00
## License
Tabler Icons is licensed under the [MIT License ](https://github.com/tabler/tabler-icons/blob/master/LICENSE ).