Icons

This guide explains how to use and manage icons with Iconify in your project.

✅ Applies from v4.0.0 and above.


Why change the default Iconify setup?

By default, icons from Iconify are loaded directly from their CDN/API: 🔗 Iconify documentation

While convenient, this approach has some drawbacks:

  • ❌ No offline support
  • ❌ Flickering and layout shift during load

To improve performance and stability, we’ve changed how icons are used in the project.

Follow the steps below to register, customize, and clean up icons effectively.

🔧 1. Register and use available icons from Iconify

You can browse and choose icons directly from Iconify icon sets.

To control and configure icons used in your project, visit: 🔗 Zone iconify icon.

🎬 Watch the guide: Watch

🎨 2. Register and use custom icons

Need your own icon set? You can also register custom icons easily.

🎬 Watch the guide: Watch

🧹 3. Find and remove unused icons

To keep your code clean and optimized, use the following tool to detect and remove unused icons:

🎬 Watch the guide: Watch


Find unused icons
npx find-unused-iconify
Find and remove unused icons
npx find-unused-iconify -d