README

A field type for selecting a Tabler icon from a searchable picker, and rendering any icon as inline SVG in your templates.

5,000+ outline icons and 1,000+ filled icons (Tabler Icons v3.44), bundled with the plugin
Searchable by name, tags, and category, with outline/filled tabs
Inline SVG rendering with custom attributes, plays nicely with Tailwind
tabler() Twig function for hardcoding icons without a field
Field setting to limit picker to outline-only or filled-only icons

Requirements

Craft CMS 5.0+
PHP 8.2+

Installation

composer require bensomething/craft-tabler-icons
php craft plugin/install tabler

Or install from the control panel: Settings → Plugins.

Installing straight from GitHub (if not using Packagist): add { "type": "vcs", "url": "https://github.com/bensomething/craft-tabler-icons" } to the repositories array in your project's composer.json first.

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

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 — Icon Style controls whether authors can pick from both styles, outline only, or filled only. Selecting Outline and filled will display Outline and Filled tabs in the icon picker.

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

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

<?php

return [
    'svgDefaults' => [
        'class' => 'text-highlight',
        'stroke-width' => 1.5,
        'stroke-linecap' => 'square',
        'stroke-linejoin' => 'bevel',
    ],
];

Every svg() call (and bare icon output) starts from these. Per-call attributes override defaults, except class, which is combined:

{{ item.icon.svg({ class: 'size-8 mb-2' }) }}   {# class="… text-highlight size-8 mb-2" stroke-width="1.5" … #}
{{ item.icon.svg({ strokeWidth: 2.5 }) }}       {# overrides the configured stroke-width #}
{{ item.icon.svg({ defaults: false }) }}        {# skips the configured defaults entirely #}

Manual Icons (No Field)

The tabler() Twig function returns the same Icon object for any icon name:

{{ tabler('map-pin') }}
{{ tabler('map-pin').svg({ size: 20, class: 'list-icon' }) }}
{{ tabler('heart', 'filled').svg({ size: 20 }) }}
{{ tabler('heart-filled') }}   {# '-filled' suffix also selects the filled variant #}

tabler() also accepts an existing Icon object (e.g. a field value) and returns it unchanged — handy for partials that take either a name or a field value:

{{ tabler(item.myIcon ?? 'star').svg({ size: 20 }) }}

Unknown icon names render as an empty string.

With Tailwind

Skip size and use utility classes, CSS wins over the SVG's intrinsic width/height attributes:

{{ tabler('calendar').svg({ class: 'size-4 sm:size-6 shrink-0 text-emerald-600' }) }}

Webfont Classes

If you load the Tabler webfont on the front end yourself, classes() gives you the class names:

<i class="{{ entry.myIcon.classes() }}"></i>   {# "ti ti-ad-off" / "ti ti-heart-filled" #}

bensomething / craft-tabler-icons

Maintainers

Package info

Statistics

Security