I’m going to show how to create an animated icon from your site using Elementor.
Step 1: Go to the Elementor builder.
Step 2: Add a section and select the structure you want.
Step 3: For my demo, I created two sections.
Step 4: For the first section, I put the Heading widget.
Step 5: For the second section, I put the two inner section widget, set the inner section width to full width, and the first inner section min-height to 125.
Step 6: For the second inner section, I set the min-height to 52, and put the text editor widget.
Step 7: I put the Lottie widget from the first inner section.
Step 8: Go to the site https://lordicon.com/ and sign up using your Gmail account.
Step 9: After you sign up, you will now see this image below. Click the Explore Library button and Explore wired icon or Explore System Icon.
Step 10: Click the free Icon and choose the icon you want. For my tutorial, I chose the Confetti icon.
Step 11: You can customize the Icon color.
Step 12: After you apply the color you want, download the Icon by clicking the Lottie button below.
Step 13: After you download, go to your Elementor builder and upload the JSON file from the Lottie widget.
Step 14: After uploading, just click ‘insert media.’
Step 15: After clicking the ‘insert media’, you now successfully created an animated Icon like this image below.
Step 16: After that, you can customize the animation trigger. For me, I chose On hover. You can also customize the size of the icon. Simply go to the style -> Tottie -> width.
Congratulations! Now you know how to create an animated Icon! Click the Demo link if you want to see the final output: https://dev-jeromepogi.pantheonsite.io/animated-icon/
