Add xmlns attribute to SVG-html returned by icon() for compatibility with CSS background usage

[delijah]

Bug description

When using the icon() function to generate SVG markup, the returned string does not include the XML namespace (xmlns="http://www.w3.org/2000/svg").

This is generally fine when injecting the SVG inline into HTML. However, it causes issues when the SVG is reused as an image source—particularly in CSS contexts like background-image (e.g., via data: URLs or pseudo-elements such as ::before / ::after).

Problem

SVGs without an xmlns attribute fail to render when used as external image resources. For example:

.element::before {
content: "";
background-image: url("data:image/svg+xml,<svg ...>...");
}

In this context, the SVG is parsed as a standalone XML document, where the namespace declaration is required. Without it, many browsers will silently fail to render the image.

Expected Behavior

The SVG returned by icon() should include the namespace:

This ensures compatibility both:

• when used inline in HTML
• when used as an image source (e.g., in CSS or img/background-image)

Reproducible test case

No response

Screenshots

No response

Font Awesome version

v7.1.0

Serving

Kit

Implementation

SVG+JS

Browser and Operating System

Doesn't matter

Web bug report checklist

• I have included a test case because my odds go way up that the team can fix this when I do
• I have searched for existing issues and to the best of my knowledge this is not a duplicate