ContextQMD
Back to Tabler Icons

Tabler Icons

packages/icons/README.md

3.41.12.9 KB
Original Source

Tabler Icons

<p align="center"> <a href="https://tabler.io/icons?ref=tabler-icons-readme"></a> </p> <p align="center"> A set of <!--icons-count-->6092<!--/icons-count--> 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. <p> <p align="center"> <a href="https://tabler.io/icons"><strong>Browse all icons at tabler.io &rarr;</strong></a> </p> <p align="center"> <a href="https://github.com/tabler/tabler-icons/releases"></a> <a href="https://github.com/tabler/tabler-icons/blob/master/LICENSE"></a> </p>

Sponsors

If you want to support my project and help me grow it, you can become a sponsor on GitHub or just donate on PayPal :)

<a href="https://github.com/sponsors/codecalm"> </a>

Installation

yarn add @tabler/icons

or

npm install @tabler/icons

or

pnpm install @tabler/icons

or just download from Github.

Usage

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

HTML image

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

html

Inline HTML

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

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

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

Contributing

For more info on how to contribute please see the contribution guidelines.

Caught a mistake or want to contribute to the documentation? Edit this page on Github

License

Tabler Icons is licensed under the MIT License.

<a href="https://github.com/sponsors/codecalm" target="_blank"></a>