---
title: "Why are Icons Misaligned or Off Centered?"
url: https://uichemy.com/docs/why-are-icons-misaligned-off-centered/
date: 2023-08-10
modified: 2026-04-14
author: "Sagar Patel"
description: "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..."
image: https://uichemy.com/wp-content/uploads/2023/05/Why-are-Icons-Misaligned-or-Off-Centered_-min-1024x536.jpg
word_count: 216
---

# Why are Icons Misaligned or Off Centered?

## 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.

## 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.](https://uichemy.com/wp-content/uploads/2023/08/elementor-icon-alignment-issue-1024x575.png)

### 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](https://nexterwp.com/), from the Dashboard, go to **Appearance** > **Customize**.

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

![set body line height](https://uichemy.com/wp-content/uploads/2023/08/set-body-line-height.gif)

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](https://uichemy.com/wp-content/uploads/2023/07/figma-flatten-svg.gif)

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

## Frequently Asked Questions

**Q: Why are my icons misaligned in Elementor?**
A: 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.

**Q: How do I fix off-centered SVG images after exporting from Figma?**
A: 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.

**Q: What common mistakes lead to icon misalignment in WordPress?**
A: 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.

**Q: What are the best practices for exporting icons from Figma to WordPress?**
A: 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.

**Q: Does UiChemy guarantee perfect alignment of icons in WordPress?**
A: 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.