Home Explore Help
Sign In
SMusatov
/
tabler
mirror of https://github.com/tabler/tabler.git
1
0
Fork 0
Files
Tree: fbfc301f20
Branches Tags
tabler
/
docs
/
components
/
icons.mdx

icons.mdx 9.8 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120 
  1. ---
    2. 

  2. title: Icons
    3. 

  3. description: 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.
    4. 

  4. banner: icons
    5. 

  5. ---
    6. 

  6. 

  7. ## Base icon
    8. 

  8. 

  9. ```html code example centered separated
    10. 

  10. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    11. 

  11.   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    12. 

  12.   <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
    13. 

  13. </svg>
    14. 

  14. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-ghost-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    15. 

  15.   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    16. 

  16.   <path d="M10 9h.01"></path>
    17. 

  17.   <path d="M14 9h.01"></path>
    18. 

  18.   <path d="M12 3a7 7 0 0 1 7 7v1l1 0a2 2 0 1 1 0 4l-1 0v3l2 3h-10a6 6 0 0 1 -6 -5.775l0 -.226l-1 0a2 2 0 0 1 0 -4l1 0v-1a7 7 0 0 1 7 -7z"></path>
    19. 

  19.   <path d="M11 14h2a1 1 0 0 0 -2 0z"></path>
    20. 

  20. </svg>
    21. 

  21. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-lego" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    22. 

  22.   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    23. 

  23.   <path d="M9.5 11l.01 0"></path>
    24. 

  24.   <path d="M14.5 11l.01 0"></path>
    25. 

  25.   <path d="M9.5 15a3.5 3.5 0 0 0 5 0"></path>
    26. 

  26.   <path d="M7 5h1v-2h8v2h1a3 3 0 0 1 3 3v9a3 3 0 0 1 -3 3v1h-10v-1a3 3 0 0 1 -3 -3v-9a3 3 0 0 1 3 -3"></path>
    27. 

  27. </svg>
    28. 

  28. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-building-carousel" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    29. 

  29.   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    30. 

  30.   <path d="M12 12m-6 0a6 6 0 1 0 12 0a6 6 0 1 0 -12 0"></path>
    31. 

  31.   <path d="M5 8m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
    32. 

  32.   <path d="M12 4m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
    33. 

  33.   <path d="M19 8m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
    34. 

  34.   <path d="M5 16m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
    35. 

  35.   <path d="M19 16m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
    36. 

  36.   <path d="M8 22l4 -10l4 10"></path>
    37. 

  37. </svg>
    38. 

  38. ```
    39. 

  39. 

  40. ## Filled icons
    41. 

  41. 

  42. ```html code example centered separated
    43. 

  43. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    44. 

  44.   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    45. 

  45.   <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
    46. 

  46. </svg>
    47. 

  47. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bell-ringing-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    48. 

  48.   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    49. 

  49.   <path d="M17.451 2.344a1 1 0 0 1 1.41 -.099a12.05 12.05 0 0 1 3.048 4.064a1 1 0 1 1 -1.818 .836a10.05 10.05 0 0 0 -2.54 -3.39a1 1 0 0 1 -.1 -1.41z" stroke-width="0" fill="currentColor"></path>
    50. 

  50.   <path d="M5.136 2.245a1 1 0 0 1 1.312 1.51a10.05 10.05 0 0 0 -2.54 3.39a1 1 0 1 1 -1.817 -.835a12.05 12.05 0 0 1 3.045 -4.065z" stroke-width="0" fill="currentColor"></path>
    51. 

  51.   <path d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z" stroke-width="0" fill="currentColor"></path>
    52. 

  52.   <path d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008 .043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143 1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387 -1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821 -6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004z" stroke-width="0" fill="currentColor"></path>
    53. 

  53. </svg>
    54. 

  54. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cherry-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    55. 

  55.   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    56. 

  56.   <path d="M16.588 5.191l.058 .045l.078 .074l.072 .084l.013 .018a.998 .998 0 0 1 .182 .727l-.022 .111l-.03 .092c-.99 2.725 -.666 5.158 .679 7.706a4 4 0 1 1 -4.613 4.152l-.005 -.2l.005 -.2a4.002 4.002 0 0 1 2.5 -3.511c-.947 -2.03 -1.342 -4.065 -1.052 -6.207c-.166 .077 -.332 .15 -.499 .218l.094 -.064c-2.243 1.47 -3.552 3.004 -3.98 4.57a4.5 4.5 0 1 1 -7.064 3.906l-.004 -.212l.005 -.212a4.5 4.5 0 0 1 5.2 -4.233c.332 -1.073 .945 -2.096 1.83 -3.069c-1.794 -.096 -3.586 -.759 -5.355 -1.986l-.268 -.19l-.051 -.04l-.046 -.04l-.044 -.044l-.04 -.046l-.04 -.05l-.032 -.047l-.035 -.06l-.053 -.11l-.038 -.116l-.023 -.117l-.005 -.042l-.005 -.118l.01 -.118l.023 -.117l.038 -.115l.03 -.066l.023 -.045l.035 -.06l.032 -.046l.04 -.051l.04 -.046l.044 -.044l.046 -.04l.05 -.04c4.018 -2.922 8.16 -2.922 12.177 0z" stroke-width="0" fill="currentColor"></path>
    57. 

  57. </svg>
    58. 

  58. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-key-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    59. 

  59.   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    60. 

  60.   <path d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -20 0c0 -5.523 4.477 -10 10 -10zm2 5a3 3 0 0 0 -2.98 2.65l-.015 .174l-.005 .176l.005 .176c.019 .319 .087 .624 .197 .908l.09 .209l-3.5 3.5l-.082 .094a1 1 0 0 0 0 1.226l.083 .094l1.5 1.5l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l.083 -.094a1 1 0 0 0 0 -1.226l-.083 -.094l-.792 -.793l.585 -.585l.793 .792l.094 .083a1 1 0 0 0 1.403 -1.403l-.083 -.094l-.792 -.793l.792 -.792a3 3 0 1 0 1.293 -5.708zm0 2a1 1 0 1 1 0 2a1 1 0 0 1 0 -2z" stroke-width="0" fill="currentColor"></path>
    61. 

  61. </svg>
    62. 

  62. ```
    63. 

  63. 

  64. ## Icon colors
    65. 

  65. 

  66. ```html example code centered separated
    67. 

  67. <span class="text-red">
    68. 

  68.   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    69. 

  69.     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    70. 

  70.     <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
    71. 

  71.   </svg>
    72. 

  72. </span>
    73. 

  73. <span class="text-yellow">
    74. 

  74.   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    75. 

  75.     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    76. 

  76.     <path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z" stroke-width="0" fill="currentColor"></path>
    77. 

  77.   </svg>
    78. 

  78. </span>
    79. 

  79. <span class="text-blue">
    80. 

  80.   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    81. 

  81.     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    82. 

  82.     <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
    83. 

  83.   </svg>
    84. 

  84. </span>
    85. 

  85. <span class="text-green">
    86. 

  86.   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-rounded" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    87. 

  87.     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    88. 

  88.     <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z"></path>
    89. 

  89.   </svg>
    90. 

  90. </span>
    91. 

  91. ```
    92. 

  92. 

  93. ## Icon animations
    94. 

  94. 

  95. ```html example centered separated
    96. 

  96. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-pulse" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    97. 

  97.   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    98. 

  98.   <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
    99. 

  99. </svg>
    100. 

  100. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tada" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    101. 

  101.   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    102. 

  102.   <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
    103. 

  103.   <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
    104. 

  104. </svg>
    105. 

  105. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-rotate" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    106. 

  106.   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    107. 

  107.   <path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
    108. 

  108. </svg>
    109. 

  109. ```
    110. 

  110. 

  111. ```html
    112. 

  112. <!-- SVG icon from http://tabler-icons.io/i/heart -->
    113. 

  113. <svg class="icon-pulse" ...>...</svg>
    114. 

  114. 

  115. <!-- SVG icon from http://tabler-icons.io/i/bell -->
    116. 

  116. <svg class="icon-tada" ...>...</svg>
    117. 

  117. 

  118. <!-- SVG icon from http://tabler-icons.io/i/rotate-clockwise -->
    119. 

  119. <svg class="icon-rotate" ...>...</svg>
    120. 

  120. ```
    121.