V4 Elements Icon List Estimated reading: 5 minutes 4 views Show a list of points, each with its own icon. Great for features, benefits and checklists. No code needed. WIDGET Icon List PARTS Items with an icon and text PLAN Free BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons before you start. Note: In the screenshots, the orange boxes and numbers show you where to click or what to check. STEP 1 Enable the Widget The Icon List is on by default. If it is off, turn it on from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Under General Widgets, turn on Icon List. Click Save Settings. The Icon List widget in the dashboard (click to zoom) STEP 2 Add the Icon List Add the widget to your page. It comes with three items and an icon for each. Open your page with the Elementor Editor. Click the + button at the top to open the Elements panel. Under AAE General, find Icon List. Drag it onto your page. The Icon List in the Elements panel (click to zoom) STEP 3 Add and Manage Items Each line of the list is an item. Manage them in the Items section. Select the Icon List. In the General tab, open Items. Click the + button to add an item. Drag an item by its dots to change the order. Click the copy icon to duplicate an item. Click the x to delete it. Add (1), an item (2), copy and delete (3) (click to zoom) Note: The Item name box only renames the item in the panel and in Structure. It does not change the text on your page. Change the text as shown in Step 4. STEP 4 Change the Text Each item has two parts: an SVG (the icon) and a Paragraph (the text). Open the Structure panel to find them. Open the Structure panel and open an item. Click Paragraph. In the General tab, type your text in Paragraph. You can use the bold, italic, underline and link buttons above the box. To make the whole line a link, open Link in Settings and add an address. The SVG (1) and the Paragraph (2) of an item (click to zoom) The text box (1) and the Link setting (2) (click to zoom) STEP 5 Change the Icon Pick a different icon for an item. The icon must be an SVG file. Click the SVG part of the item. In the General tab, move your mouse over the picture. Two buttons show up. Click Select SVG to pick an SVG from your Media Library. Or click Upload to add a new SVG file. Click the SVG you want, then click Select. Select SVG (1) and Upload (2) (click to zoom) Pick the SVG you want (1) (click to zoom) Tip: A new item starts with a plain placeholder icon. Change it the same way. STEP 6 Style the List Select the Icon List and open the Style tab. Open Layout. Use Gaps to set the space between items. Set Row for the space between lines. Use Direction to show the items in a row instead of a column. To change the text size or color, or the icon size, select an item part and use its own Style tab. Click Update to save your page. Gaps (1) and Direction (2) (click to zoom) Tip: By default, the items sit in a column with no space between them. The text is 16px, color #26282c, and the icon is 16px. SETTINGS Options Items Add, copy, delete and reorder the lines of the list. Paragraph (part) The text of an item. It can have formatting and a link. SVG (part) The icon of an item. Pick or upload an SVG file. Item name A name for the item in the panel and in Structure. It does not show on your page. ID Optional CSS ID for the list. RESULT Final Result An Icon List on a live page, with four items. The first has its own icon and a link. The last one is a new item with its text changed. The Icon List on the live page Free email support Icon changed to a mail SVG, and the text is a link. Easy to Customize and 24/7 Customer Support The default items, unchanged. Works with any theme A new item added with the + button. Its text is changed. GOOD TO KNOW More Details Real list The widget is a real list on your page, so screen readers read it as a list. Link style A link in an item looks like the rest of the text until you style it. Any size Make the icons bigger and the text larger from the Style tab of each part. HELP Troubleshooting I do not see the Icon List in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Icon List. Click Save Settings, then reload the editor. Look under AAE General, or use the search box. I changed the item name but the text did not change The Item name is only a label in the panel. Open the Structure panel, click Paragraph and change the text there. I can not use my icon The icon must be an SVG file. Click the SVG part of the item, then Upload. I want more space between the lines Select the Icon List, open Style > Layout and set Gaps. I want the items side by side Select the Icon List, open Style > Layout and set Direction to the right arrow. You Did It Your page now has a clean list with icons. If you face any problem, please contact our support team. We are happy to help.
