Icons

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.

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 value and library.
• Holds a class string for font icons: value is the icon’s class, ready for an <i> tag.
• Holds a nested file array for SVGs: value becomes 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 value and library pair, 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 #

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.