diff --git a/.dist/channel.js b/.dist/channel.js
index 1946f1c..c11eee5 100644
--- a/.dist/channel.js
+++ b/.dist/channel.js
@@ -354,9 +354,8 @@ class Channel {
             this.sortchildren();
             const caps = document.createElement("div");
             const decdiv = document.createElement("div");
-            const decoration = document.createElement("img");
-            decoration.src = "/icons/category.svg";
-            decoration.classList.add("svgtheme", "colaspeicon");
+            const decoration = document.createElement("span");
+            decoration.classList.add("svgtheme", "colaspeicon", "svg-category");
             decdiv.appendChild(decoration);
             const myhtml = document.createElement("p2");
             myhtml.textContent = this.name;
@@ -411,22 +410,19 @@ class Channel {
             const myhtml = document.createElement("span");
             myhtml.textContent = this.name;
             if (this.type === 0) {
-                const decoration = document.createElement("img");
-                decoration.src = "/icons/channel.svg";
+                const decoration = document.createElement("span");
                 div.appendChild(decoration);
-                decoration.classList.add("space", "svgtheme");
+                decoration.classList.add("space", "svgtheme", "svg-channel");
             }
             else if (this.type === 2) { //
-                const decoration = document.createElement("img");
-                decoration.src = "/icons/voice.svg";
+                const decoration = document.createElement("span");
                 div.appendChild(decoration);
-                decoration.classList.add("space", "svgtheme");
+                decoration.classList.add("space", "svgtheme", "svg-voice");
             }
             else if (this.type === 5) { //
-                const decoration = document.createElement("img");
-                decoration.src = "/icons/announce.svg";
+                const decoration = document.createElement("span");
                 div.appendChild(decoration);
-                decoration.classList.add("space", "svgtheme");
+                decoration.classList.add("space", "svgtheme", "svg-announce");
             }
             else {
                 console.log(this.type);
diff --git a/.dist/localuser.js b/.dist/localuser.js
index 2a3fc87..1c7fc16 100644
--- a/.dist/localuser.js
+++ b/.dist/localuser.js
@@ -499,21 +499,20 @@ class Localuser {
     buildservers() {
         const serverlist = document.getElementById("servers"); //
         const outdiv = document.createElement("div");
-        const img = document.createElement("img");
+        const home = document.createElement("span");
         const div = document.createElement("div");
         div.classList.add("home", "servericon");
-        img.src = "/icons/home.svg";
-        img.classList.add("svgtheme", "svgicon");
-        img["all"] = this.guildids.get("@me");
+        home.classList.add("svgtheme", "svgicon", "svg-home");
+        home["all"] = this.guildids.get("@me");
         this.guildids.get("@me").html = outdiv;
         const unread = document.createElement("div");
         unread.classList.add("unread");
         outdiv.append(unread);
         outdiv.append(div);
-        div.appendChild(img);
+        div.appendChild(home);
         outdiv.classList.add("servernoti");
         serverlist.append(outdiv);
-        img.onclick = function () {
+        home.onclick = function () {
             this["all"].loadGuild();
             this["all"].loadChannel();
         };
@@ -545,9 +544,8 @@ class Localuser {
                 this.createGuild();
             };
             const guilddsdiv = document.createElement("div");
-            const guildDiscoveryContainer = document.createElement("img");
-            guildDiscoveryContainer.src = "/icons/explore.svg";
-            guildDiscoveryContainer.classList.add("svgtheme", "svgicon");
+            const guildDiscoveryContainer = document.createElement("span");
+            guildDiscoveryContainer.classList.add("svgtheme", "svgicon", "svg-explore");
             guilddsdiv.classList.add("home", "servericon");
             guilddsdiv.appendChild(guildDiscoveryContainer);
             serverlist.appendChild(guilddsdiv);
@@ -922,7 +920,6 @@ class Localuser {
             {
                 const userinfos = getBulkInfo();
                 tas.addColorInput("Accent color:", _ => {
-                    fixsvgtheme();
                     userinfos.accent_color = _;
                     localStorage.setItem("userinfos", JSON.stringify(userinfos));
                     document.documentElement.style.setProperty('--accent-color', userinfos.accent_color);
@@ -1426,61 +1423,3 @@ class Localuser {
     }
 }
 export { Localuser };
-let fixsvgtheme;
-{
-    let last;
-    const dud = document.createElement("p");
-    dud.classList.add("svgtheme");
-    document.body.append(dud);
-    const css = window.getComputedStyle(dud);
-    function fixsvgtheme_() {
-        //console.log(things);
-        const color = css.color;
-        if (color === last) {
-            return;
-        }
-        ;
-        last = color;
-        const thing = color.replace("rgb(", "").replace(")", "").split(",");
-        //sconsole.log(thing);
-        const r = +thing[0] / 255;
-        const g = +thing[1] / 255;
-        const b = +thing[2] / 255;
-        const max = Math.max(r, g, b);
-        const min = Math.min(r, g, b);
-        const l = (max + min) / 2;
-        let s;
-        let h;
-        if (max !== min) {
-            if (l <= .5) {
-                s = (max - min) / (max + min);
-            }
-            else {
-                s = (max - min) / (2.0 - max - min);
-            }
-            if (r === max) {
-                h = (g - b) / (max - min);
-            }
-            else if (g === max) {
-                h = 2 + (b - r) / (max - min);
-            }
-            else {
-                h = 4 + (r - g) / (max - min);
-            }
-        }
-        else {
-            s = 0;
-            h = 0;
-        }
-        const rot = Math.floor(h * 60) + "deg";
-        const invert = .5 - (s / 2) + "";
-        const brightness = Math.floor((l * 200)) + "%";
-        document.documentElement.style.setProperty('--rot', rot);
-        document.documentElement.style.setProperty('--invert', invert);
-        document.documentElement.style.setProperty('--brightness', brightness);
-    }
-    fixsvgtheme = fixsvgtheme_;
-    setTimeout(fixsvgtheme_, 100);
-    fixsvgtheme_();
-}
-export { fixsvgtheme };
diff --git a/webpage/channel.ts b/webpage/channel.ts
index a6e8048..3784863 100644
--- a/webpage/channel.ts
+++ b/webpage/channel.ts
@@ -360,9 +360,8 @@ class Channel{
             const caps=document.createElement("div");
 
             const decdiv=document.createElement("div");
-            const decoration=document.createElement("img");
-            decoration.src="/icons/category.svg";
-            decoration.classList.add("svgtheme","colaspeicon")
+            const decoration=document.createElement("span");
+            decoration.classList.add("svgtheme","colaspeicon","svg-category")
             decdiv.appendChild(decoration)
 
             const myhtml=document.createElement("p2");
@@ -417,20 +416,17 @@ class Channel{
             const myhtml=document.createElement("span");
             myhtml.textContent=this.name;
             if(this.type===0){
-                const decoration=document.createElement("img");
-                decoration.src="/icons/channel.svg";
+                const decoration=document.createElement("span");
                 div.appendChild(decoration)
-                decoration.classList.add("space","svgtheme");
+                decoration.classList.add("space","svgtheme","svg-channel");
             }else if(this.type===2){//
-                const decoration=document.createElement("img");
-                decoration.src="/icons/voice.svg";
+                const decoration=document.createElement("span");
                 div.appendChild(decoration)
-                decoration.classList.add("space","svgtheme");
+                decoration.classList.add("space","svgtheme","svg-voice");
             }else if(this.type===5){//
-                const decoration=document.createElement("img");
-                decoration.src="/icons/announce.svg";
+                const decoration=document.createElement("span");
                 div.appendChild(decoration)
-                decoration.classList.add("space","svgtheme");
+                decoration.classList.add("space","svgtheme","svg-announce");
             }else{
                 console.log(this.type)
             }
diff --git a/webpage/index.html b/webpage/index.html
index 989a773..5b47605 100644
--- a/webpage/index.html
+++ b/webpage/index.html
@@ -45,7 +45,7 @@
                 </div>
 
                 <div id="user-actions">
-                    <img id="settings" class="svgtheme" src="/icons/settings.svg"></img>
+                    <span id="settings" class="svgtheme svg-settings"></span>
                 </div>
             </div>
         </div>
diff --git a/webpage/localuser.ts b/webpage/localuser.ts
index d004fed..784f650 100644
--- a/webpage/localuser.ts
+++ b/webpage/localuser.ts
@@ -501,23 +501,22 @@ class Localuser{
     buildservers():void{
         const serverlist=document.getElementById("servers") as HTMLDivElement;//
         const outdiv=document.createElement("div");
-        const img=document.createElement("img");
+        const home=document.createElement("span");
         const div=document.createElement("div");
         div.classList.add("home","servericon");
 
-        img.src="/icons/home.svg";
-        img.classList.add("svgtheme","svgicon")
-        img["all"]=this.guildids.get("@me");
+        home.classList.add("svgtheme","svgicon","svg-home")
+        home["all"]=this.guildids.get("@me");
         (this.guildids.get("@me") as Guild).html=outdiv;
         const unread=document.createElement("div");
         unread.classList.add("unread");
         outdiv.append(unread);
         outdiv.append(div);
-        div.appendChild(img);
+        div.appendChild(home);
 
         outdiv.classList.add("servernoti")
         serverlist.append(outdiv);
-        img.onclick=function(){
+        home.onclick=function(){
             this["all"].loadGuild();
             this["all"].loadChannel();
         }
@@ -551,9 +550,8 @@ class Localuser{
                 this.createGuild();
             }
             const guilddsdiv=document.createElement("div");
-            const guildDiscoveryContainer=document.createElement("img");
-            guildDiscoveryContainer.src="/icons/explore.svg";
-            guildDiscoveryContainer.classList.add("svgtheme","svgicon");
+            const guildDiscoveryContainer=document.createElement("span");
+            guildDiscoveryContainer.classList.add("svgtheme","svgicon","svg-explore");
             guilddsdiv.classList.add("home","servericon");
             guilddsdiv.appendChild(guildDiscoveryContainer);
             serverlist.appendChild(guilddsdiv);
@@ -933,7 +931,6 @@ class Localuser{
             {
                 const userinfos=getBulkInfo();
                 tas.addColorInput("Accent color:",_=>{
-                    fixsvgtheme();
                     userinfos.accent_color=_;
                     localStorage.setItem("userinfos",JSON.stringify(userinfos));
                     document.documentElement.style.setProperty('--accent-color', userinfos.accent_color);
@@ -1435,58 +1432,4 @@ class Localuser{
         dialog.show();
     }
 }
-export {Localuser};
-let fixsvgtheme:Function;
-{
-    let last:string;
-    const dud=document.createElement("p")
-    dud.classList.add("svgtheme")
-    document.body.append(dud);
-    const css=window.getComputedStyle(dud);
-    function fixsvgtheme_(){
-        //console.log(things);
-        const color=css.color;
-        if(color===last) {return};
-        last=color;
-        const thing=color.replace("rgb(","").replace(")","").split(",");
-        //sconsole.log(thing);
-        const r=+thing[0]/255;
-        const g=+thing[1]/255;
-        const b=+thing[2]/255;
-        const max=Math.max(r,g,b);
-        const min=Math.min(r,g,b);
-        const l=(max+min)/2;
-
-        let s:number;
-        let h:number;
-        if(max!==min){
-            if(l<=.5){
-                s=(max-min)/(max+min);
-            }else{
-                s=(max-min)/(2.0-max-min);
-            }
-            if(r===max){
-                h=(g-b)/(max-min);
-            }else if(g===max){
-                h=2+(b-r)/(max-min);
-            }else{
-                h=4+(r-g)/(max-min);
-            }
-        }else{
-            s=0;
-            h=0;
-        }
-        const rot=Math.floor(h*60)+"deg";
-        const invert=.5-(s/2)+"";
-        const brightness=Math.floor((l*200))+"%";
-
-        document.documentElement.style.setProperty('--rot', rot);
-        document.documentElement.style.setProperty('--invert', invert);
-        document.documentElement.style.setProperty('--brightness', brightness);
-
-    }
-    fixsvgtheme=fixsvgtheme_;
-    setTimeout(fixsvgtheme_,100);
-    fixsvgtheme_();
-}
-export {fixsvgtheme};
+export {Localuser};
\ No newline at end of file
diff --git a/webpage/style.css b/webpage/style.css
index 03cac58..7919960 100644
--- a/webpage/style.css
+++ b/webpage/style.css
@@ -1556,14 +1556,11 @@ span {
 form div{
 	width:100%;
 }
-.svgtheme{
-	color: var(--icon-color);
-	filter:hue-rotate(var(--rot)) invert(var(--invert)) brightness(var(--brightness));
-}
 .channels .channel{
 	margin-bottom: .03in;
 }
 .colaspeicon{
+	height:.15in;
 	width:.15in;
 	padding-right: .025in;
 	padding-left: .05in;
@@ -1572,6 +1569,34 @@ form div{
 .hiddencat{
 	rotate:-90deg;
 }
+.svg-announce{
+	mask: url(/icons/announce.svg);
+}
+.svg-category{
+	mask: url(/icons/category.svg);
+}
+.svg-channel{
+	mask: url(/icons/channel.svg);
+}
+.svg-copy{
+	mask: url(/icons/copy.svg);
+}
+.svg-explore{
+	mask: url(/icons/explore.svg);
+}
+.svg-home{
+	mask: url(/icons/home.svg);
+}
+.svg-settings{
+	mask: url(/icons/settings.svg);
+}
+.svg-voice{
+	mask: url(/icons/voice.svg);
+}
+.svgtheme{
+	background: var(--icon-color);
+	mask-repeat: no-repeat;
+}
 .svgicon{
 	width:.5in;
 	height:.5in;
@@ -1726,6 +1751,7 @@ form div{
 	background: var(--settings-hover);
 }
 #settings{
+	height:.225in;
 	width:.225in;
 	margin:.05in;
 }