The Icons field puts Elementor’s full icon library picker in your widget’s panel: Font Awesome, any custom icon libraries registered on the site, and direct SVG upload, all behind the icon chooser editors already know. Inside the Master Addons Widget Builder, it is the field for feature bullets, info boxes, social rows, and every other spot where a small symbol carries the meaning.
Like every Widget Builder field, the Icons control supports Conditions, useful for showing the picker only when an “enable icon” toggle is on, and its output renders through the Twig-syntax template engine. Both guides cover the details and limitations.
The value is an array with two keys, value and library. That shape has a consequence worth stating up front: printing the field directly with {{ my_icon }} outputs nothing at all. Font icons and uploaded SVGs also render through different markup, so the template needs a short branch. Both patterns are below, ready to paste.
What the Icons field does #
- Opens Elementor’s icon library picker with Font Awesome, custom libraries, and SVG upload.
- Stores the pick as an array of
valueandlibrary. - Holds a class string for font icons:
valueis the icon’s class, ready for an<i>tag. - Holds a nested file array for SVGs:
valuebecomes a URL and ID pair reached as{{ my_icon.value.url }}. - Accepts a default and a recommended list, so the picker can surface the icons that suit the widget.
If you are new to building widgets, start with the Widget Builder overview first.
Before you start #
- WordPress with Elementor installed and active.
- Master Addons for Elementor installed and active. New to the plugin? See the installation guide.
- A custom widget open in the Widget Builder editor. Our example is a feature list widget where each instance shows one icon, named
feature_icon, beside a short text blurb.
How to add an Icons field #
Find the Icons field in the panel on the left of the Widget Builder editor, grouped with the other media fields.
Drag it into a section under the Content tab. Once it lands, the field’s options open on the left.
Icons field options explained #
- Label: the text shown above the picker in Elementor, for example “Feature Icon”.
- Name: the unique identifier for the field, letters, numbers, and underscores only, for example
feature_icon. - Default: a starting icon as a
valueandlibrarypair, so the widget never drops in iconless. - Recommended: a set of icons the picker surfaces first, steering editors toward choices that fit the design.
- Description, Show Label, Separator: the standard display settings, plus Conditions for showing the field only when another control has a certain value.
Connect the Icons field to your template #
First, the mistake nearly everyone makes once: {{ feature_icon }} prints nothing. The direct-print shortcut on array values only outputs a top-level url key, and the Icons array has none, so the token comes out empty. No error, no warning, just a blank spot where the icon should be. The properties are where the content lives.
Font icon (Font Awesome and other class-based libraries): value holds the class string, so an <i> tag renders it:
<i class="{{ feature_icon.value }}" aria-hidden="true"></i>Uploaded SVG: when the pick comes from the SVG library, value is itself an array with a URL and ID, so the icon renders as an image:
<img src="{{ feature_icon.value.url }}" alt="">A widget rarely knows in advance which kind the editor will pick, so the reliable pattern branches on the library key and handles both:
{% if feature_icon.library == 'svg' %}
<img src="{{ feature_icon.value.url }}" alt="">
{% else %}
<i class="{{ feature_icon.value }}"></i>
{% endif %}Wrap the whole thing in an empty-state guard, as with any media-type field, so an unset icon leaves no stray <i class=""> behind:
{% if feature_icon.value %}
...the branch above...
{% endif %}Watch out for testing with font icons only. The <i>-tag version works all week, then a client uploads a brand SVG and the icon vanishes, because a class attribute cannot hold a file array. If you ship the field, ship the branch.
Use the Icons control in Elementor #
Add your custom widget to a page in Elementor, reloading the editor if the page was already open. The field renders as Elementor’s icon chooser under your label, showing the current icon.
Click it and the icon library opens. Search Font Awesome, browse any custom libraries, or switch to the upload tab for an SVG. Confirm the pick and the preview updates, running through whichever branch of your template matches the library.
Common use cases #
- Feature and benefit lists with one symbol per point.
- Info and icon boxes where the icon anchors the card’s topic.
- Social link rows, each instance pairing an icon with a URL field.
- Buttons and calls to action that carry a small leading icon.
- Step and process widgets where numbered stages each get a matching symbol.
Tips for working with the Icons field #
- Never print the field bare.
{{ feature_icon }}outputs nothing; the icon lives in{{ feature_icon.value }}and, for SVGs,{{ feature_icon.value.url }}. - Ship the library branch. The
{% if feature_icon.library == 'svg' %}pattern is the only version that survives every pick an editor can make. - Guard the empty state.
{% if feature_icon.value %}keeps unset icons from rendering empty tags. - Add
aria-hidden="true"to decorative font icons. Screen readers skip the symbol and read the text beside it instead. - Use Recommended to guide the pick. Surfacing a curated set keeps a widget’s icons visually consistent across a site.
- Size SVGs in your CSS tab. Uploaded SVGs arrive as images, so give the img branch a width to keep both branches rendering at the same scale.
Frequently Asked Questions #
What is the Icons field in the Master Addons Widget Builder?
The Icons field adds Elementor’s icon library picker, Font Awesome, custom libraries, and SVG upload, to a custom widget. The pick is stored as an array of value and library, which your template renders as an <i> tag for font icons or an <img> tag for SVGs.
Why does {{ my_icon }} print nothing?
The direct-print shortcut only outputs an array’s top-level url key, and the Icons value has none, so the token renders empty. Use the properties instead: {{ my_icon.value }} for a font icon class, {{ my_icon.value.url }} for an uploaded SVG.
How do I render a Font Awesome icon?
With an <i> tag carrying the class from the field: <i class="{{ my_icon.value }}" aria-hidden="true"></i>. The value key holds the complete class string for class-based libraries.
How do I render an uploaded SVG icon?
As an image. For SVG picks, value is a nested array with the file’s URL and ID, so the markup is <img src="{{ my_icon.value.url }}" alt="">. A class attribute cannot render it.
How do I support both font icons and SVGs in one widget?
Branch on the library: {% if my_icon.library == 'svg' %} renders the img tag, {% else %} the i tag. Editors can then pick from any tab of the library and the widget renders the right markup either way.
Can I preselect an icon or suggest a set?
Yes. The Default option sets a starting value and library pair, and the Recommended option surfaces a chosen set at the top of the picker to keep selections on-brand.
Wrapping up #
The Widget Builder Icons field brings the whole Elementor icon library into a custom widget for the price of one short branch: value as a class for font icons, value.url as a file for SVGs, and a guard around both. Pair it with the Media field when a slot calls for a full image rather than a symbol. Explore the rest of the Master Addons widgets and extensions, and see the pricing page for what each plan includes.
