1. Home
  2. Docs
  3. Happy Elementor Addons Fr...
  4. Widgets
  5. LordIcon


Want to add LordIcon to your Elementor website? Try the Happy Addons’ new LordIcon widget. From now, you add and customize the LordIcon in your own style with this free widget.

How To Use Happy Addons’ LordIcon Widget


To use this handy widget, you need to install and activate the following plugins to your website:

Let’s get started:

Find & Add LordIcon Widget

First, you need to search the widget from the Elementor widget gallery. Then select the widget and drag it to the suitable area of your web page.

Add LordIcon Widget

Content of LordIcon

In the Content area, you’ll get all the necessary options for adding the LordIcon. The options are.

  • Icon Method
  • Paste CDN
  • Animation Trigger
  • Target
  • Pulse Effect
Content options of  LordIcon

Note: You’ll get a default icon like the above image after adding the widget.

Let’s talk about each option one by one.

Icon Method

There are two types of Icon Methods for adding the icon. You can choose the suitable one based on your need.

Choose Upload LordIcon File as Icon Method

Let’s see how you can upload a LordIcon.

First, go to the LordIcon official website.

After visiting their website, you need to select the icon that you want to add to your website. Then click the ”LOTTIE” button to download the JSON file.

Download json file

Second, select the Icon Method->Upload LordIcon File. Finally, upload the downloaded JSON file into the JSON File area.

Content options of  LordIcon

Select Paste LordIcon URL as Icon Method

Now, it’s time to show you how to add an icon by pasting the LordIcon URL. First, visit the LordIcon website and select the required icon. Now, click on the ”HTML Code” button. Then copy the JSON URL displayed under the ”src”.

Copy Icons Link

Finally, you need to paste the copied URL into the Paste CDN area.

Paste Icon CDN URL

That’s it.

Choose Animation Trigger

The Trigger is the action that is mainly used to animate the icon.

There are six different Animation Triggers available. They are.

  1. Loop (infinite)
  2. Click
  3. Hover
  4. Loop on Hover
  5. Morph
  6. Morph two way

Check this image below to see how these animations work.

Set Animation Trigger

Set Target

Target means the area of the trigger. When you mouse hover or click the target area then the icon will animate.

Based on your need, you can set the Target of the icon animation. There are four Target options (On Widget, On Column, On Section, and Custom) that you can use for icon animation.

On Widget: The animation only works when you trigger the Widget.

On Column: Animation starts when you trigger the Column.

On Section: Animation works the entire section when triggered on the Section.

Follow the below example to under the process.

Set Target

Set Custom Target

To set the Custom Target, you have to understand the coding. First, you need to inspect the icon element and find its parent ”Class Name”. Then copy the Class Name and paste it into the Target area starting with a ”.” sign like this (.ClassName).

Here, we’ve added the class name (.slot) into the Target area.

Set Custom Target

Pulse Effect

You can also add Pulse Effect on the icon. First, activate the Pulse Effect option. Then select the right effect Color.

Set Pulse Effect

You can also set the Alignment (Left, Center, Right) of the icon in your own way.

Style the Icon

You can change the style of the icon using these styling options.

  • Size
  • Primary Color
  • Secondary Color
  • Tertiary Color
  • Quaternary Color
  • Stroke
  • Background Color
Style options of LordIcon

Note: By default, we are supporting 4 color control that you can use to style the icon. If you need more color control, you have to manage it yourself.

Also, you can add Border, Border Radius, and Box Shadow to decorate your icon.

Set Border

Advanced Elementor Settings

If you want to add motion effects, happy effectsbackground, or make it responsive and more intriguing, click on ‘Advanced‘ to explore those options. the ‘Advanced‘ is a default feature of Elementor.

Elementor Advanced Settings

Give a read to this Document to know more about advanced features & functions.

These are the widgets where you can also use the LordIcon widget. Check the documentation.

Final Preview

Let’s check out the current design of your webpage.

Final Preview

That’s it.

How can we help?