Skip to content

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 name is a string; how it becomes a picture is up to the theme.

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

Previews load from a CDN

The dropdown and the grid pull previews from unpkg.com. 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.

The front end fetches nothing: the field stores a name, the template draws the icon.

Only the outline set is available; the solid set is not offered.

© PageBlocks 2019-present