Icon

Renders one of the Tabler Icons as <i class="ti ti-{name}">. It needs the @tabler/icons-webfont stylesheet, see Installation.

<twig:Tabler:Icon name="server" />
<twig:Tabler:Icon name="users" />
<twig:Tabler:Icon name="file-invoice" />
<twig:Tabler:Icon name="settings" />

<i class="ti ti-server"></i>
<i class="ti ti-users"></i>
<i class="ti ti-file-invoice"></i>
<i class="ti ti-settings"></i>

name is the icon name without the ti- prefix, as listed on tabler.io/icons.

Sizes

Without size, the icon follows the font size of its parent. size gives it a fixed size, with Tabler’s icon class: sm (1rem), md (2.5rem) or lg (3.5rem). inline is 1rem and aligned with the text around it:

<twig:Tabler:Icon name="server" size="sm" />
<twig:Tabler:Icon name="server" />
<twig:Tabler:Icon name="server" size="md" />
<twig:Tabler:Icon name="server" size="lg" />
<p class="mt-3 mb-0">
    <twig:Tabler:Icon name="clock" size="inline" /> Updated 5 minutes ago
</p>

<i class="ti icon icon-sm ti-server"></i>
<i class="ti ti-server"></i>
<i class="ti icon icon-md ti-server"></i>
<i class="ti icon icon-lg ti-server"></i>
<p class="mt-3 mb-0">
    <i class="ti icon icon-inline ti-clock"></i>
    Updated 5 minutes ago
</p>

Filled

filled renders the filled variant of the icon (ti-filled ti-filled-{name}):

<div class="d-flex align-items-center gap-3 fs-1">
    <twig:Tabler:Icon name="star" variant="warning" />
    <twig:Tabler:Icon name="star" variant="warning" filled />
    <twig:Tabler:Icon name="heart" variant="danger" />
    <twig:Tabler:Icon name="heart" variant="danger" filled />
    <twig:Tabler:Icon name="bell" />
    <twig:Tabler:Icon name="bell" filled />
</div>

<div class="d-flex align-items-center gap-3 fs-1">
    <i class="ti text-warning ti-star"></i>
    <i class="ti-filled text-warning ti-filled-star"></i>
    <i class="ti text-danger ti-heart"></i>
    <i class="ti-filled text-danger ti-filled-heart"></i>
    <i class="ti ti-bell"></i>
    <i class="ti-filled ti-filled-bell"></i>
</div>

The filled icons are a separate font of @tabler/icons-webfont (3.36.1+), and its tabler-icons-filled.css reuses the class names of the outline icons (ti, ti-{name}), so it cannot be loaded next to them. Compile its SCSS source under the ti-filled prefix instead, here with Webpack Encore’s Sass loader (or symfonycasts/sass-bundle with AssetMapper):

@use '@tabler/icons-webfont/dist/tabler-icons-filled.scss' with (
    $ti-prefix: 'ti-filled',
    $ti-font-path: '~@tabler/icons-webfont/dist/fonts'
);

$ti-font-path points at the font files: adjust it to how your build resolves node_modules.

Variants

variant sets the color (text-{variant}):

{% for variant in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'] %}
    <twig:Tabler:Icon name="circle-check" variant="{{ variant }}" class="fs-1" />
{% endfor %}

<i class="ti text-primary ti-circle-check fs-1"></i>
<i class="ti text-secondary ti-circle-check fs-1"></i>
<i class="ti text-success ti-circle-check fs-1"></i>
<i class="ti text-danger ti-circle-check fs-1"></i>
<i class="ti text-warning ti-circle-check fs-1"></i>
<i class="ti text-info ti-circle-check fs-1"></i>
<i class="ti text-dark ti-circle-check fs-1"></i>
<i class="ti text-light ti-circle-check fs-1"></i>

Animations

animation is pulse, tada or rotate:

<twig:Tabler:Icon name="heart" variant="danger" animation="pulse" />
<twig:Tabler:Icon name="bell" variant="warning" animation="tada" />
<twig:Tabler:Icon name="refresh" variant="primary" animation="rotate" />

<i class="ti text-danger icon-pulse ti-heart"></i>
<i class="ti text-warning icon-tada ti-bell"></i>
<i class="ti text-primary icon-rotate ti-refresh"></i>

Attributes

Without size and variant, the icon inherits the font size and color of its parent. Other attributes go to the <i>: a spacing class next to a label, a font-size class, or role="img" and an aria-label when the icon carries meaning on its own:

<div class="d-flex align-items-center gap-3">
    <twig:Tabler:Button variant="primary">
        <twig:Tabler:Icon name="plus" class="me-1" /> New invoice
    </twig:Tabler:Button>
    <twig:Tabler:Icon name="alert-triangle" variant="warning" class="fs-1" role="img" aria-label="Warning" />
</div>

<div class="d-flex align-items-center gap-3">
    <button type="button" class="btn btn-primary">
        <i class="ti ti-plus me-1"></i>
        New invoice
    </button>
    <i class="ti text-warning ti-alert-triangle fs-1" role="img" aria-label="Warning"></i>
</div>

Props

Prop	Type	Default	Description
`name`	string	(required)	Icon name, without the `ti-` prefix
`variant`	string?	`null`	`primary` `secondary` `success` `danger` `warning` `info` `dark` `light`
`animation`	string?	`null`	`pulse` `tada` `rotate`
`size`	string?	`null`	`sm` `md` `lg` `inline` (`icon icon-{size}`); unset, follows the font size
`filled`	bool	`false`	Filled variant: `ti-filled ti-filled-{name}`, see Filled