diff --git a/app/assets/javascripts/discourse/app/index.html b/app/assets/javascripts/discourse/app/index.html
index 96b9f9baee4..ad51651ba85 100644
--- a/app/assets/javascripts/discourse/app/index.html
+++ b/app/assets/javascripts/discourse/app/index.html
@@ -28,6 +28,7 @@
       <discourse-assets-json>
         <bootstrap-content key="preloaded">
       </discourse-assets-json>
+      <discourse-assets-icons></discourse-assets-icons>
     </discourse-assets>
 
     <bootstrap-content key="body">
diff --git a/app/assets/javascripts/discourse/app/lib/svg-sprite-loader.js b/app/assets/javascripts/discourse/app/lib/svg-sprite-loader.js
index d08ebd2304c..42f033c413e 100644
--- a/app/assets/javascripts/discourse/app/lib/svg-sprite-loader.js
+++ b/app/assets/javascripts/discourse/app/lib/svg-sprite-loader.js
@@ -7,7 +7,8 @@ export function loadSprites(spritePath, spriteName) {
   if (!spriteContainer) {
     spriteContainer = document.createElement("div");
     spriteContainer.id = SVG_CONTAINER_ID;
-    document.body.appendChild(spriteContainer);
+    const spriteWrapper = document.querySelector("discourse-assets-icons");
+    spriteWrapper?.appendChild(spriteContainer);
   }
 
   let sprites = spriteContainer.querySelector(`.${spriteName}`);
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 52c5302136a..2449c821fe8 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -78,6 +78,7 @@
       <discourse-assets-json>
         <div class="hidden" id="data-preloaded" data-preloaded="<%= preloaded_json %>"></div>
       </discourse-assets-json>
+      <discourse-assets-icons></discourse-assets-icons>
     </discourse-assets>
 
     <%- if allow_plugins? %>