Download the PHP package bensomething/craft-tabler-icons without Composer
On this page you can find all versions of the php package bensomething/craft-tabler-icons. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package craft-tabler-icons
Tabler Icons for Craft CMS
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, 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|tablerfilter 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
- Craft CMS 5.0+
- PHP 8.2+
Installation
Or install from the control panel: Settings → Plugins.
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
| Setting | Default | What it does |
|---|---|---|
| Icon Style | Outline and filled | Which 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 | On | Shows the category filter in the picker. |
| Show Random Button | Off | Adds a button that highlights a random icon from the current results. |
| Show Recently Used | On | Puts 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
The field value is null or an Icon object:
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:
Every svg() call (and bare icon output) starts from these. Per-call attributes override defaults, except class, which is combined:
Manual Icons (No Field)
The tabler() Twig function returns the same Icon object for any icon name:
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:
Unknown icon names render as an empty string.
Icons in Plain and Rich Text Fields
The tabler filter replaces icon tokens in any HTML with inline SVG, handy for CKEditor fields:
Authors can type a token anywhere in their content (a -filled suffix works here too):
Icons are sized at 1em and aligned to sit naturally in running text so they scale with the surrounding font size and inherit its color, and svgDefaults apply. Each is wrapped in <span class="tabler-icon"> if you want a styling hook. Unknown icon names render as an empty string.
The filter works on any string, not just CKEditor fields — Plain Text fields, Table columns, even titles. One caveat: |tabler marks its output as safe HTML, which skips Craft’s usual escaping. That’s fine for already-purified rich text, but for plain-text values escape first. Tokens survive escaping, so this just works:
With Tailwind
Skip size and use utility classes, CSS wins over the SVG's intrinsic width/height attributes:
GraphQL
You query the field by its handle, and each Tabler Icon field resolves to a shared tabler_Icon type with these subfields:
Empty fields resolve to null.
Webfont Classes
If you load the Tabler webfont on the front end yourself, classes() gives you the class names:
License
This plugin is MIT-licensed. Tabler Icons are © Paweł Kuna, also MIT-licensed (see LICENSE-tabler).