The Icons option adds a visual icon picker control to your custom widget, allowing users to select a single icon from integrated icon libraries (like Font Awesome).
Why would someone use it in a custom widget? #
Use this control when an element in your widget needs a scalable, stylable icon. This is perfect for buttons, feature lists, info boxes, social media links, or any UI element where a small, symbolic graphic enhances meaning and design.
Where This Option Appears #
- In Widget Builder: You add this control in the Content tab.
- In the Elementor Editor: Once saved, it appears as a standard Elementor icon selector. Clicking the field opens a library browser where users can search and visually pick an icon from available sets.
Available Settings #
Here are the configurable settings for the Icons control:
Basic Settings #
- Label: The name of the control (e.g., “Button Icon”, “Feature Icon”).
- Name: The unique machine-readable ID (like
button_icon) for the dynamic shortcode. - Description: Optional text below the picker.
- Skin: This setting changes the appearance of the icon picker interface in the editor. The option “Media” is shown in the screenshot, but others may exist.
- Default Value: This is pre-set as an array containing both the icon value (e.g.,
fab fa-wordpress) and its source library.
Advanced Settings #
- Show Label, Label Block, Responsive Control: Standard visibility options.
- Dynamic Support: Allows the icon to be selected via a dynamic source.
- Frontend Available: When enabled, the icon’s class/data is passed to your widget’s JavaScript.
- Separator, Conditions, Control Classes, Selector: Standard advanced options.
Generated Shortcode #
When you add an Icons control with the Name social_icon, Widget Builder generates a shortcode like: {{social_icon}}.
- What it represents: This shortcode typically outputs the HTML needed to render the selected icon, such as an
<i>tag with the correct CSS classes (e.g.,<i class="fab fa-facebook-f"></i>). - Where to use it:
- HTML Panel: You place the shortcode directly where you want the icon to appear:
<a href="#">{{social_icon}} Follow Us</a>.
- HTML Panel: You place the shortcode directly where you want the icon to appear:
How to Use It: A Practical Example #
Let’s create a “Social Media Link” widget.
- In Widget Builder’s Content tab, add an Icons control.
- Set the Label to
Platform Icon. The Name will auto-fill asplatform_icon. - Add a related URL control for the social media link.
- In your HTML panel, structure the link:
<a href="{{social_link}}" class="social-link" target="_blank"> {{platform_icon}} </a> - In your CSS panel, style the
.social-linkclass to control the icon’s size, color, and hover effects.
In the Elementor editor, users can pick a Facebook icon from the library, and the shortcode will output the correct <i class="fab fa-facebook-f"></i> markup.
Common Use Cases #
- Button Icons: Adding arrows, download symbols, or checkmarks to call-to-action buttons.
- Feature Lists: Placing icons next to bullet points or service descriptions.
- Social Media Widgets: Letting users choose icons for different social platforms.
- Navigation & Indicators: Using icons for mobile menu toggles, accordion arrows, or status indicators.
Helpful Tips #
- Ensure Library Inclusion: The icon libraries (like Font Awesome) must be loaded on the site for the icons to display. Ensure they are enqueued by your theme or include them in the widget’s Includes panel.
- Style with CSS: Remember, the icon is rendered with CSS classes. You can control its color, size, and spacing entirely through your widget’s CSS Panel by targeting the
<i>tag or its wrapper. - The Shortcode Renders HTML: Unlike other controls, this shortcode usually outputs ready-to-use HTML, not a raw value. You don’t need to wrap it in an
<i>tag yourself. - Check Default Output: Confirm the exact HTML structure the
{{your_icon}}shortcode generates to ensure your CSS selectors target it correctly.
The Icons control provides a user-friendly way to integrate the vast visual language of iconography into your custom widgets, enhancing both aesthetics and usability.
Frequently Asked Questions #
What is the Icons control in the Master Addons Widget Builder?
The Icons control adds Elementor’s icon picker to a custom widget so editors can choose a single icon from integrated libraries like Font Awesome. Added in the Content tab, it appears as the standard icon selector where editors can search and visually pick an icon from the available sets.
How do I output a chosen icon in my widget’s HTML?
Place the icon shortcode where you want the icon to appear, for example {{social_icon}} Follow Us. For a control named social_icon the shortcode is {{social_icon}}, and it renders ready-to-use markup such as an tag with the correct Font Awesome classes.
Do I need to wrap the icon shortcode in an tag myself?
No. Unlike value-based controls, the Icons shortcode usually outputs full HTML, typically an tag with the right CSS classes like fab fa-facebook-f. You drop the token straight into your markup without adding your own wrapper.
How do I change an icon’s size and color?
Style it with CSS. Because the icon renders as an tag with classes, you can target that tag or its wrapper class in your widget’s CSS panel to set font-size, color, spacing, and hover effects, just as you would style any icon font.
Why are my icons not displaying?
The icon library must be loaded on the site. Make sure Font Awesome or the relevant set is enqueued by your theme, or add it through the widget’s Includes panel in the Widget Builder. Without the library present, the icon classes have nothing to render.
