docs/pages/ui/components/icon.mdx - dev - githubmirror/tabler

docs/pages/ui/components/icon.mdx
57 строк3 KB
Paweł Kuna
Add quality gates: Prettier for Astro, astro check for shared, unused SCSS variable lint (#2749)
03 авг 2026, 01:47
03 авг 2026, 01:478962710
---
title: Icon
summary: Use an icon from over 5000 options created specifically for Tabler to make your dashboard more attractive. Each icon is available under the MIT license, so it can be used in both private and commercial projects.
banner: icons
description: Enhance a dashboard with a custom icon.
layout: '@layouts/DocsMdxLayout.astro'
---
import Example from '@components/Example.astro';
import Icon from '@ui/Icon.astro';

If you need to add icons to your website, you can use the [Tabler Icons library](https://tabler.io/icons). It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects.

## Base icon

To add an icon to your code copy the SVG code from the Tabler Icons website and paste it into your HTML file.

```html
<Icon name="heart" />
```

Results can be seen in the example below.

<Example>
<Icon name="heart" /> <Icon name="ghost-2" /> <Icon name="lego" /> <Icon name="building-carousel" />
</Example>

## Filled icons

To use filled icons, you need to copy the SVG code of the selected filled Icon from the [Tabler Icons website](https://tabler.io/icons) and paste it into your HTML file.

<Example>
<Icon name="heart" type="filled" /> <Icon name="bell-ringing" type="filled" /> <Icon name="cherry" type="filled" /> <Icon name="circle-key" type="filled" />
</Example>

## Icon colors

To change the color of the icon, you need to add the `text-*` class to the parent element of the icon. See the [full list of available colors](/ui/base/colors) for more details. Color classes can be used with any HTML element.

```html
<span class="text-red">
  <!-- Icon code here -->
</span>
```

Look at the example below to see how the color of the icon changes.

<Example>
<span class="text-red"> <Icon name="heart" type="filled" /> </span> <span class="text-yellow"> <Icon name="star" type="filled" /> </span> <span class="text-blue"> <Icon name="circle" /> </span> <span class="text-green"> <Icon name="square-rounded" /> </span>
</Example>

## Icon animations

To add an animation to the icon, you need to add the `icon-pulse`, `icon-tada`, or `icon-rotate` class to the SVG element.

<Example>
<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" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <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" /> </svg> <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" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <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" /> <path d="M9 17v1a3 3 0 0 0 6 0v-1" /> </svg> <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" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" /> </svg>
</Example>