Elementor Icon List Alignment Fix

How to align icons to the top of Elementor’s Icon List widget

If you’re like me and the details matter (plus gotta mild case of OCD), then a broken alignment may drive you bonkers too.

For years now, the Elementor Icon List widget has had an alignment issue where if the list text line breaks, the icon is centered on all of the text instead of aligned to the top, where it would look better when the line breaks.

First, here’s a before and example, so you know what I’m talking about:

First step: Add a CSS class

Go to your Icon List widget you want to align the icons to the top, navigate to the ‘Advance’ tab, and add “il-align-top” to the CSS classes (without the parenthesis.)

Second Step: Add the CSS snippet

Here is a CSS snippet to fix the issue and align your icons flush to the top instead of the middle.

Copy and paste this CSS where you are putting all of your CSS (my recommendation is using Code Snippets Pro or just adding it in your Customizer.)

.il-align-top .elementor-icon-list-item {
	align-items: flex-start!important; 
}

That’s it! Enjoy, and keep creating dope designs!