Copied!
It's on your clipboard.
You’ve been offline for 0 second. Please check your Internet connection.

Help Us Improve

Found an issue or have an idea? Let us know.
Select all that apply...
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Remove Extra Space Under Icons in Elementor
Preview
Download Template
Report Bug

Info

Resource
Utilities & Scripts
Builder
Elementor
Add-ons
No items found.
Last Updated
Jan 2, 2026

Overview

The CSS removes extra vertical space around Elementor icons by setting the wrapper’s line-height to zero, keeping icons perfectly aligned without gaps.

Features

Setup

01
Add External Scripts

Copy & paste the scripts before the </body> tag of your project. If you added them before for another setup, skip this step.

Language
Copy
01
Copy structure to Elementor

Right-click in Elementor, choose “Paste from another site,” and while the popup is open, press cmd/ctrl + v to insert the layout.

Copy To Elementor
01
Add HTML

Place the code in an HTML widget or add it through Elementor → Custom Code (before the closing </body> tag) either globally or only on selected pages.

Language
Copy
01
Add custom CSS

Paste the code through the page or site settings, or add it via Elementor → Custom Code (before </body>) for broader use.

Language
Copy
.elementor-icon-wrapper {
  line-height: 0;
}
01
Add custom Javascript

Paste the script through Elementor → Custom Code (set to load after </body>) for site-wide or page-specific loading.

Language
Copy
01
Add custom PHP

Place the PHP snippet inside your theme’s functions.php or using any code snippet to enable logic.

Language
Copy
01
01
Publish and preview live
Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.

Implementation