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.

Step-by-Step Guide

• Install the UI Icons module along with its required submodules: ui_icons, ui_icons_menu, and ui_icons_field.
• Install the Iconify Icons module, version 2.0.x.
• When adding a new icon field or inserting an icon into a menu, you'll be able to 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 ↘️