> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Why are Icons Misaligned or Off Centered?

Fix misaligned icons and off-center SVG images after importing a UiChemy export into Elementor.


### Icons Misaligned

**Reason:** When you import a template in Elementor, some icons may show alignment issues, this happens because of the line height set at the body level of your theme.

**Solution:** Set the line height to `1` on the body in your theme. In the Nexter theme, go to **Appearance → Customize → Typography → General → Body** and set **Line Height** to `1`.

![Setting the body line height to 1 in Theme Customizer](https://res.cloudinary.com/ekxmy1t9/image/upload/v1783659815/uichemy-docs/classic-mode/troubleshooting/icon-alignment/set-line-height.gif)

This resolves most icon alignment issues.

![An example of an icon alignment issue in Elementor](https://res.cloudinary.com/ekxmy1t9/image/upload/v1783659810/uichemy-docs/classic-mode/troubleshooting/icon-alignment/alignment-issue.png)

### SVG Image Off Center

**Reason:** When you export a Figma layout with SVG images or icons using UiChemy, the SVG can sometimes appear off-center once imported into Elementor. This usually happens if you rotated the SVG in Figma, rotation shifts its bounding box slightly off-center in the exported template.

**Solution:** Flatten the SVG after rotating it in Figma, to reset its bounding box. Select the SVG, right-click, and choose **Flatten** (or press **Ctrl + E**).

![Flattening a rotated SVG in Figma](https://res.cloudinary.com/ekxmy1t9/image/upload/v1783659824/uichemy-docs/classic-mode/troubleshooting/icon-alignment/flatten-svg.gif)

Once flattened, the SVG stays in position when you export the template.

### Frequently Asked Questions

<p style="color: #4B22CC; font-weight: 500; margin-bottom: 4px;">Why are my icons misaligned in Elementor?</p>

Usually because your theme's body line height isn't set to `1`. Go to **Appearance → Customize → Typography → General → Body** and set Line Height to `1`.

---

<p style="color: #4B22CC; font-weight: 500; margin-bottom: 4px;">How do I fix off-centered SVG images after exporting from Figma?</p>

This often comes from rotating the SVG in Figma. Select it, right-click, and choose **Flatten** (or press Ctrl + E), this resets the bounding box and keeps the image in position.

---

<p style="color: #4B22CC; font-weight: 500; margin-bottom: 4px;">What common mistakes lead to icon misalignment in WordPress?</p>

Not adjusting the body line height in theme settings is the most common one, many assume the default value will work.

---

<p style="color: #4B22CC; font-weight: 500; margin-bottom: 4px;">What are the best practices for exporting icons from Figma to WordPress?</p>

Set line height to `1` in your theme, and flatten any rotated SVGs before export, this keeps the final result clean and professional.

---

<p style="color: #4B22CC; font-weight: 500; margin-bottom: 4px;">Does UiChemy guarantee perfect alignment of icons in WordPress?</p>

Alignment accuracy also depends on your theme settings and how elements are handled in Figma, adjusting line height and flattening SVGs where needed helps maintain design integrity.