---
title: Icon
summary: Tabler Icons are over 5,000 MIT-licensed SVG icons drawn for Tabler. This page shows how to embed, size, color and animate them.
description: Use over 5000 free MIT-licensed Tabler icons in your interface. Learn how to embed, size, and animate them in your projects.
related: [/ui/components/switch-icon]
source: core/scss/ui/_icons.scss
css-vars: icon
classnames:
  component:
    - class: icon
      desc: Applied to the svg element
  style:
    - class: icon-filled
      desc: Fills the shape with the current text color
    - class: icon-inline
      desc: Aligns the icon with the surrounding line of text
  behavior:
    - class: icon-pulse
      desc: Pulsing animation
    - class: icon-tada
      desc: Shake animation
    - class: icon-rotate
      desc: Continuous rotation
  size:
    - class: icon-sm
      desc: 1rem
    - class: icon-md
      desc: 1.5rem, with a thinner stroke
    - class: icon-lg
      desc: 2.5rem
---
import Example from '@components/Example.astro';
import Icon from '@ui/Icon.astro';

The [Tabler Icons library](https://tabler.io/icons) has over 5,000 icons under the MIT license, so you can use them in private and commercial projects. If an icon is missing, [request it](/icons/design-guide#request-an-icon), or draw your own with the [icon design guide](/icons/design-guide) so it matches the set.

## 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. The example below shows a few icons; open its code panel for the markup.

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

## Filled icons

Filled icons are separate files. Copy the SVG code of the filled version from the [Tabler Icons website](https://tabler.io/icons).

To fill an outline icon instead of swapping it, add the `icon-filled` class. It sets `fill: currentColor`, so the shape is filled with the current text color.

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

## Icon size

An icon matches the font size of its parent by default. Use a size class to set it explicitly.

| Class | Size |
| --- | --- |
| `icon-sm` | 1rem, for icons inside small text or a badge |
| `icon-md` | 1.5rem, with a thinner stroke |
| `icon-lg` | 2.5rem, for an empty state or a modal heading |

<Example centered>
<Icon name="heart" size="sm" />
<Icon name="heart" size="md" />
<Icon name="heart" size="lg" />
</Example>

Add `icon-inline` when the icon sits inside a line of text, so it lines up with the letters instead of the line box.

## Icon colors

Add a `text-*` class from the [color palette](/ui/base/colors) to the icon or its parent to change its color.

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

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

## Icon animations

Add `icon-pulse`, `icon-tada` or `icon-rotate` to the SVG to animate it.

<Example centered>
<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>
<Icon name="bell" class="icon-tada" />
<Icon name="rotate-clockwise" class="icon-rotate" />
</Example>

## Accessibility

- An icon next to a label is decoration. Tabler renders icons with `aria-hidden="true"`, so they stay out of the reading order.
- An icon used on its own is a control with no text, so put an `aria-label` on the element that holds it - the button or the link, not the SVG.
- Do not rely on an icon to carry a meaning users have to guess. A trash can reads as "delete" to most people; a wrench does not read as "settings" to everyone.
- Icons scale with the font size, so they follow a user's zoom. Avoid fixed pixel sizes in your own CSS.
- `icon-pulse`, `icon-tada` and `icon-rotate` run forever. Keep them for a state that is really live, and stop them under `prefers-reduced-motion`.