You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

78 lines
2.1 KiB

5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
  1. # Tabler Icons
  2. A set of over 400 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.
  3. **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 on PayPal](https://paypal.me/codecalm) :)**
  4. ## Preview
  5. ![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/icons.png)
  6. ## Installation
  7. ```
  8. npm install tabler-icons --save
  9. ```
  10. or just [download from Github](https://github.com/tabler/tabler-icons/releases).
  11. ## Usage
  12. All icons are built with SVG, so you can place them as `<img>`, `background-image` and inline in HTML code.
  13. ### HTML image
  14. If you load an icon as an image, you can modify its size using CSS.
  15. ```html
  16. <img src="path/to/icon.svg" alt="icon title"/>
  17. ```
  18. ### Inline HTML
  19. You can paste the content of the icon file into your HTML code to display it on the page.
  20. ```html
  21. <a href="">
  22. <svg xmlns="http://www.w3.org/2000/svg"
  23. class="icon icon-tabler icon-tabler-disabled"
  24. width="24" height="24" viewBox="0 0 24 24"
  25. stroke-width="1.25" stroke="currentColor" fill="none"
  26. stroke-linecap="round" stroke-linejoin="round">
  27. ...
  28. </svg>
  29. Click me
  30. </a>
  31. ```
  32. Thanks to that, you can change the size, color and the `stroke-width` of the icons with CSS code.
  33. ```css
  34. .icon-tabler {
  35. color: red;
  36. width: 32px;
  37. height: 32px;
  38. stroke-width: 1.25;
  39. }
  40. ```
  41. ### SVG sprite
  42. 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):
  43. ```html
  44. <svg width="24" height="24">
  45. <use xlink:href="path/to/tabler-sprite.svg#tabler-activity"/>
  46. </svg>
  47. ```
  48. ## Multiple strokes
  49. 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.
  50. ![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/icons-stroke.png)
  51. ## License
  52. Tabler Icons is licensed under the [MIT License](https://github.com/tabler/tabler-icons/blob/master/LICENSE).