How to add an Icon Field in Drupal 11 (using Webicons module and other options)

Sep 23, 2025

Adding icons to your website content is a simple way to enhance web design, improve readability, and create a more engaging user experience.

Options for icon field modules in Drupal

Drupal offers several contributed modules for handling and adding icons to your content (Content Type) as fields. Each has different strengths depending on whether you want large icon sets, deep integrations, or a lightweight field-based solution. Below are three popular choices.

Iconify Field

Project page → drupal.org/project/iconify_field

The Iconify Field module connects Drupal with the Iconify library, giving access to a huge variety of icon sets in SVG format. Editors can choose from thousands of icons, and the module supports passing attributes such as size and extra classes for flexibility.

Advantages:

Access to one of the largest collections of icons available.
SVG-based icons ensure high quality and scalability.
Flexible attribute options for styling.

Considerations:

Large icon libraries may affect performance if not managed carefully.
Focused mainly on field usage, so it has fewer built-in integrations with menus or editors.

UI Icons

Project page → drupal.org/project/ui_icons

The UI Icons module is a more comprehensive solution. It builds on Drupal’s Icon API and supports many different icon packs, including Bootstrap Icons, Heroicons, and Material Symbols. It allows developers to define icon packs via YAML and provides submodules for fields, menus, CKEditor, and media integration.

Advantages:

Highly flexible and future-proof, leveraging Drupal’s Core Icon API.
Works across different parts of a site, not just fields.
Offers a good user interface for selecting icons, including autocomplete.

Considerations:

More complex setup, requiring configuration of icon packs and extractors.
Can feel heavy if you only need a simple icon field for content types.

Webicons

Project page → drupal.org/project/webicons

The Webicons module is a straightforward option for adding icon fields directly to entities such as nodes or taxonomy terms. It comes with built-in support for libraries like Material Icons, Boxicons, and Font Awesome Free. Icons can be selected through a picker in the edit form, displayed through field formatters, or rendered directly in Twig with helper functions.

Advantages:

Simple to use, great for adding icons as fields.
Supports multiple common icon libraries out of the box.
Provides Twig helpers for theming flexibility.

Considerations:

More limited than UI Icons if you want icons integrated in editors, menus, or media.
Depends on the chosen library for variety and styling options.

Which One to Use: When / Why

Here are some guidance points to help choose which module makes sense for a given scenario:

If you need very large, varied icon sets and want the ability to pick from many styles (including remote or 3rd-party packs), Iconify Field or UI Icons may give more breadth.
If you want solid integration with many parts of Drupal (menus, editors, media, etc.), UI Icons is likely the best bet because of its broader scope and use of Core Icon API.
If your needs are more modest — say, adding an icon field to a content type, letting editors pick icons, and rendering them cleanly in theming — Webicons is attractive for being simpler and more direct.
Also think about maintainability: how easy to upgrade, how many custom configs vs reused configurations, how well the module is maintained / how active the issue queue is. Modules that leverage the Drupal core Icon API (like UI Icons) may have fewer breaking changes in future major Drupal versions.

How to add an Icon Field in Drupal 11 using Webicons

Webicons is a lightweight module that lets you add icon fields to any entity (node, taxonomy, paragraphs, etc.), choose which icon library to use (Boxicons, Material Icons, FontAwesome Free, etc.), and render icons either from fields or directly in Twig.

Icons are useful for improving the look and usability of content. In Drupal 11, the Webicons module makes it easy to add an icon field to content types or other entities, such as taxonomy terms and paragraphs. This guide walks you through the setup and usage.

Step 1: Install and enable the Webicons module

From your Drupal project root, install the module with Composer, and enable it with Drush if this is available https://www.drupal.org/project/webicons; otherwise, enable it from the modules (Extend) interface:

composer require drupal/webicons
drush en webicons -y

The latest release supports Drupal 9, 10, and 11.

Step 2: Add a Webicons field to your content type

In the Drupal admin, go to Structure → Content types.
Select the content type you want to modify (for example, “Article”), then click Manage fields.
Click Add field.
From the Add a new field dropdown, choose the Webicons field.
Enter a label (e.g., “Icon”) and save.

Step 3: Configure the field settings

Choose which icon library to use. Webicons supports Material Icons, Boxicons, and Font Awesome Free out of the box.
Adjust other options, such as whether the field allows one or multiple icons.

Step 4: Configure the form display

Go to the Manage form display tab of your content type.
Ensure the Webicons widget is selected, so editors get the icon picker in the editing form.

Step 5: Configure the display

Go to the Manage display tab of your content type.
Choose how the icon should appear on the front end (size, style, alignment, etc., depending on the formatter options available).

Step 6: Add content with icons

When creating or editing a piece of content, you’ll see an icon picker field.
Select the icon you want from the available library.
Save the content, and the chosen icon will display according to your field display settings.