Icon List

Click to See Live Demo

Enhance the design and visual appeal of your website by adding a list of icons to various elements. With the help of this element, you can customize your Feature points and give them a stunning appearance in Elementor. You can use this feature to create social media icons to link to your profiles, service icons to highlight key features, feature icons to showcase product or service benefits, or menu icons to enhance your navigation. This feature offers a range of icons that you can use to customize your website and make it more engaging for your visitors.

How to set up the Icon List: 

Step 1: Search and find Icon List in the search box under the Elements Tab. After that, easily drag and drop the widget wherever you want inside the Elementor section.

Step 2: This is how the element will look after inserting Icon List

How to set up content for the Icon List?

In this section, you can add any number of Icons you want by simply clicking “+Add Items”. Furthermore, the Layout allows you to arrange the Icons in two different ways. Select Default to aligning the Icon one by one or Inline to arrange them in the same line

Also, you can add your title and select the different types of icons in the Icon library or upload through SVG Image. Also, you can attach the link to the destination page when the visitors click the Icon. In a similar vein, the AI plugin allows you to add links for each icon separately.

How to add Style to the Icon?

This section lets you style each List, Icon, and Text individually. You can take full advantage of controlling the styles individually. 

List: Using the List section, you can customize the margin and alignment of your list so that it is centered, on the right, or on the left. Additionally, you can modify the border type, radius, and padding. Moreover, Box Shadow and Divider toggles can be enabled if you want to include them.

Icon

In the Icon position, you can set where the Icon to be appeared like on the left side or right side of the text. Increase or decrease the size of the Icon using a size slider. Besides, you can set the Icon to the top, middle, and bottom of the Text. In both Normal and Hover Mode, you also have the option to freely set Colour, Background Type, Border Type, Box Shadow, Box Radius, Padding, and Margin.

Text:

This section lets you customize the text style as you want. Modify the color of the text in Normal and Hover Mode. Text Indent allows you to set up the gap between text and Icon. Finally, alter the font of the Text in the Typography section. 

Get a sneak peek with a Live Demo!

Just send email to our if you get stucked anywhere.We’re here to lend a helping hand whenever you need it

Powered by BetterDocs

Enjoy the free pro experience. Help us by sharing our plugin. It will help us add more features in the future. 

Resources
Scroll to Top