Icon Field

A picker over Heroicons v2 — 291 icons of the outline set, each shown with a preview in the dropdown. The stored value is just the name: arrow-right-circle.

The list is a suggestion, not a restriction: the field accepts typed input, so a name that Heroicons adds later works without waiting for an update to the component.

A table column shows the icon itself, with nothing to configure.

Output: the stored value is only a name. The component can turn it into an inline SVG for you:

{heroicon($block.icon)}
{heroicon($block.icon style='solid' class='w-6 h-6')}

The style is chosen at render time, not on the field: the same saved name gives either set, and the field itself has no style setting. style takes outline (the default) or solid; anything else falls back to outline.

Or ignore the function and draw the icon yourself — the value is just a string:

<svg class="icon"><use href="/assets/icons/sprite.svg#{$icon}"></use></svg>

Both the previews and {heroicon()} reach for unpkg.com

The dropdown and the grid pull previews from the CDN. With no internet access in the manager they fade out instead of erroring — the names and the saved values are unaffected, you just pick blind. Previews are always outline, whatever the template renders.

{heroicon()} fetches the SVG from the same CDN, then caches it forever, so a page is at most one request per icon and style. Draw the icon from your own sprite instead if the server must not call out at all.