Canvas Icon Picker offers a visual way for Drupal Canvas users to select icons for component properties. It replaces the usual text input with a searchable browser that shows icons from various packs, their recent selections, and previews, enhancing the component editing experience.
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 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:
- Install the module
- Add
x-canvas-icon: trueto any string prop - Pick your icon right from the Canvas sidebar