Page builders and fields

Pick your Easy SVG Pro icons inside Elementor, WPBakery, ACF, Secure Custom Fields, Lazy Blocks, Meta Box and Timber/Twig, the way each tool expects.

Your clients build pages in Elementor, WPBakery or with custom fields. Easy SVG Pro puts your icon sets right into those tools, so editors choose an icon from a list instead of copying code. This guide covers each integration.

Before you start

Your Pro license is active.
The builder or field plugin is installed and active.
Its switch is on under Icons → Features, in the group Integrations. Each tool has its own switch, and a switch is hidden while its plugin is not active.

Which integration does what?

Tool	Switch under Icons → Features	What editors get
Elementor	Elementor icon picker	Your collections as tabs in Elementor's own icon library
WPBakery Page Builder	WPBakery icon element	An Easy SVG Icon element and your icons in WPBakery's own icon picker
Advanced Custom Fields, Secure Custom Fields	ACF icon picker	An Easy SVG tab in ACF's icon picker field
Lazy Blocks	Lazy Blocks icon control	An Easy SVG icon control for your custom blocks
Meta Box	Meta Box icon field	A field type `easy_svg_icon`
Timber / Twig themes	Timber / Twig	Two Twig functions for templates

Elementor

Switch it on

Under Icons → Features, turn on Elementor icon picker.

Open any icon control

In Elementor, edit a widget that has an icon, for example Icon, Icon Box or Button. Click the icon field and choose Icon Library.

Choose your icon

Each of your collections appears as its own tab on the left, named like the set. Click an icon and Insert.

If an icon a page points at no longer exists, the Elementor editor shows a dashed outline and a placeholder with the icon's address. Visitors see nothing there, and the rest of the page is unchanged.

Switching Elementor icon picker off later makes every Elementor icon that uses one of your collections show nothing. Leave it on as long as pages use it.

WPBakery Page Builder

Two ways, both with one switch:

The Easy SVG Icon element. In WPBakery's Add Element window, open the category Easy SVG and add Easy SVG Icon. Pick an icon in its settings.
Inside WPBakery's own icon picker. Elements that already have an icon setting, including many theme elements, get an extra library called Easy SVG icons. Choose it in the element's icon library dropdown.

Pages you already published keep showing their icons even if you switch the element off later. The element is then no longer offered for new content.

ACF and Secure Custom Fields

Switch it on

Turn on ACF icon picker under Icons → Features.

Add an Icon Picker field

In ACF, edit a field group and add a field of type Icon Picker.

Choose the Easy SVG tab

When editors fill in the field, the picker now has a tab Easy SVG with all your icons. If you limit the field's tabs in its settings, keep Easy SVG ticked.

Secure Custom Fields is a fork of ACF and works exactly the same way, with the same switch.

Lazy Blocks

Turn on Lazy Blocks icon control. When you build a block in Lazy Blocks, add a control and choose the type Easy SVG icon. Editors then pick an icon in the block's sidebar. The control stores the icon's address.

Meta Box

Turn on Meta Box icon field. In your Meta Box field definition, use the field type easy_svg_icon. Editors get an icon picker, and the field stores the icon's address.

Timber and Twig

Turn on Timber / Twig. In a Twig template, draw an icon by its address:

{{ easy_svg_icon('acme/front-door') }}

Check first whether an icon exists:

{% if easy_svg_icon_exists('acme/front-door') %}
  {{ easy_svg_icon('acme/front-door') }}
{% endif %}

easy_svg_icon also works as a filter: {{ 'acme/front-door'|easy_svg_icon }}. The output is marked safe, so Twig shows the icon instead of its code. An icon that no longer exists prints nothing.

Where are the icon pickers for editors?

All pickers load their icons for editors too, not only for administrators. Editors can choose icons, but only administrators can add or change them.

Good to know

Every integration stores the address (collection/name). Replacing an icon's drawing updates it everywhere; moving it to another set changes the address.
No extra front-end files. Icons are printed as inline SVG, so the builders do not load an icon font.
Shortcode as a fallback. In any builder without an integration, use [easy_svg_icon name="acme/front-door"] in a text element.

Common questions

Block editor and block themes

Quick insert and the Icon block in templates.

Switching features on

All switches explained.

Developers: the Twig functions, the shortcode and the integration hooks are in the developer reference.

Was this page helpful?