Icons in Plone 6 Classic UI#

This sections describes how to work with icons in Plone 6 Classic UI. Examples include the following.

  • Bootstrap icons

  • SVG inline icons

  • Iconresolver

Bootstrap Icons#

Twitter Bootstrap 5 is the default CSS framework in Plone 6. Plone uses its icons. Check out all the available Bootstrap icons at icons.getbootstrap.com.

Icons are shipped via plone.staticresources. See the file package.json of the package to get the actual version of the icons in Plone.

Registration#

Icons are registered in Plone's registry. This provides an option to customize the contenttype and Plone UI icons by overriding icons via XML.

Contextual Icons#

We can define contextual icons to be used in specific places in a website while preserving the default system icons to be used elsewhere throughout the site. To use a different icon than the system default, you would override it without touching the system icon.

You should avoid replacing system icons because it may result in an inconsistent user interface.

The specific icon name is based on the usage in the system. For example the copy icon is named plone.icon.plone-copy.

Icon expression#

  • The field icon_expression is used again to define icons for actions, contenttypes, and other purposes.

  • Use the icon name for icon expressions.

Customization#

Todo

Add content for this section

  • Add custom icons

  • Override some of the icons

Icon font#

Todo

Add content for this section

  • Set up a profile to install the icon font.

  • Use Font Awesome as an example.

Iconresolver#

Todo

What is iconresolver? Add to Glossary.

Get Icon URL#

URL method of @@icons view returns the actual URL to the SVG icon. This can be used in an HTML img tag, for example.

<img src="" tal:attributes="src python:icons.url('alarm')" class="custom-class" alt="foo" />

Get Icon Tag#

The tag method is used with tal:replace. It returns an SVG image. Inline icons can be styled via CSS. tag_class and tag_alt is used to pass in custom classes and an alt text.

<tal:icon tal:replace="structure python:icons.tag('archive', tag_class='custom-class', tag_alt='foobar')" />

Resource Path#

SVG files are available from the resource path. For example, the lightning icon's resource path is ++plone++bootstrap-icons/lightning.svg.

Fallback#

There is a Plone icon defined as fallback if the name of the icon cannot be found in the registry.

Fallbacks are grouped, such as mimetype icons.

For example, the JPEG icon is in this group and is in the mimetype group and is named mimetype-image/jpeg. You can also register specific image icons. If there is no specific icon in that group, then mimetype-image is used as the fallback.