Icons Plus for Statamic

/ About

What It Does

Icons Plus is a Statamic addon that brings the entire Iconify icon ecosystem (over 200,000 icons across 150+ open source libraries) directly into the Statamic control panel as a native fieldtype.

Instead of manually downloading SVG files, copying icon markup, or maintaining a local icon sprite sheet, content editors can search for and select icons right from the entry form. The selected icon is stored as both a URL and inline SVG, giving template authors flexibility in how they render it.

The Fieldtype

Add the Icons Plus fieldtype to any blueprint. The control panel UI provides:

  • Search across all Iconify libraries: type "arrow" and get results from Heroicons, Lucide, Material Design, Phosphor, and dozens more
  • Library filtering: restrict the available libraries in the fieldtype config if you want consistency (e.g., only allow Heroicons)
  • Visual preview: see the icon rendered at multiple sizes before committing

Each stored icon captures:

icon:
  iconPrefix: heroicons
  iconName: chart-pie
  label: "heroicons:chart-pie"
  iconUrl: "https://api.iconify.design/heroicons/chart-pie.svg"
  iconSvg: "<svg>...</svg>"

Template Usage

The package ships with an Antlers tag that handles rendering. The simplest usage:

{{ icons_plus :icon="my_icon_field" }}

This outputs the inline SVG. The tag checks the stored SVG first and falls back to fetching from the Iconify API (with caching) if needed.

Wildcard Rendering

You can also render any Iconify icon directly by collection and name, without needing a fieldtype:

{{ icons_plus:heroicons:chart-pie }}

HTML Attributes

All attributes pass through to the SVG element:

{{ icons_plus :icon="icon" class="w-6 h-6 text-blue-500" x-data="" @click="handleClick" }}

This makes it trivial to integrate with Tailwind, Alpine.js, or any frontend framework.

Why Not Just Use SVG Files?

You absolutely can, and for a handful of icons in a developer-managed site, that's fine. Icons Plus solves a different problem: giving non-technical content editors the ability to choose and change icons without touching code or uploading files.

It also avoids the "which icon library are we using?" problem. Instead of committing to one library and manually downloading assets, you get access to everything Iconify indexes, always up to date.

Installation

composer require twithers/icons-plus

Requires Statamic 3.3+ and PHP 8.0+. The addon auto-discovers and registers its fieldtype and tag automatically.