# SOLVED: \<svg\> attributes rendered twice on frontend / preview, but appear correctly in the Bricks builder

**URL:** <https://forum.bricksbuilder.io/t/solved-svg-attributes-rendered-twice-on-frontend-preview-but-appear-correctly-in-the-bricks-builder/38985>\
**Category:** Bugs\
**Tags:** v2-3-2\
**Created:** [April 23, 2026, 5:43am UTC](https://forum.bricksbuilder.io/t/solved-svg-attributes-rendered-twice-on-frontend-preview-but-appear-correctly-in-the-bricks-builder/38985 "2026-04-23T05:43:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![thehamzazafar](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/t/b5a626/32.png) [@thehamzazafar](https://forum.bricksbuilder.io/u/thehamzazafar)\
**Post date:** [April 23, 2026, 5:43am UTC](https://forum.bricksbuilder.io/t/solved-svg-attributes-rendered-twice-on-frontend-preview-but-appear-correctly-in-the-bricks-builder/38985/1 "2026-04-23T05:43:30Z")

</div>

**Browser** : Chrome 110  
**OS** : macOS / Windows / Linux / etc.  
**URL** : Link to a page that illustrates this issue  
**Video** : Short screen recording that illustrates this issue (free tool: [jam.dev](https://jam.dev/))

When an `<svg>` element is inserted via the HTML-to-Bricks paste (or appears inside a pasted block), the Bricks builder stores and displays the attributes correctly — the element tree inside the editor shows `viewBox="0 0 24 24"`, `fill="none"`, `stroke-width="1.5"`, etc., as a single value each.

However, on the **frontend and on preview** , every attribute on the outer `<svg>` is output twice, space-joined. Inspecting the live DOM shows:

```auto
<svg class="brxe-svg" id="brxe-aaerit"
     viewBox="0 0 24 24 0 0 24 24"
     fill="none none"
     stroke="currentColor currentColor"
     stroke-width="1.5 1.5"
     stroke-linecap="round round"
     stroke-linejoin="round round">

```

Because `fill="none none"` and the other doubled values are invalid per the SVG spec, browsers fall back to defaults — `fill` becomes black — and our outline icons render as solid black silhouettes instead of thin strokes.

**Key observation**  
The duplication is a **render-time** bug, not a save-time bug:

- In the Bricks builder, the element’s attributes are single and correct.

- On the frontend (published page) and on preview mode, they are doubled.

This suggests Bricks’ frontend render pipeline is emitting the SVG attribute set twice — possibly once from its element data model and once by passing through the original SVG markup, or a similar dual-pass.

**Input (pasted HTML)**

```auto
<div class="about-values__icon">
  <svg stroke-width="1.5" aria-hidden="true" focusable="false">
    <use href="#sl-icon-shield-check"></use>
  </svg>
</div>

```

`#sl-icon-shield-check` is a `<symbol>` injected sitewide via a `wp_body_open` code snippet, with its own `viewBox`, `fill`, `stroke`, `stroke-linecap`, `stroke-linejoin` attributes.

**Expected**  
Frontend and preview output matches what the builder shows — each attribute present once with a single value.

**Actual**  
Frontend/preview output has each attribute duplicated (`fill="none none"`, `viewBox="0 0 24 24 0 0 24 24"`, etc.), causing browsers to discard the invalid values and render with defaults. Icons appear as solid black silhouettes instead of outline strokes.

**Steps to reproduce**

1. In a Bricks page, paste HTML containing `<svg stroke-width="1.5"><use href="#some-symbol"/></svg>` where the symbol is defined elsewhere on the page with its own presentation attributes (`viewBox`, `fill`, `stroke`, etc.).

2. Convert to Bricks elements, save.

3. Inspect the element inside the Bricks builder — attributes appear correctly, single values.

4. Open the frontend or preview the page and inspect the same `<svg>` in devtools — every attribute is doubled.

**Environment**

- Bricks: 2.3.2

- WordPress: 6.9.4

- PHP: 8.4.18

- Theme: Bricks child

- Tested in: Chrome (frontend + preview mode)

**Screenshots**

1. Devtools on live frontend showing doubled attributes —

2. Live site render — icons as solid black silhouettes —

3. Local HTML render (same markup outside Bricks) — icons as proper outlines —

**Workaround**  
None at the Bricks level. Currently avoiding the HTML paste path for SVG and using Code blocks, which is not a scalable solution for a site with many icons.

---

<div class="post-metadata">

**Author:** ![timmse](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/timmse/32/1192_2.png) [@timmse](https://forum.bricksbuilder.io/u/timmse)\
**Post date:** [April 23, 2026, 6:24am UTC](https://forum.bricksbuilder.io/t/solved-svg-attributes-rendered-twice-on-frontend-preview-but-appear-correctly-in-the-bricks-builder/38985/2 "2026-04-23T06:24:16Z")

</div>

Hi Hamza,  
Welcome to the forum, and thanks so much for your report!

I reproduced the issue and added it to our bug tracker.  
We’ll update this thread once it’s fixed.

Best regards,  
timmse

---

<div class="post-metadata">

**Author:** ![bricks.assistant](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/bricks.assistant/32/32537_2.png) [@bricks.assistant](https://forum.bricksbuilder.io/u/bricks.assistant)\
**Post date:** [May 12, 2026, 9:54am UTC](https://forum.bricksbuilder.io/t/solved-svg-attributes-rendered-twice-on-frontend-preview-but-appear-correctly-in-the-bricks-builder/38985/3 "2026-05-12T09:54:24Z")

</div>

We’ve addressed this in Bricks 2.3.5, now available as a one-click update in your WordPress Dashboard.

Please read the [changelog entry](https://bricksbuilder.io/release/bricks-2-3-5/) before updating, and let us know if you experience any issues.