🎯 Purpose
Unlock limitless icon design possibilities by importing your own icon sets or individual SVGs—beyond the default library—to elevate branding and creativity in your layouts.
➕ Key Capabilities
Upload Custom Icon Sets
Import icon libraries created with tools like Fontello, IcoMoon, or Fontastic.
Bundle and deliver consistent icon collections tailored to your brand.
Add Standalone SVG Icons
Upload unique single-icon SVG files directly into Elementor’s library for precise use.
🧠 Workflow & Management
Upload Icons
Access the Custom Icons panel in Elementor Pro, create a new icon set, and upload your ZIP package or standalone SVGs.
Organize your icons in a centralized interface for easy future access.
Select & Insert
When editing elements that support icons (like buttons, social icons, or menus), choose from both the default and your custom icons.
Styling Flexibility
Apply Elementor’s native styling controls—modify color, size, spacing, rotation, and add motion effects just like any other widget.
⚙️ Performance Optimization
Selective Loading
Only the icons you use are loaded on the page, reducing bloat and improving performance.
✅ Best Practices
Create and upload custom icon fonts via preferred tools (IcoMoon, Fontello, etc.) with a unique CSS prefix.
Use custom icons to reinforce brand identity when default options don’t match your design.
Style custom icons using standard Elementor controls—no need for external CSS.
Stay lean and fast by loading only necessary icons.
In short, Elementor Pro’s Custom Icons feature empowers designers to use unique iconography across their site—combining easy upload, organized management, precise styling, and optimized performance.
