Why are Icons Misaligned or Off Centered?

Updated on August 10, 2023

Key Takeaways

  • UiChemy plugin exports Figma layouts with SVG images that may appear off-center in Elementor due to rotation.
  • Setting the line height to 1 in the Nexter theme resolves most icon alignment issues after importing templates.
  • Flattening an SVG image in Figma before export resets its bounding box, preventing off-center alignment in Elementor.

Table of Contents

Icons Misaligned

Reason

When you import a template in Elementor, some icons might have alignment issues.

This happens because of the line height set at the body level of the theme.

Modern wooden furniture display with minimalist design, perfect for stylish home decor.

Solution

So to fix this, you have to set the line height to 1 on the body in your theme.

To do this in the Nexter theme, from the Dashboard, go to Appearance > Customize.

Then go to Typography > General > Body and set the Line Height to 1.

set body line height

This should solve most of the icon alignment issues.

SVG Image Off Center

Reason

When you export a Figma layout containing SVG images or icons using the UiChemy plugin, sometimes, when you import the template in Elementor, you might see the SVG image is a bit off-center.

This can happen if you’ve rotated the SVG image in your Figma design. When you rotate an SVG image in Figma, its bounding box tends to move a little off-center in the exported template.

Solution

To fix this issue, you can flatten the SVG image after rotating in Figma, this will reset its bounding box.

To do this select the SVG image, then right-click on it and select Flatten or press Ctrl + E.

figma flatten svg

Now if you export the template, the SVG image will remain in its position.

About the Author

Photo of Sagar Patel CEO of UiChemy
CEO · UiChemy · 11 years experience

Sagar is the Founder & CEO of POSIMYTH Innovations, with 10+ years building WordPress products trusted by 100,000+ websites globally. He has led the development of The Plus Addons for Elementor, Nexter, WDesignKit, and UiChemy, all built hands-on from concept to launch. His work focuses on making website building faster, more flexible, and accessible for creators and businesses worldwide.

WordPressFigmaUI DesignWeb DesignElementorBricksAutomationClaudeAI
LinkedIn X Website
Join our Design Community

Related Frequently Asked Questions

Why are my icons misaligned in Elementor?

Icons can become misaligned in Elementor due to the line height setting at the body level of your theme. If the line height is not set to 1, it can cause spacing issues that affect icon placement. To resolve this, navigate to Appearance > Customize in your WordPress dashboard, then go to Typography > General > Body, and set the Line Height to 1.

How do I fix off-centered SVG images after exporting from Figma?

Off-centered SVG images can occur if you've rotated the SVG in your Figma design. This rotation can shift the bounding box, causing misalignment when imported into Elementor. To fix this, flatten the SVG image in Figma by selecting it, right-clicking, and choosing Flatten or pressing Ctrl + E. This resets the bounding box and keeps the image in position upon export.

What common mistakes lead to icon misalignment in WordPress?

A frequent mistake is not adjusting the line height in the theme settings, which can lead to unexpected icon spacing. Many users overlook this setting, assuming default values will work. Always check the line height and adjust it to 1 to prevent alignment issues when using the UiChemy Figma to WordPress Converter.

What are the best practices for exporting icons from Figma to WordPress?

When exporting icons from Figma to WordPress using UiChemy, ensure that the line height is set to 1 in your theme to avoid misalignment. Additionally, if you're using SVG images, flatten them after any rotation to maintain their correct position. These steps help achieve a cleaner and more professional look in your final WordPress site.

Does UiChemy guarantee perfect alignment of icons in WordPress?

While UiChemy aims for high fidelity in design conversion, achieving perfect alignment depends on theme settings and how elements are handled in Figma. Users must adjust line height and flatten SVGs as necessary to mitigate alignment issues. Understanding these factors is crucial for maintaining design integrity when using the UiChemy Figma to WordPress Converter.

Last reviewed: April 14, 2026

Related Docs