Replace emoji UI icons with a shared SVG icon system.

Add an icons sprite and helpers so nav, actions, and protocol cards use consistent stroke icons.

Co-authored-by: Cursor <cursoragent@cursor.com>

static/css/style.css

@@ -303,6 +303,27 @@ a:hover {
     text-transform: uppercase;
 }
 
+.lang-code {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.2rem;
+    height: 1.6rem;
+    padding: 0 6px;
+    border-radius: 6px;
+    background: rgba(139, 92, 246, 0.12);
+    color: var(--accent-light);
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+}
+
+.toast .ui-icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+}
+
 /* ===== Buttons ===== */
 .btn {
     display: inline-flex;
@@ -391,6 +412,110 @@ a:hover {
     font-size: 1.1rem;
 }
 
+.btn-icon .ui-icon {
+    width: 16px;
+    height: 16px;
+}
+
+.btn-sm .ui-icon {
+    width: 15px;
+    height: 15px;
+}
+
+/* ===== UI Icons (SVG sprite) ===== */
+.ui-icon {
+    width: 1.15em;
+    height: 1.15em;
+    display: inline-block;
+    flex-shrink: 0;
+    vertical-align: -0.15em;
+    stroke: currentColor;
+    fill: none;
+    color: inherit;
+    pointer-events: none;
+}
+
+.ui-icon-lg {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.ui-icon-xl {
+    width: 2rem;
+    height: 2rem;
+}
+
+.ui-icon-2xl {
+    width: 2.75rem;
+    height: 2.75rem;
+}
+
+.nav-link .ui-icon {
+    width: 15px;
+    height: 15px;
+    opacity: 0.9;
+}
+
+.nav-link.active .ui-icon {
+    opacity: 1;
+}
+
+.theme-toggle .ui-icon {
+    width: 18px;
+    height: 18px;
+}
+
+.section-title .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: var(--radius-sm);
+    background: rgba(139, 92, 246, 0.12);
+    color: var(--accent-light);
+    font-size: 0;
+}
+
+.section-title .icon .ui-icon {
+    width: 1.1rem;
+    height: 1.1rem;
+}
+
+.logo-icon .ui-icon {
+    width: 22px;
+    height: 22px;
+    color: #fff;
+}
+
+.server-icon .ui-icon,
+.protocol-icon .ui-icon,
+.promo-icon .ui-icon {
+    width: 1.35em;
+    height: 1.35em;
+}
+
+.empty-state .empty-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 4.5rem;
+    height: 4.5rem;
+    margin: 0 auto var(--space-lg);
+    border-radius: var(--radius-xl);
+    background: rgba(139, 92, 246, 0.08);
+    border: 1px solid rgba(139, 92, 246, 0.12);
+    color: var(--accent-light);
+    font-size: 0;
+    opacity: 1;
+}
+
+.empty-state .empty-icon .ui-icon {
+    width: 2rem;
+    height: 2rem;
+    opacity: 0.85;
+}
+
 .btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -450,10 +575,6 @@ a:hover {
     gap: var(--space-md);
 }
 
-.section-title .icon {
-    font-size: 1.3rem;
-}
-
 /* ===== Server Card ===== */
 .server-grid {
     display: grid;
@@ -1190,6 +1311,12 @@ a:hover {
     flex-shrink: 0;
 }
 
+.client-avatar .ui-icon {
+    width: 18px;
+    height: 18px;
+    color: #fff;
+}
+
 .client-name {
     font-weight: 600;
     font-size: 0.92rem;
@@ -1396,12 +1523,6 @@ a:hover {
     color: var(--text-muted);
 }
 
-.empty-state .empty-icon {
-    font-size: 3.5rem;
-    margin-bottom: var(--space-lg);
-    opacity: 0.5;
-}
-
 .empty-state .empty-title {
     font-size: 1.2rem;
     font-weight: 600;