mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
116 lines
4.2 KiB
Plaintext
116 lines
4.2 KiB
Plaintext
---
|
|
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.
|
|
|
|
## 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`.
|