Components

Icons

Use one of over 3000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.

Base icon

<!-- SVG icon from http://tabler-icons.io/i/heart -->
<svg>...</svg>
<!-- SVG icon from http://tabler-icons.io/i/ghost-2 -->
<svg>...</svg>
<!-- SVG icon from http://tabler-icons.io/i/lego -->
<svg>...</svg>
<!-- SVG icon from http://tabler-icons.io/i/building-carousel -->
<svg>...</svg>

Filled icons

<!-- SVG icon from http://tabler-icons.io/i/heart-filled -->
<svg>...</svg>
<!-- SVG icon from http://tabler-icons.io/i/bell-ringing-filled -->
<svg>...</svg>
<!-- SVG icon from http://tabler-icons.io/i/cherry-filled -->
<svg>...</svg>
<!-- SVG icon from http://tabler-icons.io/i/circle-key-filled -->
<svg>...</svg>

Icon colors

<span class="text-red">
  <!-- SVG icon from http://tabler-icons.io/i/heart-filled -->
  <svg>...</svg>
</span>
<span class="text-yellow">
  <!-- SVG icon from http://tabler-icons.io/i/star-filled -->
  <svg>...</svg>
</span>
<span class="text-blue">
  <!-- SVG icon from http://tabler-icons.io/i/circle -->
  <svg>...</svg>
</span>
<span class="text-green">
  <!-- SVG icon from http://tabler-icons.io/i/square-rounded -->
  <svg>...</svg>
</span>

Icon animations

<!-- SVG icon from http://tabler-icons.io/i/heart -->
<svg class="icon-pulse" ...>...</svg>

<!-- SVG icon from http://tabler-icons.io/i/bell -->
<svg class="icon-tada" ...>...</svg>

<!-- SVG icon from http://tabler-icons.io/i/rotate-clockwise -->
<svg class="icon-rotate" ...>...</svg>

Consider becoming a GitHub Sponsor to support Tabler development and sustainability!