Canvas Icon Picker

Canvas Icon Picker provides a visual icon selection experience for Drupal Canvas component string props, powered by Drupal core’s Icon API. Component authors can opt individual props into the picker through a simple schema property, replacing the standard text field or select list with an accessible, searchable icon browser that includes icon pack filtering, recently used icons, keyboard navigation, and live previews.

Designed specifically for the Canvas component editing workflow, Canvas Icon Picker integrates directly with Canvas’s prop system while relying on Drupal core for icon discovery and rendering. It supports icon packs provided by core, contributed projects, and custom implementations without introducing a separate icon ecosystem. Administrators can configure the icon packs available site-wide, while individual component props can further restrict or customize the available packs when required. This provides a consistent, flexible, and extensible icon-selection experience that aligns closely with both Canvas and Drupal core APIs.

How to use it:

1. Install the module
2. Add x-canvas-icon: true to any string or enum prop
3. Pick your icon right from the Canvas sidebar