diff --git a/assets/js/main.js b/assets/js/main.js
index f19f225..78cfe2e 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -907,7 +907,7 @@ document.addEventListener('DOMContentLoaded', () => {
                             <div style="flex: 1;">
                                 <div class="message-author" style="font-size: 0.85em; ${authorStyle}">
                                     ${escapeHTML(msg.username)}
-                                    ${msg.role_icon ? `<img src="${msg.role_icon}" class="role-icon ms-1" style="width: 12px; height: 12px; vertical-align: middle; object-fit: contain;">` : ''}
+                                    ${renderRoleIconJS(msg.role_icon, '12px')}
                                     <span class="message-time">${msg.time}</span>
                                 </div>
                                 <div class="message-text" style="font-size: 0.9em;">
@@ -1549,6 +1549,12 @@ document.addEventListener('DOMContentLoaded', () => {
         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;">`;
+        } 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 `<span class="ms-1" 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>`;
         }
@@ -1632,7 +1638,7 @@ document.addEventListener('DOMContentLoaded', () => {
             const item = document.createElement('div');
             item.className = 'list-group-item bg-transparent text-white border-secondary d-flex justify-content-between align-items-center p-2 mb-1 rounded role-sortable-item';
             item.dataset.id = role.id;
-            const isUrl = role.icon_url && (role.icon_url.startsWith('http') || role.icon_url.startsWith('/'));
+            const roleIconHtml = renderRoleIconJS(role.icon_url, '12px');
             item.innerHTML = `
                 <div class="d-flex align-items-center">
                     <div class="role-drag-handle me-3" style="cursor: grab; opacity: 0.5;">
@@ -1640,7 +1646,7 @@ document.addEventListener('DOMContentLoaded', () => {
                     </div>
                     <div style="width: 14px; height: 14px; border-radius: 50%; background-color: ${role.color}; margin-right: 12px; box-shadow: 0 0 5px ${role.color}88;"></div>
                     <span class="fw-medium">${role.name}</span>
-                    ${role.icon_url ? (isUrl ? `<img src="${role.icon_url}" class="ms-1" style="width: 12px; height: 12px; object-fit: contain;">` : `<span class="ms-1" style="font-size: 12px;">${role.icon_url}</span>`) : ''}
+                    ${roleIconHtml}
                 </div>
                 <div>
                     <button class="btn btn-sm btn-outline-light edit-role-btn-v2" data-id="${role.id}" data-name="${role.name}" data-color="${role.color}" data-perms="${role.permissions}" data-icon="${role.icon_url || ''}">Edit</button>
@@ -1692,8 +1698,7 @@ document.addEventListener('DOMContentLoaded', () => {
             const item = document.createElement('div');
             item.className = 'list-group-item bg-transparent text-white border-secondary d-flex justify-content-between align-items-center p-2 mb-2 rounded bg-dark';
             
-            const isIconUrl = member.role_icon && (member.role_icon.startsWith('http') || member.role_icon.startsWith('/'));
-            const roleIconHtml = member.role_icon ? (isIconUrl ? `<img src="${member.role_icon}" class="role-icon ms-1" style="width: 12px; height: 12px; vertical-align: middle; object-fit: contain;">` : `<span class="ms-1" style="font-size: 12px; vertical-align: middle;">${member.role_icon}</span>`) : '';
+            const roleIconHtml = renderRoleIconJS(member.role_icon, '12px');
 
             item.innerHTML = `
                 <div class="d-flex align-items-center flex-grow-1">
@@ -2536,7 +2541,10 @@ document.addEventListener('DOMContentLoaded', () => {
             <div class="message-avatar" style="${avatarStyle}"></div>
             <div class="message-content">
                 <div class="message-header">
-                    <span class="message-username" style="color: ${msg.user_role_color || 'inherit'};">${escapeHTML(msg.username)}</span>
+                    <span class="message-username" style="color: ${msg.role_color || 'inherit'};">
+                        ${escapeHTML(msg.username)}
+                        ${renderRoleIconJS(msg.role_icon, '12px')}
+                    </span>
                     <span class="message-timestamp">${msg.timestamp || 'Just now'}</span>
                     ${pinnedBadge}
                 </div>
diff --git a/requests.log b/requests.log
index 669ba83..3c3dea6 100644
--- a/requests.log
+++ b/requests.log
@@ -250,3 +250,6 @@
 2026-02-16 17:09:55 - GET /index.php?server_id=1&channel_id=17 - POST: []
 2026-02-16 17:09:57 - GET /index.php?server_id=1&channel_id=17 - POST: []
 2026-02-16 17:09:59 - GET /index.php?server_id=1&channel_id=17 - POST: []
+2026-02-16 17:41:16 - GET / - POST: []
+2026-02-16 17:41:28 - GET /?fl_project=38443 - POST: []
+2026-02-16 18:00:22 - GET /index.php?server_id=1&channel_id=17 - POST: []