diff --git a/customize.dist/src/less2/include/avatar.less b/customize.dist/src/less2/include/avatar.less
index 43a3d0828..f34a0e916 100644
--- a/customize.dist/src/less2/include/avatar.less
+++ b/customize.dist/src/less2/include/avatar.less
@@ -84,12 +84,17 @@
             }
         }
         .badges_include();
-        & > i.cp-badge {
+        & > span.cp-badge {
             position: absolute;
             z-index: 10;
             bottom: var(--badges-offset);
             right: var(--badges-offset);
             border: 1px solid @cp_badges-color;
+
+            svg {
+                width:3rem;
+                height:3rem;
+            }
         }
     }
 }
diff --git a/customize.dist/src/less2/include/badges.less b/customize.dist/src/less2/include/badges.less
index cad7eb91b..cfbc29fb0 100644
--- a/customize.dist/src/less2/include/badges.less
+++ b/customize.dist/src/less2/include/badges.less
@@ -22,7 +22,7 @@
 }
 
 & {
-    i.cp-badge {
+    span.cp-badge {
         width: var(--badges-width);
         height: var(--badges-width);
         box-sizing: content-box;
@@ -43,7 +43,9 @@
                 background-color: @value;
             }
         });
-
+        svg {
+            margin: 0;
+        }
     }
 }
 
diff --git a/customize.dist/src/less2/include/messenger.less b/customize.dist/src/less2/include/messenger.less
index 3bf3f4409..d2563ddb1 100644
--- a/customize.dist/src/less2/include/messenger.less
+++ b/customize.dist/src/less2/include/messenger.less
@@ -117,14 +117,14 @@
                     }
                 }
             }
-            i.cp-badge {
+            span.cp-badge {
                 color: var(--msg-bg-color-dark);
                 border-color: var(--msg-bg-color-dark);
             }
             &:hover {
                 background-color: @msg-bg-color-darker;
                 background-color: var(--msg-bg-color-darker);
-                i.cp-badge {
+                span.cp-badge {
                     color: var(--msg-bg-color-darker);
                     border-color: var(--msg-bg-color-darker);
                 }
@@ -247,7 +247,7 @@
         .cp-app-contacts-header {
             background-color: @msg-bg-color-lighter;
             background-color: var(--msg-bg-color-lighter);
-            i.cp-badge {
+            span.cp-badge {
                 color: var(--msg-bg-color-lighter);
                 border-color: var(--msg-bg-color-lighter);
             }
diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 5f175fae5..05c76177b 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -222,7 +222,7 @@
                 border-radius: @variables_radius;
                 border-right: 3px solid transparent;
                 .avatar_main(35px);
-                i.cp-badge {
+                span.cp-badge {
                     color: @cp_toolbar-bg2;
                     border-color: @cp_toolbar-bg2;
                 }
@@ -230,7 +230,7 @@
                     cursor: pointer;
                     &:hover {
                         background: @cp_toolbar-bg3;
-                        i.cp-badge {
+                        span.cp-badge {
                             color: @cp_toolbar-bg3;
                             border-color: @cp_toolbar-bg3;
                         }
@@ -282,10 +282,10 @@
                         padding: 0;
                     }
                     .cp-userlist-badge {
-                        i {
+                        span {
                             color: @cryptpad_color_brand;
                         }
-                        i.cp-badge-error {
+                        span.cp-badge-error {
                             color: @cryptpad_color_warn_red;
                         }
                     }
diff --git a/www/common/inner/badges.js b/www/common/inner/badges.js
index 4c84367e6..bfa07aa71 100644
--- a/www/common/inner/badges.js
+++ b/www/common/inner/badges.js
@@ -25,7 +25,12 @@ define([
         if (!icon) { return; }
         let cls = 'cp-badge';
         if (id === 'error') { cls += ' cp-badge-error'; }
-        return Icons.get(icon,{'class': cls, 'title': Messages[`badges_${id}`] || id, 'data-badge': id})
+        let span = document.createElement('span');
+        span.setAttribute('class', cls);
+        span.setAttribute('title', Messages[`badges_${id}`] || id);
+        span.setAttribute('data-badge', id);
+        span.append(Icons.get(icon));
+        return span;
     };
 
     return Badges;
diff --git a/www/profile/app-profile.less b/www/profile/app-profile.less
index 268065b1c..525a9f45d 100644
--- a/www/profile/app-profile.less
+++ b/www/profile/app-profile.less
@@ -59,7 +59,7 @@
             border-radius: 4px;
             overflow: visible;
             position: relative;
-            i.cp-badge {
+            span.cp-badge {
                 border-width: 3px;
             }
             .cp-app-profile-avatar-delete {
diff --git a/www/profile/inner.js b/www/profile/inner.js
index 0840c0c9b..33c5b1851 100644
--- a/www/profile/inner.js
+++ b/www/profile/inner.js
@@ -348,6 +348,7 @@ define([
     };
 
     var displayAvatar = function (val, data, badgeOK) {
+        setTimeout(()=> Lucide.createIcons());
         var $span = APP.$avatar;
         $span.empty();
         const badge = data?.badge;
diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less
index 749bb6008..a193f7629 100644
--- a/www/settings/app-settings.less
+++ b/www/settings/app-settings.less
@@ -239,16 +239,14 @@
                     display: flex;
                     align-items: center;
                     font-size: 24px;
+                    gap: 0.5rem;
                     margin-top: 10px;
                     .badges_main(40px);
-                    i {
+                    span {
                         cursor: pointer;
                         &:focus-visible {
                             outline: @variables_focus_style;
                         }
-                        &:not(:last-child) {
-                            margin-right: 0.5em;
-                        }
                     }
                 }
             }
@@ -266,7 +264,7 @@
                     border-radius: 4px;
                     overflow: visible;
                     position: relative;
-                    i.cp-badge {
+                    span.cp-badge {
                         border-width: 3px;
                     }
                     .cp-settings-avatar-delete {
diff --git a/www/settings/inner.js b/www/settings/inner.js
index c0f30d5ae..e383d5b59 100644
--- a/www/settings/inner.js
+++ b/www/settings/inner.js
@@ -1938,6 +1938,7 @@ define([
             ]);
             $badges.empty().append(content);
             spinner = UI.makeSpinner($badges.find('.cp-settings-badges-list'));
+            setTimeout(() => Lucide.createIcons());
         });
     };
     makeBlock('profile-badges', function(cb) {