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. |
Craft's Native Icon Field #
On Craft 5.12 and later, the plugin also registers Tabler as two icon sets for Craft's built-in Icon field: Tabler (outline) and Tabler (Filled). Enable them in the field's Icon Sets setting. Values are stored as tabler:heart or tabler-filled:heart.
Craft's picker renders every icon in each enabled set when it opens, and only caches that list for Font Awesome. With 6,000+ Tabler icons, expect the first open to take a couple of seconds. Searching is quick. In Safari, the picker can also feel sluggish to open and close with the outline set enabled; Chrome and Firefox handle it smoothly.
Use the native field if you want Tabler icons alongside Font Awesome or your own customIconPath icons in one picker. Use the Tabler Icon field for the faster picker (categories, recently used icons, outline/filled tabs), the Icon object's attributes and svgDefaults, and the extra GraphQL data.
Native values work with the plugin's tools too:
{{ tabler(entry.nativeIcon).svg({ size: 20 }) }}Changing a native Icon field to a Tabler Icon field keeps any Tabler icons already selected. Font Awesome and other icon sets' values don't carry over. Switching the other way isn't supported: a native Icon field can't read Tabler Icon field values.