diff --git a/package-lock.json b/package-lock.json
index 3912da3911c8086b5a68d76ed464b90abd5ea788..cc1c9837c483ba1e2c13819c5d87c90a3aa723e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -472,6 +472,11 @@
         "@types/istanbul-lib-report": "*"
       }
     },
+    "@types/node": {
+      "version": "12.12.6",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.6.tgz",
+      "integrity": "sha512-FjsYUPzEJdGXjwKqSpE0/9QEh6kzhTAeObA54rn6j3rR4C/mzpI9L0KNfoeASSPMMdxIsoJuCLDWcM/rVjIsSA=="
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -1404,6 +1409,11 @@
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
       "dev": true
     },
+    "canvas-renderer": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/canvas-renderer/-/canvas-renderer-2.1.1.tgz",
+      "integrity": "sha512-/V0XetN7s1Mk3NO7x2wxPZYv0pLMQtGAhecuOuKR88beiYCUle1AbCcFZNLu+4NVzi9RVHS0rXtIgzPEaKidLw=="
+    },
     "capture-exit": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
@@ -4278,6 +4288,15 @@
         "handlebars": "^4.1.2"
       }
     },
+    "jdenticon": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/jdenticon/-/jdenticon-2.2.0.tgz",
+      "integrity": "sha512-WGqwpjN9pab/Sah9pGnFH5tQc3HF3WbLV/tPVbykvk5nuAkxG/zhzQYWC2owvpnS+/A0HmlSx35rtY8kyN+x7Q==",
+      "requires": {
+        "@types/node": "*",
+        "canvas-renderer": "~2.1.1"
+      }
+    },
     "jest": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/jest/-/jest-24.9.0.tgz",
diff --git a/package.json b/package.json
index 448c287dca4963dccc22772458be1e54c13c5bf5..fecbc83d0aeb8bfe6c083c0620dfcf9868567f10 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "humanhash": "^1.0.4",
+    "jdenticon": "^2.2.0",
     "liowebrtc": "file:src/liowebrtc",
     "pako": "^1.0.10",
     "signalbuddy": "file:src/signalbuddy",
diff --git a/public/styles.css b/public/styles.css
index e9f840e1ccdbe1f32b599b6ce09211f5c21baeaf..736994355f9257b7110d79ab05c3be04edf78e2c 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -525,8 +525,6 @@ button.selected {
 }
 
 .avatar {
-  width: 100px;
-  height: 100px;
   margin-right: 5px;
   border-radius: 100px;
 }
diff --git a/src/app.js b/src/app.js
index 563f412d1d87141f76401cca54ba72e2a0d5a110..113f96e93883308fc4188b757b8e7b16e3a1adde 100644
--- a/src/app.js
+++ b/src/app.js
@@ -231,9 +231,9 @@ const getOrInsertPeerById = (id) => {
 
   const peerElem = document.createElement("li")
 
-  const avatarImage = document.createElement("img")
-  avatarImage.src = "https://robohash.org/" + id + ".png" + "?bgset=bg1"
-  avatarImage.alt = id
+  const jdenticon = require("jdenticon")
+  const avatarImage = document.createElement("svg")
+  avatarImage.innerHTML = jdenticon.toSvg(id, 50)
   avatarImage.className = "avatar"
 
   const quality = document.createElement("img")