Canvas Icon Picker: a small module, a big editorial win

Canvas Icon Picker shipped this month. It is a small module with a straightforward job: it gives editors a visual icon picker in Canvas instead of making them type icon names or machine names.

This sounds incremental. For university editorial teams, it is transformative.

The problem it solves

Canvas compositions need icons constantly — badges, call-to-action buttons, social links, navigation hints. In the traditional model, an editor would type an icon name into a form field. A developer would have built that form field to accept those names. The editor needs to know what names are valid.

This created friction. Editors would type ico-arrow when the valid name was icon-arrow-right. They would guess at naming conventions. Support tickets arrived asking “what icons do I have available?”

Canvas Icon Picker removes that friction. An editor clicks a button, sees all available icons, clicks the one they want. The module handles the mechanics of converting that selection into the icon name the component needs.

What it does

The module provides a Canvas widget type: Icon. A component prop can declare itself as an icon:

props:
  schema:
    type: object
    properties:
      icon:
        type: string
        format: icon
        description: Icon to display next to the CTA text

When an editor composes a page and encounters a component with an icon prop, they get an icon picker. Not a text field. Not a dropdown. A visual grid of icons, searchable and labeled.

The module discovers icons from available icon libraries — Font Awesome, Material Icons, custom SVG sets — and makes them all available in the picker. An editor does not need to know which library an icon comes from. They just pick it.

Why this matters

Editors spend less time guessing at conventions. Components get used correctly because the UI enforces correctness. Support tickets about “which icons are available” go away.

For a university with dozens of editors across multiple schools, this is the difference between every editor needing training and editors just using the system intuitively.

The accessibility here is done correctly too. Selected icons are labeled. Keyboard navigation works. Screen readers get the semantic meaning, not just the HTML entity.

What to know

The module requires that your components use Canvas props for icons. If you have legacy components that hard-code icon names in Twig, you need to refactor them to accept icons as props.

Icon discovery is configurable. You can limit which icon libraries are available, add custom icons, or exclude icons that should not appear in the UI.

The visual presentation is customizable — you can show large icons with labels, small icons in a compact grid, or use a search-first interface for large icon sets.

What comes next

The module works. It solves the problem it was built to solve. That problem was real enough that it is worth having a module dedicated to it.

Canvas Icon Picker sits in that category of work that does not get celebrated but makes systems better. It is not a flashy feature. It is an editorial win — work that should be invisible to end users, visible only through its absence of friction.

For a university platform, it is foundational.