Skip Navigation
Icon Field
Docs

Usage

Get Started

This plugin relies on having your SVG icons as separate files in a folder for display in the panel - of course you're free to do whatever you want with the field's value in your templates.

Icons will always be displayed in single-color white or black.

In your blueprint

fields:
  icon:
    label: Icon
    type: icon
    folder: assets/icons # path to your icon folder, relative to the `index` kirby root
    max: 1 # max number of icons to select - 1 will look like a 'select field', none or more like a 'multiselect' field
    sprite: svg-sprite.svg # optional, path to your svg sprite relative to folder option, if you want to use a sprite instead of individual files
    # [more settings...] - same as multi-select field, e.g. disabling search, limiting icons, etc.

If you're using a sprite, make sure the file is available for the user to access at the set path. The plugin does not copy or move the file, it only references it. The #id reference will be stored without a .svg extension unlike the individual files mode.

In your template

<?= svg('/assets/icons/' . $page->icon()) ?>

Support Icon Field development:
Get a Stay Awesome-License

Kirby Icon Field is available completely free of charge.
If you’re using it to deliver a commercial project, please consider supporting further development & maintenance financially.

Sponsor