diff --git a/assets/js/main.js b/assets/js/main.js
index 46068d6..76da6e7 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1129,7 +1129,7 @@ document.addEventListener('DOMContentLoaded', () => {
                             <div class="d-flex flex-wrap gap-1">
                                 ${roles.map(r => `
                                     <span class="badge rounded-pill d-flex align-items-center" style="background-color: rgba(0,0,0,0.3); border: 1px solid ${r.color}; font-size: 0.7em; color: ${r.color}; font-weight: 500; padding: 2px 8px;">
-                                        ${r.icon_url ? `<img src="${r.icon_url}" style="width: 14px; height: 14px; margin-right: 4px; object-fit: contain;">` : ''}
+                                        ${renderRoleIconJS(r.icon_url, '14px', 'me-1')}
                                         ${escapeHTML(r.name)}
                                     </span>
                                 `).join('')}
@@ -1869,19 +1869,19 @@ document.addEventListener('DOMContentLoaded', () => {
         } catch (e) { console.error(e); }
     }
 
-    function renderRoleIconJS(icon, size = '14px') {
+    function renderRoleIconJS(icon, size = '14px', extraClass = 'ms-1') {
         if (!icon) return '';
         const isUrl = icon.startsWith('http') || icon.startsWith('/');
         if (isUrl) {
-            return `<img src="${escapeHTML(icon)}" class="role-icon ms-1" style="width: ${size}; height: ${size}; vertical-align: middle; object-fit: contain;">`;
+            return `<img src="${escapeHTML(icon)}" class="role-icon ${extraClass}" style="width: ${size}; height: ${size}; vertical-align: middle; object-fit: contain;">`;
         } else if (icon.startsWith(':') && icon.endsWith(':')) {
             const ce = (window.CUSTOM_EMOTES_CACHE || []).find(e => e.code === icon);
             if (ce) {
-                return `<img src="${ce.path}" class="role-icon ms-1" style="width: ${size}; height: ${size}; vertical-align: middle; object-fit: contain;">`;
+                return `<img src="${ce.path}" class="role-icon ${extraClass}" style="width: ${size}; height: ${size}; vertical-align: middle; object-fit: contain;">`;
             }
-            return `<span class="ms-1" style="font-size: ${size}; vertical-align: middle;">${escapeHTML(icon)}</span>`;
+            return `<span class="${extraClass}" style="font-size: ${size}; vertical-align: middle;">${escapeHTML(icon)}</span>`;
         } else {
-            return `<span class="ms-1" style="font-size: ${size}; vertical-align: middle;">${escapeHTML(icon)}</span>`;
+            return `<span class="${extraClass}" style="font-size: ${size}; vertical-align: middle;">${escapeHTML(icon)}</span>`;
         }
     }
 
@@ -2169,7 +2169,8 @@ document.addEventListener('DOMContentLoaded', () => {
                     item.className = 'list-group-item bg-dark text-white border-secondary p-2 d-flex align-items-center';
                     item.innerHTML = `
                         <input class="form-check-input me-3 user-role-checkbox" type="checkbox" value="${role.id}" id="user-role-${role.id}" ${isChecked ? 'checked' : ''}>
-                        <label class="form-check-label flex-grow-1" for="user-role-${role.id}" style="color: ${role.color}; cursor: pointer;">
+                        <label class="form-check-label flex-grow-1 d-flex align-items-center" for="user-role-${role.id}" style="color: ${role.color}; cursor: pointer;">
+                            ${renderRoleIconJS(role.icon_url, '14px', 'me-2')}
                             ${role.name}
                         </label>
                     `;
diff --git a/assets/pasted-20260221-165938-c8695a55.png b/assets/pasted-20260221-165938-c8695a55.png
new file mode 100644
index 0000000..024cefa
Binary files /dev/null and b/assets/pasted-20260221-165938-c8695a55.png differ
diff --git a/index.php b/index.php
index 4877902..e367c7f 100644
--- a/index.php
+++ b/index.php
@@ -1,16 +1,16 @@
 <?php
 require_once 'auth/session.php';
 
-function renderRoleIcon($icon, $size = '14px') {
+function renderRoleIcon($icon, $size = '14px', $extraClass = 'ms-1') {
     if (empty($icon)) return '';
     $isUrl = (strpos($icon, 'http') === 0 || strpos($icon, '/') === 0);
     $isFa = (strpos($icon, 'fa-') === 0);
     $isCustomEmote = (strpos($icon, ':') === 0 && substr($icon, -1) === ':');
     
     if ($isUrl) {
-        return '<img src="' . htmlspecialchars($icon) . '" class="role-icon ms-1" style="width: '.$size.'; height: '.$size.'; vertical-align: middle; object-fit: contain;">';
+        return '<img src="' . htmlspecialchars($icon) . '" class="role-icon ' . $extraClass . '" style="width: '.$size.'; height: '.$size.'; vertical-align: middle; object-fit: contain;">';
     } elseif ($isFa) {
-        return '<i class="fa-solid ' . htmlspecialchars($icon) . ' ms-1" style="font-size: '.$size.'; vertical-align: middle;"></i>';
+        return '<i class="fa-solid ' . htmlspecialchars($icon) . ' ' . $extraClass . '" style="font-size: '.$size.'; vertical-align: middle;"></i>';
     } elseif ($isCustomEmote) {
         // Fetch emote path
         static $ce_icons_cache;
@@ -18,11 +18,11 @@ function renderRoleIcon($icon, $size = '14px') {
             try { $ce_icons_cache = db()->query("SELECT code, path FROM custom_emotes")->fetchAll(PDO::FETCH_KEY_PAIR); } catch (Exception $e) { $ce_icons_cache = []; }
         }
         if (isset($ce_icons_cache[$icon])) {
-            return '<img src="' . htmlspecialchars($ce_icons_cache[$icon]) . '" class="role-icon ms-1" style="width: '.$size.'; height: '.$size.'; vertical-align: middle; object-fit: contain;">';
+            return '<img src="' . htmlspecialchars($ce_icons_cache[$icon]) . '" class="role-icon ' . $extraClass . '" style="width: '.$size.'; height: '.$size.'; vertical-align: middle; object-fit: contain;">';
         }
-        return '<span class="ms-1" style="font-size: '.$size.'; vertical-align: middle;">' . htmlspecialchars($icon) . '</span>';
+        return '<span class="' . $extraClass . '" style="font-size: '.$size.'; vertical-align: middle;">' . htmlspecialchars($icon) . '</span>';
     } else {
-        return '<span class="ms-1" style="font-size: '.$size.'; vertical-align: middle;">' . htmlspecialchars($icon) . '</span>';
+        return '<span class="' . $extraClass . '" style="font-size: '.$size.'; vertical-align: middle;">' . htmlspecialchars($icon) . '</span>';
     }
 }