---
title: "How to Add Icon Preloader Animation in Elementor?"
url: https://theplusaddons.com/docs/icon-preloader-animation-in-elementor/
date: 2023-04-07
modified: 2026-04-11
lang: en
author: "Aditya Sharma"
description: "Are you looking to add Icon Preloader Animation in you Elementor website? If you're looking to enhance the user experience on your website, one great way to do so is..."
image: https://theplusaddons.com/wp-content/uploads/2023/04/How-to-Add-Icon-Preloader-Animation-in-Elementor_-1024x536.jpg
word_count: 210
---

# How to Add Icon Preloader Animation in Elementor?

## 

- Enhance user experience on Elementor websites by adding Icon Preloader Animation using The Plus Addons for Elementor.
- Utilize the Preloader widget to select an icon from the Elementor icon library or upload a custom SVG icon.
- Adjust preloader styles through the Icon tab under Style in the Preloader widget settings.

Are you looking to add Icon Preloader Animation in you Elementor website? If you're looking to enhance the user experience on your website, one great way to do so is by adding a preloader animation to your site. It not only adds a visual element to your site but also helps to improve the site's performance by letting visitors know that the page is still loading.

With the Preloader widget from The Plus Addons for Elementor you can easily use an icon as a preloader for your Elementor website.

*To check the complete feature overview documentation of The Plus Addons for Elementor Preloader widget, [click here](/docs/preloader-elementor-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/preloader-and-page-transition/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To do this, add the Preloader widget on the page or template, in the **Content** tab, you’ll find an item under **Preloader**.

Open the item and select **Icon **from the **Select** dropdown.

In the **Icon **field, you can add an icon from the Elementor icon library or you can add a custom SVG icon.

![preloader icon](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-icon.png)

You can make the necessary style adjustment from the **Icon** tab under **Style**.

![preloader icon demo](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-icon-demo.png)

Also, check [How to Add Text Preloader Animation in Elementor](https://theplusaddons.com/docs/text-based-preloader-animation-in-elementor/).