Custom Icon

🎨 Custom Icon – Topper Pack

The Custom Icon feature of the Topper Pack allows you to access and use a vast collection of professionally designed icons directly inside Elementor. These icons are fully integrated with Elementor widgets, enabling rich, visual experiences with no need to rely on third-party icon libraries or external uploads.

🧩 What It Does:

Once enabled from Extra Settings > Custom Icon, this feature adds two pre-built icon libraries into your Elementor icon selector:

• Topper: Brands Icons – A curated collection of popular brand logos like Adobe, Apple, Android, Behance, Facebook, etc.
• Topper: Thin Icons – A sleek set of line icons designed for modern UIs, buttons, and headers.

✅ Key Features:

• Ready-to-Use Icon Libraries – Just select an icon from the integrated library. No need to upload or configure anything.
• Full Elementor Support – Icons can be applied to buttons, headings, icon boxes, and any widget supporting icons.
• High-Performance SVG Icons – All icons are vector-based (SVG) and optimized for performance and scalability.
• Brand and UI Coverage – Includes tech, business, UI elements, media logos, and minimalist design assets.
• Built-In Preview – Instantly preview and insert any icon into your widget with a click.

🛠️ How to Use:

1. Navigate to Topper Pack → Extra Settings.
2. Toggle Custom Icon to ON.

1. Edit any Elementor widget (e.g., Button or Icon Box).

1. Under the icon field, click Icon Library.

1. Select from the Topper: Brands Icons or Topper: Thin Icons tab.

1. Click Insert to use the icon.

📸 Use Cases:

• Add social media icons with brand consistency.
• Use minimalist line icons for service sections.
• Create visually rich buttons, tabs, and banners.

🧠 Why Use It?

This feature eliminates the need for installing heavy third-party icon plugins like Font Awesome Pro or custom uploads. You get a lightweight, built-in, design-friendly icon system that’s 100% optimized for Elementor workflows.