A widget for Plone that shows all available plone icons and can be selected to save its value in a field

Features

• Icon Selector: A searchable modal gallery to pick icons from the Plone registry.
• Plone 6 Integration: Uses native Plone icon resolution and Patternslib.
• DataGridField Compatible: Works out-of-the-box inside collective.z3cform.datagridfield.

Usage

In a Schema

You can use the widget in your Dexterity content types or behaviors.

from plone.autoform import directives
from plone.formwidget.ploneicons.widget import PloneIconsFieldWidget
from plone.supermodel import model
from zope import schema


class IMyContent(model.Schema):
    # Saves "alarm"
    directives.widget("icon_name", PloneIconsFieldWidget)
    icon_name = schema.TextLine(
        title="Icon Name",
        required=False,
    )

Displaying the Icon

In your templates, you can render the icon using Plone's native icon resolver to get the icon's URL or SVG. See the official Plone documentation on icons for more details.

Installation

Install plone.formwidget.ploneicons with pip:

pip install plone.formwidget.ploneicons

And to create the Plone site:

make create-site

Contribute

• Issue tracker
• Source code

Prerequisites ✅

• An operating system that runs all the requirements mentioned.
• uv
• Make
• Git
• Docker (optional)

Installation 🔧

1. Clone this repository, then change your working directory.

   git clone git@github.com:collective/plone.formwidget.ploneicons.git
   cd plone.formwidget.ploneicons
   

2. Install this code base.

   make install
   

Development 🛠️

Building the JavaScript bundle

The JavaScript for the icon selector pattern is located in the resources directory and must be compiled into a bundle before it can be used by Plone.

1. Ensure you have Node.js installed.

2. Install the npm dependencies:

   npm install
   

3. Build the bundle:

   npm run build
   

   This will create the compiled files in src/plone/formwidget/ploneicons/browser/static/bundles.

4. For development, you can use the watch mode to automatically rebuild on changes:

   npm run watch
   

Internationalization (i18n)

To update the translation files after changing strings in templates or Python code:

make i18n

Add features using plonecli or bobtemplates.plone

This package provides markers as strings (<!-- extra stuff goes here -->) that are compatible with plonecli and bobtemplates.plone. These markers act as hooks to add all kinds of subtemplates, including behaviors, control panels, upgrade steps, or other subtemplates from plonecli.

To run plonecli with configuration to target this package, run the following command.

make add <template_name>

For example, you can add a content type to your package with the following command.

make add content_type

You can add a behavior with the following command.

make add behavior

You can check the list of available subtemplates in the [`bobtemplates.plone` `README.md` file](https://github.com/plone/bobtemplates.plone/?tab=readme-ov-file#provided-subtemplates).
See also the documentation of [Mockup and Patternslib](https://6.docs.plone.org/classic-ui/mockup.html) for how to build the UI toolkit for Classic UI.

License

The project is licensed under GPLv2.

Credits and acknowledgements 🙏

Generated using Cookieplone (2.0.0) and cookieplone-templates (4d90eb9) on 2026-09-17 11:08:19.887369. A special thanks to all contributors and supporters!

Changelog

1.0.0a1 (2026-09-17)

No significant changes.