diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f788474bb..e58b6890c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -38,8 +38,6 @@
         "@mantine/dates": "^8.3.1",
         "@mantine/dropzone": "^8.3.1",
         "@mantine/hooks": "^8.3.1",
-        "@mui/icons-material": "^7.3.2",
-        "@mui/material": "^7.3.2",
         "@reactour/tour": "^3.8.0",
         "@stripe/react-stripe-js": "^4.0.2",
         "@stripe/stripe-js": "^7.9.0",
@@ -457,7 +455,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -501,7 +498,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -582,7 +578,6 @@
       "resolved": "https://registry.npmjs.org/@embedpdf/core/-/core-1.5.0.tgz",
       "integrity": "sha512-Yrh9XoVaT8cUgzgqpJ7hx5wg6BqQrCFirqqlSwVb+Ly9oNn4fZbR9GycIWmzJOU5XBnaOJjXfQSaDyoNP0woNA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@embedpdf/engines": "1.5.0",
         "@embedpdf/models": "1.5.0"
@@ -682,7 +677,6 @@
       "resolved": "https://registry.npmjs.org/@embedpdf/plugin-history/-/plugin-history-1.5.0.tgz",
       "integrity": "sha512-p7PTNNaIr4gH3jLwX+eLJe1DeUXgi21kVGN6SRx/pocH8esg4jqoOeD/YiRRZoZnPOiy0jBXVhkPkwSmY7a2hQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@embedpdf/models": "1.5.0"
       },
@@ -699,7 +693,6 @@
       "resolved": "https://registry.npmjs.org/@embedpdf/plugin-interaction-manager/-/plugin-interaction-manager-1.5.0.tgz",
       "integrity": "sha512-ckHgTfvkW6c5Ta7Mc+Dl9C2foVnvEpqEJ84wyBnqrU0OWbe/jsiPhyKBVeartMGqNI/kVfaQTXupyrKhekAVmg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@embedpdf/models": "1.5.0"
       },
@@ -717,7 +710,6 @@
       "resolved": "https://registry.npmjs.org/@embedpdf/plugin-loader/-/plugin-loader-1.5.0.tgz",
       "integrity": "sha512-P4YpIZfaW69etYIjphyaL4cGl2pB14h3OdTE0tRQ2pZYZHFLTvlt4q9B3PVSdhlSrHK5nob7jfLGon2U7xCslg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@embedpdf/models": "1.5.0"
       },
@@ -771,7 +763,6 @@
       "resolved": "https://registry.npmjs.org/@embedpdf/plugin-render/-/plugin-render-1.5.0.tgz",
       "integrity": "sha512-ywwSj0ByrlkvrJIHKRzqxARkOZriki8VJUC+T4MV8fGyF4CzvCRJyKlPktahFz+VxhoodqTh7lBCib68dH+GvA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@embedpdf/models": "1.5.0"
       },
@@ -806,7 +797,6 @@
       "resolved": "https://registry.npmjs.org/@embedpdf/plugin-scroll/-/plugin-scroll-1.5.0.tgz",
       "integrity": "sha512-RNmTZCZ8X1mA8cw9M7TMDuhO9GtkOalGha2bBL3En3D1IlDRS7PzNNMSMV7eqT7OQICSTltlpJ8p8Qi5esvL/Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@embedpdf/models": "1.5.0"
       },
@@ -843,7 +833,6 @@
       "resolved": "https://registry.npmjs.org/@embedpdf/plugin-selection/-/plugin-selection-1.5.0.tgz",
       "integrity": "sha512-zrxLBAZQoPswDuf9q9DrYaQc6B0Ysc2U1hueTjNH/4+ydfl0BFXZkKR63C2e3YmWtXvKjkoIj0GyPzsiBORLUw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@embedpdf/models": "1.5.0"
       },
@@ -919,7 +908,6 @@
       "resolved": "https://registry.npmjs.org/@embedpdf/plugin-viewport/-/plugin-viewport-1.5.0.tgz",
       "integrity": "sha512-G8GDyYRhfehw72+r4qKkydnA5+AU8qH67g01Y12b0DzI0VIzymh/05Z4dK8DsY3jyWPXJfw2hlg5+KDHaMBHgQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@embedpdf/models": "1.5.0"
       },
@@ -1075,7 +1063,6 @@
       "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
       "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -1119,7 +1106,6 @@
       "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
       "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -2150,7 +2136,6 @@
       "resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.3.6.tgz",
       "integrity": "sha512-paTl+0x+O/QtgMtqVJaG8maD8sfiOdgPmLOyG485FmeGZ1L3KMdEkhxZtmdGlDFsLXhmMGQ57ducT90bvhXX5A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@floating-ui/react": "^0.27.16",
         "clsx": "^2.1.1",
@@ -2201,7 +2186,6 @@
       "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.3.6.tgz",
       "integrity": "sha512-liHfaWXHAkLjJy+Bkr29UsCwAoDQ/a64WrM67lksx8F0qqyjR5RQH8zVlhuOjdpQnwtlUkE/YiTvbJiPcoI0bw==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "react": "^18.x || ^19.x"
       }
@@ -2228,240 +2212,6 @@
         "@types/gapi.client.discovery-v1": "*"
       }
     },
-    "node_modules/@mui/core-downloads-tracker": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.5.tgz",
-      "integrity": "sha512-kOLwlcDPnVz2QMhiBv0OQ8le8hTCqKM9cRXlfVPL91l3RGeOsxrIhNRsUt3Xb8wb+pTVUolW+JXKym93vRKxCw==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      }
-    },
-    "node_modules/@mui/icons-material": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.3.5.tgz",
-      "integrity": "sha512-LciL1GLMZ+VlzyHAALSVAR22t8IST4LCXmljcUSx2NOutgO2XnxdIp8ilFbeNf9wpo0iUFbAuoQcB7h+HHIf3A==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.4"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@mui/material": "^7.3.5",
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/material": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.5.tgz",
-      "integrity": "sha512-8VVxFmp1GIm9PpmnQoCoYo0UWHoOrdA57tDL62vkpzEgvb/d71Wsbv4FRg7r1Gyx7PuSo0tflH34cdl/NvfHNQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.28.4",
-        "@mui/core-downloads-tracker": "^7.3.5",
-        "@mui/system": "^7.3.5",
-        "@mui/types": "^7.4.8",
-        "@mui/utils": "^7.3.5",
-        "@popperjs/core": "^2.11.8",
-        "@types/react-transition-group": "^4.4.12",
-        "clsx": "^2.1.1",
-        "csstype": "^3.1.3",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.2.0",
-        "react-transition-group": "^4.4.5"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.5.0",
-        "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^7.3.5",
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "@mui/material-pigment-css": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/private-theming": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.5.tgz",
-      "integrity": "sha512-cTx584W2qrLonwhZLbEN7P5pAUu0nZblg8cLBlTrZQ4sIiw8Fbvg7GvuphQaSHxPxrCpa7FDwJKtXdbl2TSmrA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.4",
-        "@mui/utils": "^7.3.5",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/styled-engine": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.5.tgz",
-      "integrity": "sha512-zbsZ0uYYPndFCCPp2+V3RLcAN6+fv4C8pdwRx6OS3BwDkRCN8WBehqks7hWyF3vj1kdQLIWrpdv/5Y0jHRxYXQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.4",
-        "@emotion/cache": "^11.14.0",
-        "@emotion/serialize": "^1.3.3",
-        "@emotion/sheet": "^1.4.0",
-        "csstype": "^3.1.3",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.4.1",
-        "@emotion/styled": "^11.3.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/system": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.5.tgz",
-      "integrity": "sha512-yPaf5+gY3v80HNkJcPi6WT+r9ebeM4eJzrREXPxMt7pNTV/1eahyODO4fbH3Qvd8irNxDFYn5RQ3idHW55rA6g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.4",
-        "@mui/private-theming": "^7.3.5",
-        "@mui/styled-engine": "^7.3.5",
-        "@mui/types": "^7.4.8",
-        "@mui/utils": "^7.3.5",
-        "clsx": "^2.1.1",
-        "csstype": "^3.1.3",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.5.0",
-        "@emotion/styled": "^11.3.0",
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/types": {
-      "version": "7.4.8",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.8.tgz",
-      "integrity": "sha512-ZNXLBjkPV6ftLCmmRCafak3XmSn8YV0tKE/ZOhzKys7TZXUiE0mZxlH8zKDo6j6TTUaDnuij68gIG+0Ucm7Xhw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.4"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/utils": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.5.tgz",
-      "integrity": "sha512-jisvFsEC3sgjUjcPnR4mYfhzjCDIudttSGSbe1o/IXFNu0kZuR+7vqQI0jg8qtcVZBHWrwTfvAZj9MNMumcq1g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.4",
-        "@mui/types": "^7.4.8",
-        "@types/prop-types": "^15.7.15",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.2.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@napi-rs/canvas": {
       "version": "0.1.81",
       "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.81.tgz",
@@ -2742,16 +2492,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.8",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/@posthog/core": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/@posthog/core/-/core-1.5.2.tgz",
@@ -3202,7 +2942,6 @@
       "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-7.9.0.tgz",
       "integrity": "sha512-ggs5k+/0FUJcIgNY08aZTqpBTtbExkJMYMLSMwyucrhtWexVOEY1KJmhBsxf+E/Q15f5rbwBpj+t0t2AW2oCsQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12.16"
       }
@@ -3321,6 +3060,7 @@
       "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.6.tgz",
       "integrity": "sha512-4awhxtMh4cx9blePWl10HRHj8Iivtqj+2QdDCSMDzxG+XKa9+VCNupQuCuvzEhYPzZSrX+0gC+0lHA/0fFKKQQ==",
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "acorn": "^8.9.0"
       }
@@ -4097,7 +3837,6 @@
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -4415,18 +4154,12 @@
       "integrity": "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A==",
       "license": "MIT"
     },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.15",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
-      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "license": "MIT"
-    },
     "node_modules/@types/react": {
       "version": "19.2.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
+      "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -4437,20 +4170,10 @@
       "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
     },
-    "node_modules/@types/react-transition-group": {
-      "version": "4.4.12",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
-      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -4507,7 +4230,6 @@
       "integrity": "sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.3",
         "@typescript-eslint/types": "8.46.3",
@@ -5221,6 +4943,7 @@
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.24.tgz",
       "integrity": "sha512-BM8kBhtlkkbnyl4q+HiF5R5BL0ycDPfihowulm02q3WYp2vxgPcJuZO866qa/0u3idbMntKEtVNuAUp5bw4teg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/shared": "3.5.24"
       }
@@ -5230,6 +4953,7 @@
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.24.tgz",
       "integrity": "sha512-RYP/byyKDgNIqfX/gNb2PB55dJmM97jc9wyF3jK7QUInYKypK2exmZMNwnjueWwGceEkP6NChd3D2ZVEp9undQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/reactivity": "3.5.24",
         "@vue/shared": "3.5.24"
@@ -5240,6 +4964,7 @@
       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.24.tgz",
       "integrity": "sha512-Z8ANhr/i0XIluonHVjbUkjvn+CyrxbXRIxR7wn7+X7xlcb7dJsfITZbkVOeJZdP8VZwfrWRsWdShH6pngMxRjw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/reactivity": "3.5.24",
         "@vue/runtime-core": "3.5.24",
@@ -5252,6 +4977,7 @@
       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.24.tgz",
       "integrity": "sha512-Yh2j2Y4G/0/4z/xJ1Bad4mxaAk++C2v4kaa8oSYTMJBJ00/ndPuxCnWeot0/7/qafQFLh5pr6xeV6SdMcE/G1w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-ssr": "3.5.24",
         "@vue/shared": "3.5.24"
@@ -5278,7 +5004,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5686,6 +5411,7 @@
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
       "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -5962,7 +5688,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -7010,8 +6735,7 @@
       "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1521046.tgz",
       "integrity": "sha512-vhE6eymDQSKWUXwwA37NtTTVEzjtGVfDr3pRbsWEQ5onH/Snp2c+2xZHWJJawG/0hCCJLRGt4xVtEVUVILol4w==",
       "dev": true,
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
     },
     "node_modules/dezalgo": {
       "version": "1.0.4",
@@ -7044,16 +6768,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -7406,7 +7120,6 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -7577,7 +7290,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -7744,7 +7456,8 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
       "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/espree": {
       "version": "10.4.0",
@@ -7809,6 +7522,7 @@
       "resolved": "https://registry.npmjs.org/esrap/-/esrap-2.1.2.tgz",
       "integrity": "sha512-DgvlIQeowRNyvLPWW4PT7Gu13WznY288Du086E751mwwbsgr29ytBiYeLzAGIo0qk3Ujob0SDk8TiSaM5WQzNg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       }
@@ -8899,7 +8613,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.27.6"
       },
@@ -9376,6 +9089,7 @@
       "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
       "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "^1.0.6"
       }
@@ -9696,7 +9410,6 @@
       "integrity": "sha512-Pcfm3eZ+eO4JdZCXthW9tCDT3nF4K+9dmeZ+5X39n+Kqz0DDIABRP5CAEOHRFZk8RGuC2efksTJxrjp8EXCunQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@acemir/cssom": "^0.9.19",
         "@asamuzakjp/dom-selector": "^6.7.3",
@@ -10283,7 +9996,8 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
       "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -11442,7 +11156,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -11722,7 +11435,6 @@
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.27.2.tgz",
       "integrity": "sha512-5SYSgFKSyhCbk6SrXyMpqjb5+MQBgfvEKE/OC+PujcY34sOpqtr+0AZQtPYx5IA6VxynQ7rUPCtKzyovpj9Bpg==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
@@ -12105,7 +11817,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -12115,7 +11826,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -12189,12 +11899,6 @@
         }
       }
     },
-    "node_modules/react-is": {
-      "version": "19.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.0.tgz",
-      "integrity": "sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==",
-      "license": "MIT"
-    },
     "node_modules/react-number-format": {
       "version": "5.4.4",
       "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.4.tgz",
@@ -12368,22 +12072,6 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/react-transition-group": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
-      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.6.0",
-        "react-dom": ">=16.6.0"
-      }
-    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -13627,6 +13315,7 @@
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
       "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -13835,7 +13524,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -14137,7 +13825,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -14219,7 +13906,6 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "napi-postinstall": "^0.3.0"
       },
@@ -14424,7 +14110,6 @@
       "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -14595,7 +14280,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -14609,7 +14293,6 @@
       "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/chai": "^5.2.2",
         "@vitest/expect": "3.2.4",
