PHPackages                             bensomething/craft-tabler-icons - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. bensomething/craft-tabler-icons

ActiveCraft-plugin[Utility & Helpers](/categories/utility)

bensomething/craft-tabler-icons
===============================

An icon picker field for Tabler icons.

1.11.0(3w ago)015MITPHPPHP ^8.2CI passing

Since Jul 4Pushed 3w agoCompare

[ Source](https://github.com/bensomething/craft-tabler-icons)[ Packagist](https://packagist.org/packages/bensomething/craft-tabler-icons)[ RSS](/packages/bensomething-craft-tabler-icons/feed)WikiDiscussions develop Synced 1w ago

READMEChangelog (10)Dependencies (9)Versions (18)Used By (0)

Tabler Icons for Craft CMS
==========================

[](#tabler-icons-for-craft-cms)

A field type for selecting a [Tabler icon](https://tabler.io/icons) from a searchable picker, and rendering any icon as inline SVG in your templates.

- 5,000+ outline icons and 1,000+ filled icons, bundled with the plugin
- Fast picker: search by name, tag, or category, outline/filled tabs, recently used icons, full keyboard navigation, and an optional random button
- Inline SVG rendering with custom attributes, plays nicely with Tailwind
- Site-wide rendering defaults via `config/tabler.php`
- `tabler()` Twig function for hardcoding icons without a field
- `|tabler` filter renders `{icon:name}` tokens in plain and rich text fields
- Use an icon field as an entry type’s Thumbnail Source
- Field setting to limit the picker to outline-only or filled-only icons

Requirements
------------

[](#requirements)

- Craft CMS 5.0+
- PHP 8.2+

Installation
------------

[](#installation)

```
composer require bensomething/craft-tabler-icons
```

Or install from the control panel: **Settings → Plugins**.

### Package Size

[](#package-size)

The full Tabler icon set is bundled with the plugin, which makes it around 25MB on disk (roughly 4MB compressed for the actual download). In return, everything works offline. The picker, search, and SVG rendering make no CDN or API calls, icons can never change or disappear underneath your content, and front-end rendering is a local file read rather than an HTTP request.

The Field
---------

[](#the-field)

Create a field of type **Tabler Icon** and add it to a field layout. Authors get a **Choose** button that opens a searchable icon grid with a category filter; once an icon is selected, clicking its preview reopens the picker.

### Field Settings

[](#field-settings)

SettingDefaultWhat it does**Icon Style**Outline and filledWhich styles authors can pick from. **Outline and filled** adds **Outline** and **Filled** tabs to the picker; the other two options limit it to one style and drop the tabs.**Show Categories Dropdown**OnShows the category filter in the picker.**Show Random Button**OffAdds a button that highlights a random icon from the current results.**Show Recently Used**OnPuts the author’s ten most recently picked icons above the results, hidden as soon as a search or category filter narrows the grid. The list lives in the browser and is shared across every Tabler Icon field.Templating
----------

[](#templating)

The field value is `null` or an Icon object:

```
{# Inline SVG at its native 24×24 #}
{{ entry.myIcon }}

{# With attributes — `size` sets width and height,
   `strokeWidth` is an alias for stroke-width (outline icons only) #}
{{ entry.myIcon.svg({ size: 32, class: 'text-red-500', strokeWidth: 1.5 }) }}

{# Guard against empty values #}
{% if entry.myIcon %}
    {{ entry.myIcon.svg({ size: 20 }) }}
{% endif %}

{# Properties #}
{{ entry.myIcon.name }}        {# "ad-off" #}
{{ entry.myIcon.label }}       {# "Ad Off" #}
{{ entry.myIcon.variant }}     {# "outline" or "filled" #}
```

Icons inherit `currentColor`, so they take the CSS text colour of their parent. SVGs render with `aria-hidden="true"` by default. Pass an `aria-label` for icons that carry meaning.

### Default Attributes

[](#default-attributes)

Set site-wide SVG defaults in a `config/tabler.php` file in your project:

```