iconify_icons

The Iconify Icons module provides lightweight integration with the Iconify API, bringing a vast library of over 🤯 200,000 icons from more than 150 open-source icon packs directly to your Drupal site.

This module allows users to add high-quality, optimized SVG icons into their projects, ensuring a consistent and efficient workflow.

🧪 Try Iconify Icons

Version 2.0.x

This version will integrate Iconify Icons as an icon provider in Drupal 11.1.0 or higher (see #3490350) with integration enhanced by the UI Icons module.

Installation

You can set up icons in two ways. We recommend using the ready-made recipe, but you can also install the modules manually if you prefer.

✅ Recommended: Icons Toolkit Recipe

Enable the Icons Toolkit recipe to automatically install all required modules and apply a fully preconfigured setup.
No manual configuration is needed.

See more details:
Icons Toolkit (Recipe)

🔧 Alternative: Manual Installation

• Install the UI Icons module and its required submodules: ui_icons, ui_icons_menu, andui_icons_field.
• Install the Iconify Icons module (version2.0.x).
• When adding a new icon field or inserting an icon into a menu, select the desired icon set from the available Iconify collections.

Version 1.0.x

Key features

• Field Type Integration

Add an "Iconify Icons" field type to your content types, allowing for easy selection and management of icons directly within content editing forms including icon customization.

Iconify icons formatter settings:
📏 Dimensions (Width and Height)
🎨 Color
🔄 Flip
🔃 Rotate

📄 See documentation

Iconify Icons includes an additional widget, "Iconify Icons Link," which offers extra fields such as URL and Link Text. These fields allow users to associate a hyperlink with the icon, enhancing its functionality.

🔗 Link (Url and Link text)


• CKEditor5 Plugin

Enhance the content editing experience with a CKEditor5 plugin that allows editors to browse, search, and insert icons directly into the content.

📄 See documentation


• Form element

Enhance your custom forms by adding your own Iconify Icons element. This improves user experience, making form filling more visually appealing and intuitive.

📄 See documentation


• Render element

Integrate Iconify icons into any part of your site's frontend by utilizing the Render Element feature. This allows developers to programmatically add icons to templates, blocks, views, and other rendered content areas.

📄 See documentation


• Inline Icon Integration with Twig
  

Provides a straightforward method for incorporating icons directly within your Twig templates. This functionality mirrors the format of render elements, allowing for seamless integration and customization of icons in your site.

📄 See documentation

Widget settings

• Icon Collections selection. Check Iconify Collections

🔎 Iconify Icons Preview

• Example with Iconify Icons field type. How to use it 📖

Output ↘️

• Example with Iconify Icons CKEditor5 plugin. How to use it 📖

Output ↘️

Submodules

Iconify Icons module incorporates the following submodule designed to be integrated as an icon provider in Drupal 11.1.0 or higher (see #3490350):

• 🧮 Iconify Icons Provider

Need help❓

The Iconify Icons module's issue queue is intended for reporting bugs, submitting feature requests, and planning. Additionally, you can ask questions or provide assistance in the #iconify_icons channel on Drupal Slack.

Stay tuned 📢

Releases, new features, bug fixing...

Find it on X