diff --git a/scripts/generateIncludedImages.ts b/scripts/generateIncludedImages.ts
index 0798c7fe32..32fd3d917b 100644
--- a/scripts/generateIncludedImages.ts
+++ b/scripts/generateIncludedImages.ts
@@ -80,6 +80,7 @@ function genImages(dryrun = false) {
         "ring",
         "robot",
         "SocialImageForeground",
+        "speech_bubble",
         "speech_bubble_black_outline",
         "square",
         "star",
diff --git a/src/Logic/ImageProviders/WikimediaImageProvider.ts b/src/Logic/ImageProviders/WikimediaImageProvider.ts
index cc0d1dadda..e53f5d9dc0 100644
--- a/src/Logic/ImageProviders/WikimediaImageProvider.ts
+++ b/src/Logic/ImageProviders/WikimediaImageProvider.ts
@@ -1,6 +1,5 @@
 import ImageProvider, { ProvidedImage } from "./ImageProvider"
 import BaseUIElement from "../../UI/BaseUIElement"
-import Svg from "../../Svg"
 import { Utils } from "../../Utils"
 import { LicenseInfo } from "./LicenseInfo"
 import Wikimedia from "../Web/Wikimedia"
diff --git a/src/Models/ThemeConfig/LayerConfig.ts b/src/Models/ThemeConfig/LayerConfig.ts
index 7b2feacd0d..caf7d4393a 100644
--- a/src/Models/ThemeConfig/LayerConfig.ts
+++ b/src/Models/ThemeConfig/LayerConfig.ts
@@ -24,11 +24,12 @@ import Table from "../../UI/Base/Table"
 import FilterConfigJson from "./Json/FilterConfigJson"
 import { Overpass } from "../../Logic/Osm/Overpass"
 import { FixedUiElement } from "../../UI/Base/FixedUiElement"
-import Svg from "../../Svg"
 import { ImmutableStore } from "../../Logic/UIEventSource"
 import { OsmTags } from "../OsmFeature"
 import Constants from "../Constants"
 import { QuestionableTagRenderingConfigJson } from "./Json/QuestionableTagRenderingConfigJson"
+import SvelteUIElement from "../../UI/Base/SvelteUIElement"
+import Statistics from "../../assets/svg/Statistics.svelte"
 
 export default class LayerConfig extends WithContextLoader {
     public static readonly syncSelectionAllowed = ["no", "local", "theme-only", "global"] as const
@@ -466,7 +467,7 @@ export default class LayerConfig extends WithContextLoader {
                             new Link(
                                 Utils.runningFromConsole
                                     ? "<img src='https://mapcomplete.org/assets/svg/statistics.svg' height='18px'>"
-                                    : Svg.statistics_svg().SetClass("w-4 h-4 mr-2"),
+                                    : new SvelteUIElement(Statistics, {class: "w-4 h-4 mr-2"}),
                                 "https://taginfo.openstreetmap.org/keys/" + values.key + "#values",
                                 true
                             ),
diff --git a/src/UI/Base/Loading.svelte b/src/UI/Base/Loading.svelte
index 1f592312e8..57cdd2adca 100644
--- a/src/UI/Base/Loading.svelte
+++ b/src/UI/Base/Loading.svelte
@@ -2,13 +2,14 @@
   import ToSvelte from "./ToSvelte.svelte"
   import Svg from "../../Svg"
   import { twMerge } from "tailwind-merge"
+  import Loading from "../../assets/svg/Loading.svelte"
 
   export let cls: string = undefined
 </script>
 
 <div class={twMerge("flex p-1 pl-2", cls)}>
   <div class="min-w-6 h-6 w-6 shrink-0 animate-spin self-center">
-    <ToSvelte construct={Svg.loading_svg()} />
+    <Loading/>
   </div>
   <div class="ml-2">
     <slot />
diff --git a/src/UI/Base/SubtleButton.ts b/src/UI/Base/SubtleButton.ts
index 02db03ab26..9934e80d1e 100644
--- a/src/UI/Base/SubtleButton.ts
+++ b/src/UI/Base/SubtleButton.ts
@@ -1,9 +1,6 @@
 import BaseUIElement from "../BaseUIElement"
 import { Store, UIEventSource } from "../../Logic/UIEventSource"
 import { UIElement } from "../UIElement"
-import { VariableUiElement } from "./VariableUIElement"
-import Lazy from "./Lazy"
-import Loading from "./Loading"
 import SvelteUIElement from "./SvelteUIElement"
 import SubtleLink from "./SubtleLink.svelte"
 import Translations from "../i18n/Translations"
diff --git a/src/UI/Popup/Notes/NoteCommentElement.ts b/src/UI/Popup/Notes/NoteCommentElement.ts
index 5abaa52f9d..4dc3c8990e 100644
--- a/src/UI/Popup/Notes/NoteCommentElement.ts
+++ b/src/UI/Popup/Notes/NoteCommentElement.ts
@@ -1,6 +1,5 @@
 import Combine from "../../Base/Combine"
 import BaseUIElement from "../../BaseUIElement"
-import Svg from "../../../Svg"
 import Link from "../../Base/Link"
 import { FixedUiElement } from "../../Base/FixedUiElement"
 import Translations from "../../i18n/Translations"
@@ -11,6 +10,10 @@ import { Stores, UIEventSource } from "../../../Logic/UIEventSource"
 import { OsmConnection } from "../../../Logic/Osm/OsmConnection"
 import { VariableUiElement } from "../../Base/VariableUIElement"
 import { SpecialVisualizationState } from "../../SpecialVisualization"
+import SvelteUIElement from "../../Base/SvelteUIElement"
+import Note from "../../../assets/svg/Note.svelte"
+import Resolved from "../../../assets/svg/Resolved.svelte"
+import Speech_bubble from "../../../assets/svg/Speech_bubble.svelte"
 
 export default class NoteCommentElement extends Combine {
     constructor(
@@ -32,11 +35,11 @@ export default class NoteCommentElement extends Combine {
 
         let actionIcon: BaseUIElement
         if (comment.action === "opened" || comment.action === "reopened") {
-            actionIcon = Svg.note_svg()
+            actionIcon = new SvelteUIElement(Note)
         } else if (comment.action === "closed") {
-            actionIcon = Svg.resolved_svg()
+            actionIcon = new SvelteUIElement(Resolved)
         } else {
-            actionIcon = Svg.speech_bubble_svg()
+            actionIcon = new SvelteUIElement(Speech_bubble)
         }
 
         let user: BaseUIElement
diff --git a/src/index.ts b/src/index.ts
index 2a5b2600c6..3d2e6cd3af 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,11 +5,12 @@ import ThemeViewGUI from "./UI/ThemeViewGUI.svelte"
 import { FixedUiElement } from "./UI/Base/FixedUiElement"
 import Combine from "./UI/Base/Combine"
 import { SubtleButton } from "./UI/Base/SubtleButton"
-import Svg from "./Svg"
 import { Utils } from "./Utils"
+import Download from "./assets/svg/Download.svelte"
+
 function webgl_support() {
     try {
-        var canvas = document.createElement("canvas")
+        const canvas = document.createElement("canvas")
         return (
             !!window.WebGLRenderingContext &&
             (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
@@ -18,6 +19,7 @@ function webgl_support() {
         return false
     }
 }
+
 // @ts-ignore
 try {
     if (!webgl_support()) {
@@ -31,16 +33,22 @@ try {
         })
         .catch((err) => {
             console.error("Error while initializing: ", err, err.stack)
+            const customDefinition = DetermineLayout.getCustomDefinition()
             new Combine([
                 new FixedUiElement(err).SetClass("block alert"),
 
-                new SubtleButton(Svg.download_svg(), "Download the raw file").onClick(() =>
-                    Utils.offerContentsAsDownloadableFile(
-                        DetermineLayout.getCustomDefinition(),
-                        "mapcomplete-theme.json",
-                        { mimetype: "application/json" }
-                    )
-                ),
+                customDefinition?.length > 0
+                    ? new SubtleButton(
+                          new SvelteUIElement(Download),
+                          "Download the raw file"
+                      ).onClick(() =>
+                          Utils.offerContentsAsDownloadableFile(
+                              DetermineLayout.getCustomDefinition(),
+                              "mapcomplete-theme.json",
+                              { mimetype: "application/json" }
+                          )
+                      )
+                    : undefined,
             ]).AttachTo("maindiv")
         })
 } catch (err) {