|
|
@@ -1,101 +1,10 @@
|
|
|
---
|
|
|
title: Tabler Icons
|
|
|
-description: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customisation options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
|
|
|
+summary: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customisation options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
|
|
|
order: 2
|
|
|
+description: Over 5000 pixel-perfect icons for web design and development
|
|
|
---
|
|
|
|
|
|
-```html example centered separated
|
|
|
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-ghost" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
|
- <path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7"></path>
|
|
|
- <path d="M10 10l.01 0"></path>
|
|
|
- <path d="M14 10l.01 0"></path>
|
|
|
- <path d="M10 14a3.5 3.5 0 0 0 4 0"></path>
|
|
|
-</svg>
|
|
|
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
|
- <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
|
|
|
-</svg>
|
|
|
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-yin-yang" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
|
- <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
|
|
|
- <path d="M12 3a4.5 4.5 0 0 0 0 9a4.5 4.5 0 0 1 0 9"></path>
|
|
|
- <circle cx="12" cy="7.5" r=".5" fill="currentColor"></circle>
|
|
|
- <circle cx="12" cy="16.5" r=".5" fill="currentColor"></circle>
|
|
|
-</svg>
|
|
|
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg 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">
|
|
|
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
|
- <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>
|
|
|
-</svg>
|
|
|
-```
|
|
|
-
|
|
|
-## Customize stroke
|
|
|
-
|
|
|
-The `stroke-width` property is a powerful tool for customizing icons. This property allows you to control the thickness of the stroke used to outline an icon, giving you precise control over its appearance. By adjusting the `stroke-width` property, you can make an icon more or less prominent, change its emphasis, or create unique visual effects. For example, a thinner stroke may be ideal for icons with intricate designs or fine details, while a thicker stroke can add visual weight and impact to simpler, bolder icons.
|
|
|
-
|
|
|
-All icons are designed by default with `2px` stroke.
|
|
|
-
|
|
|
-```html example centered separated
|
|
|
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-cherry" width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="stroke-width: 1">
|
|
|
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
|
- <path d="M7.5 16.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0"></path>
|
|
|
- <path d="M17 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
|
|
|
- <path d="M9 13c.366 -2 1.866 -3.873 4.5 -5.6"></path>
|
|
|
- <path d="M17 15c-1.333 -2.333 -2.333 -5.333 -1 -9"></path>
|
|
|
- <path d="M5 6c3.667 -2.667 7.333 -2.667 11 0c-3.667 2.667 -7.333 2.667 -11 0"></path>
|
|
|
-</svg>
|
|
|
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-cherry" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="stroke-width: 1.5">
|
|
|
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
|
- <path d="M7.5 16.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0"></path>
|
|
|
- <path d="M17 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
|
|
|
- <path d="M9 13c.366 -2 1.866 -3.873 4.5 -5.6"></path>
|
|
|
- <path d="M17 15c-1.333 -2.333 -2.333 -5.333 -1 -9"></path>
|
|
|
- <path d="M5 6c3.667 -2.667 7.333 -2.667 11 0c-3.667 2.667 -7.333 2.667 -11 0"></path>
|
|
|
-</svg>
|
|
|
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-cherry" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="stroke-width: 2">
|
|
|
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
|
- <path d="M7.5 16.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0"></path>
|
|
|
- <path d="M17 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
|
|
|
- <path d="M9 13c.366 -2 1.866 -3.873 4.5 -5.6"></path>
|
|
|
- <path d="M17 15c-1.333 -2.333 -2.333 -5.333 -1 -9"></path>
|
|
|
- <path d="M5 6c3.667 -2.667 7.333 -2.667 11 0c-3.667 2.667 -7.333 2.667 -11 0"></path>
|
|
|
-</svg>
|
|
|
-```
|
|
|
-
|
|
|
-```html
|
|
|
-<svg stroke-width="1" ...>
|
|
|
- ...
|
|
|
-</svg>
|
|
|
-<svg stroke-width="1.5" ...>
|
|
|
- ...
|
|
|
-</svg>
|
|
|
-<svg stroke-width="2" ...>
|
|
|
- ...
|
|
|
-</svg>
|
|
|
-```
|
|
|
-
|
|
|
-## Filled version of icons
|
|
|
-
|
|
|
-```html example centered separated
|
|
|
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-bell-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
|
- <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>
|
|
|
- <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>
|
|
|
-</svg>
|
|
|
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-diamond-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
|
- <path d="M18 4a1 1 0 0 1 .783 .378l.074 .108l3 5a1 1 0 0 1 -.032 1.078l-.08 .103l-8.53 9.533a1.7 1.7 0 0 1 -1.215 .51c-.4 0 -.785 -.14 -1.11 -.417l-.135 -.126l-8.5 -9.5a1 1 0 0 1 -.172 -1.067l.06 -.115l3.013 -5.022l.064 -.09a.982 .982 0 0 1 .155 -.154l.089 -.064l.088 -.05l.05 -.023l.06 -.025l.109 -.032l.112 -.02l.117 -.005h12zm-8.886 3.943a1 1 0 0 0 -1.371 .343l-.6 1l-.06 .116a1 1 0 0 0 .177 1.07l2 2.2l.09 .088a1 1 0 0 0 1.323 -.02l.087 -.09a1 1 0 0 0 -.02 -1.323l-1.501 -1.65l.218 -.363l.055 -.103a1 1 0 0 0 -.398 -1.268z" stroke-width="0" fill="currentColor"></path>
|
|
|
-</svg>
|
|
|
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-discount-check-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
|
- <path d="M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor"></path>
|
|
|
-</svg>
|
|
|
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-shield-check-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
|
- <path d="M11.998 2l.118 .007l.059 .008l.061 .013l.111 .034a.993 .993 0 0 1 .217 .112l.104 .082l.255 .218a11 11 0 0 0 7.189 2.537l.342 -.01a1 1 0 0 1 1.005 .717a13 13 0 0 1 -9.208 16.25a1 1 0 0 1 -.502 0a13 13 0 0 1 -9.209 -16.25a1 1 0 0 1 1.005 -.717a11 11 0 0 0 7.531 -2.527l.263 -.225l.096 -.075a.993 .993 0 0 1 .217 -.112l.112 -.034a.97 .97 0 0 1 .119 -.021l.115 -.007zm3.71 7.293a1 1 0 0 0 -1.415 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor"></path>
|
|
|
-</svg>
|
|
|
-```
|
|
|
-
|
|
|
## Browse icons
|
|
|
|
|
|
Tabler Icons is a comprehensive icon library that features over <IconsCount rounded /> high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications.
|
codecalm