@@ -15221,7 +14904,8 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
       "integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/zod": {
       "version": "3.25.76",
diff --git a/frontend/package.json b/frontend/package.json
index 914b7bb1f..79e12e5e4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -34,8 +34,6 @@
     "@mantine/dates": "^8.3.1",
     "@mantine/dropzone": "^8.3.1",
     "@mantine/hooks": "^8.3.1",
-    "@mui/icons-material": "^7.3.2",
-    "@mui/material": "^7.3.2",
     "@reactour/tour": "^3.8.0",
     "@stripe/react-stripe-js": "^4.0.2",
     "@stripe/stripe-js": "^7.9.0",
diff --git a/frontend/src/core/components/StorageStatsCard.tsx b/frontend/src/core/components/StorageStatsCard.tsx
index d04fd11ac..ee9ad73ae 100644
--- a/frontend/src/core/components/StorageStatsCard.tsx
+++ b/frontend/src/core/components/StorageStatsCard.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import { Card, Group, Text, Button, Progress } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import StorageIcon from "@mui/icons-material/Storage";
-import DeleteIcon from "@mui/icons-material/Delete";
+import LocalIcon from "@app/components/shared/LocalIcon";
 import { StorageStats } from "@app/services/fileStorage";
 import { formatFileSize } from "@app/utils/fileUtils";
 import { getStorageUsagePercent } from "@app/utils/storageUtils";
@@ -29,7 +28,7 @@ const StorageStatsCard: React.FC<StorageStatsCardProps> = ({
   return (
     <Card withBorder p="sm" mb="md" style={{ width: "90%", maxWidth: 600 }}>
       <Group align="center" gap="md">
-        <StorageIcon />
+        <LocalIcon icon="storage-rounded" width={24} height={24} />
         <div style={{ flex: 1 }}>
           <Text size="sm" fw={500}>
             {t("fileManager.storage", "Storage")}: {formatFileSize(storageStats.used)}
@@ -54,7 +53,7 @@ const StorageStatsCard: React.FC<StorageStatsCardProps> = ({
               color="red"
               size="xs"
               onClick={onClearAll}
-              leftSection={<DeleteIcon style={{ fontSize: 16 }} />}
+              leftSection={<LocalIcon icon="delete-rounded" width={16} height={16} />}
             >
               {t("fileManager.clearAll", "Clear All")}
             </Button>
diff --git a/frontend/src/core/components/fileEditor/AddFileCard.tsx b/frontend/src/core/components/fileEditor/AddFileCard.tsx
index a4a549d82..4c1d88f77 100644
--- a/frontend/src/core/components/fileEditor/AddFileCard.tsx
+++ b/frontend/src/core/components/fileEditor/AddFileCard.tsx
@@ -1,7 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { Button, Group, useMantineColorScheme } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
-import AddIcon from '@mui/icons-material/Add';
 import { useFilesModalContext } from '@app/contexts/FilesModalContext';
 import LocalIcon from '@app/components/shared/LocalIcon';
 import { useLogoAssets } from '@app/hooks/useLogoAssets';
@@ -79,7 +78,7 @@ const AddFileCard = ({
         {/* Header bar - matches FileEditorThumbnail structure */}
         <div className={`${styles.header} ${styles.addFileHeader}`}>
           <div className={styles.logoMark}>
-            <AddIcon sx={{ color: 'inherit', fontSize: '1.5rem' }} />
+            <LocalIcon icon="add-rounded" width="1.5rem" height="1.5rem" style={{ color: 'inherit' }} />
           </div>
           <div className={styles.headerIndex}>
             {t('fileEditor.addFiles', 'Add Files')}
diff --git a/frontend/src/core/components/fileEditor/FileEditorThumbnail.tsx b/frontend/src/core/components/fileEditor/FileEditorThumbnail.tsx
index 32ad10840..f8e46e2d9 100644
--- a/frontend/src/core/components/fileEditor/FileEditorThumbnail.tsx
+++ b/frontend/src/core/components/fileEditor/FileEditorThumbnail.tsx
@@ -5,13 +5,7 @@ import { alert } from '@app/components/toast';
 import { useTranslation } from 'react-i18next';
 import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
 import { useFileActionIcons } from '@app/hooks/useFileActionIcons';
-import CloseIcon from '@mui/icons-material/Close';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import UnarchiveIcon from '@mui/icons-material/Unarchive';
-import PushPinIcon from '@mui/icons-material/PushPin';
-import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
-import LockOpenIcon from '@mui/icons-material/LockOpen';
-import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { StirlingFileStub } from '@app/types/fileContext';
 import { zipFileService } from '@app/services/zipFileService';
@@ -198,7 +192,7 @@ const FileEditorThumbnail = ({
   const hoverActions = useMemo<HoverAction[]>(() => [
     {
       id: 'view',
-      icon: <VisibilityIcon style={{ fontSize: 20 }} />,
+      icon: <LocalIcon icon="visibility-rounded" width={20} height={20} />,
       label: t('openInViewer', 'Open in Viewer'),
       onClick: (e) => {
         e.stopPropagation();
@@ -217,7 +211,7 @@ const FileEditorThumbnail = ({
     },
     {
       id: 'unzip',
-      icon: <UnarchiveIcon style={{ fontSize: 20 }} />,
+      icon: <LocalIcon icon="unarchive-rounded" width={20} height={20} />,
       label: t('fileManager.unzip', 'Unzip'),
       onClick: (e) => {
         e.stopPropagation();
@@ -230,7 +224,7 @@ const FileEditorThumbnail = ({
     },
     {
       id: 'close',
-      icon: <CloseIcon style={{ fontSize: 20 }} />,
+      icon: <LocalIcon icon="close-rounded" width={20} height={20} />,
       label: t('close', 'Close'),
       onClick: (e) => {
         e.stopPropagation();
@@ -325,7 +319,7 @@ const FileEditorThumbnail = ({
                   openEncryptedUnlockPrompt(file.id);
                 }}
               >
-                <LockOpenIcon fontSize="small" />
+                <LocalIcon icon="lock-open-rounded" width={20} height={20} />
               </ActionIcon>
             </Tooltip>
           )}
@@ -349,7 +343,7 @@ const FileEditorThumbnail = ({
                 }
               }}
             >
-              {isPinned ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
+              {isPinned ? <LocalIcon icon="keep-rounded" width={20} height={20} /> : <LocalIcon icon="keep-outline-rounded" width={20} height={20} />}
             </ActionIcon>
           </Tooltip>
         </div>
@@ -420,7 +414,7 @@ const FileEditorThumbnail = ({
 
         {/* Drag handle (span wrapper so we can attach a ref reliably) */}
         <span ref={handleRef} className={styles.dragHandle} aria-hidden>
-          <DragIndicatorIcon fontSize="small" />
+          <LocalIcon icon="drag-indicator" width={20} height={20} />
         </span>
 
         {/* Tool chain display at bottom */}
diff --git a/frontend/src/core/components/fileManager/CompactFileDetails.tsx b/frontend/src/core/components/fileManager/CompactFileDetails.tsx
index 724c3a9a3..6eee0722d 100644
--- a/frontend/src/core/components/fileManager/CompactFileDetails.tsx
+++ b/frontend/src/core/components/fileManager/CompactFileDetails.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import { Stack, Box, Text, Button, ActionIcon, Center } from '@mantine/core';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { useTranslation } from 'react-i18next';
 import { getFileSize } from '@app/utils/fileUtils';
 import { StirlingFileStub } from '@app/types/fileContext';
@@ -62,7 +60,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
               backgroundColor: 'var(--mantine-color-gray-1)',
               borderRadius: 4
             }}>
-              <PictureAsPdfIcon style={{ fontSize: 20, color: 'var(--mantine-color-gray-6)' }} />
+              <LocalIcon icon="picture-as-pdf-rounded" width={20} height={20} style={{ color: 'var(--mantine-color-gray-6)' }} />
             </Center>
           ) : null}
         </Box>
@@ -99,7 +97,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
               onClick={onPrevious}
               disabled={isAnimating}
             >
-              <ChevronLeftIcon style={{ fontSize: 16 }} />
+              <LocalIcon icon="chevron-left-rounded" width={16} height={16} />
             </ActionIcon>
             <ActionIcon
               variant="subtle"
@@ -107,7 +105,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
               onClick={onNext}
               disabled={isAnimating}
             >
-              <ChevronRightIcon style={{ fontSize: 16 }} />
+              <LocalIcon icon="chevron-right-rounded" width={16} height={16} />
             </ActionIcon>
           </Box>
         )}
diff --git a/frontend/src/core/components/fileManager/DragOverlay.tsx b/frontend/src/core/components/fileManager/DragOverlay.tsx
index 976bb940e..3f0c43c2c 100644
--- a/frontend/src/core/components/fileManager/DragOverlay.tsx
+++ b/frontend/src/core/components/fileManager/DragOverlay.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Stack, Text, useMantineTheme, alpha } from '@mantine/core';
-import UploadFileIcon from '@mui/icons-material/UploadFile';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { useTranslation } from 'react-i18next';
 
 interface DragOverlayProps {
@@ -32,7 +32,7 @@ const DragOverlay: React.FC<DragOverlayProps> = ({ isVisible }) => {
       }}
     >
       <Stack align="center" gap="md">
-        <UploadFileIcon style={{ fontSize: '4rem', color: theme.colors.blue[6] }} />
+        <LocalIcon icon="upload-file-rounded" width="4rem" height="4rem" style={{ color: theme.colors.blue[6] }} />
         <Text size="xl" fw={500} c="blue.6">
           {t('fileManager.dropFilesHere', 'Drop files here to upload')}
         </Text>
diff --git a/frontend/src/core/components/fileManager/EmptyFilesState.tsx b/frontend/src/core/components/fileManager/EmptyFilesState.tsx
index 24e79fb12..1f0003162 100644
--- a/frontend/src/core/components/fileManager/EmptyFilesState.tsx
+++ b/frontend/src/core/components/fileManager/EmptyFilesState.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { Button, Group, Text, Stack, useMantineColorScheme } from '@mantine/core';
-import HistoryIcon from '@mui/icons-material/History';
 import { useTranslation } from 'react-i18next';
 import { useFileManagerContext } from '@app/contexts/FileManagerContext';
 import LocalIcon from '@app/components/shared/LocalIcon';
@@ -49,7 +48,7 @@ const EmptyFilesState: React.FC = () => {
       >
         {/* No Recent Files Message */}
         <Stack align="center" gap="sm">
-          <HistoryIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-gray-5)' }} />
+          <LocalIcon icon="history-rounded" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-5)' }} />
           <Text c="dimmed" ta="center" size="lg">
             {t('fileManager.noRecentFiles', 'No recent files')}
           </Text>
diff --git a/frontend/src/core/components/fileManager/FileActions.tsx b/frontend/src/core/components/fileManager/FileActions.tsx
index 8f919e92c..c1c10cd2a 100644
--- a/frontend/src/core/components/fileManager/FileActions.tsx
+++ b/frontend/src/core/components/fileManager/FileActions.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { Group, Text, ActionIcon, Tooltip } from "@mantine/core";
-import SelectAllIcon from "@mui/icons-material/SelectAll";
-import DeleteIcon from "@mui/icons-material/Delete";
+import LocalIcon from "@app/components/shared/LocalIcon";
 import { useTranslation } from "react-i18next";
 import { useFileManagerContext } from "@app/contexts/FileManagerContext";
 import { useFileActionTerminology } from "@app/hooks/useFileActionTerminology";
@@ -64,7 +63,7 @@ const FileActions: React.FC = () => {
             disabled={filteredFiles.length === 0}
             radius="sm"
           >
-            <SelectAllIcon style={{ fontSize: "1rem" }} />
+            <LocalIcon icon="select-all-rounded" width="1rem" height="1rem" />
           </ActionIcon>
         </Tooltip>
       </div>
@@ -95,7 +94,7 @@ const FileActions: React.FC = () => {
             disabled={!hasSelection}
             radius="sm"
           >
-            <DeleteIcon style={{ fontSize: "1rem" }} />
+            <LocalIcon icon="delete-rounded" width="1rem" height="1rem" />
           </ActionIcon>
         </Tooltip>
 
diff --git a/frontend/src/core/components/fileManager/FileListArea.tsx b/frontend/src/core/components/fileManager/FileListArea.tsx
index 1964dad54..5bda25df4 100644
--- a/frontend/src/core/components/fileManager/FileListArea.tsx
+++ b/frontend/src/core/components/fileManager/FileListArea.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Center, ScrollArea, Text, Stack } from '@mantine/core';
-import CloudIcon from '@mui/icons-material/Cloud';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { useTranslation } from 'react-i18next';
 import FileListItem from '@app/components/fileManager/FileListItem';
 import FileHistoryGroup from '@app/components/fileManager/FileHistoryGroup';
@@ -95,7 +95,7 @@ const FileListArea: React.FC<FileListAreaProps> = ({
   return (
     <Center style={{ height: '12.5rem' }}>
       <Stack align="center" gap="sm">
-        <CloudIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-gray-5)' }} />
+        <LocalIcon icon="cloud" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-5)' }} />
         <Text c="dimmed" ta="center">{t('fileManager.googleDriveNotAvailable', 'Google Drive integration coming soon')}</Text>
       </Stack>
     </Center>
diff --git a/frontend/src/core/components/fileManager/FileListItem.tsx b/frontend/src/core/components/fileManager/FileListItem.tsx
index 94da35af5..ba72998ed 100644
--- a/frontend/src/core/components/fileManager/FileListItem.tsx
+++ b/frontend/src/core/components/fileManager/FileListItem.tsx
@@ -1,12 +1,6 @@
 import React, { useState } from 'react';
 import { Group, Box, Text, ActionIcon, Checkbox, Divider, Menu, Badge } from '@mantine/core';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import DeleteIcon from '@mui/icons-material/Delete';
-import DownloadIcon from '@mui/icons-material/Download';
-import HistoryIcon from '@mui/icons-material/History';
-import RestoreIcon from '@mui/icons-material/Restore';
-import UnarchiveIcon from '@mui/icons-material/Unarchive';
-import CloseIcon from '@mui/icons-material/Close';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { useTranslation } from 'react-i18next';
 import { getFileSize, getFileDate } from '@app/utils/fileUtils';
 import { FileId, StirlingFileStub } from '@app/types/fileContext';
@@ -168,7 +162,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
                   pointerEvents: shouldShowHovered ? 'auto' : 'none'
                 }}
               >
-                <MoreVertIcon style={{ fontSize: 20 }} />
+                <LocalIcon icon="more-vert" width={20} height={20} />
               </ActionIcon>
             </Menu.Target>
 
@@ -177,7 +171,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
               {isActive && (
                 <>
                   <Menu.Item
-                    leftSection={<CloseIcon style={{ fontSize: 16 }} />}
+                    leftSection={<LocalIcon icon="close-rounded" width={16} height={16} />}
                     onClick={(e) => {
                       e.stopPropagation();
                       removeFiles([file.id]);
@@ -191,7 +185,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
 
               {onDownload && (
                 <Menu.Item
-                  leftSection={<DownloadIcon style={{ fontSize: 16 }} />}
+                  leftSection={<LocalIcon icon="download-rounded" width={16} height={16} />}
                   onClick={(e) => {
                     e.stopPropagation();
                     onDownload();
@@ -206,7 +200,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
                 <>
                   <Menu.Item
                     leftSection={
-                        <HistoryIcon style={{ fontSize: 16 }} />
+                        <LocalIcon icon="history-rounded" width={16} height={16} />
                     }
                     onClick={(e) => {
                       e.stopPropagation();
@@ -228,7 +222,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
               {isHistoryFile && (
                 <>
                   <Menu.Item
-                    leftSection={<RestoreIcon style={{ fontSize: 16 }} />}
+                    leftSection={<LocalIcon icon="restore-from-trash-rounded" width={16} height={16} />}
                     onClick={(e) => {
                       e.stopPropagation();
                     }}
@@ -243,7 +237,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
               {isZipFile && !isHistoryFile && (
                 <>
                   <Menu.Item
-                    leftSection={<UnarchiveIcon style={{ fontSize: 16 }} />}
+                    leftSection={<LocalIcon icon="unarchive-rounded" width={16} height={16} />}
                     onClick={(e) => {
                       e.stopPropagation();
                       onUnzipFile(file);
@@ -256,7 +250,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
               )}
 
               <Menu.Item
-                leftSection={<DeleteIcon style={{ fontSize: 16 }} />}
+                leftSection={<LocalIcon icon="delete-rounded" width={16} height={16} />}
                 onClick={(e) => {
                   e.stopPropagation();
                   onRemove();
diff --git a/frontend/src/core/components/fileManager/FileSourceButtons.tsx b/frontend/src/core/components/fileManager/FileSourceButtons.tsx
index 8a076a758..da072bb0b 100644
--- a/frontend/src/core/components/fileManager/FileSourceButtons.tsx
+++ b/frontend/src/core/components/fileManager/FileSourceButtons.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Stack, Text, Button, Group } from '@mantine/core';
-import HistoryIcon from '@mui/icons-material/History';
-import CloudIcon from '@mui/icons-material/Cloud';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { useTranslation } from 'react-i18next';
 import { useFileManagerContext } from '@app/contexts/FileManagerContext';
 import { useGoogleDrivePicker } from '@app/hooks/useGoogleDrivePicker';
@@ -51,7 +50,7 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
   const buttons = (
     <>
       <Button
-        leftSection={<HistoryIcon />}
+        leftSection={<LocalIcon icon="history-rounded" width={24} height={24} />}
         justify={horizontal ? "center" : "flex-start"}
         onClick={() => onSourceChange('recent')}
         fullWidth={!horizontal}
@@ -86,7 +85,7 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
       <Button
         variant="subtle"
         color='var(--mantine-color-gray-6)'
-        leftSection={<CloudIcon />}
+        leftSection={<LocalIcon icon="cloud" width={24} height={24} />}
         justify={horizontal ? "center" : "flex-start"}
         onClick={handleGoogleDriveClick}
         fullWidth={!horizontal}
diff --git a/frontend/src/core/components/fileManager/SearchInput.tsx b/frontend/src/core/components/fileManager/SearchInput.tsx
index 2b318604c..cc7a84237 100644
--- a/frontend/src/core/components/fileManager/SearchInput.tsx
+++ b/frontend/src/core/components/fileManager/SearchInput.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextInput } from '@mantine/core';
-import SearchIcon from '@mui/icons-material/Search';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { useTranslation } from 'react-i18next';
 import { useFileManagerContext } from '@app/contexts/FileManagerContext';
 
@@ -15,7 +15,7 @@ const SearchInput: React.FC<SearchInputProps> = ({ style }) => {
   return (
     <TextInput
       placeholder={t('fileManager.searchFiles', 'Search files...')}
-      leftSection={<SearchIcon />}
+      leftSection={<LocalIcon icon="search-rounded" width={24} height={24} />}
       value={searchTerm}
       onChange={(e) => onSearchChange(e.target.value)}
       
diff --git a/frontend/src/core/components/onboarding/InitialOnboardingModal/renderButtons.tsx b/frontend/src/core/components/onboarding/InitialOnboardingModal/renderButtons.tsx
index c50ae7b43..745c4afad 100644
--- a/frontend/src/core/components/onboarding/InitialOnboardingModal/renderButtons.tsx
+++ b/frontend/src/core/components/onboarding/InitialOnboardingModal/renderButtons.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, Group, ActionIcon } from '@mantine/core';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { useTranslation } from 'react-i18next';
 import { ButtonDefinition, type FlowState } from '@app/components/onboarding/onboardingFlowConfig';
 import type { LicenseNotice } from '@app/types/types';
@@ -76,7 +76,7 @@ export function SlideButtons({ slideDefinition, licenseNotice, flowState, onActi
             },
           }}
         >
-          {button.icon === 'chevron-left' && <ChevronLeftIcon fontSize="small" />}
+          {button.icon === 'chevron-left' && <LocalIcon icon="chevron-left-rounded" width={20} height={20} />}
         </ActionIcon>
       );
     }
diff --git a/frontend/src/core/components/onboarding/OnboardingModalSlide.tsx b/frontend/src/core/components/onboarding/OnboardingModalSlide.tsx
index 60a930919..df2243402 100644
--- a/frontend/src/core/components/onboarding/OnboardingModalSlide.tsx
+++ b/frontend/src/core/components/onboarding/OnboardingModalSlide.tsx
@@ -7,8 +7,6 @@
 
 import React from 'react';
 import { Modal, Stack, ActionIcon } from '@mantine/core';
-import DiamondOutlinedIcon from '@mui/icons-material/DiamondOutlined';
-import CloseIcon from '@mui/icons-material/Close';
 
 import type { SlideDefinition, ButtonAction } from '@app/components/onboarding/onboardingFlowConfig';
 import type { OnboardingRuntimeState } from '@app/components/onboarding/orchestrator/onboardingConfig';
@@ -68,7 +66,7 @@ export default function OnboardingModalSlide({
         {slideDefinition.hero.type === 'analytics' && (
           <LocalIcon icon="analytics" width={64} height={64} className={styles.heroIcon} />
         )}
-        {slideDefinition.hero.type === 'diamond' && <DiamondOutlinedIcon sx={{ fontSize: 64, color: '#000000' }} />}
+        {slideDefinition.hero.type === 'diamond' && <LocalIcon icon="diamond-rounded" width={64} height={64} style={{ color: '#000000' }} />}
         {slideDefinition.hero.type === 'logo' && (
           <img src={`${BASE_PATH}/branding/StirlingPDFLogoNoTextLightHC.svg`} alt="Stirling logo" />
         )}
@@ -122,7 +120,7 @@ export default function OnboardingModalSlide({
                 },
               }}
             >
-              <CloseIcon fontSize="small" />
+              <LocalIcon icon="close-rounded" width={20} height={20} />
             </ActionIcon>
           )}
           <div className={styles.heroLogo} key={`logo-${slideContent.key}`}>
diff --git a/frontend/src/core/components/onboarding/OnboardingTour.tsx b/frontend/src/core/components/onboarding/OnboardingTour.tsx
index 85df0a9fd..11cbb81cb 100644
--- a/frontend/src/core/components/onboarding/OnboardingTour.tsx
+++ b/frontend/src/core/components/onboarding/OnboardingTour.tsx
@@ -9,9 +9,7 @@
 import React from 'react';
 import { TourProvider, useTour, type StepType } from '@reactour/tour';
 import { CloseButton, ActionIcon } from '@mantine/core';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import CheckIcon from '@mui/icons-material/Check';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import type { TFunction } from 'i18next';
 import i18n from '@app/i18n';
 
@@ -121,7 +119,7 @@ export default function OnboardingTour({
       prevButton={() => null}
       nextButton={({ currentStep: tourCurrentStep, stepsLength, setCurrentStep, setIsOpen }) => {
         const isLast = tourCurrentStep === stepsLength - 1;
-        const ArrowIcon = isRTL ? ArrowBackIcon : ArrowForwardIcon;
+        const arrowIcon = isRTL ? 'arrow-back-rounded' : 'arrow-forward-rounded';
         return (
           <ActionIcon
             onClick={() => onAdvance({ setCurrentStep, currentStep: tourCurrentStep, steps: tourSteps, setIsOpen })}
@@ -129,7 +127,7 @@ export default function OnboardingTour({
             size="lg"
             aria-label={isLast ? t('onboarding.finish', 'Finish') : t('onboarding.next', 'Next')}
           >
-            {isLast ? <CheckIcon /> : <ArrowIcon />}
+            {isLast ? <LocalIcon icon="check-rounded" width={24} height={24} /> : <LocalIcon icon={arrowIcon} width={24} height={24} />}
           </ActionIcon>
         );
       }}
diff --git a/frontend/src/core/components/onboarding/slides/AnalyticsChoiceSlide.tsx b/frontend/src/core/components/onboarding/slides/AnalyticsChoiceSlide.tsx
index c04009ca4..f7daa934b 100644
--- a/frontend/src/core/components/onboarding/slides/AnalyticsChoiceSlide.tsx
+++ b/frontend/src/core/components/onboarding/slides/AnalyticsChoiceSlide.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Trans } from 'react-i18next';
 import { Button } from '@mantine/core';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import i18n from '@app/i18n';
 import { SlideConfig } from '@app/types/types';
 import { UNIFIED_CIRCLE_CONFIG } from '@app/components/onboarding/slides/unifiedBackgroundConfig';
@@ -34,7 +34,7 @@ export default function AnalyticsChoiceSlide({ analyticsError }: AnalyticsChoice
             variant="default"
             size="sm"
             onClick={() => window.open('https://docs.stirlingpdf.com/analytics-telemetry/', '_blank')}
-            rightSection={<OpenInNewIcon style={{ fontSize: 16 }} />}
+            rightSection={<LocalIcon icon="open-in-new-rounded" width={16} height={16} />}
           >
             {i18n.t('analytics.learnMore', 'Learn more about our analytics')}
           </Button>
diff --git a/frontend/src/core/components/onboarding/slides/DesktopInstallTitle.tsx b/frontend/src/core/components/onboarding/slides/DesktopInstallTitle.tsx
index ac42b518b..f8462ca3d 100644
--- a/frontend/src/core/components/onboarding/slides/DesktopInstallTitle.tsx
+++ b/frontend/src/core/components/onboarding/slides/DesktopInstallTitle.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Menu, ActionIcon } from '@mantine/core';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import LocalIcon from '@app/components/shared/LocalIcon';
 
 export interface OSOption {
   label: string;
@@ -62,7 +62,7 @@ export const DesktopInstallTitle: React.FC<DesktopInstallTitleProps> = ({
               padding: 0
             }}
           >
-            <ExpandMoreIcon fontSize="small" />
+            <LocalIcon icon="expand-more-rounded" width={20} height={20} />
           </ActionIcon>
         </Menu.Target>
         <Menu.Dropdown>
diff --git a/frontend/src/core/components/pageEditor/FileThumbnail.tsx b/frontend/src/core/components/pageEditor/FileThumbnail.tsx
index fffba18b4..a1e7d7c92 100644
--- a/frontend/src/core/components/pageEditor/FileThumbnail.tsx
+++ b/frontend/src/core/components/pageEditor/FileThumbnail.tsx
@@ -1,11 +1,7 @@
 import React, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
 import { ActionIcon, CheckboxIndicator } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-import PushPinIcon from '@mui/icons-material/PushPin';
-import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
-import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 import styles from '@app/components/pageEditor/PageEditor.module.css';
@@ -248,7 +244,7 @@ const FileThumbnail = ({
             setShowActions((v) => !v);
           }}
         >
-          <MoreVertIcon fontSize="small" />
+          <LocalIcon icon="more-vert" width={20} height={20} />
         </ActionIcon>
       </div>
 
@@ -274,7 +270,7 @@ const FileThumbnail = ({
               setShowActions(false);
             }}
           >
-            {isPinned ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
+            {isPinned ? <LocalIcon icon="keep-rounded" width={20} height={20} /> : <LocalIcon icon="keep-outline-rounded" width={20} height={20} />}
             <span>{isPinned ? t('unpin', 'Unpin') : t('pin', 'Pin')}</span>
           </button>
 
@@ -296,7 +292,7 @@ const FileThumbnail = ({
               setShowActions(false);
             }}
           >
-            <DeleteOutlineIcon fontSize="small" />
+            <LocalIcon icon="delete-outline-rounded" width={20} height={20} />
             <span>{t('delete', 'Delete')}</span>
           </button>
         </div>
@@ -351,13 +347,13 @@ const FileThumbnail = ({
         {/* Pin indicator (bottom-left) */}
         {isPinned && (
           <span className={styles.pinIndicator} aria-hidden>
-            <PushPinIcon fontSize="small" />
+            <LocalIcon icon="keep-rounded" width={20} height={20} />
           </span>
         )}
 
         {/* Drag handle (span wrapper so we can attach a ref reliably) */}
         <span ref={handleRef} className={styles.dragHandle} aria-hidden>
-          <DragIndicatorIcon fontSize="small" />
+          <LocalIcon icon="drag-indicator" width={20} height={20} />
         </span>
       </div>
     </div>
diff --git a/frontend/src/core/components/pageEditor/PageEditorControls.tsx b/frontend/src/core/components/pageEditor/PageEditorControls.tsx
index 7e16064a9..c7ce89d0e 100644
--- a/frontend/src/core/components/pageEditor/PageEditorControls.tsx
+++ b/frontend/src/core/components/pageEditor/PageEditorControls.tsx
@@ -2,13 +2,7 @@ import {
   Tooltip,
   ActionIcon,
 } from "@mantine/core";
-import UndoIcon from "@mui/icons-material/Undo";
-import RedoIcon from "@mui/icons-material/Redo";
-import ContentCutIcon from "@mui/icons-material/ContentCut";
-import RotateLeftIcon from "@mui/icons-material/RotateLeft";
-import RotateRightIcon from "@mui/icons-material/RotateRight";
-import DeleteIcon from "@mui/icons-material/Delete";
-import InsertPageBreakIcon from "@mui/icons-material/InsertPageBreak";
+import LocalIcon from "@app/components/shared/LocalIcon";
 
 interface PageEditorControlsProps {
   // Close/Reset functions
@@ -139,12 +133,12 @@ const PageEditorControls = ({
         {/* Undo/Redo */}
         <Tooltip label="Undo">
           <ActionIcon onClick={onUndo} disabled={!canUndo} variant="subtle" style={{ color: canUndo ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }} radius="md" size="lg">
-            <UndoIcon />
+            <LocalIcon icon="undo-rounded" width={24} height={24} />
           </ActionIcon>
         </Tooltip>
         <Tooltip label="Redo">
           <ActionIcon onClick={onRedo} disabled={!canRedo} variant="subtle" style={{ color: canRedo ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }} radius="md" size="lg">
-            <RedoIcon />
+            <LocalIcon icon="redo-rounded" width={24} height={24} />
           </ActionIcon>
         </Tooltip>
 
@@ -160,7 +154,7 @@ const PageEditorControls = ({
             radius="md"
             size="lg"
           >
-            <RotateLeftIcon />
+            <LocalIcon icon="rotate-left-rounded" width={24} height={24} />
           </ActionIcon>
         </Tooltip>
         <Tooltip label="Rotate Selected Right">
@@ -172,7 +166,7 @@ const PageEditorControls = ({
             radius="md"
             size="lg"
           >
-            <RotateRightIcon />
+            <LocalIcon icon="rotate-right-rounded" width={24} height={24} />
           </ActionIcon>
         </Tooltip>
         <Tooltip label="Delete Selected">
@@ -184,7 +178,7 @@ const PageEditorControls = ({
             radius="md"
             size="lg"
           >
-            <DeleteIcon />
+            <LocalIcon icon="delete-rounded" width={24} height={24} />
           </ActionIcon>
         </Tooltip>
         <Tooltip label={getSplitTooltip()}>
@@ -196,7 +190,7 @@ const PageEditorControls = ({
             radius="md"
             size="lg"
           >
-            <ContentCutIcon />
+            <LocalIcon icon="content-cut-rounded" width={24} height={24} />
           </ActionIcon>
         </Tooltip>
         <Tooltip label={getPageBreakTooltip()}>
@@ -208,7 +202,7 @@ const PageEditorControls = ({
             radius="md"
             size="lg"
           >
-            <InsertPageBreakIcon />
+            <LocalIcon icon="insert-page-break-rounded" width={24} height={24} />
           </ActionIcon>
         </Tooltip>
       </div>
diff --git a/frontend/src/core/components/pageEditor/PageThumbnail.tsx b/frontend/src/core/components/pageEditor/PageThumbnail.tsx
index 2cc7d38fa..66c92aa63 100644
--- a/frontend/src/core/components/pageEditor/PageThumbnail.tsx
+++ b/frontend/src/core/components/pageEditor/PageThumbnail.tsx
@@ -1,13 +1,7 @@
 import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react';
 import { Text, Checkbox } from '@mantine/core';
 import { useIsMobile } from '@app/hooks/useIsMobile';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import RotateLeftIcon from '@mui/icons-material/RotateLeft';
-import RotateRightIcon from '@mui/icons-material/RotateRight';
-import DeleteIcon from '@mui/icons-material/Delete';
-import ContentCutIcon from '@mui/icons-material/ContentCut';
-import AddIcon from '@mui/icons-material/Add';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { PDFPage, PDFDocument } from '@app/types/pageEditor';
 import { useThumbnailGeneration } from '@app/hooks/useThumbnailGeneration';
 import { useFilesModalContext } from '@app/contexts/FilesModalContext';
@@ -281,7 +275,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
   const hoverActions = useMemo<HoverAction[]>(() => [
     {
       id: 'move-left',
-      icon: <ArrowBackIcon style={{ fontSize: 20 }} />,
+      icon: <LocalIcon icon="arrow-back-rounded" width={20} height={20} />,
       label: 'Move Left',
       onClick: (e) => {
         e.stopPropagation();
@@ -296,7 +290,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
     },
     {
       id: 'move-right',
-      icon: <ArrowForwardIcon style={{ fontSize: 20 }} />,
+      icon: <LocalIcon icon="arrow-forward-rounded" width={20} height={20} />,
       label: 'Move Right',
       onClick: (e) => {
         e.stopPropagation();
@@ -314,33 +308,33 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
     },
     {
       id: 'rotate-left',
-      icon: <RotateLeftIcon style={{ fontSize: 20 }} />,
+      icon: <LocalIcon icon="rotate-left-rounded" width={20} height={20} />,
       label: 'Rotate Left',
       onClick: handleRotateLeft,
     },
     {
       id: 'rotate-right',
-      icon: <RotateRightIcon style={{ fontSize: 20 }} />,
+      icon: <LocalIcon icon="rotate-right-rounded" width={20} height={20} />,
       label: 'Rotate Right',
       onClick: handleRotateRight,
     },
     {
       id: 'delete',
-      icon: <DeleteIcon style={{ fontSize: 20 }} />,
+      icon: <LocalIcon icon="delete-rounded" width={20} height={20} />,
       label: 'Delete Page',
       onClick: handleDelete,
       color: 'red',
     },
     {
       id: 'split',
-      icon: <ContentCutIcon style={{ fontSize: 20 }} />,
+      icon: <LocalIcon icon="content-cut-rounded" width={20} height={20} />,
       label: 'Split After',
       onClick: handleSplit,
       hidden: pageIndex >= totalPages - 1,
     },
     {
       id: 'insert',
-      icon: <AddIcon style={{ fontSize: 20 }} />,
+      icon: <LocalIcon icon="add-rounded" width={20} height={20} />,
       label: 'Insert File After',
       onClick: handleInsertFileAfter,
     }
diff --git a/frontend/src/core/components/shared/AllToolsNavButton.tsx b/frontend/src/core/components/shared/AllToolsNavButton.tsx
index 3ba3bb70b..7bd14be4a 100644
--- a/frontend/src/core/components/shared/AllToolsNavButton.tsx
+++ b/frontend/src/core/components/shared/AllToolsNavButton.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import AppsIcon from '@mui/icons-material/AppsRounded';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
 import { useNavigationState, useNavigationActions } from '@app/contexts/NavigationContext';
 import { useSidebarNavigation } from '@app/hooks/useSidebarNavigation';
@@ -54,7 +54,7 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({
   return (
     <div className="mt-4 mb-2">
       <QuickAccessButton
-        icon={<AppsIcon sx={{ fontSize: isActive ? '1.875rem' : '1.5rem' }} />}
+        icon={<LocalIcon icon="apps" width={isActive ? '1.875rem' : '1.5rem'} height={isActive ? '1.875rem' : '1.5rem'} />}
         label={t("quickAccess.allTools", "Tools")}
         isActive={isActive}
         onClick={handleNavClick}
diff --git a/frontend/src/core/components/shared/DismissAllErrorsButton.tsx b/frontend/src/core/components/shared/DismissAllErrorsButton.tsx
index 43333aff1..b1821b0b7 100644
--- a/frontend/src/core/components/shared/DismissAllErrorsButton.tsx
+++ b/frontend/src/core/components/shared/DismissAllErrorsButton.tsx
@@ -3,7 +3,7 @@ import { Button, Group } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useFileState } from '@app/contexts/FileContext';
 import { useFileActions } from '@app/contexts/file/fileHooks';
-import CloseIcon from '@mui/icons-material/Close';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { Z_INDEX_TOAST } from '@app/styles/zIndex';
 
 interface DismissAllErrorsButtonProps {
@@ -33,7 +33,7 @@ const DismissAllErrorsButton: React.FC<DismissAllErrorsButtonProps> = ({ classNa
         variant="light"
         color="red"
         size="sm"
-        leftSection={<CloseIcon fontSize="small" />}
+        leftSection={<LocalIcon icon="close-rounded" width={20} height={20} />}
         onClick={handleDismissAllErrors}
         style={{
           position: 'absolute',
diff --git a/frontend/src/core/components/shared/DropdownListWithFooter.tsx b/frontend/src/core/components/shared/DropdownListWithFooter.tsx
index 368b2255e..c679ba82d 100644
--- a/frontend/src/core/components/shared/DropdownListWithFooter.tsx
+++ b/frontend/src/core/components/shared/DropdownListWithFooter.tsx
@@ -1,7 +1,6 @@
 import React, { ReactNode, useState, useMemo } from 'react';
 import { Stack, Text, Popover, Box, Checkbox, Group, TextInput } from '@mantine/core';
-import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
-import SearchIcon from '@mui/icons-material/Search';
+import LocalIcon from '@app/components/shared/LocalIcon';
 
 export interface DropdownItem {
   value: string;
@@ -133,7 +132,7 @@ const DropdownListWithFooter: React.FC<DropdownListWithFooterProps> = ({
             <Text size="sm" style={{ flex: 1 }}>
               {getDisplayText()}
             </Text>
-            <UnfoldMoreIcon style={{ 
+            <LocalIcon icon="unfold-more-rounded" width={18} height={18} style={{ 
               fontSize: '1rem', 
               color: 'light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-2))' 
             }} />
@@ -160,7 +159,7 @@ const DropdownListWithFooter: React.FC<DropdownListWithFooterProps> = ({
                   placeholder="Search..."
                   value={searchTerm}
                   onChange={handleSearchChange}
-                  leftSection={<SearchIcon style={{ fontSize: '1rem' }} />}
+                  leftSection={<LocalIcon icon="search-rounded" width="1rem" height="1rem" />}
                   size="sm"
                   style={{ width: '100%' }}
                 />
diff --git a/frontend/src/core/components/shared/FileCard.tsx b/frontend/src/core/components/shared/FileCard.tsx
index 6eff26db9..d898c00d7 100644
--- a/frontend/src/core/components/shared/FileCard.tsx
+++ b/frontend/src/core/components/shared/FileCard.tsx
@@ -1,10 +1,7 @@
 import { useState } from "react";
 import { Card, Stack, Text, Group, Badge, Button, Box, Image, ThemeIcon, ActionIcon, Tooltip } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
-import StorageIcon from "@mui/icons-material/Storage";
-import VisibilityIcon from "@mui/icons-material/Visibility";
-import EditIcon from "@mui/icons-material/Edit";
+import LocalIcon from "@app/components/shared/LocalIcon";
 
 import { StirlingFileStub } from "@app/types/fileContext";
 import { getFileSize, getFileDate } from "@app/utils/fileUtils";
@@ -95,7 +92,7 @@ const FileCard = ({ file, fileStub, onRemove, onDoubleClick, onView, onEdit, isS
                       onView();
                     }}
                   >
-                    <VisibilityIcon style={{ fontSize: 16 }} />
+                    <LocalIcon icon="visibility-rounded" width={16} height={16} />
                   </ActionIcon>
                 </Tooltip>
               )}
@@ -110,7 +107,7 @@ const FileCard = ({ file, fileStub, onRemove, onDoubleClick, onView, onEdit, isS
                       onEdit();
                     }}
                   >
-                    <EditIcon style={{ fontSize: 16 }} />
+                    <LocalIcon icon="edit-rounded" width={16} height={16} />
                   </ActionIcon>
                 </Tooltip>
               )}
@@ -157,7 +154,7 @@ const FileCard = ({ file, fileStub, onRemove, onDoubleClick, onView, onEdit, isS
                 radius="sm"
                 style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
               >
-                <PictureAsPdfIcon style={{ fontSize: 40 }} />
+                <LocalIcon icon="picture-as-pdf-rounded" width={40} height={40} />
               </ThemeIcon>
               {file.size > 100 * 1024 * 1024 && (
                 <Text size="xs" c="dimmed" mt={4}>Large File</Text>
@@ -182,7 +179,7 @@ const FileCard = ({ file, fileStub, onRemove, onDoubleClick, onView, onEdit, isS
               color="green"
               variant="light"
               size="sm"
-              leftSection={<StorageIcon style={{ fontSize: 12 }} />}
+              leftSection={<LocalIcon icon="storage-rounded" width={12} height={12} />}
             >
               DB
             </Badge>
diff --git a/frontend/src/core/components/shared/FileDropdownMenu.tsx b/frontend/src/core/components/shared/FileDropdownMenu.tsx
index 24583ea77..08eb8ec2e 100644
--- a/frontend/src/core/components/shared/FileDropdownMenu.tsx
+++ b/frontend/src/core/components/shared/FileDropdownMenu.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Menu, Loader, Group, Text } from '@mantine/core';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import FitText from '@app/components/shared/FitText';
 import { PrivateContent } from '@app/components/shared/PrivateContent';
 
@@ -30,12 +29,12 @@ export const FileDropdownMenu: React.FC<FileDropdownMenuProps> = ({
           {switchingTo === "viewer" ? (
             <Loader size="xs" />
           ) : (
-            <VisibilityIcon fontSize="small" />
+            <LocalIcon icon="visibility-rounded" width={20} height={20} />
           )}
           <PrivateContent>
             <FitText text={displayName} fontSize={14} minimumFontScale={0.6} />
           </PrivateContent>
-          <KeyboardArrowDownIcon fontSize="small" />
+          <LocalIcon icon="keyboard-arrow-down-rounded" width={20} height={20} />
         </div>
       </Menu.Target>
       <Menu.Dropdown style={{
diff --git a/frontend/src/core/components/shared/FileGrid.tsx b/frontend/src/core/components/shared/FileGrid.tsx
index 5bd31008d..8b0134fa5 100644
--- a/frontend/src/core/components/shared/FileGrid.tsx
+++ b/frontend/src/core/components/shared/FileGrid.tsx
@@ -1,8 +1,7 @@
 import { useState } from "react";
 import { Box, Flex, Group, Text, Button, TextInput, Select } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import SearchIcon from "@mui/icons-material/Search";
-import SortIcon from "@mui/icons-material/Sort";
+import LocalIcon from "@app/components/shared/LocalIcon";
 import FileCard from "@app/components/shared/FileCard";
 import { StirlingFileStub } from "@app/types/fileContext";
 import { FileId } from "@app/types/file";
@@ -81,7 +80,7 @@ const FileGrid = ({
             {showSearch && (
               <TextInput
                 placeholder={t("fileManager.searchFiles", "Search files...")}
-                leftSection={<SearchIcon fontSize="small" />}
+                leftSection={<LocalIcon icon="search-rounded" width={20} height={20} />}
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.currentTarget.value)}
                 style={{ flexGrow: 1, maxWidth: 300, minWidth: 200 }}
@@ -97,7 +96,7 @@ const FileGrid = ({
                 ]}
                 value={sortBy}
                 onChange={(value) => setSortBy(value as SortOption)}
-                leftSection={<SortIcon fontSize="small" />}
+                leftSection={<LocalIcon icon="sort-rounded" width={20} height={20} />}
                 style={{ minWidth: 150 }}
               />
             )}
diff --git a/frontend/src/core/components/shared/FilePickerModal.tsx b/frontend/src/core/components/shared/FilePickerModal.tsx
index 3f5e78b34..a1c52c633 100644
--- a/frontend/src/core/components/shared/FilePickerModal.tsx
+++ b/frontend/src/core/components/shared/FilePickerModal.tsx
@@ -13,7 +13,7 @@ import {
   ThemeIcon,
   SimpleGrid
 } from '@mantine/core';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { useTranslation } from 'react-i18next';
 import { FileId } from '@app/types/file';
 import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
@@ -213,7 +213,7 @@ const FilePickerModal = ({
                               color="red"
                               size={40}
                             >
-                              <PictureAsPdfIcon style={{ fontSize: 24 }} />
+                              <LocalIcon icon="picture-as-pdf-rounded" width={24} height={24} />
                             </ThemeIcon>
                           )}
                         </Box>
diff --git a/frontend/src/core/components/shared/FilePreview.tsx b/frontend/src/core/components/shared/FilePreview.tsx
index 4377c851c..2c8c57553 100644
--- a/frontend/src/core/components/shared/FilePreview.tsx
+++ b/frontend/src/core/components/shared/FilePreview.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Center } from '@mantine/core';
-import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { StirlingFileStub } from '@app/types/fileContext';
 import DocumentThumbnail from '@app/components/shared/filePreview/DocumentThumbnail';
 import DocumentStack from '@app/components/shared/filePreview/DocumentStack';
@@ -43,9 +43,11 @@ const FilePreview: React.FC<FilePreviewProps> = ({
     return (
       <Box style={{ width: '100%', height: '100%' }}>
         <Center style={{ width: '100%', height: '100%' }}>
-          <InsertDriveFileIcon 
-            style={{ 
-              fontSize: '4rem', 
+          <LocalIcon
+            icon="article-rounded"
+            width="4rem"
+            height="4rem"
+            style={{
               color: 'var(--mantine-color-gray-4)',
               opacity: 0.6 
             }} 
diff --git a/frontend/src/core/components/shared/LocalIcon.test.ts b/frontend/src/core/components/shared/LocalIcon.test.ts
new file mode 100644
index 000000000..76a3808ae
--- /dev/null
+++ b/frontend/src/core/components/shared/LocalIcon.test.ts
@@ -0,0 +1,80 @@
+/**
+ * Test to validate that all LocalIcon usages reference valid icons
+ * in the Material Symbols bundle.
+ *
+ * This prevents missing icon errors by checking at test time rather than runtime.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { execSync } from 'child_process';
+import * as fs from 'fs';
+import * as path from 'path';
+
+describe('LocalIcon Validation', () => {
+  it('should have all LocalIcon icons available in the icon bundle', () => {
+    // Load the generated icon bundle
+    const iconBundlePath = path.join(__dirname, '../../../assets/material-symbols-icons.json');
+    const iconBundle = JSON.parse(fs.readFileSync(iconBundlePath, 'utf-8'));
+    const availableIcons = new Set(Object.keys(iconBundle.icons || iconBundle));
+
+    // Use grep to find all LocalIcon component usages in the codebase
+    const srcPath = path.join(__dirname, '../../../');
+
+    let grepOutput: string;
+    try {
+      grepOutput = execSync(
+        `grep -r 'LocalIcon' --include="*.tsx" --include="*.ts" ${srcPath} | grep 'icon='`,
+        { encoding: 'utf-8' }
+      );
+    } catch (error: any) {
+      // grep returns exit code 1 if no matches, but we want to continue
+      if (error.status === 1) {
+        grepOutput = '';
+      } else {
+        throw error;
+      }
+    }
+
+    // Extract all icon names from LocalIcon usages
+    // Match: icon="icon-name" (string literals only, not variables)
+    const iconMatches = grepOutput.matchAll(/icon="([a-z0-9-]+)"/g);
+    const usedIcons = new Set<string>();
+
+    for (const match of iconMatches) {
+      // Only add valid icon names (lowercase with hyphens, minimum 3 chars, exclude "icon" itself)
+      const iconName = match[1];
+      if (/^[a-z0-9-]+$/.test(iconName) && iconName.length > 2 && iconName !== 'icon') {
+        usedIcons.add(iconName);
+      }
+    }
+
+    // Find icons that are used but not available
+    const missingIcons: string[] = [];
+    for (const icon of usedIcons) {
+      if (!availableIcons.has(icon)) {
+        missingIcons.push(icon);
+      }
+    }
+
+    // Fail the test if there are missing icons
+    if (missingIcons.length > 0) {
+      const errorMessage = [
+        '\n❌ Found LocalIcon usages with missing icons:',
+        '',
+        ...missingIcons.map(icon => `  - "${icon}"`),
+        '',
+        'These icons do not exist in the Material Symbols icon bundle.',
+        'Please use the icon generation script to see available alternatives:',
+        '  npm run generate-icons:verbose',
+        '',
+        'Or search Material Symbols at: https://fonts.google.com/icons',
+      ].join('\n');
+
+      throw new Error(errorMessage);
+    }
+
+    // Success message
+    expect(missingIcons).toHaveLength(0);
+    console.log(`✅ Validated ${usedIcons.size} unique icon(s) - all present in bundle`);
+  });
+});
diff --git a/frontend/src/core/components/shared/NavigationWarningModal.tsx b/frontend/src/core/components/shared/NavigationWarningModal.tsx
index b8803f176..1dd382ac4 100644
--- a/frontend/src/core/components/shared/NavigationWarningModal.tsx
+++ b/frontend/src/core/components/shared/NavigationWarningModal.tsx
@@ -1,9 +1,7 @@
 import { Modal, Text, Button, Group, Stack } from "@mantine/core";
 import { useNavigationGuard } from "@app/contexts/NavigationContext";
 import { useTranslation } from "react-i18next";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+import LocalIcon from "@app/components/shared/LocalIcon";
 
 interface NavigationWarningModalProps {
   onApplyAndContinue?: () => Promise<void>;
@@ -70,16 +68,16 @@ const NavigationWarningModal = ({ onApplyAndContinue, onExportAndContinue }: Nav
         {/* Desktop layout: 2 groups side by side */}
         <Group justify="space-between" gap="xl" visibleFrom="md">
           <Group gap="sm">
-            <Button variant="light" color="var(--mantine-color-gray-8)" onClick={handleKeepWorking} w={BUTTON_WIDTH} leftSection={<ArrowBackIcon fontSize="small" />}>
+            <Button variant="light" color="var(--mantine-color-gray-8)" onClick={handleKeepWorking} w={BUTTON_WIDTH} leftSection={<LocalIcon icon="arrow-back-rounded" width={20} height={20} />}>
               {t("keepWorking", "Keep Working")}
             </Button>
           </Group>
           <Group gap="sm">
-            <Button variant="filled" color="var(--mantine-color-red-9)" onClick={handleDiscardChanges} w={BUTTON_WIDTH} leftSection={<DeleteOutlineIcon fontSize="small" />}>
+            <Button variant="filled" color="var(--mantine-color-red-9)" onClick={handleDiscardChanges} w={BUTTON_WIDTH} leftSection={<LocalIcon icon="delete-outline-rounded" width={20} height={20} />}>
               {t("discardChanges", "Discard Changes")}
             </Button>
             {onApplyAndContinue && (
-              <Button variant="filled"  onClick={handleApplyAndContinue} w={BUTTON_WIDTH} leftSection={<CheckCircleOutlineIcon fontSize="small" />}>
+              <Button variant="filled"  onClick={handleApplyAndContinue} w={BUTTON_WIDTH} leftSection={<LocalIcon icon="check-circle-outline-rounded" width={20} height={20} />}>
                 {t("applyAndContinue", "Apply & Leave")}
               </Button>
             )}
@@ -88,14 +86,14 @@ const NavigationWarningModal = ({ onApplyAndContinue, onExportAndContinue }: Nav
 
         {/* Mobile layout: centered stack of 4 buttons */}
         <Stack align="center" gap="sm" hiddenFrom="md">
-           <Button variant="light" color="var(--mantine-color-gray-8)"  onClick={handleKeepWorking} w={BUTTON_WIDTH} leftSection={<ArrowBackIcon fontSize="small" />}>
+           <Button variant="light" color="var(--mantine-color-gray-8)"  onClick={handleKeepWorking} w={BUTTON_WIDTH} leftSection={<LocalIcon icon="arrow-back-rounded" width={20} height={20} />}>
             {t("keepWorking", "Keep Working")}
           </Button>
-          <Button variant="filled" color="var(--mantine-color-red-9)" onClick={handleDiscardChanges} w={BUTTON_WIDTH} leftSection={<DeleteOutlineIcon fontSize="small" />}>
+          <Button variant="filled" color="var(--mantine-color-red-9)" onClick={handleDiscardChanges} w={BUTTON_WIDTH} leftSection={<LocalIcon icon="delete-outline-rounded" width={20} height={20} />}>
             {t("discardChanges", "Discard Changes")}
           </Button>
           {onApplyAndContinue && (
-            <Button variant="filled" onClick={handleApplyAndContinue} w={BUTTON_WIDTH} leftSection={<CheckCircleOutlineIcon fontSize="small" />}>
+            <Button variant="filled" onClick={handleApplyAndContinue} w={BUTTON_WIDTH} leftSection={<LocalIcon icon="check-circle-outline-rounded" width={20} height={20} />}>
               {t("applyAndContinue", "Apply & Leave")}
             </Button>
           )}
diff --git a/frontend/src/core/components/shared/PageEditorFileDropdown.tsx b/frontend/src/core/components/shared/PageEditorFileDropdown.tsx
index 161f390df..fa85f3ba7 100644
--- a/frontend/src/core/components/shared/PageEditorFileDropdown.tsx
+++ b/frontend/src/core/components/shared/PageEditorFileDropdown.tsx
@@ -1,9 +1,6 @@
 import React from 'react';
 import { Menu, Loader, Group, Text, Checkbox } from '@mantine/core';
-import { LocalIcon } from '@app/components/shared/LocalIcon';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
-import AddIcon from '@mui/icons-material/Add';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import FitText from '@app/components/shared/FitText';
 import { getFileColorWithOpacity } from '@app/components/pageEditor/fileColors';
 import { useFilesModalContext } from '@app/contexts/FilesModalContext';
@@ -117,7 +114,7 @@ const FileMenuItem: React.FC<FileMenuItemProps> = ({
               color: 'var(--mantine-color-dimmed)',
             }}
           >
-            <DragIndicatorIcon fontSize="small" />
+            <LocalIcon icon="drag-indicator" width={20} height={20} />
           </div>
           <Checkbox
             checked={file.isSelected}
@@ -174,7 +171,7 @@ export const PageEditorFileDropdown: React.FC<PageEditorFileDropdownProps> = ({
             <LocalIcon icon="dashboard-customize-rounded" width="1.4rem" height="1.4rem" />
           )}
           <span className="ph-no-capture">{selectedCount}/{totalCount} files selected</span>
-          <KeyboardArrowDownIcon fontSize="small" />
+          <LocalIcon icon="keyboard-arrow-down-rounded" width={20} height={20} />
         </div>
       </Menu.Target>
       <Menu.Dropdown className="ph-no-capture" style={{
@@ -222,7 +219,7 @@ export const PageEditorFileDropdown: React.FC<PageEditorFileDropdownProps> = ({
           }}
         >
           <Group gap="xs" style={{ width: '100%' }}>
-            <AddIcon fontSize="small" style={{ color: 'var(--mantine-color-text)' }} />
+            <LocalIcon icon="add-rounded" width={20} height={20} style={{ color: 'var(--mantine-color-text)' }} />
             <Text size="sm" fw={500} style={{ color: 'var(--mantine-color-text)' }} className="ph-no-capture">
               Add File
             </Text>
diff --git a/frontend/src/core/components/shared/RightRail.tsx b/frontend/src/core/components/shared/RightRail.tsx
index b04e07f67..5ae2c3a91 100644
--- a/frontend/src/core/components/shared/RightRail.tsx
+++ b/frontend/src/core/components/shared/RightRail.tsx
@@ -16,8 +16,6 @@ import { ViewerContext } from '@app/contexts/ViewerContext';
 import { useSignature } from '@app/contexts/SignatureContext';
 import LocalIcon from '@app/components/shared/LocalIcon';
 import { RightRailFooterExtensions } from '@app/components/rightRail/RightRailFooterExtensions';
-import DarkModeIcon from '@mui/icons-material/DarkMode';
-import LightModeIcon from '@mui/icons-material/LightMode';
 
 import { useSidebarContext } from '@app/contexts/SidebarContext';
 import { RightRailButtonConfig, RightRailRenderContext, RightRailSection } from '@app/types/rightRail';
@@ -206,9 +204,9 @@ export default function RightRail() {
               onClick={toggleTheme}
             >
               {themeMode === 'dark' ? (
-                <LightModeIcon sx={{ fontSize: '1.5rem' }} />
+                <LocalIcon icon="light-mode-rounded" width="1.5rem" height="1.5rem" />
               ) : (
-                <DarkModeIcon sx={{ fontSize: '1.5rem' }} />
+                <LocalIcon icon="dark-mode-rounded" width="1.5rem" height="1.5rem" />
               )}
             </ActionIcon>,
             t('rightRail.toggleTheme', 'Toggle Theme'),
diff --git a/frontend/src/core/components/shared/TopControls.tsx b/frontend/src/core/components/shared/TopControls.tsx
index f414cc91a..6e08e9102 100644
--- a/frontend/src/core/components/shared/TopControls.tsx
+++ b/frontend/src/core/components/shared/TopControls.tsx
@@ -2,10 +2,7 @@ import React, { useState, useCallback, useMemo } from "react";
 import { SegmentedControl, Loader } from "@mantine/core";
 import { useRainbowThemeContext } from '@app/components/shared/RainbowThemeProvider';
 import rainbowStyles from '@app/styles/rainbow.module.css';
-import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
-import GridViewIcon from "@mui/icons-material/GridView";
-import FolderIcon from "@mui/icons-material/Folder";
-import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
+import LocalIcon from "@app/components/shared/LocalIcon";
 import { WorkbenchType, isValidWorkbench } from '@app/types/workbench';
 import { PageEditorFileDropdown } from '@app/components/shared/PageEditorFileDropdown';
 import type { CustomWorkbenchViewInstance } from '@app/contexts/ToolWorkflowContext';
@@ -55,7 +52,7 @@ const createViewOptions = (
         {switchingTo === "viewer" ? (
           <Loader size="sm" />
         ) : (
-          <InsertDriveFileIcon fontSize="medium" />
+          <LocalIcon icon="article-rounded" width={24} height={24} />
         )}
       </div>
     ),
@@ -84,7 +81,7 @@ const createViewOptions = (
         {switchingTo === "pageEditor" ? (
           <Loader size="sm" />
         ) : (
-          <GridViewIcon fontSize="medium" />
+          <LocalIcon icon="grid-view-rounded" width={24} height={24} />
         )}
       </div>
     ),
@@ -94,7 +91,7 @@ const createViewOptions = (
   const fileEditorOption = {
     label: (
       <div style={viewOptionStyle}>
-        {switchingTo === "fileEditor" ? <Loader size="sm" /> : <FolderIcon fontSize="medium" />}
+        {switchingTo === "fileEditor" ? <Loader size="sm" /> : <LocalIcon icon="folder-rounded" width={24} height={24} />}
       </div>
     ),
     value: "fileEditor",
@@ -114,7 +111,7 @@ const createViewOptions = (
           {switchingTo === view.workbenchId ? (
             <Loader size="sm" />
           ) : (
-            view.icon || <PictureAsPdfIcon fontSize="medium" />
+            view.icon || <LocalIcon icon="picture-as-pdf-rounded" width={24} height={24} />
           )}
           <span>{view.label}</span>
         </div>
diff --git a/frontend/src/core/components/shared/UpdateModal.tsx b/frontend/src/core/components/shared/UpdateModal.tsx
index 937f4426d..c225bfdf5 100644
--- a/frontend/src/core/components/shared/UpdateModal.tsx
+++ b/frontend/src/core/components/shared/UpdateModal.tsx
@@ -3,12 +3,7 @@ import { Modal, Stack, Text, Badge, Button, Group, Loader, Center, Divider, Box,
 import { useTranslation } from 'react-i18next';
 import { updateService, UpdateSummary, FullUpdateInfo, MachineInfo } from '@app/services/updateService';
 import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
-import WarningAmberIcon from '@mui/icons-material/WarningAmber';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import DownloadIcon from '@mui/icons-material/Download';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import LocalIcon from '@app/components/shared/LocalIcon';
 
 interface UpdateModalProps {
   opened: boolean;
@@ -163,7 +158,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
             }}
           >
             <Group gap="xs" wrap="nowrap" align="flex-start">
-              <InfoOutlinedIcon style={{ fontSize: 18, color: 'var(--mantine-color-blue-filled)', marginTop: 2 }} />
+              <LocalIcon icon="info-rounded" width={18} height={18} style={{ color: 'var(--mantine-color-blue-filled)', marginTop: 2 }} />
               <Box style={{ flex: 1 }}>
                 <Text size="xs" fw={600} mb={4} tt="uppercase">
                   {t('update.recommendedAction', 'Recommended Action')}
@@ -187,7 +182,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
             }}
           >
             <Group gap="xs" wrap="nowrap" align="flex-start">
-              <WarningAmberIcon style={{ fontSize: 18, color: 'var(--mantine-color-orange-filled)', marginTop: 2 }} />
+              <LocalIcon icon="warning-rounded" width={18} height={18} style={{ color: 'var(--mantine-color-orange-filled)', marginTop: 2 }} />
               <Box style={{ flex: 1 }}>
                 <Text size="xs" fw={600} mb={4} tt="uppercase">
                   {t('update.breakingChangesDetected', 'Breaking Changes Detected')}
@@ -236,7 +231,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
                       target="_blank"
                       variant="light"
                       size="xs"
-                      rightSection={<OpenInNewIcon style={{ fontSize: 14 }} />}
+                      rightSection={<LocalIcon icon="open-in-new-rounded" width={14} height={14} />}
                     >
                       {t('update.viewGuide', 'View Guide')}
                     </Button>
@@ -312,14 +307,14 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
                           variant="light"
                           size="xs"
                           onClick={(e) => e.stopPropagation()}
-                          rightSection={<OpenInNewIcon style={{ fontSize: 14 }} />}
+                          rightSection={<LocalIcon icon="open-in-new-rounded" width={14} height={14} />}
                         >
                           {t('update.releaseNotes', 'Release Notes')}
                         </Button>
                         {isExpanded ? (
-                          <ExpandLessIcon style={{ fontSize: 20, color: 'var(--mantine-color-gray-6)' }} />
+                          <LocalIcon icon="expand-less-rounded" width={20} height={20} style={{ color: 'var(--mantine-color-gray-6)' }} />
                         ) : (
-                          <ExpandMoreIcon style={{ fontSize: 20, color: 'var(--mantine-color-gray-6)' }} />
+                          <LocalIcon icon="expand-more-rounded" width={20} height={20} style={{ color: 'var(--mantine-color-gray-6)' }} />
                         )}
                       </Group>
                     </Group>
@@ -346,7 +341,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
                               }}
                             >
                               <Group gap="xs" align="flex-start" wrap="nowrap" mb="xs">
-                                <WarningAmberIcon style={{ fontSize: 16, color: 'var(--mantine-color-orange-filled)', marginTop: 2 }} />
+                                <LocalIcon icon="warning-rounded" width={16} height={16} style={{ color: 'var(--mantine-color-orange-filled)', marginTop: 2 }} />
                                 <Text size="xs" fw={600} tt="uppercase">
                                   {t('update.breakingChanges', 'Breaking Changes')}
                                 </Text>
@@ -363,7 +358,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
                                   variant="light"
                                   color="orange"
                                   size="xs"
-                                  rightSection={<OpenInNewIcon style={{ fontSize: 14 }} />}
+                                  rightSection={<LocalIcon icon="open-in-new-rounded" width={14} height={14} />}
                                 >
                                   {t('update.migrationGuide', 'Migration Guide')}
                                 </Button>
@@ -391,7 +386,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
             component="a"
             href="https://github.com/Stirling-Tools/Stirling-PDF/releases"
             target="_blank"
-            rightSection={<OpenInNewIcon style={{ fontSize: 16 }} />}
+            rightSection={<LocalIcon icon="open-in-new-rounded" width={16} height={16} />}
           >
             {t('update.viewAllReleases', 'View All Releases')}
           </Button>
@@ -401,7 +396,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
               href={downloadUrl}
               target="_blank"
               color="green"
-              leftSection={<DownloadIcon style={{ fontSize: 16 }} />}
+              leftSection={<LocalIcon icon="download-rounded" width={16} height={16} />}
             >
               {t('update.downloadLatest', 'Download Latest')}
             </Button>
diff --git a/frontend/src/core/components/shared/ZipWarningModal.tsx b/frontend/src/core/components/shared/ZipWarningModal.tsx
index 909cf1b31..282fb08d8 100644
--- a/frontend/src/core/components/shared/ZipWarningModal.tsx
+++ b/frontend/src/core/components/shared/ZipWarningModal.tsx
@@ -1,8 +1,6 @@
 import { Modal, Text, Button, Group, Stack } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import WarningAmberIcon from "@mui/icons-material/WarningAmber";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
-import CancelIcon from "@mui/icons-material/Cancel";
+import LocalIcon from "@app/components/shared/LocalIcon";
 import { CSSProperties } from "react";
 
 interface ZipWarningModalProps {
@@ -34,7 +32,7 @@ const ZipWarningModal = ({ opened, onConfirm, onCancel, fileCount, zipFileName }
       closeOnEscape={true}
     >
       <Stack ta="center" p="md" gap="sm">
-        <WarningAmberIcon style={WARNING_ICON_STYLE} />
+        <LocalIcon icon="warning-rounded" width={48} height={48} style={WARNING_ICON_STYLE} />
         <Text size="md" fw={300}>
           {zipFileName}
         </Text>
@@ -52,7 +50,7 @@ const ZipWarningModal = ({ opened, onConfirm, onCancel, fileCount, zipFileName }
           variant="light"
           color="var(--mantine-color-gray-8)"
           onClick={onCancel}
-          leftSection={<CancelIcon fontSize="small" />}
+          leftSection={<LocalIcon icon="cancel-rounded" width={20} height={20} />}
           w="10rem"
         >
           {t("zipWarning.cancel", "Cancel")}
@@ -61,7 +59,7 @@ const ZipWarningModal = ({ opened, onConfirm, onCancel, fileCount, zipFileName }
           variant="filled"
           color="var(--mantine-color-blue-9)"
           onClick={onConfirm}
-          leftSection={<CheckCircleOutlineIcon fontSize="small" />}
+          leftSection={<LocalIcon icon="check-circle-outline-rounded" width={20} height={20} />}
           w="10rem"
         >
           {t("zipWarning.confirm", "Extract")}
@@ -74,7 +72,7 @@ const ZipWarningModal = ({ opened, onConfirm, onCancel, fileCount, zipFileName }
           variant="light"
           color="var(--mantine-color-gray-8)"
           onClick={onCancel}
-          leftSection={<CancelIcon fontSize="small" />}
+          leftSection={<LocalIcon icon="cancel-rounded" width={20} height={20} />}
           w="10rem"
         >
           {t("zipWarning.cancel", "Cancel")}
@@ -83,7 +81,7 @@ const ZipWarningModal = ({ opened, onConfirm, onCancel, fileCount, zipFileName }
           variant="filled"
           color="var(--mantine-color-blue-9)"
           onClick={onConfirm}
-          leftSection={<CheckCircleOutlineIcon fontSize="small" />}
+          leftSection={<LocalIcon icon="check-circle-outline-rounded" width={20} height={20} />}
           w="10rem"
         >
           {t("zipWarning.confirm", "Extract")}
diff --git a/frontend/src/core/components/shared/config/RestartConfirmationModal.tsx b/frontend/src/core/components/shared/config/RestartConfirmationModal.tsx
index b97b17a0c..31c26a2fa 100644
--- a/frontend/src/core/components/shared/config/RestartConfirmationModal.tsx
+++ b/frontend/src/core/components/shared/config/RestartConfirmationModal.tsx
@@ -1,7 +1,6 @@
 import { Modal, Text, Group, Button, Stack } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
-import RefreshIcon from '@mui/icons-material/Refresh';
-import ScheduleIcon from '@mui/icons-material/Schedule';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
 
 interface RestartConfirmationModalProps {
@@ -49,14 +48,14 @@ export default function RestartConfirmationModal({
         <Group justify="flex-end" gap="sm">
           <Button
             variant="default"
-            leftSection={<ScheduleIcon style={{ fontSize: 16 }} />}
+            leftSection={<LocalIcon icon="schedule-rounded" width={16} height={16} />}
             onClick={onClose}
           >
             {t('admin.settings.restart.later', 'Restart Later')}
           </Button>
           <Button
             color="blue"
-            leftSection={<RefreshIcon style={{ fontSize: 16 }} />}
+            leftSection={<LocalIcon icon="refresh-rounded" width={16} height={16} />}
             onClick={onRestart}
           >
             {t('admin.settings.restart.now', 'Restart Now')}
diff --git a/frontend/src/core/components/shared/filePreview/HoverOverlay.tsx b/frontend/src/core/components/shared/filePreview/HoverOverlay.tsx
index f09808982..5096b53e4 100644
--- a/frontend/src/core/components/shared/filePreview/HoverOverlay.tsx
+++ b/frontend/src/core/components/shared/filePreview/HoverOverlay.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box } from '@mantine/core';
-import VisibilityIcon from '@mui/icons-material/Visibility';
+import LocalIcon from '@app/components/shared/LocalIcon';
 
 export interface HoverOverlayProps {
   onMouseEnter?: (e: React.MouseEvent) => void;
@@ -54,7 +54,7 @@ const HoverOverlay: React.FC<HoverOverlayProps> = ({
           pointerEvents: 'none'
         }}
       >
-        <VisibilityIcon style={{ color: 'white', fontSize: '1.5rem' }} />
+        <LocalIcon icon="visibility-rounded" width="1.5rem" height="1.5rem" style={{ color: 'white' }} />
       </Box>
     </Box>
   );
diff --git a/frontend/src/core/components/shared/filePreview/NavigationArrows.tsx b/frontend/src/core/components/shared/filePreview/NavigationArrows.tsx
index e9fc96719..d88c86be5 100644
--- a/frontend/src/core/components/shared/filePreview/NavigationArrows.tsx
+++ b/frontend/src/core/components/shared/filePreview/NavigationArrows.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Box, ActionIcon } from '@mantine/core';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import LocalIcon from '@app/components/shared/LocalIcon';
 
 export interface NavigationArrowsProps {
   onPrevious: () => void;
@@ -37,7 +36,7 @@ const NavigationArrows: React.FC<NavigationArrowsProps> = ({
           left: '0'
         }}
       >
-        <ChevronLeftIcon />
+        <LocalIcon icon="chevron-left-rounded" width={24} height={24} />
       </ActionIcon>
       
       {/* Content */}
@@ -57,7 +56,7 @@ const NavigationArrows: React.FC<NavigationArrowsProps> = ({
           right: '0'
         }}
       >
-        <ChevronRightIcon />
+        <LocalIcon icon="chevron-right-rounded" width={24} height={24} />
       </ActionIcon>
     </Box>
   );
diff --git a/frontend/src/core/components/shared/filePreview/getFileTypeIcon.tsx b/frontend/src/core/components/shared/filePreview/getFileTypeIcon.tsx
index afcacad07..43a95d1a5 100644
--- a/frontend/src/core/components/shared/filePreview/getFileTypeIcon.tsx
+++ b/frontend/src/core/components/shared/filePreview/getFileTypeIcon.tsx
@@ -1,7 +1,5 @@
 import React from "react";
-import JavascriptIcon from "@mui/icons-material/Javascript";
-import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
-import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
+import LocalIcon from "@app/components/shared/LocalIcon";
 import type { StirlingFileStub } from "@app/types/fileContext";
 import { detectFileExtension } from "@app/utils/fileUtils";
 
@@ -19,14 +17,14 @@ export function getFileTypeIcon(file: FileLike, size: number | string = "2rem"):
 
   // JavaScript
   if (ext === "js" || mime.includes("javascript")) {
-    return <JavascriptIcon style={{ fontSize: size, color: "var(--mantine-color-gray-6)" }} />;
+    return <LocalIcon icon="javascript-rounded" width={size} height={size} style={{ color: "var(--mantine-color-gray-6)" }} />;
   }
 
   // PDF
   if (ext === "pdf" || mime === "application/pdf") {
-    return <PictureAsPdfIcon style={{ fontSize: size, color: "var(--mantine-color-gray-6)" }} />;
+    return <LocalIcon icon="picture-as-pdf-rounded" width={size} height={size} style={{ color: "var(--mantine-color-gray-6)" }} />;
   }
 
   // Fallback generic
-  return <InsertDriveFileIcon style={{ fontSize: size, color: "var(--mantine-color-gray-6)" }} />;
+  return <LocalIcon icon="article-rounded" width={size} height={size} style={{ color: "var(--mantine-color-gray-6)" }} />;
 }
diff --git a/frontend/src/core/components/shared/quickAccessBar/ActiveToolButton.tsx b/frontend/src/core/components/shared/quickAccessBar/ActiveToolButton.tsx
index 38ed45484..ad24972ca 100644
--- a/frontend/src/core/components/shared/quickAccessBar/ActiveToolButton.tsx
+++ b/frontend/src/core/components/shared/quickAccessBar/ActiveToolButton.tsx
@@ -14,7 +14,7 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import { ActionIcon, Divider } from '@mantine/core';
-import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
 import { useNavigationState, useNavigationActions } from '@app/contexts/NavigationContext';
 import { useSidebarNavigation } from '@app/hooks/useSidebarNavigation';
@@ -180,7 +180,7 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton, to
                 >
                   <span className="iconContainer">
                     {isBackHover ? (
-                      <ArrowBackRoundedIcon sx={{ fontSize: '1.875rem' }} />
+                      <LocalIcon icon="arrow-back-rounded" width="1.875rem" height="1.875rem" />
                     ) : (
                       indicatorTool.icon
                     )}
diff --git a/frontend/src/core/components/tools/FullscreenToolList.tsx b/frontend/src/core/components/tools/FullscreenToolList.tsx
index 4c01b492b..ddbb7a423 100644
--- a/frontend/src/core/components/tools/FullscreenToolList.tsx
+++ b/frontend/src/core/components/tools/FullscreenToolList.tsx
@@ -6,8 +6,7 @@ import { ToolId } from '@app/types/toolId';
 import { useToolSections } from '@app/hooks/useToolSections';
 import NoToolsFound from '@app/components/tools/shared/NoToolsFound';
 import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import StarRoundedIcon from '@mui/icons-material/StarRounded';
-import ThumbUpRoundedIcon from '@mui/icons-material/ThumbUpRounded';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import Badge from '@app/components/shared/Badge';
 import '@app/components/tools/ToolPanel.css';
 import DetailedToolItem from '@app/components/tools/fullscreen/DetailedToolItem';
@@ -119,7 +118,7 @@ const FullscreenToolList = ({
                     }}
                     aria-hidden
                   >
-                    <StarRoundedIcon />
+                    <LocalIcon icon="star-rounded" width={24} height={24} />
                   </span>
                   <Text size="sm" fw={600} tt="uppercase" lts={0.5} c="dimmed">
                     {t('toolPanel.fullscreen.favorites', 'Favourites')}
@@ -161,7 +160,7 @@ const FullscreenToolList = ({
                     }}
                     aria-hidden
                   >
-                    <ThumbUpRoundedIcon />
+                    <LocalIcon icon="thumb-up-rounded" width={24} height={24} />
                   </span>
                   <Text size="sm" fw={600} tt="uppercase" lts={0.5} c="dimmed">
                     {t('toolPanel.fullscreen.recommended', 'Recommended')}
diff --git a/frontend/src/core/components/tools/FullscreenToolSurface.tsx b/frontend/src/core/components/tools/FullscreenToolSurface.tsx
index 2eedbf5f5..3c4d555a7 100644
--- a/frontend/src/core/components/tools/FullscreenToolSurface.tsx
+++ b/frontend/src/core/components/tools/FullscreenToolSurface.tsx
@@ -1,6 +1,6 @@
 import { useState, useRef } from 'react';
 import { ActionIcon, ScrollArea, Switch, useMantineColorScheme } from '@mantine/core';
-import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { useTranslation } from 'react-i18next';
 import ToolSearch from '@app/components/tools/toolPicker/ToolSearch';
 import FullscreenToolList from '@app/components/tools/FullscreenToolList';
@@ -114,8 +114,10 @@ const FullscreenToolSurface = ({
                 aria-label={toggleLabel}
                 style={{ color: 'var(--right-rail-icon)' }}
               >
-                <DoubleArrowIcon
-                  fontSize="small"
+                <LocalIcon
+                  icon="double-arrow-rounded"
+                  width={20}
+                  height={20}
                   style={{ transform: isRTL ? undefined : 'rotate(180deg)' }}
                 />
               </ActionIcon>
diff --git a/frontend/src/core/components/tools/ToolPanel.tsx b/frontend/src/core/components/tools/ToolPanel.tsx
index 3fcac4988..046510f17 100644
--- a/frontend/src/core/components/tools/ToolPanel.tsx
+++ b/frontend/src/core/components/tools/ToolPanel.tsx
@@ -11,7 +11,7 @@ import rainbowStyles from '@app/styles/rainbow.module.css';
 import { ActionIcon, ScrollArea } from '@mantine/core';
 import { ToolId } from '@app/types/toolId';
 import { useIsMobile } from '@app/hooks/useIsMobile';
-import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { useTranslation } from 'react-i18next';
 import FullscreenToolSurface from '@app/components/tools/FullscreenToolSurface';
 import { useToolPanelGeometry } from '@app/hooks/tools/useToolPanelGeometry';
@@ -151,8 +151,10 @@ export default function ToolPanel() {
                   aria-label={toggleLabel}
                   className="tool-panel__mode-toggle"
                 >
-                  <DoubleArrowIcon
-                    fontSize="small"
+                  <LocalIcon
+                    icon="double-arrow-rounded"
+                    width={20}
+                    height={20}
                     style={{ transform: isRTL ? 'scaleX(-1)' : undefined }}
                   />
                 </ActionIcon>
diff --git a/frontend/src/core/components/tools/automate/AutomationCreation.tsx b/frontend/src/core/components/tools/automate/AutomationCreation.tsx
index 836c14fed..da51500c7 100644
--- a/frontend/src/core/components/tools/automate/AutomationCreation.tsx
+++ b/frontend/src/core/components/tools/automate/AutomationCreation.tsx
@@ -11,7 +11,7 @@ import {
   Modal
 } from '@mantine/core';
 import { Z_INDEX_AUTOMATE_MODAL } from '@app/styles/zIndex';
-import CheckIcon from '@mui/icons-material/Check';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { ToolRegistry } from '@app/data/toolsTaxonomy';
 import ToolConfigurationModal from '@app/components/tools/automate/ToolConfigurationModal';
 import ToolList from '@app/components/tools/automate/ToolList';
@@ -196,7 +196,7 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
 
         {/* Save Button */}
         <Button
-          leftSection={<CheckIcon />}
+          leftSection={<LocalIcon icon="check-rounded" width={24} height={24} />}
           onClick={saveAutomation}
           disabled={!canSaveAutomation()}
           fullWidth
diff --git a/frontend/src/core/components/tools/automate/AutomationEntry.tsx b/frontend/src/core/components/tools/automate/AutomationEntry.tsx
index 7871033b9..17e28b064 100644
--- a/frontend/src/core/components/tools/automate/AutomationEntry.tsx
+++ b/frontend/src/core/components/tools/automate/AutomationEntry.tsx
@@ -1,10 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Group, Text, ActionIcon, Menu, Button, Box } from '@mantine/core';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import EditIcon from '@mui/icons-material/Edit';
-import DeleteIcon from '@mui/icons-material/Delete';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { Tooltip } from '@app/components/shared/Tooltip';
 import { ToolIcon } from '@app/components/shared/ToolIcon';
 import { ToolRegistry } from '@app/data/toolsTaxonomy';
@@ -198,14 +195,14 @@ export default function AutomationEntry({
                 pointerEvents: shouldShowMenu ? 'auto' : 'none'
               }}
             >
-              <MoreVertIcon style={{ fontSize: 20 }} />
+              <LocalIcon icon="more-vert" width={20} height={20} />
             </ActionIcon>
           </Menu.Target>
 
           <Menu.Dropdown>
             {onCopy && (
               <Menu.Item
-                leftSection={<ContentCopyIcon style={{ fontSize: 16 }} />}
+                leftSection={<LocalIcon icon="content-copy-rounded" width={16} height={16} />}
                 onClick={(e) => {
                   e.stopPropagation();
                   onCopy();
@@ -216,7 +213,7 @@ export default function AutomationEntry({
             )}
             {onEdit && (
               <Menu.Item
-                leftSection={<EditIcon style={{ fontSize: 16 }} />}
+                leftSection={<LocalIcon icon="edit-rounded" width={16} height={16} />}
                 onClick={(e) => {
                   e.stopPropagation();
                   onEdit();
@@ -227,7 +224,7 @@ export default function AutomationEntry({
             )}
             {onDelete && (
               <Menu.Item
-                leftSection={<DeleteIcon style={{ fontSize: 16 }} />}
+                leftSection={<LocalIcon icon="delete-rounded" width={16} height={16} />}
                 onClick={(e) => {
                   e.stopPropagation();
                   onDelete();
diff --git a/frontend/src/core/components/tools/automate/AutomationRun.tsx b/frontend/src/core/components/tools/automate/AutomationRun.tsx
index 41c56558f..1176d5b12 100644
--- a/frontend/src/core/components/tools/automate/AutomationRun.tsx
+++ b/frontend/src/core/components/tools/automate/AutomationRun.tsx
@@ -1,8 +1,7 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Text, Stack, Group, Card, Progress } from "@mantine/core";
-import PlayArrowIcon from "@mui/icons-material/PlayArrow";
-import CheckIcon from "@mui/icons-material/Check";
+import LocalIcon from "@app/components/shared/LocalIcon";
 import { useFileSelection } from "@app/contexts/FileContext";
 import { useToolRegistry } from "@app/contexts/ToolRegistryContext";
 import { AutomationConfig, ExecutionStep } from "@app/types/automation";
@@ -115,7 +114,7 @@ export default function AutomationRun({ automation, onComplete, automateOperatio
   const getStepIcon = (step: ExecutionStep) => {
     switch (step.status) {
       case EXECUTION_STATUS.COMPLETED:
-        return <CheckIcon style={{ fontSize: 16, color: 'green' }} />;
+        return <LocalIcon icon="check-rounded" width={16} height={16} style={{ color: 'green' }} />;
       case EXECUTION_STATUS.ERROR:
         return <span style={{ fontSize: 16, color: 'red' }}>✕</span>;
       case EXECUTION_STATUS.RUNNING:
@@ -193,7 +192,7 @@ export default function AutomationRun({ automation, onComplete, automateOperatio
         {/* Action Buttons */}
         <Group justify="space-between" mt="xl">
           <Button
-            leftSection={<PlayArrowIcon />}
+            leftSection={<LocalIcon icon="play-arrow-rounded" width={24} height={24} />}
             onClick={executeAutomation}
             disabled={isExecuting || !selectedFiles || selectedFiles.length === 0}
             loading={isExecuting}
diff --git a/frontend/src/core/components/tools/automate/AutomationSelection.tsx b/frontend/src/core/components/tools/automate/AutomationSelection.tsx
index 1b53ff900..7252890e7 100644
--- a/frontend/src/core/components/tools/automate/AutomationSelection.tsx
+++ b/frontend/src/core/components/tools/automate/AutomationSelection.tsx
@@ -1,7 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { Title, Stack, Divider } from "@mantine/core";
-import AddCircleOutline from "@mui/icons-material/AddCircleOutline";
-import SettingsIcon from "@mui/icons-material/Settings";
+import LocalIcon from "@app/components/shared/LocalIcon";
 import AutomationEntry from "@app/components/tools/automate/AutomationEntry";
 import { useSuggestedAutomations } from "@app/hooks/tools/automate/useSuggestedAutomations";
 import { AutomationConfig, SuggestedAutomation } from "@app/types/automation";
@@ -39,7 +38,7 @@ export default function AutomationSelection({
     <Stack gap="xs">
       <AutomationEntry
         title={t("automate.selection.createNew.title", "Create New Automation")}
-        badgeIcon={AddCircleOutline}
+        badgeIcon={() => <LocalIcon icon="add-circle-outline-rounded" width={24} height={24} />}
         operations={[]}
         onClick={onCreateNew}
         keepIconColor={true}
@@ -47,13 +46,13 @@ export default function AutomationSelection({
       />
       {/* Saved Automations */}
       {savedAutomations.map((automation) => {
-        const IconComponent = automation.icon ? iconMap[automation.icon as keyof typeof iconMap] : SettingsIcon;
+        const IconComponent = automation.icon ? iconMap[automation.icon as keyof typeof iconMap] : () => <LocalIcon icon="settings-rounded" width={24} height={24} />;
         return (
           <AutomationEntry
             key={automation.id}
             title={automation.name}
             description={automation.description}
-            badgeIcon={IconComponent || SettingsIcon}
+            badgeIcon={IconComponent || <LocalIcon icon="settings-rounded" width={20} height={20} />}
             operations={automation.operations.map(op => typeof op === 'string' ? op : op.operation)}
             onClick={() => onRun(automation)}
             showMenu={true}
diff --git a/frontend/src/core/components/tools/automate/IconSelector.tsx b/frontend/src/core/components/tools/automate/IconSelector.tsx
index 3b7733cf0..5a518bd40 100644
--- a/frontend/src/core/components/tools/automate/IconSelector.tsx
+++ b/frontend/src/core/components/tools/automate/IconSelector.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Box, Text, Stack, Button, SimpleGrid, Tooltip, Popover } from "@mantine/core";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import LocalIcon from "@app/components/shared/LocalIcon";
 import { iconMap, iconOptions } from '@app/components/tools/automate/iconMap';
 
 interface IconSelectorProps {
@@ -54,9 +54,11 @@ export default function IconSelector({ value = "SettingsIcon", onChange, size =
             }}
           >
             {React.createElement(selectedIconComponent, { style: { fontSize: iconSize } })}
-            <KeyboardArrowDownIcon
+            <LocalIcon
+              icon="keyboard-arrow-down-rounded"
+              width={iconSize * 0.8}
+              height={iconSize * 0.8}
               style={{
-                fontSize: iconSize * 0.8,
                 position: "absolute",
                 right: "0.25rem",
                 top: "50%",
diff --git a/frontend/src/core/components/tools/automate/ToolConfigurationModal.tsx b/frontend/src/core/components/tools/automate/ToolConfigurationModal.tsx
index a4b415856..28a3c5a9d 100644
--- a/frontend/src/core/components/tools/automate/ToolConfigurationModal.tsx
+++ b/frontend/src/core/components/tools/automate/ToolConfigurationModal.tsx
@@ -10,10 +10,7 @@ import {
   Alert
 } from '@mantine/core';
 import { Z_INDEX_AUTOMATE_MODAL } from '@app/styles/zIndex';
-import SettingsIcon from '@mui/icons-material/Settings';
-import CheckIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
-import WarningIcon from '@mui/icons-material/Warning';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { ToolRegistry } from '@app/data/toolsTaxonomy';
 import { ToolId } from '@app/types/toolId';
 import { getAvailableToExtensions } from '@app/utils/convertUtils';
@@ -53,7 +50,7 @@ export default function ToolConfigurationModal({ opened, tool, onSave, onCancel,
   const renderToolSettings = () => {
     if (!SettingsComponent) {
       return (
-        <Alert icon={<WarningIcon />} color="orange">
+        <Alert icon={<LocalIcon icon="warning-rounded" width={24} height={24} />} color="orange">
           <Text size="sm">
             {t('automate.config.noSettings', 'This tool does not have configurable settings.')}
           </Text>
@@ -97,7 +94,7 @@ export default function ToolConfigurationModal({ opened, tool, onSave, onCancel,
       onClose={onCancel}
       title={
         <Group gap="xs">
-          <SettingsIcon />
+          <LocalIcon icon="settings-rounded" width={24} height={24} />
           <Title order={3}>
             {t('automate.config.title', 'Configure {{toolName}}', { toolName: tool.name })}
           </Title>
@@ -119,13 +116,13 @@ export default function ToolConfigurationModal({ opened, tool, onSave, onCancel,
         <Group justify="flex-end" gap="sm">
           <Button
             variant="light"
-            leftSection={<CloseIcon />}
+            leftSection={<LocalIcon icon="close-rounded" width={24} height={24} />}
             onClick={onCancel}
           >
             {t('automate.config.cancel', 'Cancel')}
           </Button>
           <Button
-            leftSection={<CheckIcon />}
+            leftSection={<LocalIcon icon="check-rounded" width={24} height={24} />}
             onClick={handleSave}
           >
             {t('automate.config.save', 'Save Configuration')}
diff --git a/frontend/src/core/components/tools/automate/ToolList.tsx b/frontend/src/core/components/tools/automate/ToolList.tsx
index 7a5c66860..c5b792fac 100644
--- a/frontend/src/core/components/tools/automate/ToolList.tsx
+++ b/frontend/src/core/components/tools/automate/ToolList.tsx
@@ -1,9 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Text, Stack, Group, ActionIcon } from "@mantine/core";
-import SettingsIcon from "@mui/icons-material/Settings";
-import CloseIcon from "@mui/icons-material/Close";
-import AddCircleOutline from "@mui/icons-material/AddCircleOutline";
+import LocalIcon from "@app/components/shared/LocalIcon";
 import { AutomationTool } from "@app/types/automation";
 import { ToolRegistry } from "@app/data/toolsTaxonomy";
 import { ToolId } from "@app/types/toolId";
@@ -82,7 +80,7 @@ export default function ToolList({
                     color: "var(--mantine-color-gray-6)",
                   }}
                 >
-                  <CloseIcon style={{ fontSize: 16 }} />
+                  <LocalIcon icon="close-rounded" width={16} height={16} />
                 </ActionIcon>
               )}
 
@@ -109,7 +107,7 @@ export default function ToolList({
                       title={t("automate.creation.tools.configure", "Configure tool")}
                       style={{ color: "var(--mantine-color-gray-6)" }}
                     >
-                      <SettingsIcon style={{ fontSize: 16 }} />
+                      <LocalIcon icon="settings-rounded" width={16} height={16} />
                     </ActionIcon>
                   )}
                 </Group>
@@ -161,7 +159,7 @@ export default function ToolList({
         >
           <AutomationEntry
             title={t("automate.creation.tools.addTool", "Add Tool")}
-            badgeIcon={AddCircleOutline}
+            badgeIcon={() => <LocalIcon icon="add-circle-outline-rounded" width={24} height={24} />}
             operations={[]}
             onClick={onToolAdd}
             keepIconColor={true}
diff --git a/frontend/src/core/components/tools/automate/iconMap.ts b/frontend/src/core/components/tools/automate/iconMap.ts
deleted file mode 100644
index cabd4f2da..000000000
--- a/frontend/src/core/components/tools/automate/iconMap.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import SettingsIcon from '@mui/icons-material/Settings';
-import CompressIcon from '@mui/icons-material/Compress';
-import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
-import CleaningServicesIcon from '@mui/icons-material/CleaningServices';
-import CropIcon from '@mui/icons-material/Crop';
-import TextFieldsIcon from '@mui/icons-material/TextFields';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
-import EditIcon from '@mui/icons-material/Edit';
-import DeleteIcon from '@mui/icons-material/Delete';
-import FolderIcon from '@mui/icons-material/Folder';
-import CloudIcon from '@mui/icons-material/Cloud';
-import StorageIcon from '@mui/icons-material/Storage';
-import SearchIcon from '@mui/icons-material/Search';
-import DownloadIcon from '@mui/icons-material/Download';
-import UploadIcon from '@mui/icons-material/Upload';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import RotateLeftIcon from '@mui/icons-material/RotateLeft';
-import RotateRightIcon from '@mui/icons-material/RotateRight';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import ContentCutIcon from '@mui/icons-material/ContentCut';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import WorkIcon from '@mui/icons-material/Work';
-import BuildIcon from '@mui/icons-material/Build';
-import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
-import SmartToyIcon from '@mui/icons-material/SmartToy';
-import CheckIcon from '@mui/icons-material/Check';
-import SecurityIcon from '@mui/icons-material/Security';
-import StarIcon from '@mui/icons-material/Star';
-
-export const iconMap = {
-  SettingsIcon,
-  CompressIcon,
-  SwapHorizIcon,
-  CleaningServicesIcon,
-  CropIcon,
-  TextFieldsIcon,
-  PictureAsPdfIcon,
-  EditIcon,
-  DeleteIcon,
-  FolderIcon,
-  CloudIcon,
-  StorageIcon,
-  SearchIcon,
-  DownloadIcon,
-  UploadIcon,
-  PlayArrowIcon,
-  RotateLeftIcon,
-  RotateRightIcon,
-  VisibilityIcon,
-  ContentCutIcon,
-  ContentCopyIcon,
-  WorkIcon,
-  BuildIcon,
-  AutoAwesomeIcon,
-  SmartToyIcon,
-  CheckIcon,
-  SecurityIcon,
-  StarIcon
-};
-
-export const iconOptions = [
-  { value: 'SettingsIcon', label: 'Settings' },
-  { value: 'CompressIcon', label: 'Compress' },
-  { value: 'SwapHorizIcon', label: 'Convert' },
-  { value: 'CleaningServicesIcon', label: 'Clean' },
-  { value: 'CropIcon', label: 'Crop' },
-  { value: 'TextFieldsIcon', label: 'Text' },
-  { value: 'PictureAsPdfIcon', label: 'PDF' },
-  { value: 'EditIcon', label: 'Edit' },
-  { value: 'DeleteIcon', label: 'Delete' },
-  { value: 'FolderIcon', label: 'Folder' },
-  { value: 'CloudIcon', label: 'Cloud' },
-  { value: 'StorageIcon', label: 'Storage' },
-  { value: 'SearchIcon', label: 'Search' },
-  { value: 'DownloadIcon', label: 'Download' },
-  { value: 'UploadIcon', label: 'Upload' },
-  { value: 'PlayArrowIcon', label: 'Play' },
-  { value: 'RotateLeftIcon', label: 'Rotate Left' },
-  { value: 'RotateRightIcon', label: 'Rotate Right' },
-  { value: 'VisibilityIcon', label: 'View' },
-  { value: 'ContentCutIcon', label: 'Cut' },
-  { value: 'ContentCopyIcon', label: 'Copy' },
-  { value: 'WorkIcon', label: 'Work' },
-  { value: 'BuildIcon', label: 'Build' },
-  { value: 'AutoAwesomeIcon', label: 'Magic' },
-  { value: 'SmartToyIcon', label: 'Robot' },
-  { value: 'CheckIcon', label: 'Check' },
-  { value: 'SecurityIcon', label: 'Security' },
-  { value: 'StarIcon', label: 'Star' }
-];
-
-export type IconKey = keyof typeof iconMap;
\ No newline at end of file
diff --git a/frontend/src/core/components/tools/automate/iconMap.tsx b/frontend/src/core/components/tools/automate/iconMap.tsx
new file mode 100644
index 000000000..f79976ed9
--- /dev/null
+++ b/frontend/src/core/components/tools/automate/iconMap.tsx
@@ -0,0 +1,95 @@
+import LocalIcon from '@app/components/shared/LocalIcon';
+
+// Icon wrapper components
+const SettingsIcon = (props: any) => <LocalIcon icon="settings-rounded" width={24} height={24} {...props} />;
+const CompressIcon = (props: any) => <LocalIcon icon="compress-rounded" width={24} height={24} {...props} />;
+const SwapHorizIcon = (props: any) => <LocalIcon icon="swap-horiz-rounded" width={24} height={24} {...props} />;
+const CleaningServicesIcon = (props: any) => <LocalIcon icon="cleaning-services-rounded" width={24} height={24} {...props} />;
+const CropIcon = (props: any) => <LocalIcon icon="crop-rounded" width={24} height={24} {...props} />;
+const TextFieldsIcon = (props: any) => <LocalIcon icon="text-fields-rounded" width={24} height={24} {...props} />;
+const PictureAsPdfIcon = (props: any) => <LocalIcon icon="picture-as-pdf-rounded" width={24} height={24} {...props} />;
+const EditIcon = (props: any) => <LocalIcon icon="edit-rounded" width={24} height={24} {...props} />;
+const DeleteIcon = (props: any) => <LocalIcon icon="delete-rounded" width={24} height={24} {...props} />;
+const FolderIcon = (props: any) => <LocalIcon icon="folder-rounded" width={24} height={24} {...props} />;
+const CloudIcon = (props: any) => <LocalIcon icon="cloud" width={24} height={24} {...props} />;
+const StorageIcon = (props: any) => <LocalIcon icon="storage-rounded" width={24} height={24} {...props} />;
+const SearchIcon = (props: any) => <LocalIcon icon="search-rounded" width={24} height={24} {...props} />;
+const DownloadIcon = (props: any) => <LocalIcon icon="download-rounded" width={24} height={24} {...props} />;
+const UploadIcon = (props: any) => <LocalIcon icon="upload-rounded" width={24} height={24} {...props} />;
+const PlayArrowIcon = (props: any) => <LocalIcon icon="play-arrow-rounded" width={24} height={24} {...props} />;
+const RotateLeftIcon = (props: any) => <LocalIcon icon="rotate-left-rounded" width={24} height={24} {...props} />;
+const RotateRightIcon = (props: any) => <LocalIcon icon="rotate-right-rounded" width={24} height={24} {...props} />;
+const VisibilityIcon = (props: any) => <LocalIcon icon="visibility-rounded" width={24} height={24} {...props} />;
+const ContentCutIcon = (props: any) => <LocalIcon icon="content-cut-rounded" width={24} height={24} {...props} />;
+const ContentCopyIcon = (props: any) => <LocalIcon icon="content-copy-rounded" width={24} height={24} {...props} />;
+const WorkIcon = (props: any) => <LocalIcon icon="work" width={24} height={24} {...props} />;
+const BuildIcon = (props: any) => <LocalIcon icon="build-rounded" width={24} height={24} {...props} />;
+const AutoAwesomeIcon = (props: any) => <LocalIcon icon="auto-awesome-rounded" width={24} height={24} {...props} />;
+const SmartToyIcon = (props: any) => <LocalIcon icon="smart-toy-rounded" width={24} height={24} {...props} />;
+const CheckIcon = (props: any) => <LocalIcon icon="check-rounded" width={24} height={24} {...props} />;
+const SecurityIcon = (props: any) => <LocalIcon icon="security-rounded" width={24} height={24} {...props} />;
+const StarIcon = (props: any) => <LocalIcon icon="star-rounded" width={24} height={24} {...props} />;
+
+export const iconMap = {
+  SettingsIcon,
+  CompressIcon,
+  SwapHorizIcon,
+  CleaningServicesIcon,
+  CropIcon,
+  TextFieldsIcon,
+  PictureAsPdfIcon,
+  EditIcon,
+  DeleteIcon,
+  FolderIcon,
+  CloudIcon,
+  StorageIcon,
+  SearchIcon,
+  DownloadIcon,
+  UploadIcon,
+  PlayArrowIcon,
+  RotateLeftIcon,
+  RotateRightIcon,
+  VisibilityIcon,
+  ContentCutIcon,
+  ContentCopyIcon,
+  WorkIcon,
+  BuildIcon,
+  AutoAwesomeIcon,
+  SmartToyIcon,
+  CheckIcon,
+  SecurityIcon,
+  StarIcon
+};
+
+export const iconOptions = [
+  { value: 'SettingsIcon', label: 'Settings' },
+  { value: 'CompressIcon', label: 'Compress' },
+  { value: 'SwapHorizIcon', label: 'Convert' },
+  { value: 'CleaningServicesIcon', label: 'Clean' },
+  { value: 'CropIcon', label: 'Crop' },
+  { value: 'TextFieldsIcon', label: 'Text' },
+  { value: 'PictureAsPdfIcon', label: 'PDF' },
+  { value: 'EditIcon', label: 'Edit' },
+  { value: 'DeleteIcon', label: 'Delete' },
+  { value: 'FolderIcon', label: 'Folder' },
+  { value: 'CloudIcon', label: 'Cloud' },
+  { value: 'StorageIcon', label: 'Storage' },
+  { value: 'SearchIcon', label: 'Search' },
+  { value: 'DownloadIcon', label: 'Download' },
+  { value: 'UploadIcon', label: 'Upload' },
+  { value: 'PlayArrowIcon', label: 'Play' },
+  { value: 'RotateLeftIcon', label: 'Rotate Left' },
+  { value: 'RotateRightIcon', label: 'Rotate Right' },
+  { value: 'VisibilityIcon', label: 'View' },
+  { value: 'ContentCutIcon', label: 'Cut' },
+  { value: 'ContentCopyIcon', label: 'Copy' },
+  { value: 'WorkIcon', label: 'Work' },
+  { value: 'BuildIcon', label: 'Build' },
+  { value: 'AutoAwesomeIcon', label: 'Magic' },
+  { value: 'SmartToyIcon', label: 'Robot' },
+  { value: 'CheckIcon', label: 'Check' },
+  { value: 'SecurityIcon', label: 'Security' },
+  { value: 'StarIcon', label: 'Star' }
+];
+
+export type IconKey = keyof typeof iconMap;
\ No newline at end of file
diff --git a/frontend/src/core/components/tools/convert/ConvertSettings.tsx b/frontend/src/core/components/tools/convert/ConvertSettings.tsx
index 50c01365b..0536bdb2f 100644
--- a/frontend/src/core/components/tools/convert/ConvertSettings.tsx
+++ b/frontend/src/core/components/tools/convert/ConvertSettings.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { Stack, Text, Group, Divider, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import LocalIcon from "@app/components/shared/LocalIcon";
 import { useTranslation } from "react-i18next";
 import { useMultipleEndpointsEnabled } from "@app/hooks/useEndpointConfig";
 import { isImageFormat, isWebFormat } from "@app/utils/convertUtils";
@@ -256,7 +256,7 @@ const ConvertSettings = ({
           >
             <Group justify="space-between">
               <Text size="sm">{t("convert.selectSourceFormatFirst", "Select a source format first")}</Text>
-              <KeyboardArrowDownIcon
+              <LocalIcon icon="keyboard-arrow-down-rounded"
                 style={{
                   fontSize: '1rem',
                   color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6]
diff --git a/frontend/src/core/components/tools/convert/GroupedFormatDropdown.tsx b/frontend/src/core/components/tools/convert/GroupedFormatDropdown.tsx
index 104e2bb7d..8575b9ddd 100644
--- a/frontend/src/core/components/tools/convert/GroupedFormatDropdown.tsx
+++ b/frontend/src/core/components/tools/convert/GroupedFormatDropdown.tsx
@@ -1,6 +1,6 @@
 import { useState, useMemo } from "react";
 import { Stack, Text, Group, Button, Box, Popover, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import LocalIcon from "@app/components/shared/LocalIcon";
 
 interface FormatOption {
   value: string;
@@ -93,7 +93,7 @@ const GroupedFormatDropdown = ({
             <Text size="sm" c={value ? undefined : 'dimmed'}>
               {selectedLabel}
             </Text>
-            <KeyboardArrowDownIcon
+            <LocalIcon icon="keyboard-arrow-down-rounded"
               style={{
                 fontSize: '1rem',
                 transform: dropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',
diff --git a/frontend/src/core/components/tools/crop/CropSettings.tsx b/frontend/src/core/components/tools/crop/CropSettings.tsx
index fae3afe57..3873c987a 100644
--- a/frontend/src/core/components/tools/crop/CropSettings.tsx
+++ b/frontend/src/core/components/tools/crop/CropSettings.tsx
@@ -1,7 +1,7 @@
 import { useMemo, useState, useEffect } from "react";
 import { Stack, Text, Box, Group, ActionIcon, Center, Alert } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import RestartAltIcon from "@mui/icons-material/RestartAlt";
+import LocalIcon from "@app/components/shared/LocalIcon";
 import { CropParametersHook } from "@app/hooks/tools/crop/useCropParameters";
 import { useSelectedFiles } from "@app/contexts/file/fileHooks";
 import CropAreaSelector from "@app/components/tools/crop/CropAreaSelector";
@@ -164,7 +164,7 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
             title={t("crop.reset", "Reset to full PDF")}
             aria-label={t("crop.reset", "Reset to full PDF")}
           >
-            <RestartAltIcon style={{ fontSize: '1rem' }} />
+            <LocalIcon icon="restart-alt-rounded" width="1rem" height="1rem" />
           </ActionIcon>
         </Group>
 
diff --git a/frontend/src/core/components/tools/merge/MergeFileSorter.tsx b/frontend/src/core/components/tools/merge/MergeFileSorter.tsx
index 2b21afc64..585fcfdb9 100644
--- a/frontend/src/core/components/tools/merge/MergeFileSorter.tsx
+++ b/frontend/src/core/components/tools/merge/MergeFileSorter.tsx
@@ -1,9 +1,7 @@
 import React, { useState } from 'react';
 import { Group, Button, Text, ActionIcon, Stack, Select } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
-import SortIcon from '@mui/icons-material/Sort';
-import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
-import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import LocalIcon from '@app/components/shared/LocalIcon';
 
 interface MergeFileSorterProps {
   onSortFiles: (sortType: 'filename' | 'dateModified', ascending: boolean) => void;
@@ -55,14 +53,14 @@ const MergeFileSorter: React.FC<MergeFileSorterProps> = ({
             disabled={disabled}
             title={ascending ? t('merge.sortBy.ascending', 'Ascending') : t('merge.sortBy.descending', 'Descending')}
           >
-            {ascending ? <ArrowUpwardIcon /> : <ArrowDownwardIcon />}
+            {ascending ? <LocalIcon icon="arrow-upward-rounded" width={24} height={24} /> : <LocalIcon icon="arrow-downward-rounded" width={24} height={24} />}
           </ActionIcon>
         </Group>
 
         <Button
           variant="light"
           size="xs"
-          leftSection={<SortIcon />}
+          leftSection={<LocalIcon icon="sort-rounded" width={24} height={24} />}
           onClick={handleSort}
           disabled={disabled}
           fullWidth
diff --git a/frontend/src/core/components/tools/pdfTextEditor/FontStatusPanel.tsx b/frontend/src/core/components/tools/pdfTextEditor/FontStatusPanel.tsx
index 0ba9a4665..5d37b00dc 100644
--- a/frontend/src/core/components/tools/pdfTextEditor/FontStatusPanel.tsx
+++ b/frontend/src/core/components/tools/pdfTextEditor/FontStatusPanel.tsx
@@ -13,13 +13,7 @@ import {
   Tooltip,
 } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import WarningIcon from '@mui/icons-material/Warning';
-import ErrorIcon from '@mui/icons-material/Error';
-import InfoIcon from '@mui/icons-material/Info';
-import FontDownloadIcon from '@mui/icons-material/FontDownload';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import LocalIcon from '@app/components/shared/LocalIcon';
 
 import { PdfJsonDocument } from '@app/tools/pdfTextEditor/pdfTextEditorTypes';
 import {
@@ -42,15 +36,15 @@ const FontStatusBadge = ({ analysis }: { analysis: FontAnalysis }) => {
   const icon = useMemo(() => {
     switch (analysis.status) {
       case 'perfect':
-        return <CheckCircleIcon sx={{ fontSize: 14 }} />;
+        return <LocalIcon icon="check-circle-rounded" width={14} height={14} />;
       case 'embedded-subset':
-        return <InfoIcon sx={{ fontSize: 14 }} />;
+        return <LocalIcon icon="info-rounded" width={14} height={14} />;
       case 'system-fallback':
-        return <WarningIcon sx={{ fontSize: 14 }} />;
+        return <LocalIcon icon="warning-rounded" width={14} height={14} />;
       case 'missing':
-        return <ErrorIcon sx={{ fontSize: 14 }} />;
+        return <LocalIcon icon="error-rounded" width={14} height={14} />;
       default:
-        return <InfoIcon sx={{ fontSize: 14 }} />;
+        return <LocalIcon icon="info-rounded" width={14} height={14} />;
     }
   }, [analysis.status]);
 
@@ -78,7 +72,7 @@ const FontDetailItem = ({ analysis }: { analysis: FontAnalysis }) => {
       <Stack gap={4}>
         <Group justify="space-between">
           <Group gap={4}>
-            <FontDownloadIcon sx={{ fontSize: 16 }} />
+            <LocalIcon icon="font-download-rounded" width={16} height={16} />
             <Text size="xs" fw={500} lineClamp={1}>
               {analysis.baseName}
             </Text>
@@ -90,7 +84,7 @@ const FontDetailItem = ({ analysis }: { analysis: FontAnalysis }) => {
           </Group>
           <Group gap={4}>
             <FontStatusBadge analysis={analysis} />
-            {expanded ? <ExpandLessIcon sx={{ fontSize: 16 }} /> : <ExpandMoreIcon sx={{ fontSize: 16 }} />}
+            {expanded ? <LocalIcon icon="expand-less-rounded" width={16} height={16} /> : <LocalIcon icon="expand-more-rounded" width={16} height={16} />}
           </Group>
         </Group>
 
@@ -177,12 +171,12 @@ const FontStatusPanel: React.FC<FontStatusPanelProps> = ({ document, pageIndex }
 
   const statusIcon = useMemo(() => {
     if (canReproducePerfectly) {
-      return <CheckCircleIcon sx={{ fontSize: 16 }} />;
+      return <LocalIcon icon="check-circle-rounded" width={16} height={16} />;
     }
     if (hasWarnings) {
-      return <WarningIcon sx={{ fontSize: 16 }} />;
+      return <LocalIcon icon="warning-rounded" width={16} height={16} />;
     }
-    return <InfoIcon sx={{ fontSize: 16 }} />;
+    return <LocalIcon icon="info-rounded" width={16} height={16} />;
   }, [canReproducePerfectly, hasWarnings]);
 
   // Early return AFTER all hooks are declared
@@ -214,12 +208,12 @@ const FontStatusPanel: React.FC<FontStatusPanelProps> = ({ document, pageIndex }
             {/* Warning badges BEFORE expansion */}
             <Group gap={4} wrap="wrap">
               {summary.systemFallback > 0 && (
-                <Badge size="xs" color="yellow" variant="filled" leftSection={<WarningIcon sx={{ fontSize: 12 }} />}>
+                <Badge size="xs" color="yellow" variant="filled" leftSection={<LocalIcon icon="warning-rounded" width={12} height={12} />}>
                   {summary.systemFallback} {t('pdfTextEditor.fontAnalysis.fallback', 'fallback')}
                 </Badge>
               )}
               {summary.missing > 0 && (
-                <Badge size="xs" color="red" variant="filled" leftSection={<ErrorIcon sx={{ fontSize: 12 }} />}>
+                <Badge size="xs" color="red" variant="filled" leftSection={<LocalIcon icon="error-rounded" width={12} height={12} />}>
                   {summary.missing} {t('pdfTextEditor.fontAnalysis.missing', 'missing')}
                 </Badge>
               )}
@@ -249,22 +243,22 @@ const FontStatusPanel: React.FC<FontStatusPanelProps> = ({ document, pageIndex }
             {/* Summary Statistics */}
             <Group gap={4} wrap="wrap">
               {summary.perfect > 0 && (
-                <Badge size="xs" color="green" variant="light" leftSection={<CheckCircleIcon sx={{ fontSize: 12 }} />}>
+                <Badge size="xs" color="green" variant="light" leftSection={<LocalIcon icon="check-circle-rounded" width={12} height={12} />}>
                   {summary.perfect} {t('pdfTextEditor.fontAnalysis.perfect', 'perfect')}
                 </Badge>
               )}
               {summary.embeddedSubset > 0 && (
-                <Badge size="xs" color="blue" variant="light" leftSection={<InfoIcon sx={{ fontSize: 12 }} />}>
+                <Badge size="xs" color="blue" variant="light" leftSection={<LocalIcon icon="info-rounded" width={12} height={12} />}>
                   {summary.embeddedSubset} {t('pdfTextEditor.fontAnalysis.subset', 'subset')}
                 </Badge>
               )}
               {summary.systemFallback > 0 && (
-                <Badge size="xs" color="yellow" variant="light" leftSection={<WarningIcon sx={{ fontSize: 12 }} />}>
+                <Badge size="xs" color="yellow" variant="light" leftSection={<LocalIcon icon="warning-rounded" width={12} height={12} />}>
                   {summary.systemFallback} {t('pdfTextEditor.fontAnalysis.fallback', 'fallback')}
                 </Badge>
               )}
               {summary.missing > 0 && (
-                <Badge size="xs" color="red" variant="light" leftSection={<ErrorIcon sx={{ fontSize: 12 }} />}>
+                <Badge size="xs" color="red" variant="light" leftSection={<LocalIcon icon="error-rounded" width={12} height={12} />}>
                   {summary.missing} {t('pdfTextEditor.fontAnalysis.missing', 'missing')}
                 </Badge>
               )}
diff --git a/frontend/src/core/components/tools/pdfTextEditor/PdfTextEditorView.tsx b/frontend/src/core/components/tools/pdfTextEditor/PdfTextEditorView.tsx
index 3c5b45e0e..5280467e2 100644
--- a/frontend/src/core/components/tools/pdfTextEditor/PdfTextEditorView.tsx
+++ b/frontend/src/core/components/tools/pdfTextEditor/PdfTextEditorView.tsx
@@ -23,18 +23,7 @@ import {
 } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { useTranslation } from 'react-i18next';
-import DescriptionIcon from '@mui/icons-material/DescriptionOutlined';
-import FileDownloadIcon from '@mui/icons-material/FileDownloadOutlined';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdfOutlined';
-import AutorenewIcon from '@mui/icons-material/Autorenew';
-import WarningAmberIcon from '@mui/icons-material/WarningAmber';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import CloseIcon from '@mui/icons-material/Close';
-import MergeTypeIcon from '@mui/icons-material/MergeType';
-import CallSplitIcon from '@mui/icons-material/CallSplit';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import UploadFileIcon from '@mui/icons-material/UploadFileOutlined';
-import SaveIcon from '@mui/icons-material/SaveOutlined';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { Rnd } from 'react-rnd';
 import NavigationWarningModal from '@app/components/shared/NavigationWarningModal';
 
@@ -1412,7 +1401,7 @@ const selectionToolbarPosition = useMemo(() => {
             event.preventDefault();
           }}
         >
-          <CloseIcon style={{ fontSize: 12 }} />
+          <LocalIcon icon="close-rounded" width={12} height={12} />
         </ActionIcon>
       )}
     </Box>
@@ -1473,7 +1462,7 @@ const selectionToolbarPosition = useMemo(() => {
           <Stack gap="sm" pb="md">
             <Group justify="space-between" align="center">
               <Group gap="xs" align="center">
-                <DescriptionIcon fontSize="small" />
+                <LocalIcon icon="description-rounded" width={20} height={20} />
                 <Title order={3}>{t('pdfTextEditor.title', 'PDF JSON Editor')}</Title>
                 {hasChanges && <Badge color="orange" variant="light" size="sm">{t('pdfTextEditor.badges.unsaved', 'Edited')}</Badge>}
               </Group>
@@ -1482,7 +1471,7 @@ const selectionToolbarPosition = useMemo(() => {
             <Stack gap="xs">
               <Button
                 variant="subtle"
-                leftSection={<AutorenewIcon fontSize="small" />}
+                leftSection={<LocalIcon icon="autorenew-rounded" width={20} height={20} />}
                 onClick={onReset}
                 disabled={!hasDocument || isConverting}
                 fullWidth
@@ -1491,7 +1480,7 @@ const selectionToolbarPosition = useMemo(() => {
               </Button>
               <Button
                 variant="default"
-                leftSection={<FileDownloadIcon fontSize="small" />}
+                leftSection={<LocalIcon icon="download-rounded" width={20} height={20} />}
                 onClick={onDownloadJson}
                 disabled={!hasDocument || isConverting}
                 fullWidth
@@ -1499,7 +1488,7 @@ const selectionToolbarPosition = useMemo(() => {
                 {t('pdfTextEditor.actions.downloadJson', 'Download JSON')}
               </Button>
               <Button
-                leftSection={<PictureAsPdfIcon fontSize="small" />}
+                leftSection={<LocalIcon icon="picture-as-pdf-rounded" width={20} height={20} />}
                 onClick={onGeneratePdf}
                 loading={isGeneratingPdf}
                 disabled={!hasDocument || !hasChanges || isConverting}
@@ -1510,7 +1499,7 @@ const selectionToolbarPosition = useMemo(() => {
               <Button
                 variant="filled"
                 color="green"
-                leftSection={<SaveIcon fontSize="small" />}
+                leftSection={<LocalIcon icon="save-rounded" width={20} height={20} />}
                 onClick={onSaveToWorkbench}
                 loading={isSavingToWorkbench}
                 disabled={!hasDocument || !hasChanges || isConverting}
@@ -1623,7 +1612,7 @@ const selectionToolbarPosition = useMemo(() => {
               <Accordion.Item value="disclaimer">
                 <Accordion.Control>
                   <Group gap="xs" wrap="nowrap">
-                    <InfoOutlinedIcon fontSize="small" />
+                    <LocalIcon icon="info-rounded" width={20} height={20} />
                     <Text size="sm" fw={500}>
                       {t('pdfTextEditor.disclaimer.heading', 'Preview Limitations')}
                     </Text>
@@ -1661,7 +1650,7 @@ const selectionToolbarPosition = useMemo(() => {
 
       {errorMessage && (
         <Alert
-          icon={<WarningAmberIcon fontSize="small" />}
+          icon={<LocalIcon icon="warning-rounded" width={20} height={20} />}
           color="red"
           radius="md"
           style={{ gridColumn: '2 / 3' }}
@@ -1698,7 +1687,7 @@ const selectionToolbarPosition = useMemo(() => {
             }}
           >
             <Stack align="center" gap="md" style={{ pointerEvents: 'none' }}>
-              <UploadFileIcon sx={{ fontSize: 48, color: 'var(--mantine-color-blue-5)' }} />
+              <LocalIcon icon="upload-file-rounded" width={48} height={48} style={{ color: 'var(--mantine-color-blue-5)' }} />
               <Text size="lg" fw={600}>
                 {t('pdfTextEditor.empty.title', 'No document loaded')}
               </Text>
@@ -1736,7 +1725,7 @@ const selectionToolbarPosition = useMemo(() => {
                   </Group>
                 )}
               </div>
-              <AutorenewIcon sx={{ fontSize: 36 }} className="animate-spin" />
+              <LocalIcon icon="autorenew-rounded" width={36} height={36} className="animate-spin" />
             </Group>
             <Progress value={conversionProgress?.percent || 0} size="lg" radius="md" />
           </Stack>
@@ -1787,7 +1776,7 @@ const selectionToolbarPosition = useMemo(() => {
             onClose={handleDismissWelcomeBanner}
             title={
               <Group gap="xs">
-                <InfoOutlinedIcon fontSize="small" />
+                <LocalIcon icon="info-rounded" width={20} height={20} />
                 <Text fw={600}>{t('pdfTextEditor.welcomeBanner.title', 'Welcome to PDF Text Editor (Early Access)')}</Text>
               </Group>
             }
@@ -1952,7 +1941,7 @@ const selectionToolbarPosition = useMemo(() => {
                       aria-label={t('pdfTextEditor.manual.merge', 'Merge selection')}
                       onClick={handleMergeSelection}
                     >
-                      <MergeTypeIcon fontSize="small" />
+                      <LocalIcon icon="merge-type-rounded" width={20} height={20} />
                     </ActionIcon>
                   </Tooltip>
                 )}
@@ -1965,7 +1954,7 @@ const selectionToolbarPosition = useMemo(() => {
                       aria-label={t('pdfTextEditor.manual.ungroup', 'Ungroup selection')}
                       onClick={handleUngroupSelection}
                     >
-                      <CallSplitIcon fontSize="small" />
+                      <LocalIcon icon="call-split-rounded" width={20} height={20} />
                     </ActionIcon>
                   </Tooltip>
                 )}
@@ -1979,7 +1968,7 @@ const selectionToolbarPosition = useMemo(() => {
                       onMouseDown={(event) => event.stopPropagation()}
                       onClick={(event) => event.stopPropagation()}
                     >
-                      <MoreVertIcon fontSize="small" />
+                      <LocalIcon icon="more-vert" width={20} height={20} />
                     </ActionIcon>
                   </Menu.Target>
                   <Menu.Dropdown>
diff --git a/frontend/src/core/components/tools/rotate/RotateSettings.tsx b/frontend/src/core/components/tools/rotate/RotateSettings.tsx
index 2136817ff..18fa8d6a4 100644
--- a/frontend/src/core/components/tools/rotate/RotateSettings.tsx
+++ b/frontend/src/core/components/tools/rotate/RotateSettings.tsx
@@ -1,8 +1,7 @@
 import { useMemo, useState, useEffect } from "react";
 import { Stack, Text, Box, ActionIcon, Group, Center } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import RotateLeftIcon from "@mui/icons-material/RotateLeft";
-import RotateRightIcon from "@mui/icons-material/RotateRight";
+import LocalIcon from "@app/components/shared/LocalIcon";
 import { RotateParametersHook } from "@app/hooks/tools/rotate/useRotateParameters";
 import { useSelectedFiles } from "@app/contexts/file/fileHooks";
 import DocumentThumbnail from "@app/components/shared/filePreview/DocumentThumbnail";
@@ -83,7 +82,7 @@ const RotateSettings = ({ parameters, disabled = false }: RotateSettingsProps) =
           aria-label={t("rotate.rotateLeft", "Rotate Anticlockwise")}
           title={t("rotate.rotateLeft", "Rotate Anticlockwise")}
         >
-          <RotateLeftIcon style={{ fontSize: '1.5rem' }} />
+          <LocalIcon icon="rotate-left-rounded" width="1.5rem" height="1.5rem" />
         </ActionIcon>
 
         <ActionIcon
@@ -94,7 +93,7 @@ const RotateSettings = ({ parameters, disabled = false }: RotateSettingsProps) =
           aria-label={t("rotate.rotateRight", "Rotate Clockwise")}
           title={t("rotate.rotateRight", "Rotate Clockwise")}
         >
-          <RotateRightIcon style={{ fontSize: '1.5rem' }} />
+          <LocalIcon icon="rotate-right-rounded" width="1.5rem" height="1.5rem" />
         </ActionIcon>
       </Group>
     </Stack>
diff --git a/frontend/src/core/components/tools/shared/FileStatusIndicator.tsx b/frontend/src/core/components/tools/shared/FileStatusIndicator.tsx
index b463b6bb6..2412ba494 100644
--- a/frontend/src/core/components/tools/shared/FileStatusIndicator.tsx
+++ b/frontend/src/core/components/tools/shared/FileStatusIndicator.tsx
@@ -1,8 +1,7 @@
 import { useState, useEffect } from "react";
 import { Text, Anchor } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import FolderIcon from '@mui/icons-material/Folder';
-import UploadIcon from '@mui/icons-material/Upload';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { useFilesModalContext } from "@app/contexts/FilesModalContext";
 import { useAllFiles } from "@app/contexts/FileContext";
 import { useFileManager } from "@app/hooks/useFileManager";
@@ -76,7 +75,7 @@ const FileStatusIndicator = ({
             onClick={handleNativeUpload}
             style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
           >
-            <UploadIcon style={{ fontSize: '0.875rem' }} />
+            <LocalIcon icon="upload-rounded" width="0.875rem" height="0.875rem" />
             {t("files.upload", "Upload")}
           </Anchor>
         </Text>
@@ -90,7 +89,7 @@ const FileStatusIndicator = ({
             onClick={() => openFilesModal({})}
             style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
           >
-            <FolderIcon style={{ fontSize: '0.875rem' }} />
+            <LocalIcon icon="folder-rounded" width="0.875rem" height="0.875rem" />
             {t("files.addFiles", "Add files")}
           </Anchor>
         </Text>
@@ -110,7 +109,7 @@ const FileStatusIndicator = ({
             onClick={handleNativeUpload}
             style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
           >
-            <UploadIcon style={{ fontSize: '0.875rem' }} />
+            <LocalIcon icon="upload-rounded" width="0.875rem" height="0.875rem" />
             {t("files.uploadFiles", "Upload Files")}
           </Anchor>
         </Text>
@@ -125,7 +124,7 @@ const FileStatusIndicator = ({
             onClick={() => openFilesModal({})}
             style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
           >
-            <FolderIcon style={{ fontSize: '0.875rem' }} />
+            <LocalIcon icon="folder-rounded" width="0.875rem" height="0.875rem" />
             {t("files.addFiles", "Add files")}
           </Anchor>
         </Text>
diff --git a/frontend/src/core/components/tools/shared/NavigationControls.tsx b/frontend/src/core/components/tools/shared/NavigationControls.tsx
index f67c1ca55..ae880cd21 100644
--- a/frontend/src/core/components/tools/shared/NavigationControls.tsx
+++ b/frontend/src/core/components/tools/shared/NavigationControls.tsx
@@ -1,6 +1,5 @@
 import { Stack, Group, ActionIcon, Text } from '@mantine/core';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import LocalIcon from '@app/components/shared/LocalIcon';
 
 export interface NavigationControlsProps {
   currentIndex: number;
@@ -27,7 +26,7 @@ const NavigationControls = ({
           disabled={totalFiles <= 1}
           data-testid="review-panel-prev"
         >
-          <ChevronLeftIcon style={{ fontSize: '1rem' }} />
+          <LocalIcon icon="chevron-left-rounded" width="1rem" height="1rem" />
         </ActionIcon>
         <Text size="xs" c="dimmed">
         {currentIndex + 1} of {totalFiles}
@@ -40,7 +39,7 @@ const NavigationControls = ({
           disabled={totalFiles <= 1}
           data-testid="review-panel-next"
         >
-          <ChevronRightIcon style={{ fontSize: '1rem' }} />
+          <LocalIcon icon="chevron-right-rounded" width="1rem" height="1rem" />
         </ActionIcon>
       </Group>
     </Stack>
diff --git a/frontend/src/core/components/tools/shared/ReviewToolStep.tsx b/frontend/src/core/components/tools/shared/ReviewToolStep.tsx
index 7c6429168..776bd7f10 100644
--- a/frontend/src/core/components/tools/shared/ReviewToolStep.tsx
+++ b/frontend/src/core/components/tools/shared/ReviewToolStep.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import { Button, Stack } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import UndoIcon from "@mui/icons-material/Undo";
+import LocalIcon from "@app/components/shared/LocalIcon";
 import ErrorNotification from "@app/components/tools/shared/ErrorNotification";
 import ResultsPreview from "@app/components/tools/shared/ResultsPreview";
 import { SuggestedToolsSection } from "@app/components/tools/shared/SuggestedToolsSection";
@@ -80,7 +80,7 @@ function ReviewStepContent<TParams = unknown>({
       {onUndo && (
         <Tooltip content={t("undoOperationTooltip", "Click to undo the last operation and restore the original files")}>
           <Button
-            leftSection={<UndoIcon />}
+            leftSection={<LocalIcon icon="undo-rounded" width={24} height={24} />}
             variant="outline"
             color="var(--mantine-color-gray-6)"
             onClick={handleUndo}
diff --git a/frontend/src/core/components/tools/showJS/ShowJSView.tsx b/frontend/src/core/components/tools/showJS/ShowJSView.tsx
index e44226582..a4b63d4b5 100644
--- a/frontend/src/core/components/tools/showJS/ShowJSView.tsx
+++ b/frontend/src/core/components/tools/showJS/ShowJSView.tsx
@@ -1,9 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ActionIcon, Box, Button, Group, Stack, Text, ScrollArea, TextInput } from "@mantine/core";
-import ContentCopyRoundedIcon from "@mui/icons-material/ContentCopyRounded";
-import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
-import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
-import DownloadRoundedIcon from "@mui/icons-material/DownloadRounded";
+import LocalIcon from "@app/components/shared/LocalIcon";
 import "@app/components/tools/showJS/ShowJSView.css";
 import { useTranslation } from "react-i18next";
 import { useFileActionTerminology } from "@app/hooks/useFileActionTerminology";
@@ -153,7 +150,7 @@ const ShowJSView: React.FC<ShowJSViewProps> = ({ data }) => {
               }}
               aria-label={t("common.previous", "Previous")}
             >
-              <ArrowUpwardRoundedIcon fontSize="small" />
+              <LocalIcon icon="arrow-upward-rounded" width={20} height={20} />
             </ActionIcon>
             <ActionIcon
               size="sm"
@@ -163,7 +160,7 @@ const ShowJSView: React.FC<ShowJSViewProps> = ({ data }) => {
               }}
               aria-label={t("common.next", "Next")}
             >
-              <ArrowDownwardRoundedIcon fontSize="small" />
+              <LocalIcon icon="arrow-downward-rounded" width={20} height={20} />
             </ActionIcon>
           </Group>
           <Group gap="xs" align="center" className="showjs-toolbar-controls">
@@ -173,7 +170,7 @@ const ShowJSView: React.FC<ShowJSViewProps> = ({ data }) => {
               className="showjs-outline-button"
               onClick={handleDownload}
               disabled={!downloadUrl}
-              leftSection={<DownloadRoundedIcon fontSize="small" />}
+              leftSection={<LocalIcon icon="download-rounded" width={20} height={20} />}
             >
               {terminology.download}
             </Button>
@@ -182,7 +179,7 @@ const ShowJSView: React.FC<ShowJSViewProps> = ({ data }) => {
               variant="subtle"
               className="showjs-outline-button"
               onClick={handleCopy}
-              leftSection={<ContentCopyRoundedIcon fontSize="small" />}
+              leftSection={<LocalIcon icon="content-copy-rounded" width={20} height={20} />}
             >
               {copied ? t("common.copied", "Copied!") : t("common.copy", "Copy")}
             </Button>
diff --git a/frontend/src/core/components/tools/toolPicker/FavoriteStar.tsx b/frontend/src/core/components/tools/toolPicker/FavoriteStar.tsx
index c0f7e8af9..1ca90d0d5 100644
--- a/frontend/src/core/components/tools/toolPicker/FavoriteStar.tsx
+++ b/frontend/src/core/components/tools/toolPicker/FavoriteStar.tsx
@@ -2,8 +2,7 @@ import React from "react";
 import { ActionIcon } from "@mantine/core";
 import type { MantineSize } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import StarRoundedIcon from '@mui/icons-material/StarRounded';
-import StarBorderRoundedIcon from '@mui/icons-material/StarBorderRounded';
+import LocalIcon from "@app/components/shared/LocalIcon";
 
 interface FavoriteStarProps {
   isFavorite: boolean;
@@ -35,9 +34,9 @@ const FavoriteStar: React.FC<FavoriteStarProps> = ({ isFavorite, onToggle, class
       aria-label={isFavorite ? t('toolPanel.fullscreen.unfavorite', 'Remove from favourites') : t('toolPanel.fullscreen.favorite', 'Add to favourites')}
     >
       {isFavorite ? (
-        <StarRoundedIcon fontSize="inherit" style={{ color: 'var(--special-color-favorites)', fontSize: '1rem' }} />
+        <LocalIcon icon="star-rounded" width={16} height={16} style={{ color: 'var(--special-color-favorites)' }} />
       ) : (
-        <StarBorderRoundedIcon fontSize="inherit" style={{ fontSize: '1rem' }} />
+        <LocalIcon icon="star-outline-rounded" width={16} height={16} />
       )}
     </ActionIcon>
   );
diff --git a/frontend/src/core/components/tools/validateSignature/reportView/ThumbnailPreview.tsx b/frontend/src/core/components/tools/validateSignature/reportView/ThumbnailPreview.tsx
index 33d76144f..86d596bb2 100644
--- a/frontend/src/core/components/tools/validateSignature/reportView/ThumbnailPreview.tsx
+++ b/frontend/src/core/components/tools/validateSignature/reportView/ThumbnailPreview.tsx
@@ -1,4 +1,4 @@
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import '@app/components/tools/validateSignature/reportView/styles.css';
 
 const ThumbnailPreview = ({
@@ -22,7 +22,7 @@ const ThumbnailPreview = ({
 
   return (
     <div className="thumbnail-placeholder">
-      <PictureAsPdfIcon fontSize="large" />
+      <LocalIcon icon="picture-as-pdf-rounded" width={32} height={32} />
     </div>
   );
 };
diff --git a/frontend/src/core/components/viewer/BookmarkSidebar.tsx b/frontend/src/core/components/viewer/BookmarkSidebar.tsx
index 5c845878b..b36382794 100644
--- a/frontend/src/core/components/viewer/BookmarkSidebar.tsx
+++ b/frontend/src/core/components/viewer/BookmarkSidebar.tsx
@@ -3,7 +3,6 @@ import { Box, ScrollArea, Text, ActionIcon, Loader, Stack, TextInput, Button } f
 import LocalIcon from '@app/components/shared/LocalIcon';
 import { useViewer } from '@app/contexts/ViewerContext';
 import { PdfBookmarkObject, PdfActionType } from '@embedpdf/models';
-import BookmarksIcon from '@mui/icons-material/BookmarksRounded';
 import '@app/components/viewer/BookmarkSidebar.css';
 
 interface BookmarkSidebarProps {
@@ -442,7 +441,7 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
       <div className="bookmark-sidebar__header">
         <div className="bookmark-sidebar__header-title">
           <span className="bookmark-sidebar__header-icon">
-            <BookmarksIcon />
+            <LocalIcon icon="bookmarks-rounded" width={24} height={24} />
           </span>
           <Text fw={600} size="sm" tt="uppercase" lts={0.5}>
             Bookmarks
diff --git a/frontend/src/core/components/viewer/EmbedPdfViewer.tsx b/frontend/src/core/components/viewer/EmbedPdfViewer.tsx
index 8e66f0b5c..6f689b15d 100644
--- a/frontend/src/core/components/viewer/EmbedPdfViewer.tsx
+++ b/frontend/src/core/components/viewer/EmbedPdfViewer.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Box, Center, Text, ActionIcon } from '@mantine/core';
-import CloseIcon from '@mui/icons-material/Close';
+import LocalIcon from '@app/components/shared/LocalIcon';
 
 import { useFileState, useFileActions } from "@app/contexts/FileContext";
 import { useFileWithUrl } from "@app/hooks/useFileWithUrl";
@@ -311,7 +311,7 @@ const EmbedPdfViewerContent = ({
           style={{ position: 'absolute', top: '1rem', right: '1rem', zIndex: 1000, borderRadius: '50%' }}
           onClick={onClose}
         >
-          <CloseIcon />
+          <LocalIcon icon="close-rounded" width={24} height={24} />
         </ActionIcon>
       )}
 
diff --git a/frontend/src/core/components/viewer/PdfViewerToolbar.tsx b/frontend/src/core/components/viewer/PdfViewerToolbar.tsx
index 258b8ba43..87f83e271 100644
--- a/frontend/src/core/components/viewer/PdfViewerToolbar.tsx
+++ b/frontend/src/core/components/viewer/PdfViewerToolbar.tsx
@@ -3,12 +3,7 @@ import { Button, Paper, Group, NumberInput } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useViewer } from '@app/contexts/ViewerContext';
 import { Tooltip } from '@app/components/shared/Tooltip';
-import FirstPageIcon from '@mui/icons-material/FirstPage';
-import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-import LastPageIcon from '@mui/icons-material/LastPage';
-import DescriptionIcon from '@mui/icons-material/Description';
-import ViewWeekIcon from '@mui/icons-material/ViewWeek';
+import LocalIcon from '@app/components/shared/LocalIcon';
 
 interface PdfViewerToolbarProps {
   // Page navigation props (placeholders for now)
@@ -139,7 +134,7 @@ export function PdfViewerToolbar({
           style={{ minWidth: '2.5rem' }}
           title={t("viewer.firstPage", "First Page")}
         >
-          <FirstPageIcon fontSize="small" />
+          <LocalIcon icon="first-page-rounded" width={20} height={20} />
         </Button>
 
         {/* Previous Page Button */}
@@ -154,7 +149,7 @@ export function PdfViewerToolbar({
           style={{ minWidth: '2.5rem' }}
           title={t("viewer.previousPage", "Previous Page")}
         >
-          <ArrowBackIosIcon fontSize="small" />
+          <LocalIcon icon="arrow-back-ios-rounded" width={20} height={20} />
         </Button>
 
         {/* Page Input */}
@@ -191,7 +186,7 @@ export function PdfViewerToolbar({
           style={{ minWidth: '2.5rem' }}
           title={t("viewer.nextPage", "Next Page")}
         >
-          <ArrowForwardIosIcon fontSize="small" />
+          <LocalIcon icon="arrow-forward-ios-rounded" width={20} height={20} />
         </Button>
 
         {/* Last Page Button */}
@@ -206,7 +201,7 @@ export function PdfViewerToolbar({
           style={{ minWidth: '2.5rem' }}
           title={t("viewer.lastPage", "Last Page")}
         >
-          <LastPageIcon fontSize="small" />
+          <LocalIcon icon="last-page-rounded" width={20} height={20} />
         </Button>
 
         {/* Dual Page Toggle */}
@@ -228,7 +223,7 @@ export function PdfViewerToolbar({
             disabled={scrollState.totalPages <= 1}
             style={{ minWidth: '2.5rem' }}
           >
-            {isDualPageActive ? <DescriptionIcon fontSize="small" /> : <ViewWeekIcon fontSize="small" />}
+            {isDualPageActive ? <LocalIcon icon="description-rounded" width={20} height={20} /> : <LocalIcon icon="view-week" width={20} height={20} />}
           </Button>
         </Tooltip>
 
diff --git a/frontend/src/core/data/toolsTaxonomy.ts b/frontend/src/core/data/toolsTaxonomy.ts
index baebe28cd..6d8a65c28 100644
--- a/frontend/src/core/data/toolsTaxonomy.ts
+++ b/frontend/src/core/data/toolsTaxonomy.ts
@@ -4,18 +4,8 @@ import { ToolOperationConfig } from '@app/hooks/tools/shared/useToolOperation';
 import { BaseToolProps } from '@app/types/tool';
 import { WorkbenchType } from '@app/types/workbench';
 import { LinkToolId, RegularToolId, SuperToolId, ToolId, ToolKind } from '@app/types/toolId';
-import DrawRoundedIcon from '@mui/icons-material/DrawRounded';
-import SecurityRoundedIcon from '@mui/icons-material/SecurityRounded';
-import VerifiedUserRoundedIcon from '@mui/icons-material/VerifiedUserRounded';
-import RateReviewRoundedIcon from '@mui/icons-material/RateReviewRounded';
-import ViewAgendaRoundedIcon from '@mui/icons-material/ViewAgendaRounded';
-import FileDownloadRoundedIcon from '@mui/icons-material/FileDownloadRounded';
-import DeleteSweepRoundedIcon from '@mui/icons-material/DeleteSweepRounded';
-import SmartToyRoundedIcon from '@mui/icons-material/SmartToyRounded';
-import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
-import TuneRoundedIcon from '@mui/icons-material/TuneRounded';
-import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
 import { ProprietaryToolId } from '@app/types/proprietaryToolId';
+import LocalIcon from '@app/components/shared/LocalIcon';
 
 export enum SubcategoryId {
   SIGNING = 'signing',
@@ -100,32 +90,22 @@ export const SUBCATEGORY_COLOR_MAP: Record<SubcategoryId, string> = {
 };
 
 export const getSubcategoryIcon = (subcategory: SubcategoryId): React.ReactNode => {
-  switch (subcategory) {
-    case SubcategoryId.SIGNING:
-      return React.createElement(DrawRoundedIcon);
-    case SubcategoryId.DOCUMENT_SECURITY:
-      return React.createElement(SecurityRoundedIcon);
-    case SubcategoryId.VERIFICATION:
-      return React.createElement(VerifiedUserRoundedIcon);
-    case SubcategoryId.DOCUMENT_REVIEW:
-      return React.createElement(RateReviewRoundedIcon);
-    case SubcategoryId.PAGE_FORMATTING:
-      return React.createElement(ViewAgendaRoundedIcon);
-    case SubcategoryId.EXTRACTION:
-      return React.createElement(FileDownloadRoundedIcon);
-    case SubcategoryId.REMOVAL:
-      return React.createElement(DeleteSweepRoundedIcon);
-    case SubcategoryId.AUTOMATION:
-      return React.createElement(SmartToyRoundedIcon);
-    case SubcategoryId.GENERAL:
-      return React.createElement(BuildRoundedIcon);
-    case SubcategoryId.ADVANCED_FORMATTING:
-      return React.createElement(TuneRoundedIcon);
-    case SubcategoryId.DEVELOPER_TOOLS:
-      return React.createElement(CodeRoundedIcon);
-    default:
-      return React.createElement(BuildRoundedIcon);
-  }
+  const iconMap: Record<SubcategoryId, string> = {
+    [SubcategoryId.SIGNING]: 'draw-rounded',
+    [SubcategoryId.DOCUMENT_SECURITY]: 'security-rounded',
+    [SubcategoryId.VERIFICATION]: 'verified-user-rounded',
+    [SubcategoryId.DOCUMENT_REVIEW]: 'rate-review-rounded',
+    [SubcategoryId.PAGE_FORMATTING]: 'view-agenda-rounded',
+    [SubcategoryId.EXTRACTION]: 'file-download-rounded',
+    [SubcategoryId.REMOVAL]: 'delete-sweep-rounded',
+    [SubcategoryId.AUTOMATION]: 'smart-toy-rounded',
+    [SubcategoryId.GENERAL]: 'build-rounded',
+    [SubcategoryId.ADVANCED_FORMATTING]: 'tune-rounded',
+    [SubcategoryId.DEVELOPER_TOOLS]: 'code-rounded',
+  };
+
+  const iconName = iconMap[subcategory] || 'build-rounded';
+  return React.createElement(LocalIcon, { icon: iconName, width: 24, height: 24 });
 };
 
 export const getCategoryLabel = (t: TFunction, id: ToolCategoryId): string => t(`toolPicker.categories.${id}`, id);
diff --git a/frontend/src/core/hooks/useFileActionIcons.ts b/frontend/src/core/hooks/useFileActionIcons.ts
deleted file mode 100644
index cfb4037c4..000000000
--- a/frontend/src/core/hooks/useFileActionIcons.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import UploadIcon from '@mui/icons-material/Upload';
-import DownloadOutlinedIcon from '@mui/icons-material/DownloadOutlined';
-
-/**
- * File action icons for web builds
- * Desktop builds override this with different icons
- */
-export function useFileActionIcons() {
-  return {
-    upload: UploadIcon,
-    download: DownloadOutlinedIcon,
-    uploadIconName: 'upload' as const,
-    downloadIconName: 'download' as const,
-  };
-}
diff --git a/frontend/src/core/hooks/useFileActionIcons.tsx b/frontend/src/core/hooks/useFileActionIcons.tsx
new file mode 100644
index 000000000..ec1cdbfca
--- /dev/null
+++ b/frontend/src/core/hooks/useFileActionIcons.tsx
@@ -0,0 +1,18 @@
+import LocalIcon from '@app/components/shared/LocalIcon';
+
+/**
+ * File action icons for web builds
+ * Desktop builds override this with different icons
+ */
+export function useFileActionIcons() {
+  // Create wrapper components for LocalIcon that match the MUI icon interface
+  const UploadIcon = (props: any) => <LocalIcon icon="upload-rounded" width={props.fontSize === 'small' ? 20 : 24} height={props.fontSize === 'small' ? 20 : 24} {...props} />;
+  const DownloadIcon = (props: any) => <LocalIcon icon="download-rounded" width={props.fontSize === 'small' ? 20 : 24} height={props.fontSize === 'small' ? 20 : 24} {...props} />;
+
+  return {
+    upload: UploadIcon,
+    download: DownloadIcon,
+    uploadIconName: 'upload-rounded' as const,
+    downloadIconName: 'download-rounded' as const,
+  };
+}
diff --git a/frontend/src/core/hooks/useSuggestedTools.ts b/frontend/src/core/hooks/useSuggestedTools.tsx
similarity index 73%
rename from frontend/src/core/hooks/useSuggestedTools.ts
rename to frontend/src/core/hooks/useSuggestedTools.tsx
index 857108ed4..e41f9cb84 100644
--- a/frontend/src/core/hooks/useSuggestedTools.ts
+++ b/frontend/src/core/hooks/useSuggestedTools.tsx
@@ -3,13 +3,14 @@ import { useNavigationState } from '@app/contexts/NavigationContext';
 import { useToolNavigation } from '@app/hooks/useToolNavigation';
 import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
 import { ToolId } from '@app/types/toolId';
+import LocalIcon from '@app/components/shared/LocalIcon';
 
-// Material UI Icons
-import CompressIcon from '@mui/icons-material/Compress';
-import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
-import CleaningServicesIcon from '@mui/icons-material/CleaningServices';
-import CropIcon from '@mui/icons-material/Crop';
-import TextFieldsIcon from '@mui/icons-material/TextFields';
+// Icon wrapper components
+const CompressIcon = (props: any) => <LocalIcon icon="compress-rounded" width={24} height={24} {...props} />;
+const SwapHorizIcon = (props: any) => <LocalIcon icon="swap-horiz-rounded" width={24} height={24} {...props} />;
+const CleaningServicesIcon = (props: any) => <LocalIcon icon="cleaning-services-rounded" width={24} height={24} {...props} />;
+const CropIcon = (props: any) => <LocalIcon icon="crop-rounded" width={24} height={24} {...props} />;
+const TextFieldsIcon = (props: any) => <LocalIcon icon="text-fields-rounded" width={24} height={24} {...props} />;
 
 export interface SuggestedTool {
   id: ToolId;
diff --git a/frontend/src/core/pages/HomePage.tsx b/frontend/src/core/pages/HomePage.tsx
index c22a9624d..66584dcb9 100644
--- a/frontend/src/core/pages/HomePage.tsx
+++ b/frontend/src/core/pages/HomePage.tsx
@@ -12,8 +12,6 @@ import { useLogoAssets } from '@app/hooks/useLogoAssets';
 import { useFileContext } from "@app/contexts/file/fileHooks";
 import { useNavigationActions } from "@app/contexts/NavigationContext";
 import { useViewer } from "@app/contexts/ViewerContext";
-import AppsIcon from '@mui/icons-material/AppsRounded';
-
 import ToolPanel from "@app/components/tools/ToolPanel";
 import Workbench from "@app/components/layout/Workbench";
 import QuickAccessBar from "@app/components/shared/QuickAccessBar";
@@ -235,7 +233,7 @@ export default function HomePage() {
                 }
               }}
             >
-              <AppsIcon sx={{ fontSize: '1.5rem' }} />
+              <LocalIcon icon="apps" width="1.5rem" height="1.5rem" />
               <span className="mobile-bottom-button-label">{t('quickAccess.allTools', 'Tools')}</span>
             </button>
             <button
diff --git a/frontend/src/core/tools/Compare.tsx b/frontend/src/core/tools/Compare.tsx
index a2a78a036..c0cf918eb 100644
--- a/frontend/src/core/tools/Compare.tsx
+++ b/frontend/src/core/tools/Compare.tsx
@@ -1,9 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import CompareRoundedIcon from '@mui/icons-material/CompareRounded';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { Box, Group, Stack, Text, Button, Modal, ActionIcon } from '@mantine/core';
-import SwapVertRoundedIcon from '@mui/icons-material/SwapVertRounded';
-import AddIcon from '@mui/icons-material/Add';
 import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
 import { useBaseTool } from '@app/hooks/tools/shared/useBaseTool';
 import { BaseToolProps, ToolComponent } from '@app/types/tool';
@@ -54,7 +52,7 @@ const Compare = (props: BaseToolProps) => {
   const operation = base.operation as CompareOperationHook;
   const params = base.params.parameters;
 
-  const compareIcon = useMemo(() => <CompareRoundedIcon fontSize="small" />, []);
+  const compareIcon = useMemo(() => <LocalIcon icon="compare-rounded" width={20} height={20} />, []);
   const [swapConfirmOpen, setSwapConfirmOpen] = useState(false);
   const [clearConfirmOpen, setClearConfirmOpen] = useState(false);
   const performClearSelected = useCallback(() => {
@@ -366,7 +364,7 @@ const Compare = (props: BaseToolProps) => {
                   }}
                   style={{ flexShrink: 0 }}
                 >
-                  <AddIcon fontSize="small" />
+                  <LocalIcon icon="add-rounded" width={20} height={20} />
                 </ActionIcon>
               )}
             </Box>
@@ -516,7 +514,7 @@ const Compare = (props: BaseToolProps) => {
                   justifyContent: 'center',
                 }}
               >
-                <SwapVertRoundedIcon fontSize="medium" />
+                <LocalIcon icon="swap-vert-rounded" width={24} height={24} />
               </Button>
             </Box>
             )}
diff --git a/frontend/src/core/tools/EditTableOfContents.tsx b/frontend/src/core/tools/EditTableOfContents.tsx
index a86260394..b0c5e29ae 100644
--- a/frontend/src/core/tools/EditTableOfContents.tsx
+++ b/frontend/src/core/tools/EditTableOfContents.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import MenuBookRoundedIcon from '@mui/icons-material/MenuBookRounded';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { alert } from '@app/components/toast';
 import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
 import EditTableOfContentsWorkbenchView, { EditTableOfContentsWorkbenchViewData } from '@app/components/tools/editTableOfContents/EditTableOfContentsWorkbenchView';
@@ -59,7 +59,7 @@ const EditTableOfContents = (props: BaseToolProps) => {
 
   const WORKBENCH_VIEW_ID = 'editTableOfContentsWorkbench';
   const WORKBENCH_ID = 'custom:editTableOfContents' as const;
-  const viewIcon = useMemo(() => <MenuBookRoundedIcon fontSize="small" />, []);
+  const viewIcon = useMemo(() => <LocalIcon icon="menu-book-rounded" width={20} height={20} />, []);
 
   const [loadError, setLoadError] = useState<string | null>(null);
   const [isLoadingBookmarks, setIsLoadingBookmarks] = useState(false);
diff --git a/frontend/src/core/tools/GetPdfInfo.tsx b/frontend/src/core/tools/GetPdfInfo.tsx
index aa35fe16b..18368d7e0 100644
--- a/frontend/src/core/tools/GetPdfInfo.tsx
+++ b/frontend/src/core/tools/GetPdfInfo.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
-import LinkIcon from '@mui/icons-material/Link';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { Stack, Group, Divider, Text, UnstyledButton } from '@mantine/core';
 import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
 import { useBaseTool } from '@app/hooks/tools/shared/useBaseTool';
@@ -41,7 +40,7 @@ const GetPdfInfo = (props: BaseToolProps) => {
 
   const REPORT_VIEW_ID = 'getPdfInfoReport';
   const REPORT_WORKBENCH_ID = 'custom:getPdfInfoReport' as const;
-  const reportIcon = useMemo(() => <PictureAsPdfIcon fontSize="small" />, []);
+  const reportIcon = useMemo(() => <LocalIcon icon="picture-as-pdf-rounded" width={20} height={20} />, []);
 
   const base = useBaseTool(
     'getPdfInfo',
@@ -134,7 +133,7 @@ const GetPdfInfo = (props: BaseToolProps) => {
                   style={{ width: '100%', textAlign: 'left', padding: '8px 4px' }}
                 >
                   <Group justify="flex-start" gap="sm">
-                    <LinkIcon fontSize="small" style={{ opacity: 0.7 }} />
+                    <LocalIcon icon="link-rounded" width={20} height={20} style={{ opacity: 0.7 }} />
                     <Text size="md" c="dimmed">
                       {t(c.labelKey, c.fallback)}
                     </Text>
diff --git a/frontend/src/core/tools/ShowJS.tsx b/frontend/src/core/tools/ShowJS.tsx
index 234298d9b..56eb7add0 100644
--- a/frontend/src/core/tools/ShowJS.tsx
+++ b/frontend/src/core/tools/ShowJS.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
 import { useBaseTool } from '@app/hooks/tools/shared/useBaseTool';
 import type { BaseToolProps, ToolComponent } from '@app/types/tool';
@@ -25,7 +25,7 @@ const ShowJS = (props: BaseToolProps) => {
 
 	const VIEW_ID = 'showJSView';
 	const WORKBENCH_ID = 'custom:showJS' as const;
-	const viewIcon = useMemo(() => <CodeRoundedIcon fontSize="small" />, []);
+	const viewIcon = useMemo(() => <LocalIcon icon="code-rounded" width={20} height={20} />, []);
 
 	const base = useBaseTool('showJS', useShowJSParameters, useShowJSOperation, props, { minFiles: 1 });
 	const operation = base.operation as ShowJSOperationHook;
diff --git a/frontend/src/core/tools/ValidateSignature.tsx b/frontend/src/core/tools/ValidateSignature.tsx
index 30fab68d9..a32704728 100644
--- a/frontend/src/core/tools/ValidateSignature.tsx
+++ b/frontend/src/core/tools/ValidateSignature.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
 import { useBaseTool } from '@app/hooks/tools/shared/useBaseTool';
 import { BaseToolProps, ToolComponent } from '@app/types/tool';
@@ -26,7 +26,7 @@ const ValidateSignature = (props: BaseToolProps) => {
 
   const REPORT_VIEW_ID = 'validateSignatureReport';
   const REPORT_WORKBENCH_ID = 'custom:validateSignatureReport' as const;
-  const reportIcon = useMemo(() => <PictureAsPdfIcon fontSize="small" />, []);
+  const reportIcon = useMemo(() => <LocalIcon icon="picture-as-pdf-rounded" width={20} height={20} />, []);
 
   const base = useBaseTool(
     'validateSignature',
diff --git a/frontend/src/core/tools/pdfTextEditor/PdfTextEditor.tsx b/frontend/src/core/tools/pdfTextEditor/PdfTextEditor.tsx
index 422b06603..92e3d2644 100644
--- a/frontend/src/core/tools/pdfTextEditor/PdfTextEditor.tsx
+++ b/frontend/src/core/tools/pdfTextEditor/PdfTextEditor.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import DescriptionIcon from '@mui/icons-material/DescriptionOutlined';
+import LocalIcon from '@app/components/shared/LocalIcon';
 
 import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
 import { useFileSelection, useFileManagement, useFileContext } from '@app/contexts/FileContext';
@@ -1680,7 +1680,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
       id: WORKBENCH_VIEW_ID,
       workbenchId: WORKBENCH_ID,
       label: viewLabel,
-      icon: <DescriptionIcon fontSize="small" />,
+      icon: <LocalIcon icon="description-rounded" width={20} height={20} />,
       component: PdfTextEditorView,
     });
     setLeftPanelView('hidden');
diff --git a/frontend/src/desktop/hooks/useFileActionIcons.ts b/frontend/src/desktop/hooks/useFileActionIcons.ts
deleted file mode 100644
index 7113bae02..000000000
--- a/frontend/src/desktop/hooks/useFileActionIcons.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import FolderOpenOutlinedIcon from '@mui/icons-material/FolderOpenOutlined';
-import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
-
-/**
- * File action icons for desktop builds
- * Overrides core implementation with desktop-appropriate icons
- */
-export function useFileActionIcons() {
-  return {
-    upload: FolderOpenOutlinedIcon,
-    download: SaveOutlinedIcon,
-    uploadIconName: 'folder-rounded' as const,
-    downloadIconName: 'save-rounded' as const,
-  };
-}
diff --git a/frontend/src/desktop/hooks/useFileActionIcons.tsx b/frontend/src/desktop/hooks/useFileActionIcons.tsx
new file mode 100644
index 000000000..97ee110c6
--- /dev/null
+++ b/frontend/src/desktop/hooks/useFileActionIcons.tsx
@@ -0,0 +1,18 @@
+import LocalIcon from '@app/components/shared/LocalIcon';
+
+/**
+ * File action icons for desktop builds
+ * Overrides core implementation with desktop-appropriate icons
+ */
+export function useFileActionIcons() {
+  // Create wrapper components for LocalIcon that match the MUI icon interface
+  const FolderOpenIcon = (props: any) => <LocalIcon icon="folder-open-rounded" width={props.fontSize === 'small' ? 20 : 24} height={props.fontSize === 'small' ? 20 : 24} {...props} />;
+  const SaveIcon = (props: any) => <LocalIcon icon="save-rounded" width={props.fontSize === 'small' ? 20 : 24} height={props.fontSize === 'small' ? 20 : 24} {...props} />;
+
+  return {
+    upload: FolderOpenIcon,
+    download: SaveIcon,
+    uploadIconName: 'folder-open-rounded' as const,
+    downloadIconName: 'save-rounded' as const,
+  };
+}
diff --git a/frontend/src/proprietary/components/shared/config/configSections/AdminLegalSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AdminLegalSection.tsx
index c927547ae..1e502874e 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/AdminLegalSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/AdminLegalSection.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TextInput, Button, Stack, Paper, Text, Loader, Group, Alert } from '@mantine/core';
-import WarningIcon from '@mui/icons-material/Warning';
+import LocalIcon from '@app/components/shared/LocalIcon';
 import { alert } from '@app/components/toast';
 import RestartConfirmationModal from '@app/components/shared/config/RestartConfirmationModal';
 import { useRestartServer } from '@app/components/shared/config/useRestartServer';
@@ -79,7 +79,7 @@ export default function AdminLegalSection() {
 
       {/* Legal Disclaimer */}
       <Alert
-        icon={<WarningIcon style={{ fontSize: 18 }} />}
+        icon={<LocalIcon icon="warning-rounded" width={18} height={18} />}
         title={t('admin.settings.legal.disclaimer.title', 'Legal Responsibility Warning')}
         color="yellow"
         variant="light"