diff --git a/.dist/channel.js b/.dist/channel.js
index 73a8d76..214dec7 100644
--- a/.dist/channel.js
+++ b/.dist/channel.js
@@ -99,9 +99,8 @@ class Channel {
         let expires = 1800;
         const copycontainer = document.createElement("div");
         copycontainer.classList.add("copycontainer");
-        const copy = document.createElement("img");
-        copy.src = "/icons/copy.svg";
-        copy.classList.add("copybutton", "svgtheme");
+        const copy = document.createElement("span");
+        copy.classList.add("copybutton", "svgtheme", "svg-copy");
         copycontainer.append(copy);
         copycontainer.onclick = _ => {
             if (text.textContent) {
@@ -365,9 +364,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", "collapse-icon", "svg-category");
             decdiv.appendChild(decoration);
             const myhtml = document.createElement("p2");
             myhtml.textContent = this.name;
@@ -424,22 +422,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 bf063f5..89f4422 100644
--- a/.dist/localuser.js
+++ b/.dist/localuser.js
@@ -500,21 +500,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();
         };
@@ -546,9 +545,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);
@@ -1437,60 +1434,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 = Number(thing[0]) / 255;
-        const g = Number(thing[1]) / 255;
-        const b = Number(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 <= 0.5) {
-                s = (max - min) / (max + min);
-            }
-            else {
-                s = (max - min) / (2 - 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 = 0.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 7a0c964..3109c1a 100644
--- a/webpage/channel.ts
+++ b/webpage/channel.ts
@@ -113,9 +113,8 @@ class Channel{
 		let expires=1800;
 		const copycontainer=document.createElement("div");
 		copycontainer.classList.add("copycontainer");
-		const copy=document.createElement("img");
-		copy.src="/icons/copy.svg";
-		copy.classList.add("copybutton","svgtheme");
+		const copy=document.createElement("span");
+		copy.classList.add("copybutton","svgtheme","svg-copy");
 		copycontainer.append(copy);
 		copycontainer.onclick=_=>{
 			if(text.textContent){
@@ -376,9 +375,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","collapse-icon","svg-category");
 			decdiv.appendChild(decoration);
 
 			const myhtml=document.createElement("p2");
@@ -437,20 +435,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 8c9df93..6b466fa 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 115c526..d4cf451 100644
--- a/webpage/localuser.ts
+++ b/webpage/localuser.ts
@@ -503,23 +503,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();
 		};
@@ -553,9 +552,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);
@@ -931,7 +929,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);
@@ -1450,59 +1447,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=Number(thing[0])/255;
-		const g=Number(thing[1])/255;
-		const b=Number(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<=0.5){
-				s=(max-min)/(max+min);
-			}else{
-				s=(max-min)/(2-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=0.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 8580fe6..96a416f 100644
--- a/webpage/style.css
+++ b/webpage/style.css
@@ -336,6 +336,7 @@ p {
 	width: .175in;
 	padding-right: .026in;
 	height: .175in;
+	vertical-align: text-bottom;
 }
 
 
@@ -674,7 +675,7 @@ textarea:focus-visible,
 	transition: height .2s ease-in-out;
 	user-select: none;
 	cursor: pointer;
-	padding-left: .05in;
+	padding: 0 .05in;
 	overflow-y: clip;
 }
 
@@ -1555,22 +1556,47 @@ 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{
+.collapse-icon{
+	height:.15in;
 	width:.15in;
 	padding-right: .025in;
-	padding-left: .05in;
+	margin-left: .05in;
 	transition:rotate .2s;
 }
 .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;
@@ -1725,6 +1751,7 @@ form div{
 	background: var(--settings-hover);
 }
 #settings{
+	height:.225in;
 	width:.225in;
 	margin:.05in;
 }
@@ -1791,7 +1818,8 @@ form div{
 	border:solid .03in var(--black);
 }
 .copybutton{
-
+	display:inline-block;
+	height:.2in;
 	width:.25in;
 }
 .copycontainer{