diff --git a/apps/tauri/package.json b/apps/tauri/package.json
index b4caab7b..4975a827 100644
--- a/apps/tauri/package.json
+++ b/apps/tauri/package.json
@@ -29,6 +29,7 @@
     "codemirror": "^6.0.2",
     "lodash": "^4.18.1",
     "marked": "^4.3.0",
+    "material-symbols": "^0.49.0",
     "pinia": "^3.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/apps/tauri/pnpm-lock.yaml b/apps/tauri/pnpm-lock.yaml
index 5461865c..1b12402d 100644
--- a/apps/tauri/pnpm-lock.yaml
+++ b/apps/tauri/pnpm-lock.yaml
@@ -56,6 +56,9 @@ importers:
       marked:
         specifier: ^4.3.0
         version: 4.3.0
+      material-symbols:
+        specifier: ^0.49.0
+        version: 0.49.0
       pinia:
         specifier: ^3.0.3
         version: 3.0.4(typescript@5.8.3)(vue@3.5.45(typescript@5.8.3))
@@ -1072,6 +1075,9 @@ packages:
     engines: {node: '>= 12'}
     hasBin: true
 
+  material-symbols@0.49.0:
+    resolution: {integrity: sha512-3yFCfEA1+gZPsTJYXWbEmNgxvm0pFpXuVIyUMJzjajMGpZ5vOTPan4p8VO1x0pIAE2fPmf/N9ZZuGiFfTyLF3Q==}
+
   minimatch@9.0.9:
     resolution: {integrity: sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -2317,6 +2323,8 @@ snapshots:
 
   marked@4.3.0: {}
 
+  material-symbols@0.49.0: {}
+
   minimatch@9.0.9:
     dependencies:
       brace-expansion: 2.1.8
diff --git a/apps/tauri/src/main.ts b/apps/tauri/src/main.ts
index 51170e5e..23e5d217 100644
--- a/apps/tauri/src/main.ts
+++ b/apps/tauri/src/main.ts
@@ -1,6 +1,7 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import App from "./App.vue";
+import "material-symbols/rounded.css";
 import "./styles/base.css";
 import { initTheme } from "./theme/queryaTheme";
 import {
diff --git a/apps/tauri/src/ui/ConnectionHome.vue b/apps/tauri/src/ui/ConnectionHome.vue
index f5c2d2f0..93e60142 100644
--- a/apps/tauri/src/ui/ConnectionHome.vue
+++ b/apps/tauri/src/ui/ConnectionHome.vue
@@ -11,6 +11,7 @@ import { useShellNavStore } from "../stores/shellNav";
 import { useObjectTreeStore } from "../stores/objectTree";
 import QueryaButton from "./QueryaButton.vue";
 import SqlWorkspace from "./SqlWorkspace.vue";
+import { QueryaIcon } from "./icons";
 import ErdView from "./erd/ErdView.vue";
 
 const connections = useConnectionsStore();
@@ -182,7 +183,9 @@ function openRelation(o: { id: string; name: string; kind: string; schema?: stri
       data-testid="home-overview"
     >
       <header class="head">
-        <div class="mark" aria-hidden="true">▣</div>
+        <div class="mark" aria-hidden="true">
+          <QueryaIcon name="database" :size="22" />
+        </div>
         <div class="titles">
           <div class="title-row">
             <h1>{{ conn.name }}</h1>
@@ -205,7 +208,7 @@ function openRelation(o: { id: string; name: string; kind: string; schema?: stri
       <template v-if="isPostgres">
         <section class="chips" aria-label="Database info">
           <div class="chip">
-            <span class="chip-ico" aria-hidden="true">⌂</span>
+            <QueryaIcon class="chip-ico" name="server" :size="16" />
             <div class="chip-body">
               <span class="chip-l">Host</span>
               <span class="chip-v"
@@ -214,21 +217,21 @@ function openRelation(o: { id: string; name: string; kind: string; schema?: stri
             </div>
           </div>
           <div class="chip">
-            <span class="chip-ico" aria-hidden="true">▤</span>
+            <QueryaIcon class="chip-ico" name="database" :size="16" />
             <div class="chip-body">
               <span class="chip-l">Database</span>
               <span class="chip-v">{{ conn.database || "—" }}</span>
             </div>
           </div>
           <div class="chip">
-            <span class="chip-ico" aria-hidden="true">☺</span>
+            <QueryaIcon class="chip-ico" name="user" :size="16" />
             <div class="chip-body">
               <span class="chip-l">User</span>
               <span class="chip-v">{{ conn.user || "—" }}</span>
             </div>
           </div>
           <div class="chip">
-            <span class="chip-ico" aria-hidden="true">▦</span>
+            <QueryaIcon class="chip-ico" name="tableGroup" :size="16" />
             <div class="chip-body">
               <span class="chip-l">Schemas / tables</span>
               <span class="chip-v"
@@ -250,28 +253,28 @@ function openRelation(o: { id: string; name: string; kind: string; schema?: stri
         aria-label="Database info"
       >
         <div class="chip">
-          <span class="chip-ico" aria-hidden="true">ⓘ</span>
+          <QueryaIcon class="chip-ico" name="info" :size="16" />
           <div class="chip-body">
             <span class="chip-l">SQLite Version</span>
             <span class="chip-v">{{ overview?.version || "—" }}</span>
           </div>
         </div>
         <div class="chip">
-          <span class="chip-ico" aria-hidden="true">▤</span>
+          <QueryaIcon class="chip-ico" name="hardDrive" :size="16" />
           <div class="chip-body">
             <span class="chip-l">Database Size</span>
             <span class="chip-v">{{ sizeLabel }}</span>
           </div>
         </div>
         <div class="chip">
-          <span class="chip-ico" aria-hidden="true">▦</span>
+          <QueryaIcon class="chip-ico" name="grid" :size="16" />
           <div class="chip-body">
             <span class="chip-l">Pages / Page Size</span>
             <span class="chip-v">{{ pagesLabel }}</span>
           </div>
         </div>
         <div class="chip">
-          <span class="chip-ico" aria-hidden="true">↺</span>
+          <QueryaIcon class="chip-ico" name="refresh" :size="16" />
           <div class="chip-body">
             <span class="chip-l">Journal Mode</span>
             <span class="chip-v">{{ overview?.journal_mode || "—" }}</span>
@@ -281,7 +284,7 @@ function openRelation(o: { id: string; name: string; kind: string; schema?: stri
 
       <section class="tables-card">
         <div class="card-head">
-          <span class="card-ico" aria-hidden="true">▦</span>
+          <QueryaIcon class="card-ico" name="tableGroup" :size="16" />
           <h2>Tables</h2>
           <span class="count">{{ tables.length }}</span>
           <span v-if="views.length" class="count muted"
@@ -300,7 +303,7 @@ function openRelation(o: { id: string; name: string; kind: string; schema?: stri
             :title="`Open ${o.name}`"
             @click="openRelation(o)"
           >
-            <span class="t-ico" aria-hidden="true">▥</span>
+            <QueryaIcon class="t-ico" name="table" :size="13" />
             {{ o.name }}
           </button>
           <button
@@ -311,7 +314,7 @@ function openRelation(o: { id: string; name: string; kind: string; schema?: stri
             :title="`Open ${o.name}`"
             @click="openRelation(o)"
           >
-            <span class="t-ico" aria-hidden="true">◇</span>
+            <QueryaIcon class="t-ico" name="view" :size="13" />
             {{ o.name }}
           </button>
         </div>
diff --git a/apps/tauri/src/ui/ConnectionsPanel.vue b/apps/tauri/src/ui/ConnectionsPanel.vue
index b3674c59..5610b5eb 100644
--- a/apps/tauri/src/ui/ConnectionsPanel.vue
+++ b/apps/tauri/src/ui/ConnectionsPanel.vue
@@ -2,10 +2,7 @@
 import { computed, onUnmounted, ref } from "vue";
 import { storeToRefs } from "pinia";
 import { useShellStore } from "../stores/shell";
-import {
-  useConnectionsStore,
-  type LiveConnection,
-} from "../stores/connections";
+import { useConnectionsStore } from "../stores/connections";
 import { useFoldersStore } from "../stores/folders";
 import {
   isPgSchemaToolFolder,
@@ -16,6 +13,7 @@ import { useQueryaMotion } from "../motion";
 import SplitHandle from "./SplitHandle.vue";
 import QueryaContextMenu, { type CtxItem } from "./QueryaContextMenu.vue";
 import SqlObjectTreeNodes from "./SqlObjectTreeNodes.vue";
+import { QueryaIcon, QueryaDriverIcon } from "./icons";
 
 const emit = defineEmits<{
   newConnection: [];
@@ -242,11 +240,6 @@ function filteredRootsFor(connId: string) {
   return tree.filteredRootsFor(connId);
 }
 
-function driverGlyph(c: LiveConnection): string {
-  if (c.mock) return "◈";
-  if (c.driver === "postgres") return "◇";
-  return "▤";
-}
 
 onUnmounted(() => {
   dragging.value = false;
@@ -301,9 +294,16 @@ onUnmounted(() => {
                 :aria-label="`Expand ${row.folder.name}`"
                 @click="onFolderExpand(row.folder.id, $event)"
               >
-                {{ row.folder.expanded || row.forceOpen ? "▾" : "▸" }}
+                <QueryaIcon
+                  :name="
+                    row.folder.expanded || row.forceOpen
+                      ? 'chevronDown'
+                      : 'chevronRight'
+                  "
+                  :size="12"
+                />
               </button>
-              <span class="folder-ico" aria-hidden="true">▣</span>
+              <QueryaIcon class="folder-ico" name="folder" :size="14" />
               <span class="folder-name">{{ row.folder.name }}</span>
               <span class="count-sm">{{ row.children.length }}</span>
             </div>
@@ -338,7 +338,10 @@ onUnmounted(() => {
                     "
                     @click="onConnExpand(c.id, $event)"
                   >
-                    {{ nav.isExpanded(c.id) ? "▾" : "▸" }}
+                    <QueryaIcon
+                      :name="nav.isExpanded(c.id) ? 'chevronDown' : 'chevronRight'"
+                      :size="12"
+                    />
                   </button>
                   <button
                     type="button"
@@ -346,9 +349,12 @@ onUnmounted(() => {
                     @click="onConnClick(c.id)"
                     @dblclick="onConnExpand(c.id, $event)"
                   >
-                    <span class="glyph" aria-hidden="true">{{
-                      driverGlyph(c)
-                    }}</span>
+                    <QueryaDriverIcon
+                      class="glyph"
+                      :driver="c.driver"
+                      :mock="!!c.mock"
+                      :size="14"
+                    />
                     <span class="conn-name">{{ c.name }}</span>
                     <span class="conn-meta">
                       {{ c.driver
@@ -370,7 +376,7 @@ onUnmounted(() => {
                       aria-label="Refresh"
                       @click="tree.refresh(c.id)"
                     >
-                      ↻
+                      <QueryaIcon name="refresh" :size="12" />
                     </button>
                   </div>
                   <input
@@ -432,7 +438,10 @@ onUnmounted(() => {
                 "
                 @click="onConnExpand(c.id, $event)"
               >
-                {{ nav.isExpanded(c.id) ? "▾" : "▸" }}
+                <QueryaIcon
+                  :name="nav.isExpanded(c.id) ? 'chevronDown' : 'chevronRight'"
+                  :size="12"
+                />
               </button>
               <button
                 type="button"
@@ -440,9 +449,12 @@ onUnmounted(() => {
                 @click="onConnClick(c.id)"
                 @dblclick="onConnExpand(c.id, $event)"
               >
-                <span class="glyph" aria-hidden="true">{{
-                  driverGlyph(c)
-                }}</span>
+                <QueryaDriverIcon
+                  class="glyph"
+                  :driver="c.driver"
+                  :mock="!!c.mock"
+                  :size="14"
+                />
                 <span class="conn-name">{{ c.name }}</span>
                 <span class="conn-meta">
                   {{ c.driver }}<template v-if="c.mock"> · demo</template>
@@ -463,7 +475,7 @@ onUnmounted(() => {
                   aria-label="Refresh"
                   @click="tree.refresh(c.id)"
                 >
-                  ↻
+                  <QueryaIcon name="refresh" :size="12" />
                 </button>
               </div>
               <input
@@ -611,8 +623,7 @@ onUnmounted(() => {
 }
 
 .folder-ico {
-  font-size: 12px;
-  line-height: 1;
+  color: var(--q-muted-foreground);
 }
 
 .folder-name {
@@ -626,24 +637,28 @@ onUnmounted(() => {
 
 .chev {
   width: 18px;
+  height: 18px;
   flex: 0 0 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   appearance: none;
   border: 0;
   background: transparent;
   color: var(--q-muted-foreground);
   cursor: pointer;
-  font-size: 10px;
-  line-height: 1;
   padding: 0;
 }
 
 .conn-main {
   flex: 1;
   min-width: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 1px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto;
+  column-gap: 8px;
+  row-gap: 1px;
+  align-items: center;
   appearance: none;
   border: 0;
   background: transparent;
@@ -653,20 +668,21 @@ onUnmounted(() => {
   padding: 5px 6px;
   border-radius: var(--q-radius-control);
   cursor: pointer;
-  position: relative;
 }
 
 .conn-main .glyph {
-  position: absolute;
-  left: 6px;
-  top: 8px;
-  font-size: 10px;
+  grid-row: 1 / span 2;
   color: var(--q-muted-foreground);
 }
 
-.conn-main .conn-name,
+.conn-main .conn-name {
+  grid-column: 2;
+  grid-row: 1;
+}
+
 .conn-main .conn-meta {
-  padding-left: 16px;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 .conn-main:hover {
diff --git a/apps/tauri/src/ui/NewConnectionDialog.vue b/apps/tauri/src/ui/NewConnectionDialog.vue
index 0ab3c132..6e1fb445 100644
--- a/apps/tauri/src/ui/NewConnectionDialog.vue
+++ b/apps/tauri/src/ui/NewConnectionDialog.vue
@@ -4,6 +4,7 @@ import { computed, nextTick, onUnmounted, ref, watch } from "vue";
 // template and make `v-if="open"` always truthy (Save connected, dialog stuck).
 import { open as pickSqliteFile } from "@tauri-apps/plugin-dialog";
 import QueryaButton from "./QueryaButton.vue";
+import { QueryaIcon } from "./icons";
 
 export type BuiltInDriverId =
   | "postgresql"
@@ -328,7 +329,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKey, true));
           below.
         </p>
         <label class="search">
-          <span class="search-ico" aria-hidden="true">⌕</span>
+          <QueryaIcon class="search-ico" name="search" :size="14" />
           <input
             ref="searchEl"
             v-model="search"
diff --git a/apps/tauri/src/ui/PreferencesDialog.vue b/apps/tauri/src/ui/PreferencesDialog.vue
index d3a6d8ed..d1a6a620 100644
--- a/apps/tauri/src/ui/PreferencesDialog.vue
+++ b/apps/tauri/src/ui/PreferencesDialog.vue
@@ -15,6 +15,7 @@ import {
 } from "../preferences/shortcutsCatalog";
 import InterfaceScaleSlider from "./InterfaceScaleSlider.vue";
 import QueryaButton from "./QueryaButton.vue";
+import { QueryaIcon, type QueryaIconName } from "./icons";
 
 const props = defineProps<{ open: boolean }>();
 const emit = defineEmits<{ close: [] }>();
@@ -33,8 +34,8 @@ type Category = {
   id: CategoryId;
   label: string;
   description: string;
-  /** Display glyph (Flutter rail icon stand-in). */
-  icon: string;
+  /** Flutter prefs rail — Material Symbols via QueryaIcon. */
+  icon: QueryaIconName;
   keywords: string;
 };
 
@@ -45,21 +46,21 @@ const categories: Category[] = [
     id: "general",
     label: "General",
     description: "Startup, updates, release channel",
-    icon: "⚙",
+    icon: "settings",
     keywords: "updates startup automatic release channel stable beta",
   },
   {
     id: "appearance",
     label: "Appearance",
     description: "Themes, dark mode, scaling, animations",
-    icon: "◇",
+    icon: "sparkles",
     keywords: "theme dark light system scaling motion animation interface color",
   },
   {
     id: "sql",
     label: "SQL & Editor",
     description: "Editor font, statement timeouts, query history",
-    icon: "›_",
+    icon: "code",
     keywords:
       "font size postgresql mysql sqlite statement timeout history destructive drop truncate delete",
   },
@@ -67,35 +68,35 @@ const categories: Category[] = [
     id: "dataGrid",
     label: "Data Grid",
     description: "Result rows limit, column sizing, safety",
-    icon: "▦",
+    icon: "grid",
     keywords: "max rows results grid column size formatting safety limits",
   },
   {
     id: "extensions",
     label: "Extensions",
     description: "Sideloading .qext/.zip packages, extension folder",
-    icon: "⧉",
+    icon: "puzzle",
     keywords: "extensions qext zip package install sideload folder directory",
   },
   {
     id: "mcp",
     label: "MCP Server",
     description: "Let AI clients read shared connections",
-    icon: "◉",
+    icon: "network",
     keywords: "mcp ai model claude cursor vscode copilot llm server share token",
   },
   {
     id: "shortcuts",
     label: "Shortcuts",
     description: "Keyboard shortcuts reference and keymap",
-    icon: "⌘",
+    icon: "keyboard",
     keywords: "shortcut keyboard keymap hotkey",
   },
   {
     id: "about",
     label: "About & Storage",
     description: "App version, local SQLite storage, paths",
-    icon: "ℹ",
+    icon: "info",
     keywords: "about version storage directory cache logs sqlite",
   },
 ];
@@ -266,10 +267,10 @@ onUnmounted(() => window.removeEventListener("keydown", onKey, true));
     <div class="dialog" role="dialog" aria-modal="true" aria-label="Preferences">
       <!-- Header: title + search + close (Flutter) -->
       <header class="header">
-        <span class="hdr-icon" aria-hidden="true">⚙</span>
+        <QueryaIcon class="hdr-icon" name="settings" :size="18" />
         <h1 class="hdr-title">Preferences</h1>
         <div class="search-wrap" :class="{ active: hasSearch }">
-          <span class="search-ico" aria-hidden="true">⌕</span>
+          <QueryaIcon class="search-ico" name="search" :size="14" />
           <input
             ref="searchEl"
             v-model="search"
@@ -310,7 +311,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKey, true));
             :class="{ on: category === c.id }"
             @click="category = c.id"
           >
-            <span class="rail-ico" aria-hidden="true">{{ c.icon }}</span>
+            <QueryaIcon class="rail-ico" :name="c.icon" :size="16" />
             <span class="rail-label">{{ c.label }}</span>
             <span
               v-if="hasSearch && matchCounts[c.id] > 0"
diff --git a/apps/tauri/src/ui/QueryaContextMenu.vue b/apps/tauri/src/ui/QueryaContextMenu.vue
index 44904cb6..d4101318 100644
--- a/apps/tauri/src/ui/QueryaContextMenu.vue
+++ b/apps/tauri/src/ui/QueryaContextMenu.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { QueryaIcon } from "./icons";
 
 export type CtxItem = {
   id: string;
@@ -92,7 +93,12 @@ onUnmounted(() => {
         @mouseenter="item.children ? (submenu = item.id) : (submenu = null)"
       >
         <span>{{ item.label }}</span>
-        <span v-if="item.children" class="caret">▸</span>
+        <QueryaIcon
+          v-if="item.children"
+          class="caret"
+          name="chevronRight"
+          :size="12"
+        />
       </button>
       <div
         v-if="item.children && submenu === item.id"
diff --git a/apps/tauri/src/ui/SqlObjectTreeNodes.vue b/apps/tauri/src/ui/SqlObjectTreeNodes.vue
index c54e28cd..067af54c 100644
--- a/apps/tauri/src/ui/SqlObjectTreeNodes.vue
+++ b/apps/tauri/src/ui/SqlObjectTreeNodes.vue
@@ -4,6 +4,7 @@ import {
   type SelectedObject,
 } from "../stores/shellNav";
 import type { TreeUiNode } from "../stores/objectTree";
+import { QueryaIcon, iconForObjectNode } from "./icons";
 
 defineProps<{
   nodes: TreeUiNode[];
@@ -17,33 +18,6 @@ const emit = defineEmits<{
   selectRelation: [node: TreeUiNode];
 }>();
 
-function kindGlyph(kind: TreeUiNode["kind"]): string {
-  switch (kind) {
-    case "schema":
-      return "▣";
-    case "folder":
-      return "▸";
-    case "view":
-    case "materialized_view":
-      return "◌";
-    case "function":
-    case "procedure":
-      return "ƒ";
-    case "sequence":
-      return "#";
-    case "index":
-      return "⌘";
-    case "trigger":
-      return "⚡";
-    case "type":
-      return "T";
-    case "column":
-      return "·";
-    default:
-      return "▤";
-  }
-}
-
 function isRelation(
   kind: TreeUiNode["kind"],
 ): kind is "table" | "view" | "materialized_view" {
@@ -101,7 +75,10 @@ function isSelected(
         :aria-label="`Expand ${node.name}`"
         @click="emit('toggle', node, $event)"
       >
-        {{ node.expanded ? "▾" : "▸" }}
+        <QueryaIcon
+          :name="node.expanded ? 'chevronDown' : 'chevronRight'"
+          :size="12"
+        />
       </button>
       <span v-else class="chev-spacer" />
       <button
@@ -110,7 +87,11 @@ function isSelected(
         :disabled="!isSelectable(node)"
         @click="isSelectable(node) && emit('selectRelation', node)"
       >
-        <span class="glyph" aria-hidden="true">{{ kindGlyph(node.kind) }}</span>
+        <QueryaIcon
+          class="glyph"
+          :name="iconForObjectNode(node.kind, node.name)"
+          :size="13"
+        />
         <span class="name">{{ node.name }}</span>
         <span class="kind">{{ node.kind }}</span>
       </button>
@@ -156,14 +137,16 @@ function isSelected(
 .chev,
 .chev-spacer {
   width: 18px;
+  height: 18px;
   flex: 0 0 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   appearance: none;
   border: 0;
   background: transparent;
   color: var(--q-muted-foreground);
   cursor: pointer;
-  font-size: 10px;
-  line-height: 1;
   padding: 0;
 }
 
@@ -198,10 +181,7 @@ function isSelected(
 }
 
 .glyph {
-  width: 12px;
-  text-align: center;
   color: var(--q-muted-foreground);
-  font-size: 10px;
 }
 
 .name {
diff --git a/apps/tauri/src/ui/StatusBar.vue b/apps/tauri/src/ui/StatusBar.vue
index ac749761..fe678eda 100644
--- a/apps/tauri/src/ui/StatusBar.vue
+++ b/apps/tauri/src/ui/StatusBar.vue
@@ -4,6 +4,7 @@ import { storeToRefs } from "pinia";
 import { useShellStore } from "../stores/shell";
 import { useShellStatusStore } from "../stores/shellStatus";
 import QueryaDivider from "./QueryaDivider.vue";
+import { QueryaIcon } from "./icons";
 
 const emit = defineEmits<{
   openPreferences: [];
@@ -49,7 +50,7 @@ const countsLabel = computed(() => {
         :title="shell.sidebarOpen ? 'Hide sidebar (Ctrl+B)' : 'Show sidebar (Ctrl+B)'"
         @click="shell.toggleSidebar()"
       >
-        ▤
+        <QueryaIcon name="sidebar" :size="14" />
       </button>
       <QueryaDivider vertical />
       <span
@@ -77,7 +78,7 @@ const countsLabel = computed(() => {
         aria-label="Preferences"
         @click="emit('openPreferences')"
       >
-        ⚙
+        <QueryaIcon name="settings" :size="14" />
       </button>
     </div>
   </footer>
diff --git a/apps/tauri/src/ui/TableObjectView.vue b/apps/tauri/src/ui/TableObjectView.vue
index 5d42d2c3..164aa1a1 100644
--- a/apps/tauri/src/ui/TableObjectView.vue
+++ b/apps/tauri/src/ui/TableObjectView.vue
@@ -9,6 +9,7 @@ import { findDemoObject } from "../mock/demoCatalog";
 import { dbExecuteQuery } from "../api/query";
 import { formatConnectionError } from "../api/connection";
 import ResultGrid from "./ResultGrid.vue";
+import { QueryaIcon } from "./icons";
 import ErdView from "./erd/ErdView.vue";
 
 const nav = useShellNavStore();
@@ -94,7 +95,9 @@ watch(
     data-testid="table-object-view"
   >
     <header class="chrome">
-      <button type="button" class="back" @click="nav.clearObject()">←</button>
+      <button type="button" class="back" aria-label="Back" @click="nav.clearObject()">
+        <QueryaIcon name="arrowLeft" :size="16" />
+      </button>
       <div class="titles">
         <h1>{{ selectedObject.name }}</h1>
         <p class="sub">
diff --git a/apps/tauri/src/ui/TitleBar.vue b/apps/tauri/src/ui/TitleBar.vue
index dde34fa4..06ffa224 100644
--- a/apps/tauri/src/ui/TitleBar.vue
+++ b/apps/tauri/src/ui/TitleBar.vue
@@ -10,6 +10,7 @@ import {
 import { useQueryaMotion } from "../motion";
 import { useShellStore } from "../stores/shell";
 import TitleBarMenus from "./TitleBarMenus.vue";
+import { QueryaIcon } from "./icons";
 
 const props = withDefaults(
   defineProps<{
@@ -139,7 +140,7 @@ onUnmounted(() => {
         :aria-label="shell.sidebarOpen ? 'Hide sidebar' : 'Show sidebar'"
         @click="shell.toggleSidebar()"
       >
-        ▤
+        <QueryaIcon name="sidebar" :size="16" />
       </button>
       <div class="brand" data-tauri-drag-region>
         <span class="mark" aria-hidden="true" />
diff --git a/apps/tauri/src/ui/icons/QueryaDriverIcon.vue b/apps/tauri/src/ui/icons/QueryaDriverIcon.vue
new file mode 100644
index 00000000..52117066
--- /dev/null
+++ b/apps/tauri/src/ui/icons/QueryaDriverIcon.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import QueryaIcon from "./QueryaIcon.vue";
+import { iconForDriver } from "./objectKind";
+import { connectionAsset, type QueryaIconName } from "./registry";
+
+const props = withDefaults(
+  defineProps<{
+    driver: string;
+    mock?: boolean;
+    size?: number;
+  }>(),
+  { size: 14, mock: false },
+);
+
+const broken = ref(false);
+
+const asset = computed(() =>
+  props.mock ? null : connectionAsset(props.driver),
+);
+
+/** Flutter `QueryaIcons.connectionIcon` fallbacks when no PNG. */
+const fallback = computed<QueryaIconName>(() =>
+  iconForDriver(props.driver, { mock: props.mock }),
+);
+
+const isMysql = computed(
+  () => props.driver === "mysql" && !!asset.value && !broken.value,
+);
+</script>
+
+<template>
+  <img
+    v-if="asset && !broken"
+    class="q-driver-icon"
+    :class="{ mysql: isMysql }"
+    :src="asset"
+    alt=""
+    :width="size"
+    :height="size"
+    draggable="false"
+    @error="broken = true"
+  />
+  <QueryaIcon v-else :name="fallback" :size="size" class="q-driver-fallback" />
+</template>
+
+<style scoped>
+.q-driver-icon {
+  flex-shrink: 0;
+  object-fit: contain;
+  display: block;
+}
+
+/* Flutter DriverIcon #1824 — only when tokens are actually dark (tokens.css). */
+:root[data-theme="dark"] .q-driver-icon.mysql {
+  filter: brightness(1.9) contrast(1.05);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .q-driver-icon.mysql {
+    filter: brightness(1.9) contrast(1.05);
+  }
+}
+
+.q-driver-fallback {
+  color: var(--q-primary);
+}
+</style>
diff --git a/apps/tauri/src/ui/icons/QueryaIcon.vue b/apps/tauri/src/ui/icons/QueryaIcon.vue
new file mode 100644
index 00000000..34381c1d
--- /dev/null
+++ b/apps/tauri/src/ui/icons/QueryaIcon.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { QUERYA_ICONS, type QueryaIconName } from "./registry";
+
+const props = withDefaults(
+  defineProps<{
+    name: QueryaIconName;
+    /** CSS px; default 14 for tree density. */
+    size?: number;
+    /** Decorative by default; set aria-label for meaningful icons. */
+    label?: string;
+  }>(),
+  {
+    size: 14,
+  },
+);
+
+const ligature = computed(() => QUERYA_ICONS[props.name]);
+</script>
+
+<template>
+  <span
+    class="q-icon material-symbols-rounded"
+    :style="{ fontSize: `${size}px`, width: `${size}px`, height: `${size}px` }"
+    :aria-hidden="label ? undefined : true"
+    :aria-label="label"
+    role="img"
+  >{{ ligature }}</span>
+</template>
+
+<style scoped>
+.q-icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  font-variation-settings:
+    "FILL" 0,
+    "wght" 400,
+    "GRAD" 0,
+    "opsz" 24;
+  user-select: none;
+  color: currentColor;
+  /* Optical match to Flutter Icon size */
+  overflow: hidden;
+}
+</style>
diff --git a/apps/tauri/src/ui/icons/index.ts b/apps/tauri/src/ui/icons/index.ts
new file mode 100644
index 00000000..5dc5dc2b
--- /dev/null
+++ b/apps/tauri/src/ui/icons/index.ts
@@ -0,0 +1,8 @@
+export { default as QueryaIcon } from "./QueryaIcon.vue";
+export { default as QueryaDriverIcon } from "./QueryaDriverIcon.vue";
+export {
+  QUERYA_ICONS,
+  connectionAsset,
+  type QueryaIconName,
+} from "./registry";
+export { iconForDriver, iconForObjectNode } from "./objectKind";
diff --git a/apps/tauri/src/ui/icons/objectKind.test.ts b/apps/tauri/src/ui/icons/objectKind.test.ts
new file mode 100644
index 00000000..6330be57
--- /dev/null
+++ b/apps/tauri/src/ui/icons/objectKind.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest";
+import { connectionAsset } from "./registry";
+import { iconForDriver, iconForObjectNode } from "./objectKind";
+
+describe("iconForObjectNode", () => {
+  it("maps relation kinds to Flutter QueryaIcons leaves", () => {
+    expect(iconForObjectNode("table")).toBe("table");
+    expect(iconForObjectNode("view")).toBe("view");
+    expect(iconForObjectNode("materialized_view")).toBe("materializedView");
+    expect(iconForObjectNode("schema")).toBe("schema");
+  });
+
+  it("maps named schema folders to Flutter group icons", () => {
+    expect(iconForObjectNode("folder", "Tables")).toBe("tableGroup");
+    expect(iconForObjectNode("folder", "Materialized views")).toBe(
+      "materializedViewGroup",
+    );
+    expect(iconForObjectNode("folder", "Triggers")).toBe("trigger");
+    expect(iconForObjectNode("folder", "Other")).toBe("folder");
+  });
+});
+
+describe("iconForDriver / connectionAsset", () => {
+  it("uses Flutter connectionAsset PNGs for built-in drivers", () => {
+    expect(connectionAsset("postgres")).toBe("/drivers/postgresql_icon.png");
+    expect(connectionAsset("mysql")).toBe("/drivers/mysql_icon.png");
+    expect(connectionAsset("redis")).toBe("/drivers/redis_icon.png");
+    expect(connectionAsset("mongodb")).toBe("/drivers/mongodb_icon.png");
+    expect(connectionAsset("sqlite")).toBeNull();
+  });
+
+  it("falls back to Flutter connectionIcon Material names", () => {
+    expect(iconForDriver("postgres")).toBe("database");
+    expect(iconForDriver("sqlite")).toBe("sqlite");
+    expect(iconForDriver("mysql")).toBe("tableGroup");
+    expect(iconForDriver("postgres", { mock: true })).toBe("demo");
+  });
+});
diff --git a/apps/tauri/src/ui/icons/objectKind.ts b/apps/tauri/src/ui/icons/objectKind.ts
new file mode 100644
index 00000000..0da4cf31
--- /dev/null
+++ b/apps/tauri/src/ui/icons/objectKind.ts
@@ -0,0 +1,73 @@
+import type { SqlObjectKind } from "../../api/connection";
+import type { QueryaIconName } from "./registry";
+
+/** Folder display names → Flutter QueryaIcons group glyphs. */
+/** Keys must match Rust `SchemaFolderKind::label` / Flutter folder titles. */
+const FOLDER_ICONS: Record<string, QueryaIconName> = {
+  Tables: "tableGroup",
+  Views: "viewGroup",
+  "Materialized views": "materializedViewGroup",
+  Functions: "functionGroup",
+  Sequences: "sequenceGroup",
+  Indexes: "index",
+  Triggers: "trigger",
+  Types: "type",
+};
+
+/** Map a tree node to a Querya icon (Flutter `QueryaIcons` parity). */
+export function iconForObjectNode(
+  kind: SqlObjectKind,
+  name?: string,
+): QueryaIconName {
+  if (kind === "folder") {
+    return (name && FOLDER_ICONS[name]) || "folder";
+  }
+  switch (kind) {
+    case "schema":
+      return "schema";
+    case "table":
+      return "table";
+    case "view":
+      return "view";
+    case "materialized_view":
+      return "materializedView";
+    case "function":
+    case "procedure":
+      return "function";
+    case "sequence":
+      return "sequence";
+    case "index":
+      return "index";
+    case "trigger":
+      return "trigger";
+    case "type":
+      return "type";
+    case "column":
+      return "column";
+    default:
+      return "table";
+  }
+}
+
+/** @deprecated Prefer QueryaDriverIcon — kept for tests of Material fallbacks. */
+export function iconForDriver(
+  driver: string,
+  opts?: { mock?: boolean },
+): QueryaIconName {
+  if (opts?.mock) return "demo";
+  switch (driver) {
+    case "postgres":
+    case "postgresql":
+      return "database";
+    case "sqlite":
+      return "sqlite";
+    case "mysql":
+      return "tableGroup";
+    case "redis":
+      return "redis";
+    case "mongodb":
+      return "mongo";
+    default:
+      return "extension";
+  }
+}
diff --git a/apps/tauri/src/ui/icons/registry.ts b/apps/tauri/src/ui/icons/registry.ts
new file mode 100644
index 00000000..5b956ff3
--- /dev/null
+++ b/apps/tauri/src/ui/icons/registry.ts
@@ -0,0 +1,95 @@
+/**
+ * Semantic Querya icons — Material Symbols Rounded ligatures.
+ * Names and glyphs mirror Flutter `lib/core/ui/querya_icons.dart`
+ * (`Icons.*_rounded` → Material Symbols Rounded).
+ */
+export const QUERYA_ICONS = {
+  // Chrome
+  sidebar: "view_sidebar",
+  settings: "settings",
+  search: "search",
+  info: "info",
+  keyboard: "keyboard",
+  puzzle: "extension",
+  refresh: "refresh",
+  chevronRight: "chevron_right",
+  chevronDown: "expand_more",
+  arrowLeft: "arrow_back",
+  house: "home",
+  user: "person",
+  sparkles: "auto_awesome",
+  layout: "dashboard",
+  error: "error_outline",
+
+  // Connections / drivers (Material fallbacks; PNGs via QueryaDriverIcon)
+  database: "storage",
+  server: "dns",
+  hardDrive: "storage",
+  folder: "folder",
+  folderOpen: "folder_open",
+  demo: "auto_awesome",
+  /** Flutter `connectionIcon('mongodb')` */
+  mongo: "eco",
+  /** Flutter `connectionIcon('redis')` */
+  redis: "memory",
+  /** Flutter `connectionIcon('sqlite')` */
+  sqlite: "folder_open",
+
+  // Schema tree — Flutter QueryaIcons
+  schema: "diamond",
+  schemas: "account_tree",
+  network: "hub",
+  /** Flutter `tableLeaf` */
+  table: "grid_on",
+  /** Flutter `tableGroup` */
+  tableGroup: "table_chart",
+  /** Flutter `viewLeaf` */
+  view: "view_week",
+  /** Flutter `viewGroup` */
+  viewGroup: "view_agenda",
+  /** Flutter `materializedViewGroup` */
+  materializedViewGroup: "dynamic_feed",
+  /** Flutter `materializedViewLeaf` */
+  materializedView: "layers",
+  /** Flutter `functionLeaf` */
+  function: "code",
+  /** Flutter `functionGroup` */
+  functionGroup: "functions",
+  /** Flutter `sequenceLeaf` */
+  sequence: "looks_one",
+  /** Flutter `sequenceGroup` */
+  sequenceGroup: "format_list_numbered",
+  /** Flutter `indexes` */
+  index: "table_rows",
+  /** Flutter `triggers` */
+  trigger: "bolt",
+  /** Flutter `types` */
+  type: "category",
+  /** Flutter SDUI `columns` */
+  column: "view_column",
+  extension: "extension",
+  binary: "data_object",
+  code: "code",
+  boxes: "inventory_2",
+  grid: "grid_on",
+} as const;
+
+export type QueryaIconName = keyof typeof QUERYA_ICONS;
+
+/** Bundled driver PNGs — same files as Flutter `QueryaIcons.connectionAsset`. */
+export function connectionAsset(driver: string): string | null {
+  switch (driver) {
+    case "postgres":
+    case "postgresql":
+      return "/drivers/postgresql_icon.png";
+    case "mysql":
+      return "/drivers/mysql_icon.png";
+    case "redis":
+      return "/drivers/redis_icon.png";
+    case "mongodb":
+    case "mongo":
+      return "/drivers/mongodb_icon.png";
+    default:
+      return null;
+  }
+}