View Mode Icons

Assign icons to entity view modes so admins and editors can recognize layouts beyond the label alone.

Machine name: view_mode_icons.

Requirements

• Drupal 10, 11, or 12
• Core modules: Field UI, File, Image

Optional:

• Paragraph View Mode — the field widget shows a name field, thumbnail (when set), and a Choose button that opens a preview tile modal

Installation

composer require drupal/view_mode_icons
drush en view_mode_icons -y
drush cr

Polish translations

Ship file: translations/pl.po. Import after enabling the module:

drush locale:import pl modules/contrib/view_mode_icons/translations/pl.po --type=customized --override=all -y
drush cr

Where to configure it

1. Go to Structure → Display modes → View modes.
2. Edit (or add) a view mode for any entity type.
3. Upload an image under View mode icon (placed under Name, above Description).
4. Save.

Icons appear in the view mode list (empty cell when none is set) and in editor pickers that opt in.

Screenshots:

Using it while editing content

With Paragraph View Mode (or any opted-in select), editors see:

• the selected mode name
• a small thumbnail when an icon exists (hidden when it does not)
• a Choose button that opens a centered modal tile grid

Tiles match the Paragraphs EE “Add” dialog: preview image or default placeholder, coral hover/selected fill, plus overlay on hover.

For developers

Other forms can opt in by setting #view_mode_icons_target_type on a select or radios element whose #options are keyed by view mode ID:

$element['view_mode'] = [
  '#type' => 'select',
  '#title' => $this->t('View mode'),
  '#options' => $view_mode_options,
  '#view_mode_icons_target_type' => 'paragraph',
];

• Select → name + Choose modal picker (native <option> cannot render images).
• Radios → inline icon + label markup.

Icons are stored as managed files. The view mode config entity only keeps the file UUID in third-party settings (no base64 in YAML).

Services:

• view_mode_icons.repository (ViewModeIconRepository)
• view_mode_icons.option_builder (ViewModeIconOptionBuilder)

License

GPL-2.0-or-later

Supporting this module

Use the issue queue for bugs and feature requests.

Full walkthrough: README in the repository.