The Elementor Icon List widget is popular for displaying lists with icons on your website. By default, the icons in this widget are aligned to the left of the text. However, you may sometimes want to move the icons to the right for better visual balance or to suit your design preferences. This tutorial will walk you through the steps to easily move the icons to the right on the Elementor Icon List widget. Let’s get started!

Steps to Move Icon to the Right on Elementor Icon List Widget
Step 1: Add or Edit the Icon List Widget
Go to your Elementor editor to create new content (page/post) or select the existing one. Afterward, add an Icon List widget to the canvas area or modify your existing widget. In this example, we will modify our Icon List widget.

Step 2: Add the Custom CSS
As you can see from the image above, once you add the Icon List widget, the icons in this widget are aligned to the left of the text. Next, we will add the simple CSS snippet to the widget to move the icons to the right of the text.
On the widget settings, navigate to the Advanced tab -> Custom CSS. Afterward, copy the CSS snippet below and paste it into the Custom CSS input field.
selector .elementor-icon-list-icon{ order:1; margin-left: 10px; }
The Code Explanation:
By applying these CSS properties to the .elementor-icon-list-icon
class, you are adjusting the positioning and spacing of the icon element within the Elementor Icon List widget. The order property determines its position relative to other elements, while the margin-left
property controls the spacing on the left side of the icon.
Feel free to modify the value margin-left
to achieve the desired visual effect for your Elementor Icon List widget.

Note: This CSS snippet also works on the Post Info Widget. You can copy and paste it into the Post Info Custom CSS input field to move the icons to the right on Post Info widget.

That’s it. Once you add Custom CSS to your widget, your icons are moved to the right of the text on the Elementor Icon List and Post Info widget. Don’t forget to save your project or publish it if you want to.
The Bottom Line
This article shows how easily you can move the icons to the right on the Elementor Icon List and Post Info widget. Applying CSS code to the widgets lets you move the icons to the right of the text and achieve better visual effects to suit your web design. Experience with different CSS property values (margin-left
) to fine-tune the positioning of the icons.