diff --git a/css/client.css b/css/client.css
index 0ba3b9d..6aa01ef 100644
--- a/css/client.css
+++ b/css/client.css
@@ -21,20 +21,14 @@
     margin-top: 0;
 }
 
-.ClientView .icon {
+.ClientView .clientIcon {
     border-radius: 8px;
     background-repeat: no-repeat;
     background-size: cover;
     width: 60px;
     height: 60px;
-}
-
-.ClientView .icon.element-io {
-    background-image: url('../images/client-icons/element.svg');
-}
-
-.ClientView .icon.weechat {
-    background-image: url('../images/client-icons/weechat.svg');
+    overflow: hidden;
+    display: block;
 }
 
 .ClientView .actions a.badge {
diff --git a/src/open/ClientView.js b/src/open/ClientView.js
index e0ab4d8..ba959f1 100644
--- a/src/open/ClientView.js
+++ b/src/open/ClientView.js
@@ -34,7 +34,7 @@ export class ClientView extends TemplateView {
 					t.p(vm.description),
 					t.p(formatPlatforms(vm.availableOnPlatformNames)),
 				]),
-				t.div({className: `icon ${vm.clientId}`})
+				t.img({className: "clientIcon", src: vm.iconUrl})
 			]),
 			t.mapView(vm => vm.stage, stage => {
 				switch (stage) {
diff --git a/src/open/ClientViewModel.js b/src/open/ClientViewModel.js
index b2a98ce..80a3717 100644
--- a/src/open/ClientViewModel.js
+++ b/src/open/ClientViewModel.js
@@ -90,6 +90,10 @@ export class ClientViewModel extends ViewModel {
 		return this._client.id;
 	}
 
+    get iconUrl() {
+        return this._client.icon;
+    }
+
 	get stage() {
 		return this._showOpen ? "open" : "install";
 	}
diff --git a/src/open/clients/Element.js b/src/open/clients/Element.js
index a489927..9fa3f58 100644
--- a/src/open/clients/Element.js
+++ b/src/open/clients/Element.js
@@ -21,8 +21,7 @@ import {Maturity, Platform, LinkKind,
  * Information on how to deep link to a given matrix client.
  */
 export class Element {
-	/* should only contain alphanumerical and -_, no dots (needs to be usable as css class) */
-	get id() { return "element-io"; }
+	get id() { return "element.io"; }
 
 	get platforms() {
 		return [
@@ -32,6 +31,10 @@ export class Element {
 		];
 	}
 
+    get icon() {
+        return "images/client-icons/element.svg";
+    }
+
     get appleAssociatedAppId() { return "7J4U792NQT.im.vector.app"; }
 
 	get description() { return 'Fully-featured Matrix client, used by millions.'; }
diff --git a/src/open/clients/Weechat.js b/src/open/clients/Weechat.js
index 301ebe1..15229b2 100644
--- a/src/open/clients/Weechat.js
+++ b/src/open/clients/Weechat.js
@@ -23,6 +23,7 @@ export class Weechat {
 	/* should only contain alphanumerical and -_, no dots (needs to be usable as css class) */
 	get id() { return "weechat"; }
 	getName(platform) { return "Weechat"; }
+    get icon() { return "images/client-icons/weechat.svg"; }
     get author() { return "Poljar"; }
     get homepage() { return "https://github.com/poljar/weechat-matrix"; }
 	get platforms() { return [Platform.Windows, Platform.macOS, Platform.Linux]; }
@@ -39,4 +40,4 @@ export class Weechat {
 	}
 
 	getInstallLinks(platform) {}
-}
\ No newline at end of file
+}