diff --git a/CHDataManagement/Page Elements/ContentElements/AudioPlayer/AudioPlayer.swift b/CHDataManagement/Page Elements/ContentElements/AudioPlayer/AudioPlayer.swift
index 614e372..433deea 100644
--- a/CHDataManagement/Page Elements/ContentElements/AudioPlayer/AudioPlayer.swift	
+++ b/CHDataManagement/Page Elements/ContentElements/AudioPlayer/AudioPlayer.swift	
@@ -12,7 +12,7 @@ struct AudioPlayer: HtmlProducer {
         <div class='top'>
             <div>&nbsp;</div>
             <div class='top-center'>\(playingText)</div>
-            <div class='show-playlist'><svg><use href='#\(AudioPlayerPlaylistIcon.name)'></use></svg></div>
+            <div class='show-playlist'>\(Icon.AudioPlayer.Playlist.usageString)</div>
         </div>
         """
     }
@@ -47,12 +47,12 @@ struct AudioPlayer: HtmlProducer {
     private var controls: String {
         """
         <div id="audio-player-controls">
-            <svg id="previous" class="amplitude-prev"><use href='#\(AudioPlayerPreviousIcon.name)'></use></svg>
+            <svg id="previous" class="amplitude-prev"><\(Icon.AudioPlayer.Previous.usageContent)</svg>
             <div class="amplitude-play-pause" id="play-pause">
-                <svg class="play-icon"><use href='#\(AudioPlayerPlayIcon.name)'></use></svg>
-                <svg class="pause-icon"><use href='#\(AudioPlayerPauseIcon.name)'></use></svg>
+                <svg class="play-icon">\(Icon.AudioPlayer.Play.usageContent)</svg>
+                <svg class="pause-icon">\(Icon.AudioPlayer.Pause.usageContent)</svg>
             </div>
-            <svg id="next" class="amplitude-next"><use href='#\(AudioPlayerNextIcon.name)'></use></svg>
+            <svg id="next" class="amplitude-next">\(Icon.AudioPlayer.Next.usageContent)</svg>
         </div>
         """
     }
@@ -62,7 +62,7 @@ struct AudioPlayer: HtmlProducer {
         <div id="playlist-container">
             <div class="top">
                 <div class="queue">\(playlistText)</div>
-                <div class="close-playlist"><svg><use href='#\(AudioPlayerCloseIcon.name)'></use></svg></div>
+                <div class="close-playlist">\(Icon.AudioPlayer.Close.usageString)</div>
             </div>
             <div class="playlist">
         """
@@ -80,12 +80,12 @@ struct AudioPlayer: HtmlProducer {
                         <span data-amplitude-song-info="artist" class="song-artist"></span>
                     </div>
                     <div class="playlist-control-wrapper">
-                        <svg class="amplitude-prev" id="playlist-previous"><use href='#\(AudioPlayerPreviousIcon.name)'></use></svg>
+                        <svg class="amplitude-prev" id="playlist-previous">\(Icon.AudioPlayer.Previous.usageContent)</svg>
                         <div class="amplitude-play-pause" id="playlist-play-pause">
-                            <svg class="play-icon"><use href='#\(AudioPlayerPlayIcon.name)'></use></svg>
-                            <svg class="pause-icon"><use href='#\(AudioPlayerPauseIcon.name)'></use></svg>
+                            <svg class="play-icon">\(Icon.AudioPlayer.Play.usageContent)</svg>
+                            <svg class="pause-icon">\(Icon.AudioPlayer.Pause.usageContent)</svg>
                         </div>
-                        <svg class="amplitude-next" id="playlist-next"><use href='#\(AudioPlayerNextIcon.name)'></use></svg>
+                        <svg class="amplitude-next" id="playlist-next">\(Icon.AudioPlayer.Next.usageContent)</svg>
                     </div>
                 </div>
             </div>
diff --git a/CHDataManagement/Page Elements/ContentElements/AudioPlayer/SingleFilePlayer.swift b/CHDataManagement/Page Elements/ContentElements/AudioPlayer/SingleFilePlayer.swift
index 5801bea..151bdcd 100644
--- a/CHDataManagement/Page Elements/ContentElements/AudioPlayer/SingleFilePlayer.swift	
+++ b/CHDataManagement/Page Elements/ContentElements/AudioPlayer/SingleFilePlayer.swift	
@@ -6,8 +6,8 @@ struct SingleFilePlayer: HtmlProducer {
         result += "<div class='song-player'>"
         result += "<div class='song-cover-container amplitude-play-pause amplitude-paused'>"
         result += "<div class='song-player-button'>"
-        result += "<svg class='play-icon'><use href='#\(AudioPlayerPlayIcon.name)'></use></svg>"
-        result += "<svg class='pause-icon'><use href='#\(AudioPlayerPauseIcon.name)'></use></svg>"
+        result += "<svg class='play-icon'>\(Icon.AudioPlayer.Play.usageString)"
+        result += "<svg class='pause-icon'>\(Icon.AudioPlayer.Pause.usageString)"
         result += "</div>"
         result += "<img data-amplitude-song-info='cover_art_url' class='article-thumbnail-image' width='78' height='78'></img>"
         result += "</div>"
diff --git a/CHDataManagement/Page Elements/ContentElements/ContentButtons.swift b/CHDataManagement/Page Elements/ContentElements/ContentButtons.swift
index 8872492..7ec7498 100644
--- a/CHDataManagement/Page Elements/ContentElements/ContentButtons.swift	
+++ b/CHDataManagement/Page Elements/ContentElements/ContentButtons.swift	
@@ -42,7 +42,7 @@ struct ContentButtons {
         let linkText = item.filePath.map { " href='\($0)'" } ?? ""
         let onClickText = item.onClickText.map { " onClick='\($0)'" } ?? ""
         result += "<a class='tag'\(linkText)\(downloadText)\(onClickText)>"
-        result += "<svg><use href='#\(item.icon.icon.name)'></use></svg>\(item.text)"
+        result += "\(item.icon.usageString)\(item.text)"
         result += "</a>"
     }
 }
diff --git a/CHDataManagement/Page Elements/ContentElements/ContentLabels.swift b/CHDataManagement/Page Elements/ContentElements/ContentLabels.swift
index 4a004f4..40cd590 100644
--- a/CHDataManagement/Page Elements/ContentElements/ContentLabels.swift	
+++ b/CHDataManagement/Page Elements/ContentElements/ContentLabels.swift	
@@ -13,7 +13,9 @@ struct ContentLabels: HtmlProducer {
         }
         result += "<div class='labels-container'>"
         for label in labels {
-            result += "<div><svg><use href='#\(label.icon.icon.name)'></use></svg>\(label.value)</div>"
+            result += "<div>"
+            result += label.icon.usageString
+            result += "\(label.value)</div>"
         }
         result += "</div>"
     }
diff --git a/CHDataManagement/Page Elements/ContentElements/Icons/AudioPlayerIcons.swift b/CHDataManagement/Page Elements/ContentElements/Icons/AudioPlayerIcons.swift
index 73c710b..bf8a259 100644
--- a/CHDataManagement/Page Elements/ContentElements/Icons/AudioPlayerIcons.swift	
+++ b/CHDataManagement/Page Elements/ContentElements/Icons/AudioPlayerIcons.swift	
@@ -1,55 +1,78 @@
 
-struct AudioPlayerPlaylistIcon: ContentIcon {
+extension Icon {
 
-    static let name = "icon-playlist"
+    enum AudioPlayer {
 
-    static let content = """
-        <svg id='icon-playlist' viewBox="0 0 28 20"><g fill="none"><rect width="15" height="4" x="13" fill="currentColor" rx="2"/><g fill="currentColor"><path d="M0 1.2C0 .7.4.4.8.7l9.3 5.8c.5.3.5.7 0 1L.8 13.3c-.4.2-.8 0-.8-.5z"/><rect width="14" height="4" x="14" y="8" rx="2"/><rect width="28" height="4" y="16" rx="2"/></g></g></svg>
-        """
-}
-
-struct AudioPlayerCloseIcon: ContentIcon {
-
-    static let name = "icon-close"
-
-    static let content = """
-        <svg id='icon-close' viewBox="0 0 18 18"><path fill="currentColor" d="M9 6.194 3.392.586A1.986 1.986 0 0 0 .582.582c-.78.78-.773 2.033.004 2.81L6.194 9 .586 14.608a1.986 1.986 0 0 0-.004 2.81c.78.78 2.033.773 2.81-.004L9 11.806l5.608 5.608a1.986 1.986 0 0 0 2.81.004c.78-.78.773-2.033-.004-2.81L11.806 9l5.608-5.608a1.986 1.986 0 0 0 .004-2.81 1.982 1.982 0 0 0-2.81.004z"/></svg>
-        """
-}
-
-struct AudioPlayerPauseIcon: ContentIcon {
-
-    static let name = "icon-pause"
-
-    static let content = """
-        <svg id='icon-pause' viewBox="0 0 85 85"><g fill="none"><circle cx="42.5" cy="42.5" fill="currentColor" r="42.5"/><path d="m34 55h6v-24h-6zm12 0h6v-24h-6z" fill="#fff" stroke="#fff"/></g></svg>
-        """
-}
-
-struct AudioPlayerPlayIcon: ContentIcon {
-
-    static let name = "icon-play"
-
-    static let content = """
-        <svg id='icon-play' viewBox="0 0 85 85"><g fill="none"><circle cx="42.5" cy="42.5" r="42.5" fill="currentColor"/><path fill="#fff" d="M33.3 31.3c0-2.3 1.5-3.1 3.4-2l18.8 11.5c2 1.1 2 3 0 4.1L36.7 56.3c-1.9 1.2-3.4.3-3.4-1.9z"/></g>
-            </svg>
-        """
-}
-
-struct AudioPlayerPreviousIcon: ContentIcon {
-
-    static let name = "icon-previous"
-
-    static let content = """
-        <svg id='icon-previous' viewBox="0 0 53 53"><g fill="none" transform="matrix(-1 0 0 1 53 0)"><circle cx="26.5" cy="26.5" r="26.5" fill="currentColor"/><g fill="#fff" transform="translate(16 17)"><path d="M.4 1.8C.4.6 1.2.2 2.2.8l12.3 7.5c1 .5 1 1.5 0 2L2.2 17.8c-1 .6-1.8.1-1.8-1z"/><rect width="3" height="17" x="18" y="1" rx="1.5"/></g></g></svg>
-        """
-}
-
-struct AudioPlayerNextIcon: ContentIcon {
-
-    static let name = "icon-next"
-
-    static let content = """
-        <svg id='icon-next' viewBox="0 0 53 53"><g fill="none"><circle cx="26.5" cy="26.5" r="26.5" fill="currentColor"/><g fill="#fff" transform="translate(16 17)"><path d="M.4 1.8C.4.6 1.2.2 2.2.8l12.3 7.5c1 .5 1 1.5 0 2L2.2 17.8c-1 .6-1.8.1-1.8-1z"/><rect width="3" height="17" x="18" y="1" rx="1.5"/></g></g></svg>
-        """
+        struct Playlist: ContentIcon {
+
+            static let id = "icon-playlist"
+
+            static let attributes = "viewBox='0 0 28 20'"
+
+            static let content =
+                """
+                <g fill="none"><rect width="15" height="4" x="13" fill="currentColor" rx="2"/><g fill="currentColor"><path d="M0 1.2C0 .7.4.4.8.7l9.3 5.8c.5.3.5.7 0 1L.8 13.3c-.4.2-.8 0-.8-.5z"/><rect width="14" height="4" x="14" y="8" rx="2"/><rect width="28" height="4" y="16" rx="2"/></g></g>
+                """
+        }
+
+        struct Close: ContentIcon {
+
+            static let id = "icon-close"
+
+            static let attributes = "viewBox='0 0 18 18'"
+
+            static let content =
+                """
+                <path fill="currentColor" d="M9 6.194 3.392.586A1.986 1.986 0 0 0 .582.582c-.78.78-.773 2.033.004 2.81L6.194 9 .586 14.608a1.986 1.986 0 0 0-.004 2.81c.78.78 2.033.773 2.81-.004L9 11.806l5.608 5.608a1.986 1.986 0 0 0 2.81.004c.78-.78.773-2.033-.004-2.81L11.806 9l5.608-5.608a1.986 1.986 0 0 0 .004-2.81 1.982 1.982 0 0 0-2.81.004z"/>
+                """
+        }
+
+        struct Pause: ContentIcon {
+
+            static let id = "icon-pause"
+
+            static let attributes = "viewBox='0 0 85 85'"
+
+            static let content =
+                """
+                <g fill="none"><circle cx="42.5" cy="42.5" fill="currentColor" r="42.5"/><path d="m34 55h6v-24h-6zm12 0h6v-24h-6z" fill="#fff" stroke="#fff"/></g>
+                """
+        }
+
+        struct Play: ContentIcon {
+
+            static let id = "icon-play"
+
+            static let attributes = "viewBox='0 0 85 85'"
+
+            static let content =
+                """
+                <g fill="none"><circle cx="42.5" cy="42.5" r="42.5" fill="currentColor"/><path fill="#fff" d="M33.3 31.3c0-2.3 1.5-3.1 3.4-2l18.8 11.5c2 1.1 2 3 0 4.1L36.7 56.3c-1.9 1.2-3.4.3-3.4-1.9z"/></g>
+                """
+        }
+
+        struct Previous: ContentIcon {
+
+            static let id = "icon-previous"
+
+            static let attributes = "viewBox='0 0 53 53'"
+
+            static let content =
+                """
+                <g fill="none" transform="matrix(-1 0 0 1 53 0)"><circle cx="26.5" cy="26.5" r="26.5" fill="currentColor"/><g fill="#fff" transform="translate(16 17)"><path d="M.4 1.8C.4.6 1.2.2 2.2.8l12.3 7.5c1 .5 1 1.5 0 2L2.2 17.8c-1 .6-1.8.1-1.8-1z"/><rect width="3" height="17" x="18" y="1" rx="1.5"/></g></g>
+                """
+        }
+
+        struct Next: ContentIcon {
+
+            static let id = "icon-next"
+
+            static let attributes = "viewBox='0 0 53 53'"
+
+            static let content =
+                """
+                <g fill="none"><circle cx="26.5" cy="26.5" r="26.5" fill="currentColor"/><g fill="#fff" transform="translate(16 17)"><path d="M.4 1.8C.4.6 1.2.2 2.2.8l12.3 7.5c1 .5 1 1.5 0 2L2.2 17.8c-1 .6-1.8.1-1.8-1z"/><rect width="3" height="17" x="18" y="1" rx="1.5"/></g></g>
+                """
+        }
+    }
 }
diff --git a/CHDataManagement/Page Elements/ContentElements/Icons/ButtonIcons.swift b/CHDataManagement/Page Elements/ContentElements/Icons/ButtonIcons.swift
index 46bc1f5..e99d14c 100644
--- a/CHDataManagement/Page Elements/ContentElements/Icons/ButtonIcons.swift	
+++ b/CHDataManagement/Page Elements/ContentElements/Icons/ButtonIcons.swift	
@@ -1,11 +1,15 @@
 
 extension Icon {
+    
     struct ArrowDown: ContentIcon {
 
-        static let name = "icon-download"
+        static let id = "icon-download"
 
-        static let content = """
-            <svg id="icon-download" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" stroke="none" d="M20 40a20 20 0 1 1 20-20 20 20 0 0 1-20 20zm0-36.8A16.8 16.8 0 1 0 36.8 20 16.8 16.8 0 0 0 20 3.2zm.8 27a1 1 0 0 1-1.6 0L12.1 21c-.4-.4 0-1 .7-1H17v-8.7a.8.8 0 0 1 .8-.8h4.4a.8.8 0 0 1 .8.8V20h4.2c.6 0 1.1.5.7 1l-7.1 9.2z"/></svg>
+        static let attributes = "viewBox='0 0 40 40'"
+
+        static let content =
+            """
+            <path fill="currentColor" fill-rule="evenodd" stroke="none" d="M20 40a20 20 0 1 1 20-20 20 20 0 0 1-20 20zm0-36.8A16.8 16.8 0 1 0 36.8 20 16.8 16.8 0 0 0 20 3.2zm.8 27a1 1 0 0 1-1.6 0L12.1 21c-.4-.4 0-1 .7-1H17v-8.7a.8.8 0 0 1 .8-.8h4.4a.8.8 0 0 1 .8.8V20h4.2c.6 0 1.1.5.7 1l-7.1 9.2z"/>
             """
     }
 }
@@ -14,10 +18,13 @@ extension Icon {
 
     struct ArrowRight: ContentIcon {
 
-        static let name = "icon-external"
+        static let id = "icon-external"
 
-        static let content = """
-            <svg id="icon-external" viewBox="0 0 16 16"><path fill="currentColor" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z"/></svg>
+        static let attributes = "viewBox='0 0 16 16'"
+
+        static let content =
+            """
+            <path fill="currentColor" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z"/>
             """
     }
 }
@@ -26,10 +33,13 @@ extension Icon {
 
     struct Git: ContentIcon {
 
-        static let name = "icon-git"
+        static let id = "icon-git"
 
-        static let content = """
-            <svg id="icon-git" viewBox="0 0 16 16"><path fill="currentColor" d="M15.698 7.287 8.712.302a1.03 1.03 0 0 0-1.457 0l-1.45 1.45 1.84 1.84a1.223 1.223 0 0 1 1.55 1.56l1.773 1.774a1.224 1.224 0 0 1 1.267 2.025 1.226 1.226 0 0 1-2.002-1.334L8.58 5.963v4.353a1.226 1.226 0 1 1-1.008-.036V5.887a1.226 1.226 0 0 1-.666-1.608L5.093 2.465l-4.79 4.79a1.03 1.03 0 0 0 0 1.457l6.986 6.986a1.03 1.03 0 0 0 1.457 0l6.953-6.953a1.03 1.03 0 0 0 0-1.457"/></svg>
+        static let attributes = "viewBox='0 0 16 16'"
+
+        static let content =
+            """
+            <path fill="currentColor" d="M15.698 7.287 8.712.302a1.03 1.03 0 0 0-1.457 0l-1.45 1.45 1.84 1.84a1.223 1.223 0 0 1 1.55 1.56l1.773 1.774a1.224 1.224 0 0 1 1.267 2.025 1.226 1.226 0 0 1-2.002-1.334L8.58 5.963v4.353a1.226 1.226 0 1 1-1.008-.036V5.887a1.226 1.226 0 0 1-.666-1.608L5.093 2.465l-4.79 4.79a1.03 1.03 0 0 0 0 1.457l6.986 6.986a1.03 1.03 0 0 0 1.457 0l6.953-6.953a1.03 1.03 0 0 0 0-1.457"/>
             """
     }
 }
@@ -38,10 +48,13 @@ extension Icon {
 
     struct Play: ContentIcon {
 
-        static let name = "icon-play-circle"
+        static let id = "icon-play-circle"
 
-        static let content = """
-            <svg id='icon-play-circle' viewBox="0 0 1000 1000"><g fill="currentColor"><path d="M452.6 11.2A495 495 0 0 0 90.1 229.8 525.5 525.5 0 0 0 19.8 398c-8.3 40.7-9.8 56.6-9.8 101.6s1.5 60.5 9.8 101.5A529.7 529.7 0 0 0 90 769.5 493.9 493.9 0 0 0 499.6 990c185 0 355.6-106 438.6-272.3a486.8 486.8 0 0 0-46.8-512.3A494.2 494.2 0 0 0 568.6 13.9c-24-3.7-91.5-5.4-116-2.7zm85.5 76.4c31 3.1 59.6 9.2 90.6 19.4a413.4 413.4 0 0 1 263.9 264.2 412 412 0 0 1-100.8 420.6A413.7 413.7 0 0 1 460 911.4 415.2 415.2 0 0 1 87.6 538a416.4 416.4 0 0 1 143.7-353.3 417.2 417.2 0 0 1 306.8-97.2z"/><path d="M375.4 291.7c-4.2 2-7.5 5.4-10 11-3.6 8-3.8 14.1-3.8 196.9 0 183 .2 189 3.8 197 5 10.9 14.4 15.3 26 12.2 11.4-3 320-183.1 329.5-192.3 6.9-6.8 7.6-8.3 7.6-17s-.7-10-7.6-16.8c-7.9-7.6-314-187.2-326.5-191.6-8.3-2.9-11.1-2.9-19 .6z"/></g></svg>
+        static let attributes = "viewBox='0 0 1000 1000'"
+
+        static let content =
+            """
+            <g fill="currentColor"><path d="M452.6 11.2A495 495 0 0 0 90.1 229.8 525.5 525.5 0 0 0 19.8 398c-8.3 40.7-9.8 56.6-9.8 101.6s1.5 60.5 9.8 101.5A529.7 529.7 0 0 0 90 769.5 493.9 493.9 0 0 0 499.6 990c185 0 355.6-106 438.6-272.3a486.8 486.8 0 0 0-46.8-512.3A494.2 494.2 0 0 0 568.6 13.9c-24-3.7-91.5-5.4-116-2.7zm85.5 76.4c31 3.1 59.6 9.2 90.6 19.4a413.4 413.4 0 0 1 263.9 264.2 412 412 0 0 1-100.8 420.6A413.7 413.7 0 0 1 460 911.4 415.2 415.2 0 0 1 87.6 538a416.4 416.4 0 0 1 143.7-353.3 417.2 417.2 0 0 1 306.8-97.2z"/><path d="M375.4 291.7c-4.2 2-7.5 5.4-10 11-3.6 8-3.8 14.1-3.8 196.9 0 183 .2 189 3.8 197 5 10.9 14.4 15.3 26 12.2 11.4-3 320-183.1 329.5-192.3 6.9-6.8 7.6-8.3 7.6-17s-.7-10-7.6-16.8c-7.9-7.6-314-187.2-326.5-191.6-8.3-2.9-11.1-2.9-19 .6z"/></g>
             """
     }
 }
diff --git a/CHDataManagement/Page Elements/ContentElements/Icons/ContentIcon.swift b/CHDataManagement/Page Elements/ContentElements/Icons/ContentIcon.swift
index 951b9ca..cc6e4b0 100644
--- a/CHDataManagement/Page Elements/ContentElements/Icons/ContentIcon.swift	
+++ b/CHDataManagement/Page Elements/ContentElements/Icons/ContentIcon.swift	
@@ -1,18 +1,35 @@
 
 protocol ContentIcon {
 
-    static var name: String { get }
+    static var id: String { get }
+
+    static var attributes: String { get }
 
     static var content: String { get }
 }
 
 extension ContentIcon {
 
-    var name: String {
-        Self.name
+    var id: String {
+        Self.id
     }
 
     var content: String {
         Self.content
     }
 }
+
+extension ContentIcon {
+
+    static var svgString: String {
+        "<svg id=\(id) \(attributes)>\(content)</svg>"
+    }
+
+    static var usageString: String {
+        "<svg>\(usageContent)</svg>"
+    }
+
+    static var usageContent: String {
+        "<use href='#\(id)'></use>"
+    }
+}
diff --git a/CHDataManagement/Page Elements/ContentElements/Icons/GeneralIcons.swift b/CHDataManagement/Page Elements/ContentElements/Icons/GeneralIcons.swift
index fa31a2c..c5e7a4b 100644
--- a/CHDataManagement/Page Elements/ContentElements/Icons/GeneralIcons.swift	
+++ b/CHDataManagement/Page Elements/ContentElements/Icons/GeneralIcons.swift	
@@ -3,10 +3,13 @@ extension Icon {
 
     struct Calendar: ContentIcon {
 
-        static let name = "icon-calendar"
+        static let id = "icon-calendar"
 
-        static let content = """
-            <svg id="icon-calendar" viewBox="0 0 141 146" fill="currentColor"><path d="m13.3 126.4v-89a9 9 0 0 1 2.6-6.3 8.2 8.2 0 0 1 6.2-2.6h8.8v-6.7a11 11 0 0 1 3.2-7.9c2.2-2.2 4.7-3.3 7.8-3.3h4.4c3 0 5.6 1.1 7.8 3.3s3.2 4.8 3.2 7.9v6.7h26.4v-6.7a11 11 0 0 1 3.2-7.9c2.2-2.2 4.7-3.3 7.8-3.3h4.4c3 0 5.6 1.1 7.8 3.3s3.2 4.8 3.2 7.9v6.7h8.8c2.4 0 4.4.9 6.2 2.6a8.8 8.8 0 0 1 2.6 6.3v88.9a9 9 0 0 1 -2.6 6.3 8.2 8.2 0 0 1 -6.2 2.6h-96.8c-2.4 0-4.4-.9-6.2-2.6a8.7 8.7 0 0 1 -2.6-6.2zm8.8 0h96.8v-71.2h-96.8zm17.6-84.5c0 .6.2 1.2.6 1.6s.9.6 1.6.6h4.4c.6 0 1.2-.2 1.6-.6s.6-.9.6-1.6v-20c0-.6-.2-1.2-.6-1.6s-.9-.6-1.6-.6h-4.4c-.6 0-1.2.2-1.6.6s-.6 1-.6 1.6zm52.8 0c0 .6.2 1.2.6 1.6s.9.6 1.6.6h4.4c.6 0 1.2-.2 1.6-.6s.6-.9.6-1.6v-20c0-.6-.2-1.2-.6-1.6s-.9-.6-1.6-.6h-4.4c-.6 0-1.2.2-1.6.6s-.6 1-.6 1.6z"/></svg>
+        static let attributes = "viewBox='0 0 141 146' fill='currentColor'"
+
+        static let content =
+            """
+            <path d="m13.3 126.4v-89a9 9 0 0 1 2.6-6.3 8.2 8.2 0 0 1 6.2-2.6h8.8v-6.7a11 11 0 0 1 3.2-7.9c2.2-2.2 4.7-3.3 7.8-3.3h4.4c3 0 5.6 1.1 7.8 3.3s3.2 4.8 3.2 7.9v6.7h26.4v-6.7a11 11 0 0 1 3.2-7.9c2.2-2.2 4.7-3.3 7.8-3.3h4.4c3 0 5.6 1.1 7.8 3.3s3.2 4.8 3.2 7.9v6.7h8.8c2.4 0 4.4.9 6.2 2.6a8.8 8.8 0 0 1 2.6 6.3v88.9a9 9 0 0 1 -2.6 6.3 8.2 8.2 0 0 1 -6.2 2.6h-96.8c-2.4 0-4.4-.9-6.2-2.6a8.7 8.7 0 0 1 -2.6-6.2zm8.8 0h96.8v-71.2h-96.8zm17.6-84.5c0 .6.2 1.2.6 1.6s.9.6 1.6.6h4.4c.6 0 1.2-.2 1.6-.6s.6-.9.6-1.6v-20c0-.6-.2-1.2-.6-1.6s-.9-.6-1.6-.6h-4.4c-.6 0-1.2.2-1.6.6s-.6 1-.6 1.6zm52.8 0c0 .6.2 1.2.6 1.6s.9.6 1.6.6h4.4c.6 0 1.2-.2 1.6-.6s.6-.9.6-1.6v-20c0-.6-.2-1.2-.6-1.6s-.9-.6-1.6-.6h-4.4c-.6 0-1.2.2-1.6.6s-.6 1-.6 1.6z"/>
             """
     }
 }
@@ -15,10 +18,13 @@ extension Icon {
 
     struct ClockFill: ContentIcon {
 
-        static let name = "icon-clock-fill"
+        static let id = "icon-clock-fill"
 
-        static let content = """
-            <svg id="icon-clock-fill" viewBox="0 0 16 16" fill="currentColor"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .3.4l3.5 2a.5.5 0 0 0 .4-.8L8 8.7V3.5z"/></svg>
+        static let attributes = "viewBox='0 0 16 16' fill='currentColor'"
+
+        static let content =
+            """
+            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .3.4l3.5 2a.5.5 0 0 0 .4-.8L8 8.7V3.5z"/>
             """
     }
 }
@@ -27,10 +33,13 @@ extension Icon {
 
     struct File: ContentIcon {
 
-        static let name = "icon-file"
+        static let id = "icon-file"
 
-        static let content = """
-            <svg id="icon-file" viewBox="0 0 16 16" fill="currentColor"><path d="M9.3 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.7a1 1 0 0 0-.3-.7L10 .3a1 1 0 0 0-.7-.3zm.2 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM4.5 9a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1h-4z"/></svg>
+        static let attributes = "viewBox='0 0 16 16' fill='currentColor'"
+
+        static let content =
+            """
+            <path d="M9.3 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.7a1 1 0 0 0-.3-.7L10 .3a1 1 0 0 0-.7-.3zm.2 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM4.5 9a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1h-4z"/>
             """
     }
 }
@@ -39,10 +48,13 @@ extension Icon {
 
     struct Globe: ContentIcon {
 
-        static let name = "icon-globe"
+        static let id = "icon-globe"
 
-        static let content = """
-            <svg id="icon-globe" viewBox="0 0 16 16" fill="currentColor"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-7c-.7.3-1.3.9-1.9 2l-.4.8c.7.2 1.5.3 2.3.3v-3zM4.2 3.6l.5-1a6.7 6.7 0 0 1 .6-1A7 7 0 0 0 3.1 3l1.2.5zm-.7 4c0-1 .2-2 .4-3a9.1 9.1 0 0 1-1.5-.7A7 7 0 0 0 1 7.5h2.5zm1.4-2.7a12.3 12.3 0 0 0-.4 2.7h3V5.1a13.5 13.5 0 0 1-2.6-.3zm3.6.3v2.4h3a12.3 12.3 0 0 0-.4-2.7c-.8.1-1.7.3-2.6.3zm-4 3.4c0 1 .2 2 .4 2.7a13.6 13.6 0 0 1 2.6-.3V8.5h-3zm4 0V11c1 0 1.8.1 2.6.3.2-.8.4-1.7.4-2.7h-3zm-3.3 3.7.4.9c.6 1 1.2 1.6 1.9 1.8v-3c-.8 0-1.6.1-2.3.3zm.1 2.3a6.7 6.7 0 0 1-.6-1 8.8 8.8 0 0 1-.4-1 8.4 8.4 0 0 0-1.2.4 7 7 0 0 0 2.2 1.6zm-1.4-3a13.4 13.4 0 0 1-.4-3H1a7 7 0 0 0 1.4 3.7c.4-.3 1-.5 1.5-.7zm6.8 3A7 7 0 0 0 13 13a8.4 8.4 0 0 0-1.2-.4 8.8 8.8 0 0 1-.5 1 6.7 6.7 0 0 1-.6 1zM8.5 12v3c.7-.2 1.3-.8 1.9-1.8l.4-.9a12.6 12.6 0 0 0-2.3-.3zm3.6-.4 1.5.7A7 7 0 0 0 15 8.5h-2.5a13.4 13.4 0 0 1-.4 3zm2.9-4a7 7 0 0 0-1.4-3.7c-.4.3-1 .5-1.5.7.2 1 .4 2 .4 3H15zm-3.7-5 .4 1A8.4 8.4 0 0 0 13 3a7 7 0 0 0-2.3-1.5l.6 1zm-.5 1.3a7.8 7.8 0 0 0-.4-.9c-.6-1-1.2-1.6-1.9-1.8v3a12.7 12.7 0 0 0 2.3-.3z"/></svg>
+        static let attributes = "viewBox='0 0 16 16' fill='currentColor'"
+
+        static let content =
+            """
+            <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-7c-.7.3-1.3.9-1.9 2l-.4.8c.7.2 1.5.3 2.3.3v-3zM4.2 3.6l.5-1a6.7 6.7 0 0 1 .6-1A7 7 0 0 0 3.1 3l1.2.5zm-.7 4c0-1 .2-2 .4-3a9.1 9.1 0 0 1-1.5-.7A7 7 0 0 0 1 7.5h2.5zm1.4-2.7a12.3 12.3 0 0 0-.4 2.7h3V5.1a13.5 13.5 0 0 1-2.6-.3zm3.6.3v2.4h3a12.3 12.3 0 0 0-.4-2.7c-.8.1-1.7.3-2.6.3zm-4 3.4c0 1 .2 2 .4 2.7a13.6 13.6 0 0 1 2.6-.3V8.5h-3zm4 0V11c1 0 1.8.1 2.6.3.2-.8.4-1.7.4-2.7h-3zm-3.3 3.7.4.9c.6 1 1.2 1.6 1.9 1.8v-3c-.8 0-1.6.1-2.3.3zm.1 2.3a6.7 6.7 0 0 1-.6-1 8.8 8.8 0 0 1-.4-1 8.4 8.4 0 0 0-1.2.4 7 7 0 0 0 2.2 1.6zm-1.4-3a13.4 13.4 0 0 1-.4-3H1a7 7 0 0 0 1.4 3.7c.4-.3 1-.5 1.5-.7zm6.8 3A7 7 0 0 0 13 13a8.4 8.4 0 0 0-1.2-.4 8.8 8.8 0 0 1-.5 1 6.7 6.7 0 0 1-.6 1zM8.5 12v3c.7-.2 1.3-.8 1.9-1.8l.4-.9a12.6 12.6 0 0 0-2.3-.3zm3.6-.4 1.5.7A7 7 0 0 0 15 8.5h-2.5a13.4 13.4 0 0 1-.4 3zm2.9-4a7 7 0 0 0-1.4-3.7c-.4.3-1 .5-1.5.7.2 1 .4 2 .4 3H15zm-3.7-5 .4 1A8.4 8.4 0 0 0 13 3a7 7 0 0 0-2.3-1.5l.6 1zm-.5 1.3a7.8 7.8 0 0 0-.4-.9c-.6-1-1.2-1.6-1.9-1.8v3a12.7 12.7 0 0 0 2.3-.3z"/>
             """
     }
 }
@@ -51,10 +63,13 @@ extension Icon {
 
     struct Location: ContentIcon {
 
-        static let name = "icon-location"
+        static let id = "icon-location"
 
-        static let content = """
-            <svg id="icon-location" viewBox="0 0 16 16" fill="currentColor"><path d="M8 16s6-6 6-10A6 6 0 0 0 2 6c0 4 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>
+        static let attributes = "viewBox='0 0 16 16' fill='currentColor'"
+
+        static let content =
+            """
+            <path d="M8 16s6-6 6-10A6 6 0 0 0 2 6c0 4 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
             """
     }
 }
@@ -63,10 +78,13 @@ extension Icon {
 
     struct Poster: ContentIcon {
 
-        static let name = "icon-poster"
+        static let id = "icon-poster"
 
-        static let content = """
-            <svg id="icon-poster" viewBox="0 0 16 16" fill="currentColor"><path d="M9.3 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.7a1 1 0 0 0-.3-.7L10 .3a1 1 0 0 0-.7-.3zm.2 3.5v-2l3 3h-2a1 1 0 0 1-1-1zm.5 10v-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-2.5.5a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-1zm-3 0a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-1z"/></svg>
+        static let attributes = "viewBox='0 0 16 16' fill='currentColor'"
+
+        static let content =
+            """
+            <path d="M9.3 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.7a1 1 0 0 0-.3-.7L10 .3a1 1 0 0 0-.7-.3zm.2 3.5v-2l3 3h-2a1 1 0 0 1-1-1zm.5 10v-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-2.5.5a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-1zm-3 0a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-1z"/>
             """
     }
 }
@@ -75,10 +93,13 @@ extension Icon {
 
     struct Video: ContentIcon {
 
-        static let name = "icon-video"
+        static let id = "icon-video"
 
-        static let content = """
-            <svg id="icon-video" fill="currentColor" viewBox="0 0 122.9 111.3"><path d="M24 0h75a24 24 0 0 1 24 24v64a24 24 0 0 1-7 16v1a24 24 0 0 1-17 6H24a24 24 0 0 1-17-7 23 23 0 0 1-7-16V24A24 24 0 0 1 24 0Zm30 48 25 17a4 4 0 0 1 0 7L54 89a4 4 0 0 1-2 1 4 4 0 0 1-4-4V51a4 4 0 0 1 6-3ZM7 26h14l9-19h-6A16 16 0 0 0 7 24v2ZM37 7l-9 19h25l9-19Zm32 0-9 19h25l9-19Zm31 0-9 19h25v-2a16 16 0 0 0-16-17Zm16 27H7v54a16 16 0 0 0 5 11 16 16 0 0 0 12 5h75a16 16 0 0 0 12-5 16 16 0 0 0 5-11V34Z"/></svg>
+        static let attributes = "viewBox='0 0 122.9 111.3' fill='currentColor'"
+
+        static let content =
+            """
+            <path d="M24 0h75a24 24 0 0 1 24 24v64a24 24 0 0 1-7 16v1a24 24 0 0 1-17 6H24a24 24 0 0 1-17-7 23 23 0 0 1-7-16V24A24 24 0 0 1 24 0Zm30 48 25 17a4 4 0 0 1 0 7L54 89a4 4 0 0 1-2 1 4 4 0 0 1-4-4V51a4 4 0 0 1 6-3ZM7 26h14l9-19h-6A16 16 0 0 0 7 24v2ZM37 7l-9 19h25l9-19Zm32 0-9 19h25l9-19Zm31 0-9 19h25v-2a16 16 0 0 0-16-17Zm16 27H7v54a16 16 0 0 0 5 11 16 16 0 0 0 12 5h75a16 16 0 0 0 12-5 16 16 0 0 0 5-11V34Z"/>
             """
     }
 }
diff --git a/CHDataManagement/Page Elements/ContentElements/Icons/ImageCompareIcons.swift b/CHDataManagement/Page Elements/ContentElements/Icons/ImageCompareIcons.swift
index 9371fa2..97b16a9 100644
--- a/CHDataManagement/Page Elements/ContentElements/Icons/ImageCompareIcons.swift	
+++ b/CHDataManagement/Page Elements/ContentElements/Icons/ImageCompareIcons.swift	
@@ -3,10 +3,13 @@ extension Icon {
 
     struct LeftRightArrow: ContentIcon {
 
-        static let name = "left-right-arrow"
+        static let id = "left-right-arrow"
 
-        static let content = """
-            <svg id='\(name)' viewBox='0 0 100 100'><polygon points='10 50 37 80 37 20 10 50' style='fill:currentColor'/><polygon points='90 50 64 20 64 80 90 50' style='fill:currentColor'/></svg>
+        static let attributes = "viewBox='0 0 100 100'"
+
+        static let content =
+            """
+            <polygon points='10 50 37 80 37 20 10 50' style='fill:currentColor'/><polygon points='90 50 64 20 64 80 90 50' style='fill:currentColor'/>
             """
     }
 }
diff --git a/CHDataManagement/Page Elements/ContentElements/Icons/PageIcon.swift b/CHDataManagement/Page Elements/ContentElements/Icons/PageIcon.swift
index fd62a72..6b3e8cf 100644
--- a/CHDataManagement/Page Elements/ContentElements/Icons/PageIcon.swift	
+++ b/CHDataManagement/Page Elements/ContentElements/Icons/PageIcon.swift	
@@ -59,21 +59,21 @@ enum PageIcon: String, CaseIterable {
 
     var icon: ContentIcon.Type {
         switch self {
-        case .statisticsTime: return StatisticsTimeIcon.self
-        case .statisticsElevationUp: return StatisticsElevationUpIcon.self
-        case .statisticsElevationDown: return StatisticsElevationDownIcon.self
-        case .statisticsDistance: return StatisticsDistanceIcon.self
-        case .statisticsEnergy: return StatisticsEnergyIcon.self
+        case .statisticsTime: return Icon.Statistics.Time.self
+        case .statisticsElevationUp: return Icon.Statistics.ElevationUp.self
+        case .statisticsElevationDown: return Icon.Statistics.ElevationDown.self
+        case .statisticsDistance: return Icon.Statistics.Distance.self
+        case .statisticsEnergy: return Icon.Statistics.Energy.self
         case .buttonDownload: return Icon.ArrowDown.self
         case .buttonExternalLink: return Icon.ArrowRight.self
         case .buttonGitLink: return Icon.Git.self
         case .buttonPlay: return Icon.Play.self
-        case .audioPlayerPlaylist: return AudioPlayerPlaylistIcon.self
-        case .audioPlayerClose: return AudioPlayerCloseIcon.self
-        case .audioPlayerPlay: return AudioPlayerPlayIcon.self
-        case .audioPlayerPause: return AudioPlayerPauseIcon.self
-        case .audioPlayerPrevious: return AudioPlayerPreviousIcon.self
-        case .audioPlayerNext: return AudioPlayerNextIcon.self
+        case .audioPlayerPlaylist: return Icon.AudioPlayer.Playlist.self
+        case .audioPlayerClose: return Icon.AudioPlayer.Close.self
+        case .audioPlayerPlay: return Icon.AudioPlayer.Play.self
+        case .audioPlayerPause: return Icon.AudioPlayer.Pause.self
+        case .audioPlayerPrevious: return Icon.AudioPlayer.Previous.self
+        case .audioPlayerNext: return Icon.AudioPlayer.Next.self
         case .calendar: return Icon.Calendar.self
         case .clockFill: return Icon.ClockFill.self
         case .file: return Icon.File.self
@@ -85,12 +85,44 @@ enum PageIcon: String, CaseIterable {
         }
     }
 
+    var name: String {
+        switch self {
+        case .calendar: "Calendar"
+        case .clockFill: "ClockFill"
+        case .file: "File"
+        case .globe: "Globe"
+        case .location: "Location"
+        case .poster: "Poster"
+        case .video: "Video"
+        case .leftRightArrow: "LeftRightArrow"
+        case .buttonExternalLink: "Button: External Link"
+        case .buttonGitLink: "Button: Git Link"
+        case .buttonPlay: "Button: Play"
+        case .audioPlayerPlaylist: "Audio Player: Playlist"
+        case .audioPlayerClose: "Audio Player: Close"
+        case .audioPlayerPlay: "Audio Player: Play"
+        case .audioPlayerPause: "Audio Player: Pause"
+        case .audioPlayerPrevious: "Audio Player: Previous"
+        case .audioPlayerNext: "Audio Player: Next"
+        case .buttonDownload: "Button: Download"
+        case .statisticsTime: "Time"
+        case .statisticsElevationUp: "Elevation Up"
+        case .statisticsElevationDown: "Elevation Down"
+        case .statisticsDistance: "Distance"
+        case .statisticsEnergy: "Energy / Calories"
+        }
+    }
+
     var svgString: String {
         icon.content
     }
 
-    var name: String {
-        icon.name
+    var id: String {
+        icon.id
+    }
+
+    var usageString: String {
+        icon.usageString
     }
 }
 
diff --git a/CHDataManagement/Page Elements/ContentElements/Icons/StatisticsIcons.swift b/CHDataManagement/Page Elements/ContentElements/Icons/StatisticsIcons.swift
index 27c1278..802e4ff 100644
--- a/CHDataManagement/Page Elements/ContentElements/Icons/StatisticsIcons.swift	
+++ b/CHDataManagement/Page Elements/ContentElements/Icons/StatisticsIcons.swift	
@@ -1,45 +1,66 @@
 
-struct StatisticsTimeIcon: ContentIcon {
+extension Icon {
 
-    static let name = "icon-clock"
+    enum Statistics {
 
-    static let content = """
-        <svg id="icon-clock" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .3.4l3.5 2a.5.5 0 0 0 .4-.8L8 8.7V3.5z"/><path fill="currentColor" d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/></svg>
-        """
-}
-
-struct StatisticsElevationUpIcon: ContentIcon {
-
-    static let name = "icon-elevation-up"
-
-    static let content = """
-        <svg id="icon-elevation-up" width="16" height="16"><path fill="currentColor" d="m14 2.5a.5.5 0 0 0 -.5-.5h-6a.5.5 0 0 0 0 1h4.8l-10.16 10.15a.5.5 0 0 0 .7.7l10.16-10.14v4.79a.5.5 0 0 0 1 0z"/></svg>
-        """
-}
-
-struct StatisticsElevationDownIcon: ContentIcon {
-
-    static let name = "icon-elevation-down"
-
-    static let content = """
-        <svg id="icon-elevation-down" width="16" height="16"><path fill="currentColor" fill-rule="evenodd" d="M14 13.5a.5.5 0 0 1-.5.5h-6a.5.5 0 0 1 0-1h4.8L2.14 2.85a.5.5 0 1 1 .7-.7L13 12.29V7.5a.5.5 0 0 1 1 0v6z"/></svg>
-        """
-}
-
-struct StatisticsDistanceIcon: ContentIcon {
-
-    static let name = "icon-distance"
-
-    static let content = """
-        <svg id="icon-distance" width="16" height="16"><path fill="currentColor" d="M7 1.4V4H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h5v6h2v-6h3.5a1 1 0 0 0 .8-.4l2-2.3a.5.5 0 0 0 0-.6l-2-2.3a1 1 0 0 0-.8-.4H9V1.4a1 1 0 0 0-2 0zM12.5 5l1.7 2-1.7 2H2V5h10.5z"/></svg>
-        """
-}
-
-struct StatisticsEnergyIcon: ContentIcon {
-
-    static let name = "icon-energy"
-
-    static let content = """
-        <svg id="icon-energy" width="16" height="16"><path fill="currentColor" d="M8 16c3.3 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .3 1.5-1.3 2-1.3 2C11 4 9 .5 6 0c.4 2 .5 4-2 6-1.3 1-2 2.7-2 4.5C2 14 4.7 16 8 16Zm0-1c-1.7 0-3-1-3-2.8 0-.7.3-2 1.3-3-.2.8.7 1.3.7 1.3-.4-1.3.5-3.3 2-3.5-.2 1-.3 2 1 3a3 3 0 0 1 1 2.3C11 14 9.7 15 8 15Z"/></svg>
-        """
+        struct Time: ContentIcon {
+
+            static let id = "icon-clock"
+
+            static let attributes = "viewBox='0 0 16 16' width='16' height='16'"
+
+            static let content =
+                """
+                <path fill="currentColor" d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .3.4l3.5 2a.5.5 0 0 0 .4-.8L8 8.7V3.5z"/><path fill="currentColor" d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
+                """
+        }
+
+        struct ElevationUp: ContentIcon {
+
+            static let id = "icon-elevation-up"
+
+            static let attributes = "width='16' height='16'"
+
+            static let content =
+            """
+            <path fill="currentColor" d="m14 2.5a.5.5 0 0 0 -.5-.5h-6a.5.5 0 0 0 0 1h4.8l-10.16 10.15a.5.5 0 0 0 .7.7l10.16-10.14v4.79a.5.5 0 0 0 1 0z"/>
+            """
+        }
+
+        struct ElevationDown: ContentIcon {
+
+            static let id = "icon-elevation-down"
+
+            static let attributes = "width='16' height='16'"
+
+            static let content =
+                """
+                <path fill="currentColor" fill-rule="evenodd" d="M14 13.5a.5.5 0 0 1-.5.5h-6a.5.5 0 0 1 0-1h4.8L2.14 2.85a.5.5 0 1 1 .7-.7L13 12.29V7.5a.5.5 0 0 1 1 0v6z"/>
+                """
+        }
+
+        struct Distance: ContentIcon {
+
+            static let id = "icon-distance"
+
+            static let attributes = "width='16' height='16'"
+
+            static let content =
+                """
+                <path fill="currentColor" d="M7 1.4V4H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h5v6h2v-6h3.5a1 1 0 0 0 .8-.4l2-2.3a.5.5 0 0 0 0-.6l-2-2.3a1 1 0 0 0-.8-.4H9V1.4a1 1 0 0 0-2 0zM12.5 5l1.7 2-1.7 2H2V5h10.5z"/>
+                """
+        }
+
+        struct Energy: ContentIcon {
+
+            static let id = "icon-energy"
+
+            static let attributes = "width='16' height='16'"
+
+            static let content =
+                """
+                <path fill="currentColor" d="M8 16c3.3 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .3 1.5-1.3 2-1.3 2C11 4 9 .5 6 0c.4 2 .5 4-2 6-1.3 1-2 2.7-2 4.5C2 14 4.7 16 8 16Zm0-1c-1.7 0-3-1-3-2.8 0-.7.3-2 1.3-3-.2.8.7 1.3.7 1.3-.4-1.3.5-3.3 2-3.5-.2 1-.3 2 1 3a3 3 0 0 1 1 2.3C11 14 9.7 15 8 15Z"/>
+                """
+        }
+    }
 }
diff --git a/CHDataManagement/Page Elements/ContentElements/ImageCompare.swift b/CHDataManagement/Page Elements/ContentElements/ImageCompare.swift
index c61737c..28b859e 100644
--- a/CHDataManagement/Page Elements/ContentElements/ImageCompare.swift	
+++ b/CHDataManagement/Page Elements/ContentElements/ImageCompare.swift	
@@ -14,7 +14,7 @@ struct ImageCompare: HtmlProducer {
         result += "<div class='right'>\(left.content)</div>"
         result += "<div class='left'>\(right.content)</div>"
         result += "<div class='drag'>"
-        result += "<svg><use href='#\(Icon.LeftRightArrow.name)'></use></svg>"
+        result += Icon.LeftRightArrow.usageString
         result += "</div></div>" // Close drag, image-compare
     }
 }