Tabler Icons Plugin

Introduction

The Tabler Icons Plugin provides an extensive and flexible system for integrating high-quality SVG icons from the Tabler library into your website. With thousands of modern outline icons available, this plugin makes it easy to enhance your site’s interface and branding through clean, scalable visuals.

Important: This plugin supports only outline-style icons from the Tabler collection. Filled icons are currently not supported and will not render via the shortcode.

To explore the full list of available icons and their names, visit the Tabler Icons page. Hovering over or clicking an icon will reveal its name, which can be used directly in the shortcode.

Enabling the plugin

1. Launch the Publii application and navigate to the Tools & Plugins section.
2. Locate the Tabler Icons plugin within the list.
3. Activate it by switching the toggle at the bottom-left of the plugin box.

Plugin configuration

After activation, you can adjust a variety of options that control how Tabler icons appear across your site.

Basic options

Customize the default appearance of icons using these core settings:

• Icon size: Enter the default icon size as a numeric value combined with the selected unit.
• Icon size unit: Choose between 'px', 'em', 'rem', 'vw', 'vh', 'vmin', or 'vmax' to control the scaling context.
• Stroke width: Defines the line thickness of the icons in pixels.
• Non-scaling stroke: When enabled, the icon stroke maintains its width regardless of scaling, preserving consistent line weight.
• Stroke color option: Choose between 'Use current color' (inherits text color) or 'Custom color' (uses a specific HEX value).
• Custom stroke color: If custom color is selected, this setting allows you to pick a precise color via a color input field.
• Vertical align: Choose how the icon aligns vertically relative to adjacent text. Includes standard values and a 'Custom value' option for fine-tuning.
• Custom vertical align value: Define a custom offset like '0.2em', '-3px', or '10%' when precise alignment is needed.

Advanced options

Access extended controls for accessibility and icon rendering:

• ARIA hidden attribute: Define whether icons should be excluded from assistive technologies:
  • True: Icons are treated as decorative and ignored by screen readers.
  • False: Icons are accessible to screen readers and assistive tools.
• Icon loading method: Choose how icons are injected into your site's HTML:
  • Use SVG map file: Loads all available icons from a single external SVG sprite (~1.3 MB). While this method can reduce inline HTML size and help maintain visual consistency, it significantly increases page load times and is not recommended for production websites.
  • Use inline SVG code: Embeds only the required icons directly into the HTML. This method is highly efficient and ensures fast rendering, especially on pages with a limited number of icons.

  Recommendation: Due to the large size of the Tabler sprite file, inline SVG loading is strongly recommended. It avoids unnecessary network overhead and ensures optimal performance on all device types.

Using the plugin

Tabler icons can be inserted into post content, navigation menus, footers, or any HTML-enabled area. You may rely on default plugin settings or override them via shortcode attributes for precise control.

To get icon names, visit the Tabler Icons page. Each icon's name appears on hover or after selection, which you can copy for use in shortcodes.

The correct shortcode format must follow a specific attribute order for the icon to render properly on the frontend.

Shortcode format

[ti=icon_name size=value_unit color=color_value class=class_names aria-hidden=true_or_false stroke-width=value]

Use this exact order: icon name, size, color (in HEX format), class, aria-hidden, stroke width. This structure ensures proper icon rendering and styling.

Examples

<!-- Default Usage -->
[ti=activity]

<!-- Example with Size and Color -->
[ti=activity size=30px color=#ff0000]

<!-- Example with Size and Stroke Width -->
[ti=activity size=4rem stroke-width=3]

<!-- Example with Full Customization -->
[ti=activity size=4rem color=#00ff00 class=icon aria-hidden=false stroke-width=4]