From e7bec0aaaf019fe0c3040d2d9443233e46a60188 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Sun, 17 Sep 2023 18:49:37 +0200
Subject: [PATCH] perf: migration from font icons to svg icons

---
 package-lock.json                             |  12 ++
 package.json                                  |   2 +
 src/renderer/components/BaseIcon.vue          |  42 +++++++
 src/renderer/components/BaseNotification.vue  |  23 ++--
 src/renderer/components/BaseToast.vue         |  76 ------------
 src/renderer/components/BaseUploadInput.vue   |  19 ++-
 src/renderer/components/KeyPressDetector.vue  |   7 +-
 .../components/ModalAllConnections.vue        |  79 +++++++++---
 .../components/ModalAskCredentials.vue        |   7 +-
 .../components/ModalAskParameters.vue         |   7 +-
 .../components/ModalConnectionAppearance.vue  |  40 ++++++-
 .../components/ModalDiscardChanges.vue        |   7 +-
 src/renderer/components/ModalEditSchema.vue   |   7 +-
 src/renderer/components/ModalExportSchema.vue |  25 ++--
 src/renderer/components/ModalFakerRows.vue    |   9 +-
 .../components/ModalFolderAppearance.vue      |  13 +-
 src/renderer/components/ModalHistory.vue      |  48 ++++++--
 src/renderer/components/ModalImportSchema.vue |   7 +-
 src/renderer/components/ModalNewSchema.vue    |   7 +-
 .../components/ModalProcessesList.vue         |  35 ++++--
 .../components/ModalProcessesListContext.vue  |  32 ++++-
 .../components/ModalProcessesListRow.vue      |   7 +-
 src/renderer/components/ModalSettings.vue     |  59 ++++++++-
 .../components/ModalSettingsChangelog.vue     |   3 +-
 src/renderer/components/ModalSettingsData.vue |  14 ++-
 .../components/ModalSettingsDataExport.vue    |  21 +++-
 .../components/ModalSettingsDataImport.vue    |  28 ++++-
 .../components/ModalSettingsShortcuts.vue     |  51 ++++++--
 .../components/ModalSettingsUpdate.vue        |   3 +-
 .../components/SettingBarConnections.vue      |  33 ++++-
 .../SettingBarConnectionsFolder.vue           |  41 ++++++-
 src/renderer/components/SettingBarContext.vue |  35 +++++-
 src/renderer/components/TheFooter.vue         |  41 +++++--
 src/renderer/components/TheScratchpad.vue     |   7 +-
 src/renderer/components/TheSettingBar.vue     |  27 ++++-
 src/renderer/components/TheTitleBar.vue       |   5 +-
 src/renderer/components/Workspace.vue         | 113 ++++++++++++++----
 .../WorkspaceAddConnectionPanel.vue           |  13 +-
 .../WorkspaceEditConnectionPanel.vue          |  19 ++-
 .../components/WorkspaceEmptyState.vue        |   7 +-
 .../components/WorkspaceExploreBar.vue        |  62 ++++++----
 .../WorkspaceExploreBarMiscContext.vue        |  46 +++++--
 .../WorkspaceExploreBarMiscFolderContext.vue  |  36 +++++-
 .../components/WorkspaceExploreBarSchema.vue  | 102 +++++++++++++---
 .../WorkspaceExploreBarSchemaContext.vue      |  97 ++++++++++++---
 .../WorkspaceExploreBarTableContext.vue       |  55 +++++++--
 .../components/WorkspaceQueryConsole.vue      |   8 +-
 .../components/WorkspaceTabNewFunction.vue    |  25 +++-
 .../components/WorkspaceTabNewRoutine.vue     |  25 +++-
 .../components/WorkspaceTabNewScheduler.vue   |  25 +++-
 .../components/WorkspaceTabNewTable.vue       |  38 +++++-
 .../WorkspaceTabNewTableEmptyState.vue        |   8 +-
 .../components/WorkspaceTabNewTrigger.vue     |  19 ++-
 .../WorkspaceTabNewTriggerFunction.vue        |  22 +++-
 .../components/WorkspaceTabNewView.vue        |  19 ++-
 .../components/WorkspaceTabPropsFunction.vue  |  31 ++++-
 .../WorkspaceTabPropsFunctionParamsModal.vue  |  40 +++++--
 .../components/WorkspaceTabPropsRoutine.vue   |  31 ++++-
 .../WorkspaceTabPropsRoutineParamsModal.vue   |  40 +++++--
 .../components/WorkspaceTabPropsScheduler.vue |  25 +++-
 .../WorkspaceTabPropsSchedulerTimingModal.vue |  25 +++-
 .../components/WorkspaceTabPropsTable.vue     |  44 +++++--
 .../WorkspaceTabPropsTableContext.vue         |  59 +++++++--
 .../WorkspaceTabPropsTableDdlModal.vue        |   7 +-
 .../WorkspaceTabPropsTableForeignModal.vue    |  58 +++++++--
 .../WorkspaceTabPropsTableIndexesModal.vue    |  41 +++++--
 .../components/WorkspaceTabPropsTableRow.vue  |  45 +++++--
 .../components/WorkspaceTabPropsTrigger.vue   |  19 ++-
 .../WorkspaceTabPropsTriggerFunction.vue      |  22 +++-
 .../components/WorkspaceTabPropsView.vue      |  19 ++-
 src/renderer/components/WorkspaceTabQuery.vue |  86 ++++++++++---
 .../components/WorkspaceTabQueryTable.vue     |  50 ++++++--
 .../WorkspaceTabQueryTableContext.vue         |  81 +++++++++++--
 .../components/WorkspaceTabQueryTableRow.vue  |  33 ++++-
 src/renderer/components/WorkspaceTabTable.vue |  55 +++++++--
 .../components/WorkspaceTabTableFilters.vue   |  13 +-
 .../components/WorkspaceTabsContext.vue       |  29 ++++-
 src/renderer/scss/_table-keys.scss            |   5 -
 src/renderer/scss/main.scss                   |   6 +
 src/renderer/untyped.d.ts                     |  31 +++++
 80 files changed, 2024 insertions(+), 489 deletions(-)
 create mode 100644 src/renderer/components/BaseIcon.vue
 delete mode 100644 src/renderer/components/BaseToast.vue

diff --git a/package-lock.json b/package-lock.json
index 65f2123b..30c4fc6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,9 @@
       "dependencies": {
         "@electron/remote": "~2.0.1",
         "@faker-js/faker": "~6.1.2",
+        "@jamescoyle/vue-icon": "~0.1.2",
         "@mdi/font": "~7.2.96",
+        "@mdi/js": "~7.2.96",
         "@turf/helpers": "~6.5.0",
         "@vueuse/core": "~10.4.1",
         "ace-builds": "~1.24.1",
@@ -2018,6 +2020,11 @@
         "node": ">= 14"
       }
     },
+    "node_modules/@jamescoyle/vue-icon": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@jamescoyle/vue-icon/-/vue-icon-0.1.2.tgz",
+      "integrity": "sha512-KFrImXx5TKIi6iQXlnyLEBl4rNosNKbTeRnr70ucTdUaciVmd9qK9d/pZAaKt1Ob/8xNnX2GMp8LisyHdKtEgw=="
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "dev": true,
@@ -2105,6 +2112,11 @@
       "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.2.96.tgz",
       "integrity": "sha512-e//lmkmpFUMZKhmCY9zdjRe4zNXfbOIJnn6xveHbaV2kSw5aJ5dLXUxcRt1Gxfi7ZYpFLUWlkG2MGSFAiqAu7w=="
     },
+    "node_modules/@mdi/js": {
+      "version": "7.2.96",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.2.96.tgz",
+      "integrity": "sha512-paR9M9ZT7rKbh2boksNUynuSZMHhqRYnEZOm/KrZTjQ4/FzyhjLHuvw/8XYzP+E7fS4+/Ms/82EN1pl/OFsiIA=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "dev": true,
diff --git a/package.json b/package.json
index 0c5fc68b..0b28c2cf 100644
--- a/package.json
+++ b/package.json
@@ -122,7 +122,9 @@
   "dependencies": {
     "@electron/remote": "~2.0.1",
     "@faker-js/faker": "~6.1.2",
+    "@jamescoyle/vue-icon": "~0.1.2",
     "@mdi/font": "~7.2.96",
+    "@mdi/js": "~7.2.96",
     "@turf/helpers": "~6.5.0",
     "@vueuse/core": "~10.4.1",
     "ace-builds": "~1.24.1",
diff --git a/src/renderer/components/BaseIcon.vue b/src/renderer/components/BaseIcon.vue
new file mode 100644
index 00000000..1f4b7730
--- /dev/null
+++ b/src/renderer/components/BaseIcon.vue
@@ -0,0 +1,42 @@
+<template>
+   <SvgIcon
+      :type="type"
+      :path="iconPath"
+      :size="size"
+      :flip="flip"
+      :rotate="rotate"
+   />
+</template>
+
+<script setup lang="ts">
+import SvgIcon from '@jamescoyle/vue-icon';
+import * as Icons from '@mdi/js';
+import { computed, PropType } from 'vue';
+
+const props = defineProps({
+   iconName: {
+      type: String,
+      required: true
+   },
+   size: {
+      type: Number,
+      default: 48
+   },
+   type: {
+      type: String,
+      default: () => 'mdi'
+   },
+   flip: {
+      type: String as PropType<'horizontal' | 'vertical' | 'both'>,
+      default: () => null
+   },
+   rotate: {
+      type: String,
+      default: () => null
+   }
+});
+
+const iconPath = computed(() => {
+   return (Icons as {[k:string]: string})[props.iconName];
+});
+</script>
diff --git a/src/renderer/components/BaseNotification.vue b/src/renderer/components/BaseNotification.vue
index c23bade8..e865f5f5 100644
--- a/src/renderer/components/BaseNotification.vue
+++ b/src/renderer/components/BaseNotification.vue
@@ -1,13 +1,18 @@
 <template>
    <div class="toast mt-2" :class="notificationStatus.className">
       <span class="p-vcentered text-left" :class="{'expanded': isExpanded}">
-         <i class="mdi mdi-24px mr-2" :class="notificationStatus.iconName" />
+         <BaseIcon
+            :icon-name="notificationStatus.iconName"
+            class="mr-2"
+            :size="24"
+         />
          <span class="notification-message">{{ message }}</span>
       </span>
-      <i
+      <BaseIcon
          v-if="isExpandable"
-         class="mdi mdi-24px c-hand expand-btn"
-         :class="isExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+         :icon-name="isExpanded ? 'mdiChevronUp' : 'mdiChevronDown'"
+         class=" c-hand expand-btn"
+         :size="24"
          @click="toggleExpand"
       />
       <button class="btn btn-clear ml-2" @click="hideToast" />
@@ -17,6 +22,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
+import BaseIcon from '@/components/BaseIcon.vue';
+
 const props = defineProps({
    message: {
       type: String,
@@ -36,19 +43,19 @@ const notificationStatus = computed(() => {
    switch (props.status) {
       case 'success':
          className = 'toast-success';
-         iconName = 'mdi-check';
+         iconName = 'mdiCheck';
          break;
       case 'error':
          className = 'toast-error';
-         iconName = 'mdi-alert-rhombus';
+         iconName = 'mdiAlertRhombus';
          break;
       case 'warning':
          className = 'toast-warning';
-         iconName = 'mdi-alert';
+         iconName = 'mdiAlert';
          break;
       case 'primary':
          className = 'toast-primary';
-         iconName = 'mdi-information-outline';
+         iconName = 'mdiInformationOutline';
          break;
    }
 
diff --git a/src/renderer/components/BaseToast.vue b/src/renderer/components/BaseToast.vue
deleted file mode 100644
index e03bba24..00000000
--- a/src/renderer/components/BaseToast.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-   <div
-      :style="{display: isVisible ? 'flex' : 'none'}"
-      class="toast mt-2"
-      :class="toastStatus.className"
-   >
-      <span class="p-vcentered text-left"><i class="mdi mdi-24px mr-1" :class="toastStatus.iconName" /> {{ message }}</span>
-      <button class="btn btn-clear" @click="hideToast" />
-   </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-
-const props = defineProps({
-   message: {
-      type: String,
-      default: ''
-   },
-   status: {
-      type: String,
-      default: ''
-   }
-});
-
-const isVisible = ref(false);
-const message = ref(props.message);
-
-const emit = defineEmits(['close']);
-
-const toastStatus = computed(() => {
-   let className = '';
-   let iconName = '';
-   switch (props.status) {
-      case 'success':
-         className = 'toast-success';
-         iconName = 'mdi-check';
-         break;
-      case 'error':
-         className = 'toast-error';
-         iconName = 'mdi-alert-rhombus';
-         break;
-      case 'warning':
-         className = 'toast-warning';
-         iconName = 'mdi-alert';
-         break;
-      case 'primary':
-         className = 'toast-primary';
-         iconName = 'mdi-information-outline';
-         break;
-   }
-
-   return { className, iconName };
-});
-
-watch(message, () => {
-   if (message.value)
-      isVisible.value = true;
-   else
-      isVisible.value = false;
-});
-
-const hideToast = () => {
-   isVisible.value = false;
-   emit('close');
-};
-</script>
-
-<style scoped>
-  .toast {
-    display: flex;
-    justify-content: space-between;
-    user-select: text;
-    word-break: break-all;
-  }
-</style>
diff --git a/src/renderer/components/BaseUploadInput.vue b/src/renderer/components/BaseUploadInput.vue
index eeee9967..628917bf 100644
--- a/src/renderer/components/BaseUploadInput.vue
+++ b/src/renderer/components/BaseUploadInput.vue
@@ -1,14 +1,20 @@
 <template>
    <label :for="`id_${id}`" class="file-uploader">
       <span class="file-uploader-message">
-         <i class="mdi mdi-folder-open mr-1" />{{ message }}
+         <BaseIcon
+            icon-name="mdiFolderOpen"
+            class="mr-1 mt-1"
+            :size="18"
+         />{{ message }}
       </span>
       <span class="text-ellipsis file-uploader-value">
          {{ lastPart(modelValue, 19) }}
       </span>
-      <i
+      <BaseIcon
          v-if="modelValue"
-         class="file-uploader-reset mdi mdi-close"
+         class="file-upload-icon-clear"
+         icon-name="mdiClose"
+         :size="18"
          @click.prevent="clear"
       />
       <form :ref="`form_${id}`">
@@ -26,6 +32,7 @@
 <script setup lang="ts">
 import { uidGen } from 'common/libs/uidGen';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import { useFilters } from '@/composables/useFilters';
 
 const { lastPart } = useFilters();
@@ -65,6 +72,12 @@ const clear = () => {
   position: relative;
   flex: 1 1 auto;
 
+  .file-upload-icon-clear {
+   position: absolute;
+   right: 4px;
+   top: 8px;
+  }
+
   > span {
     padding: 0.25rem 0.4rem;
   }
diff --git a/src/renderer/components/KeyPressDetector.vue b/src/renderer/components/KeyPressDetector.vue
index 8b75cc45..88ae0ab1 100644
--- a/src/renderer/components/KeyPressDetector.vue
+++ b/src/renderer/components/KeyPressDetector.vue
@@ -9,13 +9,18 @@
          @blur="isFocus = false"
          @keydown.prevent.stop="onKey"
       >
-      <i class="form-icon mdi mdi-keyboard-outline mdi-24px" />
+      <BaseIcon
+         icon-name="mdiKeyboardOutline"
+         class="form-icon"
+         :size="24"
+      />
    </div>
 </template>
 <script setup lang="ts">
 import { computed, PropType, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import Application from '@/ipc-api/Application';
 
 const { t } = useI18n();
diff --git a/src/renderer/components/ModalAllConnections.vue b/src/renderer/components/ModalAllConnections.vue
index 6e4fe8a2..c3385877 100644
--- a/src/renderer/components/ModalAllConnections.vue
+++ b/src/renderer/components/ModalAllConnections.vue
@@ -6,7 +6,11 @@
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
-                     <i class="mdi mdi-24px mdi-apps mr-1" />
+                     <BaseIcon
+                        icon-name="mdiApps"
+                        class="mr-1"
+                        :size="24"
+                     />
                      <span class="cut-text">{{ t('connection.allConnections') }}</span>
                   </div>
                </div>
@@ -24,10 +28,17 @@
                               :placeholder="t('connection.searchForConnections')"
                               @keypress.esc="searchTerm = ''"
                            >
-                           <i v-if="!searchTerm" class="form-icon mdi mdi-magnify mdi-18px pr-4" />
-                           <i
+                           <BaseIcon
+                              v-if="!searchTerm"
+                              icon-name="mdiMagnify"
+                              class="form-icon pr-4"
+                              :size="18"
+                           />
+                           <BaseIcon
                               v-else
-                              class="form-icon c-hand mdi mdi-backspace mdi-18px pr-4"
+                              icon-name="mdiBackspace"
+                              class="form-icon c-hand pr-4"
+                              :size="18"
                               @click="searchTerm = ''"
                            />
                         </div>
@@ -56,9 +67,11 @@
                                  {{ clients.get(connection.client) || connection.client }}
                               </div>
                               <div class="all-connections-buttons p-absolute d-flex" :style="'top: 0; right: 0;'">
-                                 <i
-                                    class="all-connections-delete mdi mdi-delete mdi-18px ml-2"
+                                 <BaseIcon
+                                    icon-name="mdiDelete"
+                                    class="all-connections-delete ml-2"
                                     :title="t('general.delete')"
+                                    :size="18"
                                     @click.stop="askToDelete(connection)"
                                  />
                               </div>
@@ -66,32 +79,57 @@
                            <div class="panel-body text-center">
                               <div v-if="connection.databasePath">
                                  <div class="text-ellipsis" :title="connection.databasePath">
-                                    <i class="mdi mdi-database d-inline" /> <span class="text-bold">{{
+                                    <BaseIcon
+                                       icon-name="mdiDatabase"
+                                       class="p-relative"
+                                       :style="'top:3px'"
+                                       :size="18"
+                                    /> <span class="text-bold">{{
                                        connection.databasePath
                                     }}</span>
                                  </div>
                               </div>
                               <div v-else>
                                  <div class="text-ellipsis" :title="`${connection.host}:${connection.port}`">
-                                    <i class="mdi mdi-server d-inline" /> <span class="text-bold">{{ connection.host
+                                    <BaseIcon
+                                       icon-name="mdiServer"
+                                       class="p-relative"
+                                       :style="'top:3px'"
+                                       :size="18"
+                                    /> <span class="text-bold">{{ connection.host
                                     }}:{{ connection.port }}</span>
                                  </div>
                               </div>
                               <div v-if="connection.user">
                                  <div class="text-ellipsis">
-                                    <i class="mdi mdi-account d-inline" /> <span class="text-bold">{{ connection.user
+                                    <BaseIcon
+                                       icon-name="mdiAccount"
+                                       class="p-relative"
+                                       :style="'top:3px'"
+                                       :size="18"
+                                    /> <span class="text-bold">{{ connection.user
                                     }}</span>
                                  </div>
                               </div>
                               <div v-if="connection.schema">
                                  <div class="text-ellipsis">
-                                    <i class="mdi mdi-database d-inline" /> <span class="text-bold">{{ connection.schema
+                                    <BaseIcon
+                                       icon-name="mdiDatabase"
+                                       class="p-relative"
+                                       :style="'top:3px'"
+                                       :size="18"
+                                    /> <span class="text-bold">{{ connection.schema
                                     }}</span>
                                  </div>
                               </div>
                               <div v-if="connection.database">
                                  <div class="text-ellipsis">
-                                    <i class="mdi mdi-database d-inline" /> <span class="text-bold">{{
+                                    <BaseIcon
+                                       icon-name="mdiDatabase"
+                                       class="p-relative"
+                                       :style="'top:3px'"
+                                       :size="18"
+                                    /> <span class="text-bold">{{
                                        connection.database
                                     }}</span>
                                  </div>
@@ -99,11 +137,19 @@
                            </div>
                            <div class="panel-footer text-center py-0">
                               <div v-if="connection.ssl" class="chip bg-success mt-2">
-                                 <i class="mdi mdi-shield-key mdi-18px mr-1" />
+                                 <BaseIcon
+                                    icon-name="mdiShieldKey"
+                                    class="mr-1"
+                                    :size="18"
+                                 />
                                  SSL
                               </div>
                               <div v-if="connection.ssh" class="chip bg-success mt-2">
-                                 <i class="mdi mdi-console-network mdi-18px mr-1" />
+                                 <BaseIcon
+                                    icon-name="mdiConsoleNetwork"
+                                    class="mr-1"
+                                    :size="18"
+                                 />
                                  SSH
                               </div>
                            </div>
@@ -130,7 +176,11 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-server-remove mr-1" /> {{ t('connection.deleteConnection') }}
+               <BaseIcon
+                  icon-name="mdiServerRemove"
+                  class="mr-1"
+                  :size="24"
+               /> {{ t('connection.deleteConnection') }}
             </div>
          </template>
          <template #body>
@@ -149,6 +199,7 @@ import { computed, onBeforeUnmount, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import { useFocusTrap } from '@/composables/useFocusTrap';
 import { useConnectionsStore } from '@/stores/connections';
 import { useWorkspacesStore } from '@/stores/workspaces';
diff --git a/src/renderer/components/ModalAskCredentials.vue b/src/renderer/components/ModalAskCredentials.vue
index 67ab6e6b..2ba4c385 100644
--- a/src/renderer/components/ModalAskCredentials.vue
+++ b/src/renderer/components/ModalAskCredentials.vue
@@ -6,7 +6,11 @@
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
-                     <i class="mdi mdi-24px mdi-key-variant mr-1" /> {{ t('connection.credentials') }}
+                     <BaseIcon
+                        icon-name="mdiKeyVariant"
+                        class="mr-1"
+                        :size="24"
+                     /> {{ t('connection.credentials') }}
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -59,6 +63,7 @@
 import { Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import { useFocusTrap } from '@/composables/useFocusTrap';
 
 const { t } = useI18n();
diff --git a/src/renderer/components/ModalAskParameters.vue b/src/renderer/components/ModalAskParameters.vue
index 73ad4d18..df66b6f7 100644
--- a/src/renderer/components/ModalAskParameters.vue
+++ b/src/renderer/components/ModalAskParameters.vue
@@ -8,7 +8,11 @@
    >
       <template #header>
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-play mr-1" />
+            <BaseIcon
+               icon-name="mdiPlay"
+               class="mr-1"
+               :size="24"
+            />
             <span class="cut-text">{{ t('database.parameters') }}: {{ localRoutine.name }}</span>
          </div>
       </template>
@@ -54,6 +58,7 @@ import { computed, PropType, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import { useFilters } from '@/composables/useFilters';
 
 const { t } = useI18n();
diff --git a/src/renderer/components/ModalConnectionAppearance.vue b/src/renderer/components/ModalConnectionAppearance.vue
index 26b3a978..8c968ce4 100644
--- a/src/renderer/components/ModalConnectionAppearance.vue
+++ b/src/renderer/components/ModalConnectionAppearance.vue
@@ -6,7 +6,11 @@
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
-                     <i class="mdi mdi-24px mdi-brush-variant mr-1" />
+                     <BaseIcon
+                        icon-name="mdiBrushVariant"
+                        class="mr-1"
+                        :size="24"
+                     />
                      <span class="cut-text">{{ t('application.editConnectionAppearance') }}</span>
                   </div>
                </div>
@@ -37,11 +41,24 @@
                            <div
                               v-for="icon in icons"
                               :key="icon.name"
-                              class="icon-box"
-                              :title="icon.name"
-                              :class="[icon.code ? `mdi ${icon.code} mdi-36px` : `dbi dbi-${connection.client}`, {'selected': localConnection.icon === icon.code}]"
-                              @click="localConnection.icon = icon.code"
-                           />
+                           >
+                              <BaseIcon
+                                 v-if="icon.code"
+                                 :icon-name="camelize(icon.code)"
+                                 :size="36"
+                                 class="icon-box"
+                                 :title="icon.name"
+                                 :class="[{'selected': localConnection.icon === icon.code}]"
+                                 @click="localConnection.icon = icon.code"
+                              />
+                              <div
+                                 v-else
+                                 class="icon-box"
+                                 :title="icon.name"
+                                 :class="[`dbi dbi-${connection.client}`, {'selected': localConnection.icon === icon.code}]"
+                                 @click="localConnection.icon = icon.code"
+                              />
+                           </div>
                         </div>
                      </div>
                   </form>
@@ -64,6 +81,7 @@
 import { onBeforeUnmount, PropType, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import { useFocusTrap } from '@/composables/useFocusTrap';
 import { unproxify } from '@/libs/unproxify';
 import { SidebarElement, useConnectionsStore } from '@/stores/connections';
@@ -142,6 +160,16 @@ const editFolderAppearance = () => {
    closeModal();
 };
 
+const camelize = (text: string) => {
+   const textArr = text.split('-');
+   for (let i = 0; i < textArr.length; i++) {
+      if (i === 0) continue;
+      textArr[i] = textArr[i].charAt(0).toUpperCase() + textArr[i].slice(1);
+   }
+
+   return textArr.join('');
+};
+
 const closeModal = () => emit('close');
 
 const onKey =(e: KeyboardEvent) => {
diff --git a/src/renderer/components/ModalDiscardChanges.vue b/src/renderer/components/ModalDiscardChanges.vue
index a2083b67..f54796a7 100644
--- a/src/renderer/components/ModalDiscardChanges.vue
+++ b/src/renderer/components/ModalDiscardChanges.vue
@@ -7,7 +7,11 @@
    >
       <template #header>
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-content-save-alert mr-1" /> {{ t('application.unsavedChanges') }}
+            <BaseIcon
+               icon-name="mdiContentSaveAlert"
+               class="mr-1"
+               :size="24"
+            /> {{ t('application.unsavedChanges') }}
          </div>
       </template>
       <template #body>
@@ -23,6 +27,7 @@ import { onBeforeUnmount } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 
 const { t } = useI18n();
 
diff --git a/src/renderer/components/ModalEditSchema.vue b/src/renderer/components/ModalEditSchema.vue
index bc354d81..38550fc4 100644
--- a/src/renderer/components/ModalEditSchema.vue
+++ b/src/renderer/components/ModalEditSchema.vue
@@ -6,7 +6,11 @@
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
-                     <i class="mdi mdi-24px mdi-database-edit mr-1" />
+                     <BaseIcon
+                        icon-name="mdiDatabaseEdit"
+                        class="mr-1"
+                        :size="24"
+                     />
                      <span class="cut-text">{{ t('database.editSchema') }}</span>
                   </div>
                </div>
@@ -68,6 +72,7 @@ import { storeToRefs } from 'pinia';
 import { computed, onBeforeUnmount, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import { useFocusTrap } from '@/composables/useFocusTrap';
 import Schema from '@/ipc-api/Schema';
diff --git a/src/renderer/components/ModalExportSchema.vue b/src/renderer/components/ModalExportSchema.vue
index 30c27677..70efb786 100644
--- a/src/renderer/components/ModalExportSchema.vue
+++ b/src/renderer/components/ModalExportSchema.vue
@@ -6,7 +6,11 @@
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
-                     <i class="mdi mdi-24px mdi-database-export mr-1" />
+                     <BaseIcon
+                        icon-name="mdiDatabaseExport"
+                        class="mr-1"
+                        :size="24"
+                     />
                      <span class="cut-text">{{ t('database.exportSchema') }}</span>
                   </div>
                </div>
@@ -44,7 +48,11 @@
                   <div class="column col-8 left">
                      <div class="columns mb-2 mt-1 p-vcentered">
                         <div class="column col-auto input-group d-flex text-italic" :style="'flex-grow: 1'">
-                           <i class="input-group-addon mdi mdi-file-document-outline" />
+                           <BaseIcon
+                              icon-name="mdiFileDocumentOutline"
+                              class="input-group-addon"
+                              :size="36"
+                           />
                            <input
                               v-model="chosenFilename"
                               class="form-input"
@@ -56,27 +64,27 @@
 
                         <div class="column col-auto col-ml-auto ">
                            <button
-                              class="btn btn-dark btn-sm"
+                              class="btn btn-dark btn-sm pt-1"
                               :title="t('general.refresh')"
                               @click="refresh"
                            >
-                              <i class="mdi mdi-refresh" />
+                              <BaseIcon icon-name="mdiRefresh" :size="15" />
                            </button>
                            <button
-                              class="btn btn-dark btn-sm mx-1"
+                              class="btn btn-dark btn-sm mx-1 pt-1"
                               :title="t('database.uncheckAllTables')"
                               :disabled="isRefreshing"
                               @click="uncheckAllTables"
                            >
-                              <i class="mdi mdi-checkbox-blank-outline" />
+                              <BaseIcon icon-name="mdiCheckboxBlankOutline" :size="15" />
                            </button>
                            <button
-                              class="btn btn-dark btn-sm"
+                              class="btn btn-dark btn-sm pt-1"
                               :title="t('database.checkAllTables')"
                               :disabled="isRefreshing"
                               @click="checkAllTables"
                            >
-                              <i class="mdi mdi-checkbox-marked-outline" />
+                              <BaseIcon icon-name="mdiCheckboxMarkedOutline" :size="15" />
                            </button>
                         </div>
                      </div>
@@ -280,6 +288,7 @@ import { storeToRefs } from 'pinia';
 import { computed, onBeforeUnmount, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import { useFocusTrap } from '@/composables/useFocusTrap';
 import Application from '@/ipc-api/Application';
diff --git a/src/renderer/components/ModalFakerRows.vue b/src/renderer/components/ModalFakerRows.vue
index b99b005e..a28aec12 100644
--- a/src/renderer/components/ModalFakerRows.vue
+++ b/src/renderer/components/ModalFakerRows.vue
@@ -6,7 +6,11 @@
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
-                     <i class="mdi mdi-24px mdi-playlist-plus mr-1" />
+                     <BaseIcon
+                        icon-name="mdiPlaylistPlus"
+                        :size="24"
+                        class="mr-1"
+                     />
                      <span class="cut-text">{{ t('database.insertRow', 2) }}</span>
                   </div>
                </div>
@@ -64,7 +68,7 @@
                         :disabled="isInserting"
                      >
                      <span class="input-group-addon">
-                        <i class="mdi mdi-24px mdi-repeat" />
+                        <BaseIcon icon-name="mdiRepeat" :size="24" />
                      </span>
                   </div>
                   <div
@@ -105,6 +109,7 @@ import { storeToRefs } from 'pinia';
 import { computed, onBeforeMount, onMounted, Prop, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import FakerSelect from '@/components/FakerSelect.vue';
 import { useFilters } from '@/composables/useFilters';
diff --git a/src/renderer/components/ModalFolderAppearance.vue b/src/renderer/components/ModalFolderAppearance.vue
index 3dd00298..7cae7c2a 100644
--- a/src/renderer/components/ModalFolderAppearance.vue
+++ b/src/renderer/components/ModalFolderAppearance.vue
@@ -6,7 +6,11 @@
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
-                     <i class="mdi mdi-24px mdi-folder-edit mr-1" />
+                     <BaseIcon
+                        icon-name="mdiFolderEdit"
+                        class="mr-1"
+                        :size="24"
+                     />
                      <span class="cut-text">{{ t('application.editFolder') }}</span>
                   </div>
                </div>
@@ -43,7 +47,11 @@
                               :style="`background-color: ${color.hex}`"
                               @click="localFolder.color = color.hex"
                            >
-                              <i v-if="localFolder.color === color.hex" class="mdi mdi-check" />
+                              <BaseIcon
+                                 v-if="localFolder.color === color.hex"
+                                 icon-name="mdiCheck"
+                                 :size="16"
+                              />
                            </div>
                         </div>
                      </div>
@@ -67,6 +75,7 @@
 import { onBeforeUnmount, PropType, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import { useFocusTrap } from '@/composables/useFocusTrap';
 import { unproxify } from '@/libs/unproxify';
 import { SidebarElement, useConnectionsStore } from '@/stores/connections';
diff --git a/src/renderer/components/ModalHistory.vue b/src/renderer/components/ModalHistory.vue
index 3442f9ce..f2f5c616 100644
--- a/src/renderer/components/ModalHistory.vue
+++ b/src/renderer/components/ModalHistory.vue
@@ -6,7 +6,11 @@
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
-                     <i class="mdi mdi-24px mdi-history mr-1" />
+                     <BaseIcon
+                        icon-name="mdiHistory"
+                        class="mr-1"
+                        :size="24"
+                     />
                      <span class="cut-text">{{ t('general.history') }}: {{ connectionName }}</span>
                   </div>
                </div>
@@ -24,17 +28,24 @@
                      type="text"
                      :placeholder="t('database.searchForQueries')"
                   >
-                  <i v-if="!searchTerm" class="form-icon mdi mdi-magnify mdi-18px pr-4" />
-                  <i
+                  <BaseIcon
+                     v-if="!searchTerm"
+                     icon-name="mdiMagnify"
+                     class="form-icon pr-2"
+                     :size="18"
+                  />
+                  <BaseIcon
                      v-else
-                     class="form-icon c-hand mdi mdi-backspace mdi-18px pr-4"
+                     icon-name="mdiBackspace"
+                     class="form-icon c-hand pr-2"
+                     :size="18"
                      @click="searchTerm = ''"
                   />
                </div>
                <div
                   v-if="history.length"
                   ref="tableWrapper"
-                  class="vscroll px-1 "
+                  class="vscroll px-1"
                   :style="{'height': resultsSize+'px'}"
                >
                   <div ref="table">
@@ -53,7 +64,11 @@
                               tabindex="0"
                            >
                               <div class="tile-icon">
-                                 <i class="mdi mdi-code-tags pr-1" />
+                                 <BaseIcon
+                                    icon-name="mdiCodeTags"
+                                    class="pr-1"
+                                    :size="24"
+                                 />
                               </div>
                               <div class="tile-content">
                                  <div class="tile-title">
@@ -67,13 +82,25 @@
                                     <small class="tile-subtitle">{{ query.schema }} · {{ formatDate(query.date) }}</small>
                                     <div class="tile-history-buttons">
                                        <button class="btn btn-link pl-1" @click.stop="$emit('select-query', query.sql)">
-                                          <i class="mdi mdi-open-in-app pr-1" /> {{ t('general.select') }}
+                                          <BaseIcon
+                                             icon-name="mdiOpenInApp"
+                                             class="pr-1"
+                                             :size="22"
+                                          /> {{ t('general.select') }}
                                        </button>
                                        <button class="btn btn-link pl-1" @click="copyQuery(query.sql)">
-                                          <i class="mdi mdi-content-copy pr-1" /> {{ t('general.copy') }}
+                                          <BaseIcon
+                                             icon-name="mdiContentCopy"
+                                             class="pr-1"
+                                             :size="22"
+                                          /> {{ t('general.copy') }}
                                        </button>
                                        <button class="btn btn-link pl-1" @click="deleteQuery(query)">
-                                          <i class="mdi mdi-delete-forever pr-1" /> {{ t('general.delete') }}
+                                          <BaseIcon
+                                             icon-name="mdiDeleteForever"
+                                             class="pr-1"
+                                             :size="22"
+                                          /> {{ t('general.delete') }}
                                        </button>
                                     </div>
                                  </div>
@@ -85,7 +112,7 @@
                </div>
                <div v-else class="empty">
                   <div class="empty-icon">
-                     <i class="mdi mdi-history mdi-48px" />
+                     <BaseIcon icon-name="mdiHistory" :size="48" />
                   </div>
                   <p class="empty-title h5">
                      {{ t('database.thereIsNoQueriesYet') }}
@@ -102,6 +129,7 @@ import { ConnectionParams } from 'common/interfaces/antares';
 import { Component, computed, ComputedRef, onBeforeUnmount, onMounted, onUpdated, Prop, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
 import { useFilters } from '@/composables/useFilters';
 import { useFocusTrap } from '@/composables/useFocusTrap';
diff --git a/src/renderer/components/ModalImportSchema.vue b/src/renderer/components/ModalImportSchema.vue
index 07f88d70..428f70c4 100644
--- a/src/renderer/components/ModalImportSchema.vue
+++ b/src/renderer/components/ModalImportSchema.vue
@@ -6,7 +6,11 @@
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
-                     <i class="mdi mdi-24px mdi-database-import mr-1" />
+                     <BaseIcon
+                        icon-name="mdiDatabaseImport"
+                        class="mr-1"
+                        :size="24"
+                     />
                      <span class="cut-text">{{ t('database.importSchema') }}</span>
                   </div>
                </div>
@@ -57,6 +61,7 @@ import { storeToRefs } from 'pinia';
 import { computed, onBeforeUnmount, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import Schema from '@/ipc-api/Schema';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
diff --git a/src/renderer/components/ModalNewSchema.vue b/src/renderer/components/ModalNewSchema.vue
index 23680b44..a515b80e 100644
--- a/src/renderer/components/ModalNewSchema.vue
+++ b/src/renderer/components/ModalNewSchema.vue
@@ -6,7 +6,11 @@
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
-                     <i class="mdi mdi-24px mdi-database-plus mr-1" />
+                     <BaseIcon
+                        icon-name="mdiDatabasePlus"
+                        class="mr-1"
+                        :size="24"
+                     />
                      <span class="cut-text">{{ t('database.createNewSchema') }}</span>
                   </div>
                </div>
@@ -71,6 +75,7 @@ import { storeToRefs } from 'pinia';
 import { computed, onBeforeUnmount, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import { useFocusTrap } from '@/composables/useFocusTrap';
 import Schema from '@/ipc-api/Schema';
diff --git a/src/renderer/components/ModalProcessesList.vue b/src/renderer/components/ModalProcessesList.vue
index 2495ad82..cb7695dc 100644
--- a/src/renderer/components/ModalProcessesList.vue
+++ b/src/renderer/components/ModalProcessesList.vue
@@ -16,7 +16,11 @@
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
-                     <i class="mdi mdi-24px mdi-memory mr-1" />
+                     <BaseIcon
+                        icon-name="mdiMemory"
+                        class="mr-1"
+                        :size="24"
+                     />
                      <span class="cut-text">{{ t('database.processesList') }}: {{ connectionName }}</span>
                   </div>
                </div>
@@ -32,11 +36,21 @@
                            :title="`${t('general.refresh')}`"
                            @click="getProcessesList"
                         >
-                           <i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh mr-1" />
-                           <i v-else class="mdi mdi-24px mdi-history mdi-flip-h mr-1" />
+                           <BaseIcon
+                              v-if="!+autorefreshTimer"
+                              icon-name="mdiRefresh"
+                              :size="24"
+                           />
+                           <BaseIcon
+                              v-else
+                              icon-name="mdiHistory"
+                              flip="horizontal"
+                              class="mr-1"
+                              :size="24"
+                           />
                         </button>
                         <div class="btn btn-dark btn-sm dropdown-toggle pl-0 pr-0" tabindex="0">
-                           <i class="mdi mdi-24px mdi-menu-down" />
+                           <BaseIcon icon-name="mdiMenuDown" :size="24" />
                         </div>
                         <div class="menu px-3">
                            <span>{{ t('general.autoRefresh') }}: <b>{{ +autorefreshTimer ? `${autorefreshTimer}s` : 'OFF' }}</b></span>
@@ -58,9 +72,9 @@
                         class="btn btn-dark btn-sm dropdown-toggle d-flex mr-0 pr-0"
                         tabindex="0"
                      >
-                        <i class="mdi mdi-24px mdi-file-export mr-1" />
+                        <BaseIcon icon-name="mdiFileExport" :size="24" />
                         <span>{{ t('database.export') }}</span>
-                        <i class="mdi mdi-24px mdi-menu-down" />
+                        <BaseIcon icon-name="mdiMenuDown" :size="24" />
                      </button>
                      <ul class="menu text-left">
                         <li class="menu-item">
@@ -95,10 +109,12 @@
                               <div ref="columnResize" class="column-resizable">
                                  <div class="table-column-title" @click="sort(field)">
                                     <span>{{ field.toUpperCase() }}</span>
-                                    <i
+
+                                    <BaseIcon
                                        v-if="currentSort === field"
-                                       class="mdi sort-icon"
-                                       :class="currentSortDir === 'asc' ? 'mdi-sort-ascending':'mdi-sort-descending'"
+                                       :icon-name="currentSortDir === 'asc' ? 'mdiSortAscending':'mdiSortDescending'"
+                                       :size="18"
+                                       class="ml-1"
                                     />
                                  </div>
                               </div>
@@ -139,6 +155,7 @@ import { ipcRenderer } from 'electron';
 import { Component, computed, onBeforeUnmount, onMounted, onUpdated, Prop, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
 import ModalProcessesListContext from '@/components/ModalProcessesListContext.vue';
 import ModalProcessesListRow from '@/components/ModalProcessesListRow.vue';
diff --git a/src/renderer/components/ModalProcessesListContext.vue b/src/renderer/components/ModalProcessesListContext.vue
index 841bcc29..ce4865a8 100644
--- a/src/renderer/components/ModalProcessesListContext.vue
+++ b/src/renderer/components/ModalProcessesListContext.vue
@@ -4,8 +4,16 @@
       @close-context="closeContext"
    >
       <div v-if="props.selectedRow" class="context-element">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-content-copy text-light pr-1" /> {{ t('general.copy') }}</span>
-         <i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
+         <span class="d-flex"><BaseIcon
+            icon-name="mdiContentCopy"
+            class="text-light mt-1 mr-1"
+            :size="18"
+         /> {{ t('general.copy') }}</span>
+         <BaseIcon
+            icon-name="mdiChevronRight"
+            class="text-light"
+            :size="18"
+         />
          <div class="context-submenu">
             <div
                v-if="props.selectedRow"
@@ -13,7 +21,12 @@
                @click="copyCell"
             >
                <span class="d-flex">
-                  <i class="mdi mdi-18px mdi-numeric-0 mdi-rotate-90 text-light pr-1" /> {{ t('database.cell', 1) }}
+                  <BaseIcon
+                     icon-name="mdiNumeric0"
+                     rotate="90deg"
+                     class="text-light mt-1 mr-1"
+                     :size="18"
+                  /> {{ t('database.cell', 1) }}
                </span>
             </div>
             <div
@@ -22,7 +35,11 @@
                @click="copyRow"
             >
                <span class="d-flex">
-                  <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('database.row', 1) }}
+                  <BaseIcon
+                     icon-name="mdiTableRow"
+                     class="text-light mt-1 mr-1"
+                     :size="18"
+                  /> {{ t('database.row', 1) }}
                </span>
             </div>
          </div>
@@ -33,7 +50,11 @@
          @click="killProcess"
       >
          <span class="d-flex">
-            <i class="mdi mdi-18px mdi-close-circle-outline text-light pr-1" /> {{ t('database.killProcess') }}
+            <BaseIcon
+               icon-name="mdiCloseCircleOutline"
+               class="text-light mt-1 mr-1"
+               :size="18"
+            /> {{ t('database.killProcess') }}
          </span>
       </div>
    </BaseContextMenu>
@@ -43,6 +64,7 @@
 import { useI18n } from 'vue-i18n';
 
 import BaseContextMenu from '@/components/BaseContextMenu.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 
 const { t } = useI18n();
 
diff --git a/src/renderer/components/ModalProcessesListRow.vue b/src/renderer/components/ModalProcessesListRow.vue
index 15b59cc0..54214698 100644
--- a/src/renderer/components/ModalProcessesListRow.vue
+++ b/src/renderer/components/ModalProcessesListRow.vue
@@ -24,7 +24,11 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-information-outline mr-1" /> {{ t('database.processInfo') }}
+               <BaseIcon
+                  icon-name="mdiInformationOutline"
+                  :size="24"
+                  class="mr-1"
+               /> {{ t('database.processInfo') }}
             </div>
          </template>
          <template #body>
@@ -49,6 +53,7 @@ import { Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import TextEditor from '@/components/BaseTextEditor.vue';
 import { useFilters } from '@/composables/useFilters';
 
diff --git a/src/renderer/components/ModalSettings.vue b/src/renderer/components/ModalSettings.vue
index 777ff244..4e309bfb 100644
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@@ -6,7 +6,11 @@
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
-                     <i class="mdi mdi-24px mdi-cog mr-1" />
+                     <BaseIcon
+                        icon-name="mdiCog"
+                        class="mr-1"
+                        :size="24"
+                     />
                      <span class="cut-text">{{ t('application.settings') }}</span>
                   </div>
                </div>
@@ -78,7 +82,11 @@
                               <div class="form-group column col-12">
                                  <div class="col-5 col-sm-12">
                                     <label class="form-label">
-                                       <i class="mdi mdi-18px mdi-translate mr-1" />
+                                       <BaseIcon
+                                          icon-name="mdiTranslate"
+                                          class="mr-1"
+                                          :size="18"
+                                       />
                                        {{ t('application.language') }}
                                     </label>
                                  </div>
@@ -274,7 +282,11 @@
                            >
                               <img :src="darkPreview" class="img-responsive img-fit-cover s-rounded">
                               <div class="theme-name text-light">
-                                 <i class="mdi mdi-moon-waning-crescent mdi-48px" />
+                                 <BaseIcon
+                                    icon-name="mdiMoonWaningCrescent"
+                                    class="mr-1"
+                                    :size="48"
+                                 />
                                  <div class="h6 mt-4">
                                     {{ t('application.dark') }}
                                  </div>
@@ -287,7 +299,11 @@
                            >
                               <img :src="lightPreview" class="img-responsive img-fit-cover s-rounded">
                               <div class="theme-name text-dark">
-                                 <i class="mdi mdi-white-balance-sunny mdi-48px" />
+                                 <BaseIcon
+                                    icon-name="mdiWhiteBalanceSunny"
+                                    class="mr-1"
+                                    :size="48"
+                                 />
                                  <div class="h6 mt-4">
                                     {{ t('application.light') }}
                                  </div>
@@ -389,7 +405,39 @@
                         <h4>{{ appName }}</h4>
                         <p class="mb-2">
                            {{ t('general.version') }} {{ appVersion }}<br>
-                           <a class="c-hand" @click="openOutside('https://github.com/antares-sql/antares')"><i class="mdi mdi-github d-inline" /> GitHub</a> • <a class="c-hand" @click="openOutside('https://fosstodon.org/@AntaresSQL')"><i class="mdi mdi-mastodon d-inline" /> Mastodon</a> • <a class="c-hand" @click="openOutside('https://twitter.com/AntaresSQL')"><i class="mdi mdi-twitter d-inline" /> Twitter</a> • <a class="c-hand" @click="openOutside('https://antares-sql.app/')"><i class="mdi mdi-web d-inline" /> Website</a><br>
+                           <a
+                              class="c-hand"
+                              :style="'align-items: center; display: inline-flex;'"
+                              @click="openOutside('https://github.com/antares-sql/antares')"
+                           ><BaseIcon
+                              icon-name="mdiGithub"
+                              class="d-inline mr-1"
+                              :size="16"
+                           /> GitHub</a> • <a
+                              class="c-hand"
+                              :style="'align-items: center; display: inline-flex;'"
+                              @click="openOutside('https://fosstodon.org/@AntaresSQL')"
+                           ><BaseIcon
+                              icon-name="mdiMastodon"
+                              class="d-inline mr-1"
+                              :size="16"
+                           /> Mastodon</a> • <a
+                              class="c-hand"
+                              :style="'align-items: center; display: inline-flex;'"
+                              @click="openOutside('https://twitter.com/AntaresSQL')"
+                           ><BaseIcon
+                              icon-name="mdiTwitter"
+                              class="d-inline mr-1"
+                              :size="16"
+                           /> Twitter</a> • <a
+                              class="c-hand"
+                              :style="'align-items: center; display: inline-flex;'"
+                              @click="openOutside('https://antares-sql.app/')"
+                           ><BaseIcon
+                              icon-name="mdiWeb"
+                              class="d-inline mr-1"
+                              :size="16"
+                           /> Website</a><br>
                            <small>{{ t('general.author') }} <a class="c-hand" @click="openOutside('https://github.com/Fabio286')">{{ appAuthor }}</a></small><br>
                         </p>
                         <div class="mb-2">
@@ -414,6 +462,7 @@ import { storeToRefs } from 'pinia';
 import { computed, onBeforeUnmount, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import BaseTextEditor from '@/components/BaseTextEditor.vue';
 import ModalSettingsChangelog from '@/components/ModalSettingsChangelog.vue';
diff --git a/src/renderer/components/ModalSettingsChangelog.vue b/src/renderer/components/ModalSettingsChangelog.vue
index 9ab8d1df..790f19c7 100644
--- a/src/renderer/components/ModalSettingsChangelog.vue
+++ b/src/renderer/components/ModalSettingsChangelog.vue
@@ -8,7 +8,7 @@
       />
       <div v-if="isError" class="empty">
          <div class="empty-icon">
-            <i class="mdi mdi-48px mdi-alert-outline" />
+            <BaseIcon icon-name="mdiAlertOutline" :size="48" />
          </div>
       </div>
    </div>
@@ -18,6 +18,7 @@ import { shell } from 'electron';
 import { marked } from 'marked';
 import { ref } from 'vue';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import { useApplicationStore } from '@/stores/application';
 
diff --git a/src/renderer/components/ModalSettingsData.vue b/src/renderer/components/ModalSettingsData.vue
index 1b434058..01cf53f0 100644
--- a/src/renderer/components/ModalSettingsData.vue
+++ b/src/renderer/components/ModalSettingsData.vue
@@ -12,7 +12,11 @@
                class="btn btn-primary d-inline-flex"
                @click="isExportModal=true"
             >
-               <i class="mdi mdi-tray-arrow-up mdi-24px pr-2" />
+               <BaseIcon
+                  icon-name="mdiTrayArrowUp"
+                  class="mr-2"
+                  :size="24"
+               />
                <span>{{ t('application.exportData') }}</span>
             </button>
          </div>
@@ -30,7 +34,11 @@
                class="btn btn-dark d-inline-flex ml-auto"
                @click="isImportModal=true"
             >
-               <i class="mdi mdi-tray-arrow-down mdi-24px pr-2" />
+               <BaseIcon
+                  icon-name="mdiTrayArrowDown"
+                  class="mr-2"
+                  :size="24"
+               />
                <span>{{ t('application.importData') }}</span>
             </button>
          </div>
@@ -46,10 +54,10 @@
    </div>
 </template>
 <script setup lang="ts">
-// import { useApplicationStore } from '@/stores/application';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import ModalSettingsDataExport from '@/components/ModalSettingsDataExport.vue';
 import ModalSettingsDataImport from '@/components/ModalSettingsDataImport.vue';
 
diff --git a/src/renderer/components/ModalSettingsDataExport.vue b/src/renderer/components/ModalSettingsDataExport.vue
index f4d2342d..e6e22f04 100644
--- a/src/renderer/components/ModalSettingsDataExport.vue
+++ b/src/renderer/components/ModalSettingsDataExport.vue
@@ -6,7 +6,11 @@
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
-                     <i class="mdi mdi-24px mdi-tray-arrow-up mr-1" /> {{ t('application.exportData') }}
+                     <BaseIcon
+                        icon-name="mdiTrayArrowUp"
+                        class="mr-1"
+                        :size="24"
+                     /> {{ t('application.exportData') }}
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -107,8 +111,18 @@
                               class="btn btn-link input-group-addon"
                               @click="isPasswordVisible = !isPasswordVisible"
                            >
-                              <i v-if="isPasswordVisible" class="mdi mdi-eye px-1" />
-                              <i v-else class="mdi mdi-eye-off px-1" />
+                              <BaseIcon
+                                 v-if="isPasswordVisible"
+                                 icon-name="mdiEye"
+                                 class="mt-1 mx-1"
+                                 :size="16"
+                              />
+                              <BaseIcon
+                                 v-else
+                                 icon-name="mdiEyeOff"
+                                 class="mt-1 mx-1"
+                                 :size="16"
+                              />
                            </button>
                         </div>
                         <span v-if="isPasswordError" class="form-input-hint">
@@ -144,6 +158,7 @@ import { storeToRefs } from 'pinia';
 import { computed, onBeforeUnmount, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import { useFocusTrap } from '@/composables/useFocusTrap';
 import { unproxify } from '@/libs/unproxify';
 import { SidebarElement, useConnectionsStore } from '@/stores/connections';
diff --git a/src/renderer/components/ModalSettingsDataImport.vue b/src/renderer/components/ModalSettingsDataImport.vue
index be311eff..b7148fb6 100644
--- a/src/renderer/components/ModalSettingsDataImport.vue
+++ b/src/renderer/components/ModalSettingsDataImport.vue
@@ -6,7 +6,11 @@
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
-                     <i class="mdi mdi-24px mdi-tray-arrow-down mr-1" /> {{ t('application.importData') }}
+                     <BaseIcon
+                        icon-name="mdiTrayArrowDown"
+                        class="mr-1"
+                        :size="24"
+                     /> {{ t('application.importData') }}
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -20,7 +24,7 @@
                      :model-value="filePath"
                      :message="t('general.browse')"
                      accept=".antares"
-                     @clear="filePath = ''"
+                     @clear="clearPath"
                      @change="filesChange($event)"
                   />
                </div>
@@ -42,8 +46,18 @@
                            class="btn btn-link input-group-addon"
                            @click="isPasswordVisible = !isPasswordVisible"
                         >
-                           <i v-if="isPasswordVisible" class="mdi mdi-eye px-1" />
-                           <i v-else class="mdi mdi-eye-off px-1" />
+                           <BaseIcon
+                              v-if="isPasswordVisible"
+                              icon-name="mdiEye"
+                              class="mt-1 mx-1"
+                              :size="16"
+                           />
+                           <BaseIcon
+                              v-else
+                              icon-name="mdiEyeOff"
+                              class="mt-1 mx-1"
+                              :size="16"
+                           />
                         </button>
                      </div>
                      <span v-if="isPasswordError" class="form-input-hint">
@@ -86,6 +100,7 @@ import { storeToRefs } from 'pinia';
 import { onBeforeUnmount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseUploadInput from '@/components/BaseUploadInput.vue';
 import { unproxify } from '@/libs/unproxify';
 import { SidebarElement, useConnectionsStore } from '@/stores/connections';
@@ -125,6 +140,11 @@ const filesChange = ({ target } : {target: HTMLInputElement }) => {
    };
 };
 
+const clearPath = () => {
+   filePath.value = '';
+   fileContent.value = null;
+};
+
 const importData = () => {
    if (options.value.passkey.length < 8)
       isPasswordError.value = true;
diff --git a/src/renderer/components/ModalSettingsShortcuts.vue b/src/renderer/components/ModalSettingsShortcuts.vue
index c12276d7..72161c86 100644
--- a/src/renderer/components/ModalSettingsShortcuts.vue
+++ b/src/renderer/components/ModalSettingsShortcuts.vue
@@ -2,10 +2,18 @@
    <div class="p-relative">
       <div class="shortcuts-tools pb-2 px-2">
          <button class="btn btn-dark btn-sm d-flex ml-2" @click="showAddModal">
-            <i class="mdi mdi-24px mdi-plus mr-1" /><span>{{ t('application.addShortcut') }}</span>
+            <BaseIcon
+               icon-name="mdiPlus"
+               class="mr-1"
+               :size="24"
+            /><span>{{ t('application.addShortcut') }}</span>
          </button>
          <button class="btn btn-dark btn-sm d-flex ml-2" @click="isConfirmRestoreModal = true">
-            <i class="mdi mdi-24px mdi-undo mr-1" /><span>{{ t('application.restoreDefaults') }}</span>
+            <BaseIcon
+               icon-name="mdiUndo"
+               class="mr-1"
+               :size="24"
+            /><span>{{ t('application.restoreDefaults') }}</span>
          </button>
       </div>
       <div class="container workspace-query-results">
@@ -43,10 +51,20 @@
                   />
                   <div class="td py-1 pr-2">
                      <button class="shortcut-button btn btn-link btn-sm d-flex p-0 px-1 mr-2" @click="showEditModal({...shortcut, index: i})">
-                        <span>{{ t('general.edit') }}</span><i class="mdi mdi-pencil ml-1" />
+                        <span>{{ t('general.edit') }}</span>
+                        <BaseIcon
+                           icon-name="mdiPencil"
+                           class="ml-1"
+                           :size="16"
+                        />
                      </button>
                      <button class="shortcut-button btn btn-link btn-sm d-flex p-0 px-1" @click="showDeleteModal(shortcut)">
-                        <span>{{ t('general.delete') }}</span><i class="mdi mdi-delete-outline ml-1" />
+                        <span>{{ t('general.delete') }}</span>
+                        <BaseIcon
+                           icon-name="mdiDeleteOutline"
+                           class="ml-1"
+                           :size="16"
+                        />
                      </button>
                   </div>
                </div>
@@ -65,7 +83,11 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-plus mr-1" /> {{ t('application.addShortcut') }}
+               <BaseIcon
+                  icon-name="mdiPlus"
+                  class="mr-1"
+                  :size="24"
+               /> {{ t('application.addShortcut') }}
             </div>
          </template>
          <template #body>
@@ -99,7 +121,11 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-plus mr-1" /> {{ t('application.editShortcut') }}
+               <BaseIcon
+                  icon-name="mdiPencil"
+                  class="mr-1"
+                  :size="24"
+               /> {{ t('application.editShortcut') }}
             </div>
          </template>
          <template #body>
@@ -132,7 +158,11 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-delete mr-1" /> {{ t('application.deleteShortcut') }}
+               <BaseIcon
+                  icon-name="mdiDelete"
+                  class="mr-1"
+                  :size="24"
+               /> {{ t('application.deleteShortcut') }}
             </div>
          </template>
          <template #body>
@@ -150,7 +180,11 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-undo mr-1" /> {{ t('application.restoreDefaults') }}
+               <BaseIcon
+                  icon-name="mdiUndo"
+                  class="mr-1"
+                  :size="24"
+               /> {{ t('application.restoreDefaults') }}
             </div>
          </template>
          <template #body>
@@ -169,6 +203,7 @@ import { Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import { useFilters } from '@/composables/useFilters';
 import Application from '@/ipc-api/Application';
diff --git a/src/renderer/components/ModalSettingsUpdate.vue b/src/renderer/components/ModalSettingsUpdate.vue
index 896a9bab..dc1645f0 100644
--- a/src/renderer/components/ModalSettingsUpdate.vue
+++ b/src/renderer/components/ModalSettingsUpdate.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="empty">
       <div class="empty-icon">
-         <i class="mdi mdi-48px mdi-cloud-download" />
+         <BaseIcon icon-name="mdiCloudDownload" :size="48" />
       </div>
       <p class="empty-title h5">
          {{ updateMessage }}
@@ -58,6 +58,7 @@ import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import { useApplicationStore } from '@/stores/application';
 import { useSettingsStore } from '@/stores/settings';
 
diff --git a/src/renderer/components/SettingBarConnections.vue b/src/renderer/components/SettingBarConnections.vue
index 569c8d2e..21c0ef49 100644
--- a/src/renderer/components/SettingBarConnections.vue
+++ b/src/renderer/components/SettingBarConnections.vue
@@ -41,12 +41,28 @@
                   @dragleave="coveredElement = false"
                   @change="createFolder"
                />
-               <i v-if="coveredElement === element.uid && draggedElement !== coveredElement" class="settingbar-element-icon mdi mdi-folder-plus mdi-36px" />
+               <BaseIcon
+                  v-if="coveredElement === element.uid && draggedElement !== coveredElement"
+                  class="settingbar-element-icon"
+                  icon-name="mdiFolderPlus"
+                  :size="36"
+               />
                <template v-else>
                   <div class="settingbar-element-icon-wrapper">
-                     <i
+                     <div
+                        v-if="element.icon"
+                        class="settingbar-element-icon"
+                        :class="[getStatusBadge(element.uid)]"
+                     >
+                        <BaseIcon
+                           :icon-name="camelize(element.icon)"
+                           :size="36"
+                        />
+                     </div>
+                     <div
+                        v-else
                         class="settingbar-element-icon dbi"
-                        :class="[element.icon ? `mdi ${element.icon} mdi-36px`: `dbi-${element.client}`, getStatusBadge(element.uid)]"
+                        :class="[`dbi-${element.client}`, getStatusBadge(element.uid)]"
                      />
                      <small class="settingbar-element-name">{{ element.name || getConnectionName(element.uid) }}</small>
                   </div>
@@ -75,6 +91,7 @@ import { storeToRefs } from 'pinia';
 import { computed, PropType, Ref, ref, watch } from 'vue';
 import * as Draggable from 'vuedraggable';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import SettingBarConnectionsFolder from '@/components/SettingBarConnectionsFolder.vue';
 import { SidebarElement, useConnectionsStore } from '@/stores/connections';
 import { useWorkspacesStore } from '@/stores/workspaces';
@@ -148,6 +165,16 @@ const getStatusBadge = (uid: string) => {
    }
 };
 
+const camelize = (text: string) => {
+   const textArr = text.split('-');
+   for (let i = 0; i < textArr.length; i++) {
+      if (i === 0) continue;
+      textArr[i] = textArr[i].charAt(0).toUpperCase() + textArr[i].slice(1);
+   }
+
+   return textArr.join('');
+};
+
 watch(() => dummyNested.value.length, () => {
    dummyNested.value = [];
 });
diff --git a/src/renderer/components/SettingBarConnectionsFolder.vue b/src/renderer/components/SettingBarConnectionsFolder.vue
index e5604d35..d2b93bc5 100644
--- a/src/renderer/components/SettingBarConnectionsFolder.vue
+++ b/src/renderer/components/SettingBarConnectionsFolder.vue
@@ -38,8 +38,16 @@
                :style="`color: ${folder.color};`"
                @click="closeFolder"
             >
-               <i class="folder-icon-open mdi mdi-folder-open mdi-36px" />
-               <i class="folder-icon-close mdi mdi-folder mdi-36px" />
+               <BaseIcon
+                  class="folder-icon-open"
+                  icon-name="mdiFolderOpen"
+                  :size="36"
+               />
+               <BaseIcon
+                  class="folder-icon-close"
+                  icon-name="mdiFolder"
+                  :size="36"
+               />
             </div>
          </template>
          <template #item="{ element }">
@@ -55,9 +63,20 @@
                @click="emit('select-workspace', element)"
                @contextmenu.stop="emit('context', {event: $event, content: getConnectionOrderByUid(element)})"
             >
-               <i
+               <div
+                  v-if="getConnectionOrderByUid(element).icon"
+                  class="folder-element-icon"
+                  :class="[getStatusBadge(element)]"
+               >
+                  <BaseIcon
+                     :icon-name="camelize(getConnectionOrderByUid(element).icon)"
+                     :size="36"
+                  />
+               </div>
+               <div
+                  v-else
                   class="folder-element-icon dbi"
-                  :class="[getConnectionOrderByUid(element)?.icon ? `mdi ${getConnectionOrderByUid(element).icon}`: `dbi-${getConnectionOrderByUid(element)?.client}`, getStatusBadge(element)]"
+                  :class="[`dbi-${getConnectionOrderByUid(element).client}`, getStatusBadge(element)]"
                />
                <small v-if="isOpen" class="folder-element-name">{{ getConnectionOrderByUid(element)?.name || getConnectionName(element) }}</small>
             </div>
@@ -80,6 +99,7 @@ import { storeToRefs } from 'pinia';
 import { computed, PropType, ref, watch } from 'vue';
 import * as Draggable from 'vuedraggable';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import SettingBarConnections from '@/components/SettingBarConnections.vue';
 import { SidebarElement, useConnectionsStore } from '@/stores/connections';
 import { useWorkspacesStore } from '@/stores/workspaces';
@@ -177,6 +197,16 @@ const dragStop = () => {
    emit('folder-drag', false);
 };
 
+const camelize = (text: string) => {
+   const textArr = text.split('-');
+   for (let i = 0; i < textArr.length; i++) {
+      if (i === 0) continue;
+      textArr[i] = textArr[i].charAt(0).toUpperCase() + textArr[i].slice(1);
+   }
+
+   return textArr.join('');
+};
+
 watch(() => dummyNested.value.length, () => {
    dummyNested.value = [];
 });
@@ -389,7 +419,8 @@ emit('folder-sort');// To apply changes on component key change
    &:not(.opened){
       .folder-element {
 
-         .folder-element-icon {
+         .folder-element-icon,
+         .folder-element-icon svg {
             width: 21px;
             height: 21px;
             font-size: 16px;
diff --git a/src/renderer/components/SettingBarContext.vue b/src/renderer/components/SettingBarContext.vue
index 13b9eebd..7f469d6b 100644
--- a/src/renderer/components/SettingBarContext.vue
+++ b/src/renderer/components/SettingBarContext.vue
@@ -8,20 +8,40 @@
          class="context-element"
          @click="disconnect"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-power text-light pr-1" /> {{ t('connection.disconnect') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiPower"
+               :size="18"
+            /> {{ t('connection.disconnect') }}</span>
       </div>
       <div
          v-if="!contextConnection.isFolder"
          class="context-element"
          @click="duplicateConnection"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-content-duplicate text-light pr-1" /> {{ t('general.duplicate') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiContentDuplicate"
+               :size="18"
+            /> {{ t('general.duplicate') }}</span>
       </div>
       <div class="context-element" @click.stop="showAppearanceModal">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-brush-variant text-light pr-1" /> {{ t('application.appearance') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiBrushVariant"
+               :size="18"
+            /> {{ t('application.appearance') }}</span>
       </div>
       <div class="context-element" @click="showConfirmModal">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ t('general.delete') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiDelete"
+               :size="18"
+            /> {{ t('general.delete') }}</span>
       </div>
 
       <ConfirmModal
@@ -31,7 +51,11 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mr-1" :class="[contextConnection.isFolder ? 'mdi-folder-remove' : 'mdi-server-remove']" /> {{ t(contextConnection.isFolder ? 'application.deleteFolder' : 'connection.deleteConnection') }}
+               <BaseIcon
+                  class="text-light mr-1"
+                  :icon-name="contextConnection.isFolder ? 'mdiFolderRemove' : 'mdiServerRemove'"
+                  :size="24"
+               /> {{ t(contextConnection.isFolder ? 'application.deleteFolder' : 'connection.deleteConnection') }}
             </div>
          </template>
          <template #body>
@@ -60,6 +84,7 @@ import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
 import BaseContextMenu from '@/components/BaseContextMenu.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import ModalConnectionAppearance from '@/components/ModalConnectionAppearance.vue';
 import ModalFolderAppearance from '@/components/ModalFolderAppearance.vue';
 import { SidebarElement, useConnectionsStore } from '@/stores/connections';
diff --git a/src/renderer/components/TheFooter.vue b/src/renderer/components/TheFooter.vue
index 43406947..c8ff886a 100644
--- a/src/renderer/components/TheFooter.vue
+++ b/src/renderer/components/TheFooter.vue
@@ -7,19 +7,35 @@
       <div class="footer-left-elements">
          <ul class="footer-elements">
             <li class="footer-element">
-               <i class="mdi mdi-18px mdi-database mr-1" />
+               <BaseIcon
+                  icon-name="mdiServer"
+                  class="mr-1"
+                  :size="18"
+               />
                <small>{{ versionString }}</small>
             </li>
             <li v-if="connectionInfos && connectionInfos.readonly" class="footer-element">
-               <i class="mdi mdi-18px mdi-lock mr-1" />
+               <BaseIcon
+                  icon-name="mdiLock"
+                  class="mr-1"
+                  :size="18"
+               />
                <small>{{ t('connection.readOnlyMode') }}</small>
             </li>
             <li v-if="connectionInfos && connectionInfos.ssl" class="footer-element">
-               <i class="mdi mdi-18px mdi-shield-key mr-1" />
+               <BaseIcon
+                  icon-name="mdiShieldKey"
+                  class="mr-1"
+                  :size="18"
+               />
                <small>SSL</small>
             </li>
             <li v-if="connectionInfos && connectionInfos.ssh" class="footer-element">
-               <i class="mdi mdi-18px mdi-console-network mr-1" />
+               <BaseIcon
+                  icon-name="mdiConsoleNetwork"
+                  class="mr-1"
+                  :size="18"
+               />
                <small>SSH</small>
             </li>
          </ul>
@@ -32,11 +48,19 @@
                class="footer-element footer-link"
                @click="toggleConsole()"
             >
-               <i class="mdi mdi-18px mdi-console-line mr-1" />
+               <BaseIcon
+                  icon-name="mdiConsoleLine"
+                  class="mr-1"
+                  :size="18"
+               />
                <small>{{ t('application.console') }}</small>
             </li>
             <li class="footer-element footer-link" @click="openOutside('https://www.paypal.com/paypalme/fabiodistasio')">
-               <i class="mdi mdi-18px mdi-coffee mr-1" />
+               <BaseIcon
+                  icon-name="mdiCoffee"
+                  class="mr-1"
+                  :size="18"
+               />
                <small>{{ t('general.donate') }}</small>
             </li>
             <li
@@ -44,14 +68,14 @@
                :title="t('application.reportABug')"
                @click="openOutside('https://github.com/antares-sql/antares/issues')"
             >
-               <i class="mdi mdi-18px mdi-bug" />
+               <BaseIcon icon-name="mdiBug" :size="18" />
             </li>
             <li
                class="footer-element footer-link"
                :title="t('application.about')"
                @click="showSettingModal('about')"
             >
-               <i class="mdi mdi-18px mdi-information-outline" />
+               <BaseIcon icon-name="mdiInformationOutline" :size="18" />
             </li>
          </ul>
       </div>
@@ -64,6 +88,7 @@ import { storeToRefs } from 'pinia';
 import { computed, ComputedRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import { useApplicationStore } from '@/stores/application';
 import { useConnectionsStore } from '@/stores/connections';
 import { useConsoleStore } from '@/stores/console';
diff --git a/src/renderer/components/TheScratchpad.vue b/src/renderer/components/TheScratchpad.vue
index 00fdc4f1..2b9819ed 100644
--- a/src/renderer/components/TheScratchpad.vue
+++ b/src/renderer/components/TheScratchpad.vue
@@ -8,7 +8,11 @@
    >
       <template #header>
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-notebook-edit-outline mr-1" /> {{ t('application.scratchpad') }}
+            <BaseIcon
+               icon-name="mdiNotebookEditOutline"
+               class="mr-1"
+               :size="24"
+            /> {{ t('application.scratchpad') }}
          </div>
       </template>
       <template #body>
@@ -34,6 +38,7 @@ import { Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import TextEditor from '@/components/BaseTextEditor.vue';
 import { useApplicationStore } from '@/stores/application';
 import { useScratchpadStore } from '@/stores/scratchpad';
diff --git a/src/renderer/components/TheSettingBar.vue b/src/renderer/components/TheSettingBar.vue
index adb04527..51a3cbd7 100644
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@@ -28,7 +28,11 @@
                @click="emit('show-connections-modal')"
             >
                <div class="settingbar-element-icon-wrapper">
-                  <i class="settingbar-element-icon mdi mdi-24px mdi-dots-horizontal text-light" />
+                  <BaseIcon
+                     icon-name="mdiDotsHorizontal"
+                     class="settingbar-element-icon text-light"
+                     :size="24"
+                  />
                </div>
             </li>
             <li
@@ -42,7 +46,11 @@
                @click="selectWorkspace('NEW')"
             >
                <div class="settingbar-element-icon-wrapper">
-                  <i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
+                  <BaseIcon
+                     icon-name="mdiPlus"
+                     class="settingbar-element-icon text-light"
+                     :size="24"
+                  />
                </div>
             </li>
          </ul>
@@ -60,7 +68,11 @@
                class="settingbar-element btn btn-link"
                @click="showScratchpad"
             >
-               <i class="settingbar-element-icon mdi mdi-24px mdi-notebook-edit-outline text-light" />
+               <BaseIcon
+                  icon-name="mdiNotebookEditOutline"
+                  class="settingbar-element-icon text-light"
+                  :size="24"
+               />
             </li>
             <li
                v-tooltip="{
@@ -72,9 +84,11 @@
                @click="showSettingModal('general')"
             >
                <div class="settingbar-element-icon-wrapper">
-                  <i
-                     class="settingbar-element-icon mdi mdi-24px mdi-cog text-light"
-                     :class="{ ' badge badge-update': hasUpdates }"
+                  <BaseIcon
+                     icon-name="mdiCog"
+                     class="settingbar-element-icon text-light"
+                     :class="{ 'badge badge-update': hasUpdates }"
+                     :size="24"
                   />
                </div>
             </li>
@@ -89,6 +103,7 @@ import { storeToRefs } from 'pinia';
 import { computed, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import SettingBarConnections from '@/components/SettingBarConnections.vue';
 import SettingBarContext from '@/components/SettingBarContext.vue';
 import { useApplicationStore } from '@/stores/application';
diff --git a/src/renderer/components/TheTitleBar.vue b/src/renderer/components/TheTitleBar.vue
index 1beab576..270002bd 100644
--- a/src/renderer/components/TheTitleBar.vue
+++ b/src/renderer/components/TheTitleBar.vue
@@ -21,14 +21,14 @@
             class="titlebar-element"
             @click="openDevTools"
          >
-            <i class="mdi mdi-24px mdi-code-tags" />
+            <BaseIcon icon-name="mdiCodeTags" :size="24" />
          </div>
          <div
             v-if="isDevelopment"
             class="titlebar-element"
             @click="reload"
          >
-            <i class="mdi mdi-24px mdi-refresh" />
+            <BaseIcon icon-name="mdiRefresh" :size="24" />
          </div>
          <div v-if="isWindows" :style="'width: 140px;'" />
       </div>
@@ -42,6 +42,7 @@ import { storeToRefs } from 'pinia';
 import { computed, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import { useConnectionsStore } from '@/stores/connections';
 import { useWorkspacesStore } from '@/stores/workspaces';
 
diff --git a/src/renderer/components/Workspace.vue b/src/renderer/components/Workspace.vue
index 9449ad1a..c96ce699 100644
--- a/src/renderer/components/Workspace.vue
+++ b/src/renderer/components/Workspace.vue
@@ -40,7 +40,11 @@
                      class="tab-link"
                      :class="{'badge': element.isChanged}"
                   >
-                     <i class="mdi mdi-18px mdi-code-tags mr-1" />
+                     <BaseIcon
+                        class="mt-1 mr-1"
+                        icon-name="mdiCodeTags"
+                        :size="18"
+                     />
                      <span>
                         <span>{{ cutText(element.content || 'Query', 20, true) }} #{{ element.index }}</span>
                         <span
@@ -57,7 +61,11 @@
                      class="tab-link"
                      @dblclick="openAsPermanentTab(element)"
                   >
-                     <i class="mdi mdi-18px mr-1" :class="element.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
+                     <BaseIcon
+                        class="mt-1 mr-1"
+                        :icon-name="element.elementType === 'view' ? 'mdiTableEye' : 'mdiTable'"
+                        :size="18"
+                     />
                      <span :title="`${t('general.data').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
                         <span class=" text-italic">{{ cutText(element.elementName, 20, true) }}</span>
                         <span
@@ -70,7 +78,11 @@
                   </a>
 
                   <a v-else-if="element.type === 'data'" class="tab-link">
-                     <i class="mdi mdi-18px mr-1" :class="element.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
+                     <BaseIcon
+                        class="mt-1 mr-1"
+                        :icon-name="element.elementType === 'view' ? 'mdiTableEye' : 'mdiTable'"
+                        :size="18"
+                     />
                      <span :title="`${t('general.data').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
                         {{ cutText(element.elementName, 20, true) }}
                         <span
@@ -87,7 +99,11 @@
                      class="tab-link"
                      :class="{'badge': element.isChanged}"
                   >
-                     <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiShapeSquarePlus"
+                        :size="18"
+                     />
                      <span :title="`${t('general.new').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
                         {{ t('database.newTable') }}
                         <span
@@ -104,7 +120,11 @@
                      class="tab-link"
                      :class="{'badge': element.isChanged}"
                   >
-                     <i class="mdi mdi-wrench-cog mdi-18px mr-1" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiWrenchCog"
+                        :size="18"
+                     />
                      <span :title="`${t('application.settings').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
                         {{ cutText(element.elementName, 20, true) }}
                         <span
@@ -121,7 +141,11 @@
                      class="tab-link"
                      :class="{'badge': element.isChanged}"
                   >
-                     <i class="mdi mdi-wrench-cog mdi-18px mr-1" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiWrenchCog"
+                        :size="18"
+                     />
                      <span :title="`${t('application.settings').toUpperCase()}: ${t(`database.view`)}`">
                         {{ cutText(element.elementName, 20, true) }}
                         <span
@@ -138,7 +162,11 @@
                      class="tab-link"
                      :class="{'badge': element.isChanged}"
                   >
-                     <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiShapeSquarePlus"
+                        :size="18"
+                     />
                      <span :title="`${t('general.new').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
                         {{ t('database.newView') }}
                         <span
@@ -155,7 +183,11 @@
                      class="tab-link"
                      :class="{'badge': element.isChanged}"
                   >
-                     <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiShapeSquarePlus"
+                        :size="18"
+                     />
                      <span :title="`${t('general.new').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
                         {{ t('database.newTrigger') }}
                         <span
@@ -172,7 +204,11 @@
                      class="tab-link"
                      :class="{'badge': element.isChanged}"
                   >
-                     <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiShapeSquarePlus"
+                        :size="18"
+                     />
                      <span :title="`${t('general.new').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
                         {{ t('database.newRoutine') }}
                         <span
@@ -189,7 +225,11 @@
                      class="tab-link"
                      :class="{'badge': element.isChanged}"
                   >
-                     <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiShapeSquarePlus"
+                        :size="18"
+                     />
                      <span :title="`${t('general.new').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
                         {{ t('database.newFunction') }}
                         <span
@@ -206,7 +246,11 @@
                      class="tab-link"
                      :class="{'badge': element.isChanged}"
                   >
-                     <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiShapeSquarePlus"
+                        :size="18"
+                     />
                      <span :title="`${t('general.new').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
                         {{ t('database.newTriggerFunction') }}
                         <span
@@ -223,7 +267,11 @@
                      class="tab-link"
                      :class="{'badge': element.isChanged}"
                   >
-                     <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiShapeSquarePlus"
+                        :size="18"
+                     />
                      <span :title="`${t('general.new').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
                         {{ t('database.newScheduler') }}
                         <span
@@ -241,7 +289,11 @@
                      :class="{'badge': element.isChanged}"
                      @dblclick="openAsPermanentTab(element)"
                   >
-                     <i class="mdi mdi-18px mdi-wrench-cog mr-1" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiWrenchCog"
+                        :size="18"
+                     />
                      <span :title="`${t('application.settings').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
                         <span class=" text-italic">{{ cutText(element.elementName, 20, true) }}</span>
                         <span
@@ -258,7 +310,11 @@
                      class="tab-link"
                      :class="{'badge': element.isChanged}"
                   >
-                     <i class="mdi mdi-18px mdi-wrench-cog mr-1" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiWrenchCog"
+                        :size="18"
+                     />
                      <span :title="`${t('application.settings').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
                         {{ cutText(element.elementName, 20, true) }}
                         <span
@@ -281,18 +337,26 @@
                      tabindex="0"
                      :title="t('general.tools')"
                   >
-                     <i class="mdi mdi-24px mdi-tools" />
+                     <BaseIcon icon-name="mdiTools" :size="24" />
                   </a>
                   <ul v-if="hasTools" class="menu text-left text-uppercase">
                      <li class="menu-item">
                         <a class="c-hand p-vcentered" @click="showProcessesModal">
-                           <i class="mdi mdi-memory mr-1 tool-icon" />
+                           <BaseIcon
+                              icon-name="mdiMemory"
+                              :size="18"
+                              class="mr-1 tool-icon"
+                           />
                            <span>{{ t('database.processesList') }}</span>
                         </a>
                      </li>
                      <li class="menu-item">
                         <a class="c-hand p-vcentered" @click="toggleConsole">
-                           <i class="mdi mdi-console-line mr-1 tool-icon" />
+                           <BaseIcon
+                              icon-name="mdiConsoleLine"
+                              :size="18"
+                              class="mr-1 tool-icon"
+                           />
                            <span>{{ t('application.console') }}</span>
                         </a>
                      </li>
@@ -302,7 +366,11 @@
                         title="Coming..."
                      >
                         <a class="c-hand p-vcentered disabled">
-                           <i class="mdi mdi-shape mr-1 tool-icon" />
+                           <BaseIcon
+                              icon-name="mdiShape"
+                              :size="18"
+                              class="mr-1 tool-icon"
+                           />
                            <span>{{ t('database.variables') }}</span>
                         </a>
                      </li>
@@ -312,7 +380,11 @@
                         title="Coming..."
                      >
                         <a class="c-hand p-vcentered disabled">
-                           <i class="mdi mdi-account-group mr-1 tool-icon" />
+                           <BaseIcon
+                              icon-name="mdiAccountGroup"
+                              :size="18"
+                              class="mr-1 tool-icon"
+                           />
                            <span>{{ t('database.manageUsers') }}</span>
                         </a>
                      </li>
@@ -326,7 +398,7 @@
                      :title="t('application.openNewTab')"
                      @click="addQueryTab"
                   >
-                     <i class="mdi mdi-24px mdi-plus" />
+                     <BaseIcon icon-name="mdiPlus" :size="24" />
                   </a>
                </li>
             </template>
@@ -495,6 +567,7 @@ import { computed, onMounted, Prop, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import * as Draggable from 'vuedraggable';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import ModalDiscardChanges from '@/components/ModalDiscardChanges.vue';
 import ModalProcessesList from '@/components/ModalProcessesList.vue';
 import WorkspaceEditConnectionPanel from '@/components/WorkspaceEditConnectionPanel.vue';
diff --git a/src/renderer/components/WorkspaceAddConnectionPanel.vue b/src/renderer/components/WorkspaceAddConnectionPanel.vue
index 129fa244..3e0278a8 100644
--- a/src/renderer/components/WorkspaceAddConnectionPanel.vue
+++ b/src/renderer/components/WorkspaceAddConnectionPanel.vue
@@ -384,7 +384,11 @@
                :disabled="isBusy"
                @click="startTest"
             >
-               <i class="mdi mdi-24px mdi-lightning-bolt mr-1" />
+               <BaseIcon
+                  icon-name="mdiLightningBolt"
+                  :size="24"
+                  class="mr-1"
+               />
                {{ t('connection.testConnection') }}
             </button>
             <button
@@ -393,7 +397,11 @@
                :disabled="isBusy"
                @click="saveConnection"
             >
-               <i class="mdi mdi-24px mdi-content-save mr-1" />
+               <BaseIcon
+                  icon-name="mdiContentSave"
+                  :size="24"
+                  class="mr-1"
+               />
                {{ t('general.save') }}
             </button>
          </div>
@@ -413,6 +421,7 @@ import { uidGen } from 'common/libs/uidGen';
 import { computed, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import BaseUploadInput from '@/components/BaseUploadInput.vue';
 import ModalAskCredentials from '@/components/ModalAskCredentials.vue';
diff --git a/src/renderer/components/WorkspaceEditConnectionPanel.vue b/src/renderer/components/WorkspaceEditConnectionPanel.vue
index 2ff18231..6f5d28f6 100644
--- a/src/renderer/components/WorkspaceEditConnectionPanel.vue
+++ b/src/renderer/components/WorkspaceEditConnectionPanel.vue
@@ -386,7 +386,11 @@
                :disabled="isBusy"
                @click="startTest"
             >
-               <i class="mdi mdi-24px mdi-lightning-bolt mr-1" />
+               <BaseIcon
+                  icon-name="mdiLightningBolt"
+                  :size="24"
+                  class="mr-1"
+               />
                {{ t('connection.testConnection') }}
             </button>
             <button
@@ -395,7 +399,11 @@
                :disabled="isBusy || !hasChanges"
                @click="saveConnection"
             >
-               <i class="mdi mdi-24px mdi-content-save mr-1" />
+               <BaseIcon
+                  icon-name="mdiContentSave"
+                  :size="24"
+                  class="mr-1"
+               />
                {{ t('general.save') }}
             </button>
             <button
@@ -405,7 +413,11 @@
                :disabled="isBusy"
                @click="startConnection"
             >
-               <i class="mdi mdi-24px mdi-connection mr-1" />
+               <BaseIcon
+                  icon-name="mdiConnection"
+                  :size="24"
+                  class="mr-1"
+               />
                {{ t('connection.connect') }}
             </button>
          </div>
@@ -424,6 +436,7 @@ import { ConnectionParams } from 'common/interfaces/antares';
 import { computed, Prop, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import BaseUploadInput from '@/components/BaseUploadInput.vue';
 import ModalAskCredentials from '@/components/ModalAskCredentials.vue';
diff --git a/src/renderer/components/WorkspaceEmptyState.vue b/src/renderer/components/WorkspaceEmptyState.vue
index 41191be8..09cb8df6 100644
--- a/src/renderer/components/WorkspaceEmptyState.vue
+++ b/src/renderer/components/WorkspaceEmptyState.vue
@@ -8,7 +8,11 @@
       </p>
       <div class="empty-action">
          <button class="btn btn-primary d-flex" @click="emit('new-tab')">
-            <i class="mdi mdi-24px mdi-tab-plus mr-2" />
+            <BaseIcon
+               icon-name="mdiTabPlus"
+               :size="24"
+               class="mr-2"
+            />
             {{ t('application.openNewTab') }}
          </button>
       </div>
@@ -19,6 +23,7 @@ import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import { useSettingsStore } from '@/stores/settings';
 import { useWorkspacesStore } from '@/stores/workspaces';
 
diff --git a/src/renderer/components/WorkspaceExploreBar.vue b/src/renderer/components/WorkspaceExploreBar.vue
index 192d8982..e2e18065 100644
--- a/src/renderer/components/WorkspaceExploreBar.vue
+++ b/src/renderer/components/WorkspaceExploreBar.vue
@@ -23,23 +23,33 @@
             </div>
             <span v-else class="workspace-explorebar-title">{{ connectionName }}</span>
             <span v-if="workspace.connectionStatus === 'connected'" class="workspace-explorebar-tools">
-               <i
-                  v-if="customizations.schemas"
-                  class="mdi mdi-18px mdi-database-plus c-hand mr-2"
-                  :title="t('database.createNewSchema')"
-                  @click="showNewDBModal"
-               />
-               <i
-                  class="mdi mdi-18px mdi-refresh c-hand mr-2"
-                  :class="{'rotate':isRefreshing}"
-                  :title="t('general.refresh')"
-                  @click="refresh"
-               />
-               <i
-                  class="mdi mdi-18px mdi-power c-hand"
-                  :title="t('connection.disconnect')"
-                  @click="disconnectWorkspace(connection.uid)"
-               />
+               <div :title="t('database.createNewSchema')">
+                  <BaseIcon
+                     v-if="customizations.schemas"
+                     icon-name="mdiDatabasePlus"
+                     :size="18"
+                     class="c-hand mr-2"
+                     @click="showNewDBModal"
+                  />
+               </div>
+               <div :title="t('general.refresh')">
+                  <BaseIcon
+                     v-if="customizations.schemas"
+                     icon-name="mdiRefresh"
+                     :size="18"
+                     class="c-hand mr-2"
+                     :class="{'rotate':isRefreshing}"
+                     @click="refresh"
+                  />
+               </div>
+               <div :title="t('connection.disconnect')">
+                  <BaseIcon
+                     icon-name="mdiPower"
+                     :size="18"
+                     class="c-hand"
+                     @click="disconnectWorkspace(connection.uid)"
+                  />
+               </div>
             </span>
          </div>
          <div class="workspace-explorebar-search">
@@ -49,7 +59,7 @@
                   :title="t('application.switchSearchMethod')"
                   @click="toggleSearchMethod"
                >
-                  <i class="mdi mdi-18px" :class="[searchMethod === 'elements' ? 'mdi-shape' : 'mdi-database']" />
+                  <BaseIcon :icon-name="searchMethod === 'elements' ? 'mdiShape' : 'mdiDatabase'" :size="18" />
                </div>
                <input
                   ref="searchInput"
@@ -58,10 +68,17 @@
                   type="text"
                   :placeholder="searchMethod === 'elements' ? t('database.searchForElements') : t('database.searchForSchemas')"
                >
-               <i v-if="!searchTerm" class="form-icon mdi mdi-magnify mdi-18px" />
-               <i
+               <BaseIcon
+                  v-if="!searchTerm"
+                  class="form-icon"
+                  icon-name="mdiMagnify"
+                  :size="18"
+               />
+               <BaseIcon
                   v-else
-                  class="form-icon c-hand mdi mdi-backspace mdi-18px pr-1"
+                  class="form-icon c-hand pr-1"
+                  icon-name="mdiBackspace"
+                  :size="18"
                   @click="searchTerm = ''"
                />
             </div>
@@ -140,6 +157,7 @@ import { storeToRefs } from 'pinia';
 import { Component, computed, onMounted, Prop, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import ModalNewSchema from '@/components/ModalNewSchema.vue';
 import MiscContext from '@/components/WorkspaceExploreBarMiscContext.vue';
@@ -526,7 +544,7 @@ const toggleSearchMethod = () => {
         display: flex;
         align-items: center;
 
-        > i {
+         svg {
           opacity: 0.6;
           transition: opacity 0.2s;
           display: flex;
diff --git a/src/renderer/components/WorkspaceExploreBarMiscContext.vue b/src/renderer/components/WorkspaceExploreBarMiscContext.vue
index 13285a25..cd3c7071 100644
--- a/src/renderer/components/WorkspaceExploreBarMiscContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarMiscContext.vue
@@ -8,7 +8,12 @@
          class="context-element"
          @click="runElementCheck"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-play text-light pr-1" /> {{ t('general.run') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiPlay"
+               :size="18"
+            /> {{ t('general.run') }}</span>
       </div>
       <div
          v-if="selectedMisc.type === 'trigger' && customizations.triggerEnableDisable"
@@ -16,10 +21,18 @@
          @click="toggleTrigger"
       >
          <span v-if="!selectedMisc.enabled" class="d-flex">
-            <i class="mdi mdi-18px mdi-play text-light pr-1" /> {{ t('general.enable') }}
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiPlay"
+               :size="18"
+            /> {{ t('general.enable') }}
          </span>
          <span v-else class="d-flex">
-            <i class="mdi mdi-18px mdi-pause text-light pr-1" /> {{ t('general.disable') }}
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiPause"
+               :size="18"
+            /> {{ t('general.disable') }}
          </span>
       </div>
       <div
@@ -28,14 +41,27 @@
          @click="toggleScheduler"
       >
          <span v-if="!selectedMisc.enabled" class="d-flex">
-            <i class="mdi mdi-18px mdi-play text-light pr-1" /> {{ t('general.enable') }}
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiPlay"
+               :size="18"
+            /> {{ t('general.enable') }}
          </span>
          <span v-else class="d-flex">
-            <i class="mdi mdi-18px mdi-pause text-light pr-1" /> {{ t('general.disable') }}
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiPause"
+               :size="18"
+            /> {{ t('general.disable') }}
          </span>
       </div>
       <div class="context-element" @click="showDeleteModal">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-table-remove text-light pr-1" /> {{ t('general.delete') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiTableRemove"
+               :size="18"
+            /> {{ t('general.delete') }}</span>
       </div>
       <ConfirmModal
          v-if="isDeleteModal"
@@ -44,7 +70,11 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-delete mr-1" />
+               <BaseIcon
+                  class="text-light mr-1"
+                  icon-name="mdiDelete"
+                  :size="24"
+               />
                <span class="cut-text">{{ deleteMessage }}</span>
             </div>
          </template>
@@ -72,6 +102,7 @@ import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
 import BaseContextMenu from '@/components/BaseContextMenu.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import ModalAskParameters from '@/components/ModalAskParameters.vue';
 import Functions from '@/ipc-api/Functions';
 import Routines from '@/ipc-api/Routines';
@@ -119,6 +150,7 @@ const deleteMessage = computed(() => {
    switch (props.selectedMisc.type) {
       case 'trigger':
          return t('database.deleteTrigger');
+      case 'routine':
       case 'procedure':
          return t('database.deleteRoutine');
       case 'function':
diff --git a/src/renderer/components/WorkspaceExploreBarMiscFolderContext.vue b/src/renderer/components/WorkspaceExploreBarMiscFolderContext.vue
index a39056dc..42d88259 100644
--- a/src/renderer/components/WorkspaceExploreBarMiscFolderContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarMiscFolderContext.vue
@@ -8,35 +8,60 @@
          class="context-element"
          @click="emit('open-create-trigger-tab')"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-table-cog text-light pr-1" /> {{ t('database.createNewTrigger') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiTableCog"
+               :size="18"
+            /> {{ t('database.createNewTrigger') }}</span>
       </div>
       <div
          v-if="['procedure', 'routine'].includes(props.selectedMisc)"
          class="context-element"
          @click="emit('open-create-routine-tab')"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-sync-circle text-light pr-1" /> {{ t('database.createNewRoutine') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiSyncCircle"
+               :size="18"
+            /> {{ t('database.createNewRoutine') }}</span>
       </div>
       <div
          v-if="props.selectedMisc === 'function'"
          class="context-element"
          @click="emit('open-create-function-tab')"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-arrow-right-bold-box text-light pr-1" /> {{ t('database.createNewFunction') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiArrowRightBoldBox"
+               :size="18"
+            /> {{ t('database.createNewFunction') }}</span>
       </div>
       <div
          v-if="props.selectedMisc === 'triggerFunction'"
          class="context-element"
          @click="emit('open-create-trigger-function-tab')"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-cog-clockwise text-light pr-1" /> {{ t('database.createNewFunction') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiCogClockwise"
+               :size="18"
+            /> {{ t('database.createNewFunction') }}</span>
       </div>
       <div
          v-if="props.selectedMisc === 'scheduler'"
          class="context-element"
          @click="emit('open-create-scheduler-tab')"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-calendar-clock text-light pr-1" /> {{ t('database.createNewScheduler') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiCalendarClock"
+               :size="18"
+            /> {{ t('database.createNewScheduler') }}</span>
       </div>
    </BaseContextMenu>
 </template>
@@ -45,6 +70,7 @@
 import { useI18n } from 'vue-i18n';
 
 import BaseContextMenu from '@/components/BaseContextMenu.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 
 const { t } = useI18n();
 
diff --git a/src/renderer/components/WorkspaceExploreBarSchema.vue b/src/renderer/components/WorkspaceExploreBarSchema.vue
index 443a07f7..3b17456b 100644
--- a/src/renderer/components/WorkspaceExploreBarSchema.vue
+++ b/src/renderer/components/WorkspaceExploreBarSchema.vue
@@ -7,8 +7,17 @@
          @contextmenu.prevent="showSchemaContext($event, database.name)"
       >
          <div v-if="isLoading" class="icon loading" />
-         <i v-else class="icon mdi mdi-18px mdi-chevron-right" />
-         <i class="database-icon mdi mdi-18px mdi-database mr-1" />
+         <BaseIcon
+            v-else
+            class="icon"
+            icon-name="mdiChevronRight"
+            :size="18"
+         />
+         <BaseIcon
+            class="database-icon mr-1"
+            icon-name="mdiDatabase"
+            :size="18"
+         />
          <div class="">
             <span v-html="highlightWord(database.name, 'schemas')" />
             <div
@@ -16,7 +25,11 @@
                class="schema-size tooltip tooltip-left mr-1"
                :data-tooltip="formatBytes(database.size)"
             >
-               <i class="mdi mdi-information-outline pr-2" />
+               <BaseIcon
+                  class="mr-2"
+                  icon-name="mdiInformationOutline"
+                  :size="18"
+               />
             </div>
          </div>
       </summary>
@@ -34,10 +47,11 @@
                >
                   <a class="table-name">
                      <div v-if="checkLoadingStatus(table.name, 'table')" class="icon loading mr-1" />
-                     <i
+                     <BaseIcon
                         v-else
-                        class="table-icon mdi mdi-18px mr-1"
-                        :class="table.type === 'view' ? 'mdi-table-eye' : 'mdi-table'"
+                        class="table-icon mr-1"
+                        :icon-name="table.type === 'view' ? 'mdiTableEye' : 'mdiTable'"
+                        :size="18"
                      />
                      <span v-html="highlightWord(table.name)" />
                   </a>
@@ -59,7 +73,11 @@
                   :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.trigger}"
                   @contextmenu.prevent="showMiscFolderContext($event, 'trigger')"
                >
-                  <i class="misc-icon mdi mdi-18px mdi-folder-cog mr-1" />
+                  <BaseIcon
+                     class="misc-icon mr-1"
+                     icon-name="mdiFolderCog"
+                     :size="18"
+                  />
                   {{ t('database.trigger', 2) }}
                </summary>
                <div class="accordion-body">
@@ -76,7 +94,12 @@
                         >
                            <a class="table-name">
                               <div v-if="checkLoadingStatus(trigger.name, 'trigger')" class="icon loading mr-1" />
-                              <i v-else class="table-icon mdi mdi-table-cog mdi-18px mr-1" />
+                              <BaseIcon
+                                 v-else
+                                 class="table-icon mr-1"
+                                 icon-name="mdiTableCog"
+                                 :size="18"
+                              />
                               <span v-html="highlightWord(trigger.name)" />
                            </a>
                            <div
@@ -84,7 +107,11 @@
                               class="tooltip tooltip-left disabled-indicator"
                               :data-tooltip="t('general.disabled')"
                            >
-                              <i class="table-icon mdi mdi-pause mdi-18px mr-1" />
+                              <BaseIcon
+                                 class="table-icon mr-1"
+                                 icon-name="mdiPause"
+                                 :size="18"
+                              />
                            </div>
                         </li>
                      </ul>
@@ -100,7 +127,11 @@
                   :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.routine}"
                   @contextmenu.prevent="showMiscFolderContext($event, 'routine')"
                >
-                  <i class="misc-icon mdi mdi-18px mdi-folder-sync mr-1" />
+                  <BaseIcon
+                     class="misc-icon mr-1"
+                     icon-name="mdiFolderSync"
+                     :size="18"
+                  />
                   {{ t('database.storedRoutine', 2) }}
                </summary>
                <div class="accordion-body">
@@ -116,7 +147,11 @@
                            @contextmenu.prevent="showMiscContext($event, {...routine, type: 'routine'})"
                         >
                            <a class="table-name">
-                              <i class="table-icon mdi mdi-sync-circle mdi-18px mr-1" />
+                              <BaseIcon
+                                 class="table-icon mr-1"
+                                 icon-name="mdiSyncCircle"
+                                 :size="18"
+                              />
                               <span v-html="highlightWord(routine.name)" />
                            </a>
                         </li>
@@ -133,7 +168,11 @@
                   :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.triggerFunction}"
                   @contextmenu.prevent="showMiscFolderContext($event, 'triggerFunction')"
                >
-                  <i class="misc-icon mdi mdi-18px mdi-folder-refresh mr-1" />
+                  <BaseIcon
+                     class="misc-icon mr-1"
+                     icon-name="mdiFolderRefresh"
+                     :size="18"
+                  />
                   {{ t('database.triggerFunction', 2) }}
                </summary>
                <div class="accordion-body">
@@ -149,7 +188,11 @@
                            @contextmenu.prevent="showMiscContext($event, {...func, type: 'triggerFunction'})"
                         >
                            <a class="table-name">
-                              <i class="table-icon mdi mdi-cog-clockwise mdi-18px mr-1" />
+                              <BaseIcon
+                                 class="misc-icon mr-1"
+                                 icon-name="mdiCogClockwise"
+                                 :size="18"
+                              />
                               <span v-html="highlightWord(func.name)" />
                            </a>
                         </li>
@@ -166,7 +209,11 @@
                   :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.function}"
                   @contextmenu.prevent="showMiscFolderContext($event, 'function')"
                >
-                  <i class="misc-icon mdi mdi-18px mdi-folder-move mr-1" />
+                  <BaseIcon
+                     class="misc-icon mr-1"
+                     icon-name="mdiFolderMove"
+                     :size="18"
+                  />
                   {{ t('database.function', 2) }}
                </summary>
                <div class="accordion-body">
@@ -182,7 +229,11 @@
                            @contextmenu.prevent="showMiscContext($event, {...func, type: 'function'})"
                         >
                            <a class="table-name">
-                              <i class="table-icon mdi mdi-arrow-right-bold-box mdi-18px mr-1" />
+                              <BaseIcon
+                                 class="misc-icon mr-1"
+                                 icon-name="mdiArrowRightBoldBox"
+                                 :size="18"
+                              />
                               <span v-html="highlightWord(func.name)" />
                            </a>
                         </li>
@@ -199,7 +250,11 @@
                   :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.scheduler}"
                   @contextmenu.prevent="showMiscFolderContext($event, 'scheduler')"
                >
-                  <i class="misc-icon mdi mdi-18px mdi-folder-clock mr-1" />
+                  <BaseIcon
+                     class="misc-icon mr-1"
+                     icon-name="mdiFolderClock"
+                     :size="18"
+                  />
                   {{ t('database.scheduler', 2) }}
                </summary>
                <div class="accordion-body">
@@ -216,7 +271,11 @@
                         >
                            <a class="table-name">
                               <div v-if="checkLoadingStatus(scheduler.name, 'scheduler')" class="icon loading mr-1" />
-                              <i v-else class="table-icon mdi mdi-calendar-clock mdi-18px mr-1" />
+                              <BaseIcon
+                                 class="misc-icon mr-1"
+                                 icon-name="mdiCalendarClock"
+                                 :size="18"
+                              />
                               <span v-html="highlightWord(scheduler.name)" />
                            </a>
                            <div
@@ -224,7 +283,11 @@
                               class="tooltip tooltip-left disabled-indicator"
                               :data-tooltip="t('general.disabled')"
                            >
-                              <i class="table-icon mdi mdi-pause mdi-18px mr-1" />
+                              <BaseIcon
+                                 class="misc-icon mr-1"
+                                 icon-name="mdiPause"
+                                 :size="18"
+                              />
                            </div>
                         </li>
                      </ul>
@@ -243,6 +306,7 @@ import { storeToRefs } from 'pinia';
 import { computed, Prop, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import { useSettingsStore } from '@/stores/settings';
 import { Breadcrumb, useWorkspacesStore, WorkspaceStructure } from '@/stores/workspaces';
 
@@ -594,7 +658,7 @@ defineExpose({ selectSchema, schemaAccordion });
     display: flex;
     align-items: center;
     height: 100%;
-    opacity: 0.2;
+    opacity: 0.4;
     transition: opacity 0.2s;
 
     &:hover {
diff --git a/src/renderer/components/WorkspaceExploreBarSchemaContext.vue b/src/renderer/components/WorkspaceExploreBarSchemaContext.vue
index 3616d5d8..9a73c314 100644
--- a/src/renderer/components/WorkspaceExploreBarSchemaContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarSchemaContext.vue
@@ -4,57 +4,101 @@
       @close-context="closeContext"
    >
       <div class="context-element">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-plus text-light pr-1" /> {{ t('general.add') }}</span>
-         <i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiPlus"
+               :size="18"
+            /> {{ t('general.add') }}</span>
+         <BaseIcon
+            class="text-light ml-1"
+            icon-name="mdiChevronRight"
+            :size="18"
+         />
          <div class="context-submenu">
             <div
                v-if="workspace.customizations.tableAdd"
                class="context-element"
                @click="openCreateTableTab"
             >
-               <span class="d-flex"><i class="mdi mdi-18px mdi-table text-light pr-1" /> {{ t('database.table') }}</span>
+               <span class="d-flex">
+                  <BaseIcon
+                     class="text-light mt-1 mr-1"
+                     icon-name="mdiTable"
+                     :size="18"
+                  /> {{ t('database.table') }}</span>
             </div>
             <div
                v-if="workspace.customizations.viewAdd"
                class="context-element"
                @click="openCreateViewTab"
             >
-               <span class="d-flex"><i class="mdi mdi-18px mdi-table-eye text-light pr-1" /> {{ t('database.view') }}</span>
+               <span class="d-flex">
+                  <BaseIcon
+                     class="text-light mt-1 mr-1"
+                     icon-name="mdiTableEye"
+                     :size="18"
+                  /> {{ t('database.view') }}</span>
             </div>
             <div
                v-if="workspace.customizations.triggerAdd"
                class="context-element"
                @click="openCreateTriggerTab"
             >
-               <span class="d-flex"><i class="mdi mdi-18px mdi-table-cog text-light pr-1" /> {{ t('database.trigger', 1) }}</span>
+               <span class="d-flex">
+                  <BaseIcon
+                     class="text-light mt-1 mr-1"
+                     icon-name="mdiTableCog"
+                     :size="18"
+                  /> {{ t('database.trigger', 1) }}</span>
             </div>
             <div
                v-if="workspace.customizations.routineAdd"
                class="context-element"
                @click="openCreateRoutineTab"
             >
-               <span class="d-flex"><i class="mdi mdi-18px mdi-sync-circle pr-1" /> {{ t('database.storedRoutine', 1) }}</span>
+               <span class="d-flex">
+                  <BaseIcon
+                     class="text-light mt-1 mr-1"
+                     icon-name="mdiSyncCircle"
+                     :size="18"
+                  /> {{ t('database.storedRoutine', 1) }}</span>
             </div>
             <div
                v-if="workspace.customizations.functionAdd"
                class="context-element"
                @click="openCreateFunctionTab"
             >
-               <span class="d-flex"><i class="mdi mdi-18px mdi-arrow-right-bold-box pr-1" /> {{ t('database.function', 1) }}</span>
+               <span class="d-flex">
+                  <BaseIcon
+                     class="text-light mt-1 mr-1"
+                     icon-name="mdiArrowRightBoldBox"
+                     :size="18"
+                  /> {{ t('database.function', 1) }}</span>
             </div>
             <div
                v-if="workspace.customizations.triggerFunctionAdd"
                class="context-element"
                @click="openCreateTriggerFunctionTab"
             >
-               <span class="d-flex"><i class="mdi mdi-18px mdi-cog-clockwise pr-1" /> {{ t('database.triggerFunction', 1) }}</span>
+               <span class="d-flex">
+                  <BaseIcon
+                     class="text-light mt-1 mr-1"
+                     icon-name="mdiCogClockwise"
+                     :size="18"
+                  /> {{ t('database.triggerFunction', 1) }}</span>
             </div>
             <div
                v-if="workspace.customizations.schedulerAdd"
                class="context-element"
                @click="openCreateSchedulerTab"
             >
-               <span class="d-flex"><i class="mdi mdi-18px mdi-calendar-clock text-light pr-1" /> {{ t('database.scheduler', 1) }}</span>
+               <span class="d-flex">
+                  <BaseIcon
+                     class="text-light mt-1 mr-1"
+                     icon-name="mdiCalendarClock"
+                     :size="18"
+                  /> {{ t('database.scheduler', 1) }}</span>
             </div>
          </div>
       </div>
@@ -63,28 +107,48 @@
          class="context-element"
          @click="showExportSchemaModal"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-database-export text-light pr-1" /> {{ t('database.export') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiDatabaseExport"
+               :size="18"
+            /> {{ t('database.export') }}</span>
       </div>
       <div
          v-if="workspace.customizations.schemaImport"
          class="context-element"
          @click="initImport"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-database-import text-light pr-1" /> {{ t('database.import') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiDatabaseImport"
+               :size="18"
+            /> {{ t('database.import') }}</span>
       </div>
       <div
          v-if="workspace.customizations.schemaEdit"
          class="context-element"
          @click="showEditModal"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-database-edit text-light pr-1" /> {{ t('database.editSchema') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiDatabaseEdit"
+               :size="18"
+            /> {{ t('database.editSchema') }}</span>
       </div>
       <div
          v-if="workspace.customizations.schemaDrop"
          class="context-element"
          @click="showDeleteModal"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-database-remove text-light pr-1" /> {{ t('database.deleteSchema') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiDatabaseRemove"
+               :size="18"
+            /> {{ t('database.deleteSchema') }}</span>
       </div>
 
       <ConfirmModal
@@ -94,7 +158,11 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-database-remove mr-1" />
+               <BaseIcon
+                  class="text-light mr-1"
+                  icon-name="mdiDatabaseRemove"
+                  :size="24"
+               />
                <span class="cut-text">{{ t('database.deleteSchema') }}</span>
             </div>
          </template>
@@ -125,6 +193,7 @@ import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
 import BaseContextMenu from '@/components/BaseContextMenu.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import ModalEditSchema from '@/components/ModalEditSchema.vue';
 import ModalImportSchema from '@/components/ModalImportSchema.vue';
 import Application from '@/ipc-api/Application';
diff --git a/src/renderer/components/WorkspaceExploreBarTableContext.vue b/src/renderer/components/WorkspaceExploreBarTableContext.vue
index fe639e06..b8478a72 100644
--- a/src/renderer/components/WorkspaceExploreBarTableContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarTableContext.vue
@@ -8,38 +8,68 @@
          class="context-element"
          @click="openTableSettingTab"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-wrench-cog text-light pr-1" /> {{ t('application.settings') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiWrenchCog"
+               :size="18"
+            /> {{ t('application.settings') }}</span>
       </div>
       <div
          v-if="selectedTable && selectedTable.type === 'table' && customizations.schemaExport"
          class="context-element"
          @click="showTableExportModal"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-table-arrow-right text-light pr-1" /> {{ t('database.exportTable') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiTableArrowRight"
+               :size="18"
+            /> {{ t('database.exportTable') }}</span>
       </div>
       <div
          v-if="selectedTable && selectedTable.type === 'view' && customizations.viewSettings"
          class="context-element"
          @click="openViewSettingTab"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-wrench-cog text-light pr-1" /> {{ t('application.settings') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiWrenchCog"
+               :size="18"
+            /> {{ t('application.settings') }}</span>
       </div>
       <div
          v-if="selectedTable && selectedTable.type === 'table' && customizations.tableDuplicate"
          class="context-element"
          @click="duplicateTable"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-table-multiple text-light pr-1" /> {{ t('database.duplicateTable') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiTableMultiple"
+               :size="18"
+            /> {{ t('database.duplicateTable') }}</span>
       </div>
       <div
          v-if="selectedTable && selectedTable.type === 'table'"
          class="context-element"
          @click="showEmptyModal"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-table-off text-light pr-1" /> {{ t('database.emptyTable') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiTableOff"
+               :size="18"
+            /> {{ t('database.emptyTable') }}</span>
       </div>
       <div class="context-element" @click="showDeleteModal">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-table-remove text-light pr-1" /> {{ t('database.deleteTable') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiTableRemove"
+               :size="18"
+            /> {{ t('database.deleteTable') }}</span>
       </div>
 
       <ConfirmModal
@@ -49,7 +79,11 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-table-off mr-1" /> <span class="cut-text">{{ t('database.emptyTable') }}</span>
+               <BaseIcon
+                  class="text-light mr-1"
+                  icon-name="mdiTableOff"
+                  :size="24"
+               /> <span class="cut-text">{{ t('database.emptyTable') }}</span>
             </div>
          </template>
          <template #body>
@@ -70,7 +104,11 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-table-remove mr-1" />
+               <BaseIcon
+                  class="text-light mr-1"
+                  icon-name="mdiTableRemove"
+                  :size="24"
+               />
                <span class="cut-text">{{ selectedTable.type === 'table' ? t('database.deleteTable') : t('database.deleteView') }}</span>
             </div>
          </template>
@@ -90,6 +128,7 @@ import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
 import BaseContextMenu from '@/components/BaseContextMenu.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import Tables from '@/ipc-api/Tables';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useSchemaExportStore } from '@/stores/schemaExport';
diff --git a/src/renderer/components/WorkspaceQueryConsole.vue b/src/renderer/components/WorkspaceQueryConsole.vue
index c1de01ba..29c04be8 100644
--- a/src/renderer/components/WorkspaceQueryConsole.vue
+++ b/src/renderer/components/WorkspaceQueryConsole.vue
@@ -35,7 +35,12 @@
       @close-context="isContext = false"
    >
       <div class="context-element" @click="copyQuery">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-content-copy text-light pr-1" /> {{ t('general.copy') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiContentCopy"
+               :size="18"
+            /> {{ t('general.copy') }}</span>
       </div>
    </BaseContextMenu>
 </template>
@@ -46,6 +51,7 @@ import { computed, nextTick, onMounted, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import BaseContextMenu from '@/components/BaseContextMenu.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import { useConsoleStore } from '@/stores/console';
 
 const { t } = useI18n();
diff --git a/src/renderer/components/WorkspaceTabNewFunction.vue b/src/renderer/components/WorkspaceTabNewFunction.vue
index 1c5a90a0..ae8b57b0 100644
--- a/src/renderer/components/WorkspaceTabNewFunction.vue
+++ b/src/renderer/components/WorkspaceTabNewFunction.vue
@@ -9,7 +9,11 @@
                   :class="{'loading':isSaving}"
                   @click="saveChanges"
                >
-                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiContentSave"
+                     :size="24"
+                  />
                   <span>{{ t('general.save') }}</span>
                </button>
                <button
@@ -18,20 +22,32 @@
                   :title="t('database.clearChanges')"
                   @click="clearChanges"
                >
-                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDeleteSweep"
+                     :size="24"
+                  />
                   <span>{{ t('general.clear') }}</span>
                </button>
 
                <div class="divider-vert py-3" />
 
                <button class="btn btn-dark btn-sm" @click="showParamsModal">
-                  <i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDotsHorizontal"
+                     :size="24"
+                  />
                   <span>{{ t('database.parameters') }}</span>
                </button>
             </div>
             <div class="workspace-query-info">
                <div class="d-flex" :title="t('database.schema')">
-                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+                  <BaseIcon
+                     class="mt-1 mr-1"
+                     icon-name="mdiDatabase"
+                     :size="18"
+                  /><b>{{ schema }}</b>
                </div>
             </div>
          </div>
@@ -182,6 +198,7 @@ import { storeToRefs } from 'pinia';
 import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import QueryEditor from '@/components/QueryEditor.vue';
diff --git a/src/renderer/components/WorkspaceTabNewRoutine.vue b/src/renderer/components/WorkspaceTabNewRoutine.vue
index 44dfcd22..cedfa23a 100644
--- a/src/renderer/components/WorkspaceTabNewRoutine.vue
+++ b/src/renderer/components/WorkspaceTabNewRoutine.vue
@@ -9,7 +9,11 @@
                   :class="{'loading':isSaving}"
                   @click="saveChanges"
                >
-                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiContentSave"
+                     :size="24"
+                  />
                   <span>{{ t('general.save') }}</span>
                </button>
                <button
@@ -18,20 +22,32 @@
                   :title="t('database.clearChanges')"
                   @click="clearChanges"
                >
-                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDeleteSweep"
+                     :size="24"
+                  />
                   <span>{{ t('general.clear') }}</span>
                </button>
 
                <div class="divider-vert py-3" />
 
                <button class="btn btn-dark btn-sm" @click="showParamsModal">
-                  <i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDotsHorizontal"
+                     :size="24"
+                  />
                   <span>{{ t('database.parameters') }}</span>
                </button>
             </div>
             <div class="workspace-query-info">
                <div class="d-flex" :title="t('database.schema')">
-                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+                  <BaseIcon
+                     class="mt-1 mr-1"
+                     icon-name="mdiDatabase"
+                     :size="18"
+                  /><b>{{ schema }}</b>
                </div>
             </div>
          </div>
@@ -154,6 +170,7 @@ import { storeToRefs } from 'pinia';
 import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import QueryEditor from '@/components/QueryEditor.vue';
diff --git a/src/renderer/components/WorkspaceTabNewScheduler.vue b/src/renderer/components/WorkspaceTabNewScheduler.vue
index 006494cc..366946ba 100644
--- a/src/renderer/components/WorkspaceTabNewScheduler.vue
+++ b/src/renderer/components/WorkspaceTabNewScheduler.vue
@@ -9,7 +9,11 @@
                   :class="{'loading':isSaving}"
                   @click="saveChanges"
                >
-                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiContentSave"
+                     :size="24"
+                  />
                   <span>{{ t('general.save') }}</span>
                </button>
                <button
@@ -18,19 +22,31 @@
                   :title="t('database.clearChanges')"
                   @click="clearChanges"
                >
-                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDeleteSweep"
+                     :size="24"
+                  />
                   <span>{{ t('general.clear') }}</span>
                </button>
 
                <div class="divider-vert py-3" />
                <button class="btn btn-dark btn-sm" @click="showTimingModal">
-                  <i class="mdi mdi-24px mdi-timer mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiTimer"
+                     :size="24"
+                  />
                   <span>{{ t('database.timing') }}</span>
                </button>
             </div>
             <div class="workspace-query-info">
                <div class="d-flex" :title="t('database.schema')">
-                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+                  <BaseIcon
+                     class="mt-1 mr-1"
+                     icon-name="mdiDatabase"
+                     :size="18"
+                  /><b>{{ schema }}</b>
                </div>
             </div>
          </div>
@@ -131,6 +147,7 @@ import { storeToRefs } from 'pinia';
 import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Prop, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import QueryEditor from '@/components/QueryEditor.vue';
diff --git a/src/renderer/components/WorkspaceTabNewTable.vue b/src/renderer/components/WorkspaceTabNewTable.vue
index e1986e72..2ec0e2dd 100644
--- a/src/renderer/components/WorkspaceTabNewTable.vue
+++ b/src/renderer/components/WorkspaceTabNewTable.vue
@@ -9,7 +9,11 @@
                   :class="{'loading':isSaving}"
                   @click="saveChanges"
                >
-                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiContentSave"
+                     :size="24"
+                  />
                   <span>{{ t('general.save') }}</span>
                </button>
                <button
@@ -18,7 +22,11 @@
                   :title="t('database.clearChanges')"
                   @click="clearChanges"
                >
-                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDeleteSweep"
+                     :size="24"
+                  />
                   <span>{{ t('general.clear') }}</span>
                </button>
 
@@ -30,7 +38,11 @@
                   :title="t('database.addNewField')"
                   @click="addField"
                >
-                  <i class="mdi mdi-24px mdi-playlist-plus mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiPlaylistPlus"
+                     :size="24"
+                  />
                   <span>{{ t('general.add') }}</span>
                </button>
                <button
@@ -39,7 +51,12 @@
                   :title="t('database.manageIndexes')"
                   @click="showIntdexesModal"
                >
-                  <i class="mdi mdi-24px mdi-key mdi-rotate-45 mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiKey"
+                     rotate="45deg"
+                     :size="24"
+                  />
                   <span>{{ t('database.indexes') }}</span>
                </button>
                <button
@@ -48,13 +65,21 @@
                   :title="t('database.manageForeignKeys')"
                   @click="showForeignModal"
                >
-                  <i class="mdi mdi-24px mdi-key-link mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiKeyLink"
+                     :size="24"
+                  />
                   <span>{{ t('database.foreignKeys') }}</span>
                </button>
             </div>
             <div class="workspace-query-info">
                <div class="d-flex" :title="t('database.schema')">
-                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+                  <BaseIcon
+                     class="mt-1 mr-1"
+                     icon-name="mdiDatabase"
+                     :size="18"
+                  /><b>{{ schema }}</b>
                </div>
             </div>
          </div>
@@ -169,6 +194,7 @@ import { storeToRefs } from 'pinia';
 import { Component, computed, onBeforeUnmount, onMounted, Prop, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import WorkspaceTabNewTableEmptyState from '@/components/WorkspaceTabNewTableEmptyState.vue';
diff --git a/src/renderer/components/WorkspaceTabNewTableEmptyState.vue b/src/renderer/components/WorkspaceTabNewTableEmptyState.vue
index d629975d..c4f4df02 100644
--- a/src/renderer/components/WorkspaceTabNewTableEmptyState.vue
+++ b/src/renderer/components/WorkspaceTabNewTableEmptyState.vue
@@ -5,7 +5,11 @@
       </p>
       <div class="empty-action">
          <button class="btn btn-gray d-flex" @click="emit('new-field')">
-            <i class="mdi mdi-24px mdi-playlist-plus mr-2" />
+            <BaseIcon
+               class="mr-2"
+               icon-name="mdiPlaylistPlus"
+               :size="24"
+            />
             {{ t('database.addNewField') }}
          </button>
       </div>
@@ -15,6 +19,8 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
+
 const { t } = useI18n();
 const emit = defineEmits(['new-field']);
 </script>
diff --git a/src/renderer/components/WorkspaceTabNewTrigger.vue b/src/renderer/components/WorkspaceTabNewTrigger.vue
index aaa1f5c6..df5030bb 100644
--- a/src/renderer/components/WorkspaceTabNewTrigger.vue
+++ b/src/renderer/components/WorkspaceTabNewTrigger.vue
@@ -9,7 +9,11 @@
                   :class="{'loading':isSaving}"
                   @click="saveChanges"
                >
-                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiContentSave"
+                     :size="24"
+                  />
                   <span>{{ t('general.save') }}</span>
                </button>
                <button
@@ -18,13 +22,21 @@
                   :title="t('database.clearChanges')"
                   @click="clearChanges"
                >
-                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDeleteSweep"
+                     :size="24"
+                  />
                   <span>{{ t('general.clear') }}</span>
                </button>
             </div>
             <div class="workspace-query-info">
                <div class="d-flex" :title="t('database.schema')">
-                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+                  <BaseIcon
+                     class="mt-1 mr-1"
+                     icon-name="mdiDatabase"
+                     :size="18"
+                  /><b>{{ schema }}</b>
                </div>
             </div>
          </div>
@@ -120,6 +132,7 @@ import { storeToRefs } from 'pinia';
 import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import QueryEditor from '@/components/QueryEditor.vue';
diff --git a/src/renderer/components/WorkspaceTabNewTriggerFunction.vue b/src/renderer/components/WorkspaceTabNewTriggerFunction.vue
index 2d013d23..2dc7d8ca 100644
--- a/src/renderer/components/WorkspaceTabNewTriggerFunction.vue
+++ b/src/renderer/components/WorkspaceTabNewTriggerFunction.vue
@@ -9,7 +9,11 @@
                   :class="{'loading':isSaving}"
                   @click="saveChanges"
                >
-                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiContentSave"
+                     :size="24"
+                  />
                   <span>{{ t('general.save') }}</span>
                </button>
                <button
@@ -18,10 +22,23 @@
                   :title="t('database.clearChanges')"
                   @click="clearChanges"
                >
-                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDeleteSweep"
+                     :size="24"
+                  />
                   <span>{{ t('general.clear') }}</span>
                </button>
             </div>
+            <div class="workspace-query-info">
+               <div class="d-flex" :title="t('database.schema')">
+                  <BaseIcon
+                     class="mt-1 mr-1"
+                     icon-name="mdiDatabase"
+                     :size="18"
+                  /><b>{{ schema }}</b>
+               </div>
+            </div>
          </div>
       </div>
       <div class="container">
@@ -99,6 +116,7 @@ import { storeToRefs } from 'pinia';
 import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import QueryEditor from '@/components/QueryEditor.vue';
diff --git a/src/renderer/components/WorkspaceTabNewView.vue b/src/renderer/components/WorkspaceTabNewView.vue
index f0aac320..217dc90a 100644
--- a/src/renderer/components/WorkspaceTabNewView.vue
+++ b/src/renderer/components/WorkspaceTabNewView.vue
@@ -9,7 +9,11 @@
                   :class="{'loading':isSaving}"
                   @click="saveChanges"
                >
-                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiContentSave"
+                     :size="24"
+                  />
                   <span>{{ t('general.save') }}</span>
                </button>
                <button
@@ -18,13 +22,21 @@
                   :title="t('database.clearChanges')"
                   @click="clearChanges"
                >
-                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDeleteSweep"
+                     :size="24"
+                  />
                   <span>{{ t('general.clear') }}</span>
                </button>
             </div>
             <div class="workspace-query-info">
                <div class="d-flex" :title="t('database.schema')">
-                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+                  <BaseIcon
+                     class="mt-1 mr-1"
+                     icon-name="mdiDatabase"
+                     :size="18"
+                  /><b>{{ schema }}</b>
                </div>
             </div>
          </div>
@@ -109,6 +121,7 @@ import { storeToRefs } from 'pinia';
 import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import QueryEditor from '@/components/QueryEditor.vue';
diff --git a/src/renderer/components/WorkspaceTabPropsFunction.vue b/src/renderer/components/WorkspaceTabPropsFunction.vue
index 81aab9c1..4a8c74d7 100644
--- a/src/renderer/components/WorkspaceTabPropsFunction.vue
+++ b/src/renderer/components/WorkspaceTabPropsFunction.vue
@@ -9,7 +9,11 @@
                   :class="{'loading':isSaving}"
                   @click="saveChanges"
                >
-                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiContentSave"
+                     :size="24"
+                  />
                   <span>{{ t('general.save') }}</span>
                </button>
                <button
@@ -18,7 +22,11 @@
                   :title="t('database.clearChanges')"
                   @click="clearChanges"
                >
-                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDeleteSweep"
+                     :size="24"
+                  />
                   <span>{{ t('general.clear') }}</span>
                </button>
 
@@ -29,17 +37,29 @@
                   :disabled="isChanged"
                   @click="runFunctionCheck"
                >
-                  <i class="mdi mdi-24px mdi-play mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiPlay"
+                     :size="24"
+                  />
                   <span>{{ t('general.run') }}</span>
                </button>
                <button class="btn btn-dark btn-sm" @click="showParamsModal">
-                  <i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDotsHorizontal"
+                     :size="24"
+                  />
                   <span>{{ t('database.parameters') }}</span>
                </button>
             </div>
             <div class="workspace-query-info">
                <div class="d-flex" :title="t('database.schema')">
-                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+                  <BaseIcon
+                     class="mt-1 mr-1"
+                     icon-name="mdiDatabase"
+                     :size="18"
+                  /><b>{{ schema }}</b>
                </div>
             </div>
          </div>
@@ -199,6 +219,7 @@ import { storeToRefs } from 'pinia';
 import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import ModalAskParameters from '@/components/ModalAskParameters.vue';
diff --git a/src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue b/src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue
index 9217a975..a0da39bb 100644
--- a/src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue
@@ -8,7 +8,11 @@
    >
       <template #header>
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
+            <BaseIcon
+               class="mr-1"
+               icon-name="mdiDotsHorizontal"
+               :size="24"
+            />
             <span class="cut-text">{{ t('database.parameters') }} "{{ func }}"</span>
          </div>
       </template>
@@ -19,7 +23,11 @@
                   <div class="panel-header pt-0 pl-0">
                      <div class="d-flex">
                         <button class="btn btn-dark btn-sm d-flex" @click="addParameter">
-                           <i class="mdi mdi-24px mdi-plus mr-1" />
+                           <BaseIcon
+                              class="mr-1"
+                              icon-name="mdiPlus"
+                              :size="24"
+                           />
                            <span>{{ t('general.add') }}</span>
                         </button>
                         <button
@@ -28,7 +36,11 @@
                            :disabled="!isChanged"
                            @click.prevent="clearChanges"
                         >
-                           <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                           <BaseIcon
+                              class="mr-1"
+                              icon-name="mdiDeleteSweep"
+                              :size="24"
+                           />
                            <span>{{ t('general.clear') }}</span>
                         </button>
                      </div>
@@ -43,7 +55,12 @@
                      >
                         <div class="tile-icon">
                            <div>
-                              <i class="mdi mdi-hexagon mdi-24px" :class="typeClass(param.type)" />
+                              <BaseIcon
+                                 class="mt-2"
+                                 icon-name="mdiHexagon"
+                                 :class="typeClass(param.type)"
+                                 :size="24"
+                              />
                            </div>
                         </div>
                         <div class="tile-content">
@@ -58,7 +75,11 @@
                               :title="t('general.delete')"
                               @click.prevent="removeParameter(param._antares_id)"
                            >
-                              <i class="mdi mdi-close" />
+                              <BaseIcon
+                                 icon-name="mdiClose"
+                                 :size="18"
+                                 class="mt-2"
+                              />
                            </button>
                         </div>
                      </div>
@@ -147,7 +168,11 @@
                </form>
                <div v-if="!parametersProxy.length" class="empty">
                   <div class="empty-icon">
-                     <i class="mdi mdi-dots-horizontal mdi-48px" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiDotsHorizontal"
+                        :size="48"
+                     />
                   </div>
                   <p class="empty-title h5">
                      {{ t('database.thereAreNoParameters') }}
@@ -170,6 +195,7 @@ import { computed, onMounted, onUnmounted, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 
 const { t } = useI18n();
@@ -307,7 +333,7 @@ onUnmounted(() => {
   overflow: auto;
 }
 
-.remove-field .mdi {
+.remove-field svg {
   pointer-events: none;
 }
 </style>
diff --git a/src/renderer/components/WorkspaceTabPropsRoutine.vue b/src/renderer/components/WorkspaceTabPropsRoutine.vue
index 0e329b43..56d5ba32 100644
--- a/src/renderer/components/WorkspaceTabPropsRoutine.vue
+++ b/src/renderer/components/WorkspaceTabPropsRoutine.vue
@@ -9,7 +9,11 @@
                   :class="{'loading':isSaving}"
                   @click="saveChanges"
                >
-                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiContentSave"
+                     :size="24"
+                  />
                   <span>{{ t('general.save') }}</span>
                </button>
                <button
@@ -18,7 +22,11 @@
                   :title="t('database.clearChanges')"
                   @click="clearChanges"
                >
-                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDeleteSweep"
+                     :size="24"
+                  />
                   <span>{{ t('general.clear') }}</span>
                </button>
 
@@ -29,17 +37,29 @@
                   :disabled="isChanged"
                   @click="runRoutineCheck"
                >
-                  <i class="mdi mdi-24px mdi-play mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiPlay"
+                     :size="24"
+                  />
                   <span>{{ t('general.run') }}</span>
                </button>
                <button class="btn btn-dark btn-sm" @click="showParamsModal">
-                  <i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDotsHorizontal"
+                     :size="24"
+                  />
                   <span>{{ t('database.parameters') }}</span>
                </button>
             </div>
             <div class="workspace-query-info">
                <div class="d-flex" :title="t('database.schema')">
-                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+                  <BaseIcon
+                     class="mt-1 mr-1"
+                     icon-name="mdiDatabase"
+                     :size="18"
+                  /><b>{{ schema }}</b>
                </div>
             </div>
          </div>
@@ -171,6 +191,7 @@ import { storeToRefs } from 'pinia';
 import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import ModalAskParameters from '@/components/ModalAskParameters.vue';
diff --git a/src/renderer/components/WorkspaceTabPropsRoutineParamsModal.vue b/src/renderer/components/WorkspaceTabPropsRoutineParamsModal.vue
index 070e94af..09d17952 100644
--- a/src/renderer/components/WorkspaceTabPropsRoutineParamsModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsRoutineParamsModal.vue
@@ -8,7 +8,11 @@
    >
       <template #header>
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
+            <BaseIcon
+               class="mr-1"
+               icon-name="mdiDotsHorizontal"
+               :size="24"
+            />
             <span class="cut-text">{{ t('database.parameters') }} "{{ routine }}"</span>
          </div>
       </template>
@@ -19,7 +23,11 @@
                   <div class="panel-header pt-0 pl-0">
                      <div class="d-flex">
                         <button class="btn btn-dark btn-sm d-flex" @click="addParameter">
-                           <i class="mdi mdi-24px mdi-plus mr-1" />
+                           <BaseIcon
+                              class="mr-1"
+                              icon-name="mdiPlus"
+                              :size="24"
+                           />
                            <span>{{ t('general.add') }}</span>
                         </button>
                         <button
@@ -28,7 +36,11 @@
                            :disabled="!isChanged"
                            @click.prevent="clearChanges"
                         >
-                           <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                           <BaseIcon
+                              class="mr-1"
+                              icon-name="mdiDeleteSweep"
+                              :size="24"
+                           />
                            <span>{{ t('general.clear') }}</span>
                         </button>
                      </div>
@@ -43,7 +55,12 @@
                      >
                         <div class="tile-icon">
                            <div>
-                              <i class="mdi mdi-hexagon mdi-24px" :class="typeClass(param.type)" />
+                              <BaseIcon
+                                 class="mt-2"
+                                 icon-name="mdiHexagon"
+                                 :class="typeClass(param.type)"
+                                 :size="24"
+                              />
                            </div>
                         </div>
                         <div class="tile-content">
@@ -58,7 +75,11 @@
                               :title="t('general.delete')"
                               @click.prevent="removeParameter(param._antares_id)"
                            >
-                              <i class="mdi mdi-close" />
+                              <BaseIcon
+                                 icon-name="mdiClose"
+                                 :size="18"
+                                 class="mt-2"
+                              />
                            </button>
                         </div>
                      </div>
@@ -135,7 +156,11 @@
                </form>
                <div v-if="!parametersProxy.length" class="empty">
                   <div class="empty-icon">
-                     <i class="mdi mdi-dots-horizontal mdi-48px" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiDotsHorizontal"
+                        :size="48"
+                     />
                   </div>
                   <p class="empty-title h5">
                      {{ t('database.thereAreNoParameters') }}
@@ -158,6 +183,7 @@ import { computed, onMounted, onUnmounted, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 
 const { t } = useI18n();
@@ -295,7 +321,7 @@ onUnmounted(() => {
   overflow: auto;
 }
 
-.remove-field .mdi {
+.remove-field svg {
   pointer-events: none;
 }
 </style>
diff --git a/src/renderer/components/WorkspaceTabPropsScheduler.vue b/src/renderer/components/WorkspaceTabPropsScheduler.vue
index 81c48c40..d286ab83 100644
--- a/src/renderer/components/WorkspaceTabPropsScheduler.vue
+++ b/src/renderer/components/WorkspaceTabPropsScheduler.vue
@@ -9,7 +9,11 @@
                   :class="{'loading':isSaving}"
                   @click="saveChanges"
                >
-                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiContentSave"
+                     :size="24"
+                  />
                   <span>{{ t('general.save') }}</span>
                </button>
                <button
@@ -18,19 +22,31 @@
                   :title="t('database.clearChanges')"
                   @click="clearChanges"
                >
-                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDeleteSweep"
+                     :size="24"
+                  />
                   <span>{{ t('general.clear') }}</span>
                </button>
 
                <div class="divider-vert py-3" />
                <button class="btn btn-dark btn-sm" @click="showTimingModal">
-                  <i class="mdi mdi-24px mdi-timer mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiTimer"
+                     :size="24"
+                  />
                   <span>{{ t('database.timing') }}</span>
                </button>
             </div>
             <div class="workspace-query-info">
                <div class="d-flex" :title="t('database.schema')">
-                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+                  <BaseIcon
+                     class="mt-1 mr-1"
+                     icon-name="mdiDatabase"
+                     :size="18"
+                  /><b>{{ schema }}</b>
                </div>
             </div>
          </div>
@@ -129,6 +145,7 @@ import { storeToRefs } from 'pinia';
 import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import QueryEditor from '@/components/QueryEditor.vue';
diff --git a/src/renderer/components/WorkspaceTabPropsSchedulerTimingModal.vue b/src/renderer/components/WorkspaceTabPropsSchedulerTimingModal.vue
index 2c259aba..e578bfa4 100644
--- a/src/renderer/components/WorkspaceTabPropsSchedulerTimingModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsSchedulerTimingModal.vue
@@ -8,7 +8,11 @@
    >
       <template #header>
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-timer mr-1" />
+            <BaseIcon
+               class="mr-1"
+               icon-name="mdiTimer"
+               :size="24"
+            />
             <span class="cut-text">{{ t('database.timing') }} "{{ localOptions.name }}"</span>
          </div>
       </template>
@@ -76,7 +80,11 @@
                            class="form-input"
                         >
                         <span class="input-group-addon p-vcentered">
-                           <i class="form-icon mdi mdi-calendar" />
+                           <BaseIcon
+                              icon-name="mdiCalendar"
+                              :size="18"
+                              class="form-icon"
+                           />
                         </span>
                      </div>
                   </div>
@@ -97,7 +105,11 @@
                            class="form-input"
                         >
                         <span class="input-group-addon p-vcentered">
-                           <i class="form-icon mdi mdi-calendar" />
+                           <BaseIcon
+                              icon-name="mdiCalendar"
+                              :size="18"
+                              class="form-icon"
+                           />
                         </span>
                      </div>
                   </div>
@@ -115,7 +127,11 @@
                            class="form-input"
                         >
                         <span class="input-group-addon p-vcentered">
-                           <i class="form-icon mdi mdi-calendar" />
+                           <BaseIcon
+                              icon-name="mdiCalendar"
+                              :size="18"
+                              class="form-icon"
+                           />
                         </span>
                      </div>
                   </div>
@@ -141,6 +157,7 @@ import { Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 
 const { t } = useI18n();
diff --git a/src/renderer/components/WorkspaceTabPropsTable.vue b/src/renderer/components/WorkspaceTabPropsTable.vue
index aa98a099..73cb6b2e 100644
--- a/src/renderer/components/WorkspaceTabPropsTable.vue
+++ b/src/renderer/components/WorkspaceTabPropsTable.vue
@@ -9,7 +9,11 @@
                   :class="{'loading':isSaving}"
                   @click="saveChanges"
                >
-                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiContentSave"
+                     :size="24"
+                  />
                   <span>{{ t('general.save') }}</span>
                </button>
                <button
@@ -18,7 +22,11 @@
                   :title="t('database.clearChanges')"
                   @click="clearChanges"
                >
-                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDeleteSweep"
+                     :size="24"
+                  />
                   <span>{{ t('general.clear') }}</span>
                </button>
 
@@ -30,7 +38,11 @@
                   :title="t('database.addNewField')"
                   @click="addField"
                >
-                  <i class="mdi mdi-24px mdi-playlist-plus mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiPlaylistPlus"
+                     :size="24"
+                  />
                   <span>{{ t('general.add') }}</span>
                </button>
                <button
@@ -39,7 +51,12 @@
                   :title="t('database.manageIndexes')"
                   @click="showIntdexesModal"
                >
-                  <i class="mdi mdi-24px mdi-key mdi-rotate-45 mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiKey"
+                     rotate="45deg"
+                     :size="24"
+                  />
                   <span>{{ t('database.indexes') }}</span>
                </button>
                <button
@@ -48,7 +65,11 @@
                   :title="t('database.manageIndexes')"
                   @click="showForeignModal"
                >
-                  <i class="mdi mdi-24px mdi-key-link mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiKeyLink"
+                     :size="24"
+                  />
                   <span>{{ t('database.foreignKeys') }}</span>
                </button>
 
@@ -60,13 +81,21 @@
                   :disabled="isSaving"
                   @click="showDdlModal"
                >
-                  <i class="mdi mdi-24px mdi-code-tags mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiCodeTags"
+                     :size="24"
+                  />
                   <span>{{ t('database.ddl') }}</span>
                </button>
             </div>
             <div class="workspace-query-info">
                <div class="d-flex" :title="t('database.schema')">
-                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+                  <BaseIcon
+                     class="mt-1 mr-1"
+                     icon-name="mdiDatabase"
+                     :size="18"
+                  /><b>{{ schema }}</b>
                </div>
             </div>
          </div>
@@ -200,6 +229,7 @@ import { storeToRefs } from 'pinia';
 import { Component, computed, onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import WorkspaceTabPropsTableDdlModal from '@/components/WorkspaceTabPropsTableDdlModal.vue';
diff --git a/src/renderer/components/WorkspaceTabPropsTableContext.vue b/src/renderer/components/WorkspaceTabPropsTableContext.vue
index 739207a6..eec06ea7 100644
--- a/src/renderer/components/WorkspaceTabPropsTableContext.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableContext.vue
@@ -4,8 +4,17 @@
       @close-context="closeContext"
    >
       <div class="context-element">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-key-plus text-light pr-1" /> {{ t('database.createNewIndex') }}</span>
-         <i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiKeyPlus"
+               :size="18"
+            /> {{ t('database.createNewIndex') }}</span>
+         <BaseIcon
+            class="text-light mt-1"
+            icon-name="mdiChevronRight"
+            :size="18"
+         />
          <div class="context-submenu">
             <div
                v-for="index in indexTypes"
@@ -14,13 +23,29 @@
                :class="{'disabled': index === 'PRIMARY' && hasPrimary}"
                @click="addNewIndex(index)"
             >
-               <span class="d-flex"><i class="mdi mdi-18px mdi-key column-key pr-1" :class="`key-${index}`" /> {{ index }}</span>
+               <span class="d-flex">
+                  <BaseIcon
+                     class="column-key pr-1 mt-1 mr-1"
+                     :class="`key-${index}`"
+                     icon-name="mdiKey"
+                     rotate="45deg"
+                     :size="20"
+                  /> {{ index }}</span>
             </div>
          </div>
       </div>
       <div v-if="indexes.length" class="context-element">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-key-arrow-right text-light pr-1" /> {{ t('database.addToIndex') }}</span>
-         <i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiKeyArrowRight"
+               :size="18"
+            /> {{ t('database.addToIndex') }}</span>
+         <BaseIcon
+            class="text-light mt-1"
+            icon-name="mdiChevronRight"
+            :size="18"
+         />
          <div class="context-submenu">
             <div
                v-for="index in indexes"
@@ -29,15 +54,32 @@
                :class="{'disabled': index.fields.includes(selectedField.name)}"
                @click="addToIndex(index._antares_id)"
             >
-               <span class="d-flex"><i class="mdi mdi-18px mdi-key column-key pr-1" :class="`key-${index.type}`" /> {{ index.name }}</span>
+               <span class="d-flex">
+                  <BaseIcon
+                     class="column-key pr-1 mt-1 mr-1"
+                     :class="`key-${index.type}`"
+                     icon-name="mdiKey"
+                     rotate="45deg"
+                     :size="20"
+                  /> {{ index.name }}</span>
             </div>
          </div>
       </div>
       <div class="context-element" @click="duplicateField">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-content-duplicate text-light pr-1" /> {{ t('general.duplicate') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiContentDuplicate"
+               :size="18"
+            /> {{ t('general.duplicate') }}</span>
       </div>
       <div class="context-element" @click="deleteField">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ t('database.deleteField') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiDelete"
+               :size="18"
+            /> {{ t('database.deleteField') }}</span>
       </div>
    </BaseContextMenu>
 </template>
@@ -48,6 +90,7 @@ import { computed, Prop } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import BaseContextMenu from '@/components/BaseContextMenu.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 
 const { t } = useI18n();
 
diff --git a/src/renderer/components/WorkspaceTabPropsTableDdlModal.vue b/src/renderer/components/WorkspaceTabPropsTableDdlModal.vue
index c4f12933..5b4c20b7 100644
--- a/src/renderer/components/WorkspaceTabPropsTableDdlModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableDdlModal.vue
@@ -9,7 +9,11 @@
    >
       <template #header>
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-code-tags mr-1" />
+            <BaseIcon
+               class="mr-1"
+               icon-name="mdiCodeTags"
+               :size="24"
+            />
             <span class="cut-text">{{ t('database.ddl') }} "{{ table }}"</span>
          </div>
       </template>
@@ -32,6 +36,7 @@ import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseTextEditor from '@/components/BaseTextEditor.vue';
 import Tables from '@/ipc-api/Tables';
 import { useNotificationsStore } from '@/stores/notifications';
diff --git a/src/renderer/components/WorkspaceTabPropsTableForeignModal.vue b/src/renderer/components/WorkspaceTabPropsTableForeignModal.vue
index 319d9152..3918ca94 100644
--- a/src/renderer/components/WorkspaceTabPropsTableForeignModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableForeignModal.vue
@@ -8,7 +8,11 @@
    >
       <template #header>
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-key-link mr-1" />
+            <BaseIcon
+               class="mr-1"
+               icon-name="mdiKeyLink"
+               :size="24"
+            />
             <span class="cut-text">{{ t('database.foreignKeys') }} "{{ table }}"</span>
          </div>
       </template>
@@ -19,7 +23,11 @@
                   <div class="panel-header pt-0 pl-0">
                      <div class="d-flex">
                         <button class="btn btn-dark btn-sm d-flex" @click="addForeign">
-                           <i class="mdi mdi-24px mdi-link-plus mr-1" />
+                           <BaseIcon
+                              class="mr-1"
+                              icon-name="mdiLinkPlus"
+                              :size="24"
+                           />
                            <span>{{ t('general.add') }}</span>
                         </button>
                         <button
@@ -28,7 +36,11 @@
                            :disabled="!isChanged"
                            @click.prevent="clearChanges"
                         >
-                           <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                           <BaseIcon
+                              class="mr-1"
+                              icon-name="mdiDeleteSweep"
+                              :size="24"
+                           />
                            <span>{{ t('general.clear') }}</span>
                         </button>
                      </div>
@@ -43,7 +55,11 @@
                      >
                         <div class="tile-icon">
                            <div>
-                              <i class="mdi mdi-key-link mdi-24px" />
+                              <BaseIcon
+                                 class="mr-1"
+                                 icon-name="mdiKeyLink"
+                                 :size="24"
+                              />
                            </div>
                         </div>
                         <div class="tile-content">
@@ -51,14 +67,26 @@
                               {{ foreign.constraintName }}
                            </div>
                            <small class="tile-subtitle text-gray d-flex">
-                              <i class="mdi mdi-link-variant mr-1" />
+                              <BaseIcon
+                                 class="mt-1 mr-1"
+                                 icon-name="mdiLinkVariant"
+                                 :size="18"
+                              />
                               <div class="fk-details-wrapper">
                                  <span v-if="foreign.table !== ''" class="fk-details">
-                                    <i class="mdi mdi-table mr-1" />
+                                    <BaseIcon
+                                       class="mr-1"
+                                       icon-name="mdiTable"
+                                       :size="14"
+                                    />
                                     <span>{{ foreign.table }}.{{ foreign.field }}</span>
                                  </span>
                                  <span v-if="foreign.refTable !== ''" class="fk-details">
-                                    <i class="mdi mdi-table mr-1" />
+                                    <BaseIcon
+                                       class="mr-1"
+                                       icon-name="mdiTable"
+                                       :size="14"
+                                    />
                                     <span>{{ foreign.refTable }}.{{ foreign.refField }}</span>
                                  </span>
                               </div>
@@ -70,7 +98,11 @@
                               :title="t('general.delete')"
                               @click.prevent="removeIndex(foreign._antares_id)"
                            >
-                              <i class="mdi mdi-close" />
+                              <BaseIcon
+                                 icon-name="mdiClose"
+                                 :size="18"
+                                 class="mt-2"
+                              />
                            </button>
                         </div>
                      </div>
@@ -171,7 +203,11 @@
 
                <div v-if="!foreignProxy.length" class="empty">
                   <div class="empty-icon">
-                     <i class="mdi mdi-key-link mdi-48px" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiKeyLink"
+                        :size="48"
+                     />
                   </div>
                   <p class="empty-title h5">
                      {{ t('database.thereAreNoForeign') }}
@@ -195,6 +231,7 @@ import { computed, onMounted, onUnmounted, Prop, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import Tables from '@/ipc-api/Tables';
 import { useNotificationsStore } from '@/stores/notifications';
@@ -383,7 +420,7 @@ onUnmounted(() => {
   overflow: auto;
 }
 
-.remove-field .mdi {
+.remove-field svg {
   pointer-events: none;
 }
 
@@ -394,6 +431,7 @@ onUnmounted(() => {
     display: flex;
     line-height: 1;
     align-items: baseline;
+    align-items: center;
 
     > span {
       overflow: hidden;
diff --git a/src/renderer/components/WorkspaceTabPropsTableIndexesModal.vue b/src/renderer/components/WorkspaceTabPropsTableIndexesModal.vue
index 733647a5..78dc6336 100644
--- a/src/renderer/components/WorkspaceTabPropsTableIndexesModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableIndexesModal.vue
@@ -8,7 +8,12 @@
    >
       <template #header>
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-key mdi-rotate-45 mr-1" />
+            <BaseIcon
+               class="mr-1"
+               icon-name="mdiKey"
+               rotate="45deg"
+               :size="24"
+            />
             <span class="cut-text">{{ t('database.indexes') }} "{{ table }}"</span>
          </div>
       </template>
@@ -19,7 +24,11 @@
                   <div class="panel-header pt-0 pl-0">
                      <div class="d-flex">
                         <button class="btn btn-dark btn-sm d-flex" @click="addIndex">
-                           <i class="mdi mdi-24px mdi-key-plus mr-1" />
+                           <BaseIcon
+                              class="mr-1"
+                              icon-name="mdiKeyPlus"
+                              :size="24"
+                           />
                            <span>{{ t('general.add') }}</span>
                         </button>
                         <button
@@ -28,7 +37,11 @@
                            :disabled="!isChanged"
                            @click.prevent="clearChanges"
                         >
-                           <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                           <BaseIcon
+                              class="mr-1"
+                              icon-name="mdiDeleteSweep"
+                              :size="24"
+                           />
                            <span>{{ t('general.clear') }}</span>
                         </button>
                      </div>
@@ -43,7 +56,12 @@
                      >
                         <div class="tile-icon">
                            <div>
-                              <i class="mdi mdi-key mdi-24px column-key" :class="`key-${index.type}`" />
+                              <BaseIcon
+                                 class="mt-2 column-key"
+                                 icon-name="mdiKey"
+                                 :class="`key-${index.type}`"
+                                 :size="24"
+                              />
                            </div>
                         </div>
                         <div class="tile-content">
@@ -58,7 +76,11 @@
                               :title="t('general.delete')"
                               @click.prevent="removeIndex(index._antares_id)"
                            >
-                              <i class="mdi mdi-close" />
+                              <BaseIcon
+                                 icon-name="mdiClose"
+                                 :size="18"
+                                 class="mt-2"
+                              />
                            </button>
                         </div>
                      </div>
@@ -116,7 +138,11 @@
                </form>
                <div v-if="!indexesProxy.length" class="empty">
                   <div class="empty-icon">
-                     <i class="mdi mdi-key-outline mdi-48px" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiKeyOutline"
+                        :size="48"
+                     />
                   </div>
                   <p class="empty-title h5">
                      {{ t('database.thereAreNoIndexes') }}
@@ -140,6 +166,7 @@ import { computed, onMounted, onUnmounted, Prop, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 
 const { t } = useI18n();
@@ -270,7 +297,7 @@ onUnmounted(() => {
   overflow: auto;
 }
 
-.remove-field .mdi {
+.remove-field svg {
   pointer-events: none;
 }
 </style>
diff --git a/src/renderer/components/WorkspaceTabPropsTableRow.vue b/src/renderer/components/WorkspaceTabPropsTableRow.vue
index d9c97888..e969d343 100644
--- a/src/renderer/components/WorkspaceTabPropsTableRow.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableRow.vue
@@ -2,25 +2,43 @@
    <div class="tr" @contextmenu.prevent="!editingField ? emit('contextmenu', $event, localRow._antares_id) : null">
       <div class="td p-0" tabindex="0">
          <div :class="customizations.sortableFields ? 'row-draggable' : 'text-center'">
-            <i v-if="customizations.sortableFields" class="mdi mdi-drag-horizontal row-draggable-icon" />
+            <BaseIcon
+               v-if="customizations.sortableFields"
+               icon-name="mdiDragHorizontal"
+               :size="22"
+               class="row-draggable-icon"
+            />
             {{ localRow.order }}
          </div>
       </div>
       <div class="td p-0" tabindex="0">
-         <div class="text-center">
-            <i
+         <div class="text-center" :style="'display: flex; justify-content: center; align-items: center'">
+            <div
                v-for="(index, i) in indexes"
                :key="`${index.name}-${i}`"
                :title="index.type"
-               class="d-inline-block mdi mdi-key column-key c-help"
-               :class="`key-${index.type}`"
-            />
-            <i
+               class="p-vcentered"
+            >
+               <BaseIcon
+                  icon-name="mdiKey"
+                  rotate="45deg"
+                  :size="14"
+                  class="d-inline-block column-key c-help"
+                  :class="`key-${index.type}`"
+               />
+            </div>
+            <div
                v-for="foreign in foreigns"
                :key="foreign"
                :title="foreign"
-               class="d-inline-block mdi mdi-key-link c-help"
-            />
+               class="p-vcentered"
+            >
+               <BaseIcon
+                  class="d-inline-block c-help"
+                  icon-name="mdiKeyLink"
+                  :size="16"
+               />
+            </div>
          </div>
       </div>
       <div class="td p-0" tabindex="0">
@@ -227,7 +245,11 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-playlist-edit mr-1" />
+               <BaseIcon
+                  class="mr-1"
+                  icon-name="mdiPlaylistEdit"
+                  :size="24"
+               />
                <span class="cut-text">{{ t('database.default') }} "{{ row.name }}"</span>
             </div>
          </template>
@@ -331,6 +353,7 @@ import { computed, nextTick, onMounted, Prop, PropType, Ref, ref, watch } from '
 import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import { useWorkspacesStore } from '@/stores/workspaces';
 
@@ -558,7 +581,7 @@ const editOFF = () => {
 
 const checkLengthScale = (e: KeyboardEvent & { target: HTMLInputElement }) => {
    e = (e) || window.event as KeyboardEvent & { target: HTMLInputElement };
-   const charCode = (e.which) ? e.which : e.code;
+   const charCode = (e.which) ? e.which : Number(e.code);
 
    if (((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 44) || (charCode === 44 && e.target.value.includes(',')))
       e.preventDefault();
diff --git a/src/renderer/components/WorkspaceTabPropsTrigger.vue b/src/renderer/components/WorkspaceTabPropsTrigger.vue
index 4ae64eb2..6eb73c8d 100644
--- a/src/renderer/components/WorkspaceTabPropsTrigger.vue
+++ b/src/renderer/components/WorkspaceTabPropsTrigger.vue
@@ -9,7 +9,11 @@
                   :class="{'loading':isSaving}"
                   @click="saveChanges"
                >
-                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiContentSave"
+                     :size="24"
+                  />
                   <span>{{ t('general.save') }}</span>
                </button>
                <button
@@ -18,13 +22,21 @@
                   :title="t('database.clearChanges')"
                   @click="clearChanges"
                >
-                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDeleteSweep"
+                     :size="24"
+                  />
                   <span>{{ t('general.clear') }}</span>
                </button>
             </div>
             <div class="workspace-query-info">
                <div class="d-flex" :title="t('database.schema')">
-                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+                  <BaseIcon
+                     class="mt-1 mr-1"
+                     icon-name="mdiDatabase"
+                     :size="18"
+                  /><b>{{ schema }}</b>
                </div>
             </div>
          </div>
@@ -120,6 +132,7 @@ import { storeToRefs } from 'pinia';
 import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import QueryEditor from '@/components/QueryEditor.vue';
diff --git a/src/renderer/components/WorkspaceTabPropsTriggerFunction.vue b/src/renderer/components/WorkspaceTabPropsTriggerFunction.vue
index 59bec93d..f32ffa54 100644
--- a/src/renderer/components/WorkspaceTabPropsTriggerFunction.vue
+++ b/src/renderer/components/WorkspaceTabPropsTriggerFunction.vue
@@ -9,7 +9,11 @@
                   :class="{'loading':isSaving}"
                   @click="saveChanges"
                >
-                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiContentSave"
+                     :size="24"
+                  />
                   <span>{{ t('general.save') }}</span>
                </button>
                <button
@@ -18,10 +22,23 @@
                   :title="t('database.clearChanges')"
                   @click="clearChanges"
                >
-                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDeleteSweep"
+                     :size="24"
+                  />
                   <span>{{ t('general.clear') }}</span>
                </button>
             </div>
+            <div class="workspace-query-info">
+               <div class="d-flex" :title="t('database.schema')">
+                  <BaseIcon
+                     class="mt-1 mr-1"
+                     icon-name="mdiDatabase"
+                     :size="18"
+                  /><b>{{ schema }}</b>
+               </div>
+            </div>
          </div>
       </div>
       <div class="container">
@@ -87,6 +104,7 @@ import { storeToRefs } from 'pinia';
 import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import QueryEditor from '@/components/QueryEditor.vue';
diff --git a/src/renderer/components/WorkspaceTabPropsView.vue b/src/renderer/components/WorkspaceTabPropsView.vue
index 91b0b143..abe895a8 100644
--- a/src/renderer/components/WorkspaceTabPropsView.vue
+++ b/src/renderer/components/WorkspaceTabPropsView.vue
@@ -9,7 +9,11 @@
                   :class="{'loading':isSaving}"
                   @click="saveChanges"
                >
-                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiContentSave"
+                     :size="24"
+                  />
                   <span>{{ t('general.save') }}</span>
                </button>
                <button
@@ -18,13 +22,21 @@
                   :title="t('database.clearChanges')"
                   @click="clearChanges"
                >
-                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDeleteSweep"
+                     :size="24"
+                  />
                   <span>{{ t('general.clear') }}</span>
                </button>
             </div>
             <div class="workspace-query-info">
                <div class="d-flex" :title="t('database.schema')">
-                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+                  <BaseIcon
+                     class="mt-1 mr-1"
+                     icon-name="mdiDatabase"
+                     :size="18"
+                  /><b>{{ schema }}</b>
                </div>
             </div>
          </div>
@@ -107,6 +119,7 @@ import { ipcRenderer } from 'electron';
 import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import QueryEditor from '@/components/QueryEditor.vue';
diff --git a/src/renderer/components/WorkspaceTabQuery.vue b/src/renderer/components/WorkspaceTabQuery.vue
index b4f8089b..04f868df 100644
--- a/src/renderer/components/WorkspaceTabQuery.vue
+++ b/src/renderer/components/WorkspaceTabQuery.vue
@@ -27,7 +27,11 @@
                      :title="t('general.cancel')"
                      @click="killTabQuery()"
                   >
-                     <i class="mdi mdi-24px mdi-window-close" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiWindowCLose"
+                        :size="24"
+                     />
                      <span class="d-invisible pr-1">{{ t('general.run') }}</span>
                   </button>
                   <button
@@ -37,7 +41,11 @@
                      :disabled="!query"
                      @click="runQuery(query)"
                   >
-                     <i class="mdi mdi-24px mdi-play pr-1" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiPlay"
+                        :size="24"
+                     />
                      <span>{{ t('general.run') }}</span>
                   </button>
                </div>
@@ -47,7 +55,11 @@
                   :class="{'loading':isQuering}"
                   @click="commitTab()"
                >
-                  <i class="mdi mdi-24px mdi-cube-send pr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiCubeSend"
+                     :size="24"
+                  />
                   <span>{{ t('database.commit') }}</span>
                </button>
                <button
@@ -56,7 +68,11 @@
                   :class="{'loading':isQuering}"
                   @click="rollbackTab()"
                >
-                  <i class="mdi mdi-24px mdi-undo-variant pr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiUndoVariant"
+                     :size="24"
+                  />
                   <span>{{ t('database.rollback') }}</span>
                </button>
                <button
@@ -64,7 +80,11 @@
                   :disabled="!query || isQuering"
                   @click="clear()"
                >
-                  <i class="mdi mdi-24px mdi-delete-sweep pr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiDeleteSweep"
+                     :size="24"
+                  />
                   <span>{{ t('general.clear') }}</span>
                </button>
 
@@ -75,7 +95,11 @@
                   :disabled="!query || isQuering"
                   @click="beautify()"
                >
-                  <i class="mdi mdi-24px mdi-brush pr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiBrush"
+                     :size="24"
+                  />
                   <span>{{ t('general.format') }}</span>
                </button>
                <button
@@ -83,7 +107,11 @@
                   :disabled="isQuering"
                   @click="openHistoryModal()"
                >
-                  <i class="mdi mdi-24px mdi-history pr-1" />
+                  <BaseIcon
+                     class="mr-1"
+                     icon-name="mdiHistory"
+                     :size="24"
+                  />
                   <span>{{ t('general.history') }}</span>
                </button>
                <div class="dropdown table-dropdown pr-2">
@@ -92,9 +120,17 @@
                      class="btn btn-dark btn-sm dropdown-toggle mr-0 pr-0"
                      tabindex="0"
                   >
-                     <i class="mdi mdi-24px mdi-file-export mr-1" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiFileExport"
+                        :size="24"
+                     />
                      <span>{{ t('database.export') }}</span>
-                     <i class="mdi mdi-24px mdi-menu-down" />
+                     <BaseIcon
+                        class="mr-1"
+                        icon-name="mdiMenuDown"
+                        :size="24"
+                     />
                   </button>
                   <ul class="menu text-left">
                      <li class="menu-item">
@@ -112,7 +148,11 @@
                   </ul>
                </div>
                <div class="input-group pr-2" :title="t('database.commitMode')">
-                  <i class="input-group-addon addon-sm mdi mdi-24px mdi-source-commit p-0" />
+                  <BaseIcon
+                     class="input-group-addon addon-sm p-0"
+                     icon-name="mdiSourceCommit"
+                     :size="28"
+                  />
                   <BaseSelect
                      v-model="autocommit"
                      :options="[{value: true, label: t('database.autoCommit')}, {value: false, label: t('database.manualCommit')}]"
@@ -128,24 +168,41 @@
                   class="d-flex"
                   :title="t('database.queryDuration')"
                >
-                  <i class="mdi mdi-timer-sand mdi-rotate-180 pr-1" /> <b>{{ durationsCount / 1000 }}s</b>
+                  <BaseIcon
+                     class="mr-1 mt-1"
+                     icon-name="mdiTimerSand"
+                     rotate="180deg"
+                     :size="16"
+                  /> <b>{{ durationsCount / 1000 }}s</b>
                </div>
                <div
                   v-if="resultsCount"
                   class="d-flex"
                   :title="t('general.results')"
                >
-                  <i class="mdi mdi-equal pr-1" /> <b>{{ resultsCount.toLocaleString() }}</b>
+                  <BaseIcon
+                     class="mr-1 mt-1"
+                     icon-name="mdiEqual"
+                     :size="16"
+                  /> <b>{{ resultsCount.toLocaleString() }}</b>
                </div>
                <div
                   v-if="hasAffected"
                   class="d-flex"
                   :title="t('database.affectedRows')"
                >
-                  <i class="mdi mdi-target pr-1" /> <b>{{ affectedCount }}</b>
+                  <BaseIcon
+                     class="mr-1 mt-1"
+                     icon-name="mdiTarget"
+                     :size="16"
+                  />  <b>{{ affectedCount }}</b>
                </div>
                <div class="input-group" :title="t('database.schema')">
-                  <i class="input-group-addon addon-sm mdi mdi-24px mdi-database" />
+                  <BaseIcon
+                     class="input-group-addon addon-sm p-0 px-1"
+                     icon-name="mdiDatabase"
+                     :size="28"
+                  />
 
                   <BaseSelect
                      v-model="selectedSchema"
@@ -190,6 +247,7 @@ import { format } from 'sql-formatter';
 import { Component, computed, onBeforeUnmount, onMounted, Prop, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import ModalHistory from '@/components/ModalHistory.vue';
diff --git a/src/renderer/components/WorkspaceTabQueryTable.vue b/src/renderer/components/WorkspaceTabQueryTable.vue
index 8f8a31a9..a6fa6b39 100644
--- a/src/renderer/components/WorkspaceTabQueryTable.vue
+++ b/src/renderer/components/WorkspaceTabQueryTable.vue
@@ -45,19 +45,28 @@
                >
                   <div ref="columnResize" class="column-resizable">
                      <div class="table-column-title" @click="sort(field.name)">
-                        <i
-                           v-if="field.key"
-                           class="mdi mdi-key column-key c-help"
-                           :class="`key-${field.key}`"
-                           :title="keyName(field.key)"
-                        />
+                        <div v-if="field.key" :title="keyName(field.key)">
+                           <BaseIcon
+                              icon-name="mdiKey"
+                              rotate="45deg"
+                              :size="14"
+                              class="column-key c-help mt-1 mr-1"
+                              :class="`key-${field.key}`"
+                           />
+                        </div>
                         <span>{{ field.alias || field.name }}</span>
-                        <i
+                        <BaseIcon
                            v-if="isSortable && currentSort === field.name || currentSort === `${field.table}.${field.name}`"
-                           class="mdi sort-icon"
-                           :class="currentSortDir === 'asc' ? 'mdi-sort-ascending':'mdi-sort-descending'"
+                           :icon-name="currentSortDir === 'asc' ? 'mdiSortAscending':'mdiSortDescending'"
+                           :size="18"
+                           class="sort-icon ml-1"
+                        />
+                        <BaseIcon
+                           v-else
+                           icon-name="mdiMinus"
+                           :size="18"
+                           class="sort-icon d-invisible"
                         />
-                        <i v-else class="mdi sort-icon mdi-minus d-invisible" />
                      </div>
                   </div>
                </div>
@@ -101,7 +110,11 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-delete mr-1" />
+               <BaseIcon
+                  icon-name="mdiDelete"
+                  class="mr-1"
+                  :size="24"
+               />
                <span class="cut-text">{{ t('database.deleteRows', selectedRows.length) }}</span>
             </div>
          </template>
@@ -119,7 +132,11 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-file-export mr-1" />
+               <BaseIcon
+                  icon-name="mdiFileExport"
+                  class="mr-1"
+                  :size="24"
+               />
                <span class="cut-text">{{ t('database.sqlExportOptions') }}</span>
             </div>
          </template>
@@ -160,7 +177,11 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-file-export mr-1" />
+               <BaseIcon
+                  icon-name="mdiFileExport"
+                  class="mr-1"
+                  :size="24"
+               />
                <span class="cut-text">{{ t('application.csvExportOptions') }}</span>
             </div>
          </template>
@@ -241,6 +262,7 @@ import { Component, computed, nextTick, onMounted, onUnmounted, onUpdated, Prop,
 import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
 import TableContext from '@/components/WorkspaceTabQueryTableContext.vue';
@@ -555,6 +577,8 @@ const copyRow = (format: string) => {
    if (selectedRows.value.length === 1) {
       const row = localResults.value.find((row: any) => selectedRows.value.includes(row._antares_id));
       const rowToCopy = unproxify(row);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       delete rowToCopy._antares_id;
       contentToCopy = rowToCopy;
    }
diff --git a/src/renderer/components/WorkspaceTabQueryTableContext.vue b/src/renderer/components/WorkspaceTabQueryTableContext.vue
index 247cc862..aebebc82 100644
--- a/src/renderer/components/WorkspaceTabQueryTableContext.vue
+++ b/src/renderer/components/WorkspaceTabQueryTableContext.vue
@@ -4,8 +4,17 @@
       @close-context="closeContext"
    >
       <div class="context-element">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-content-copy text-light pr-1" /> {{ t('general.copy') }}</span>
-         <i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
+         <span class="d-flex">
+            <BaseIcon
+               icon-name="mdiContentCopy"
+               class="mr-1 mt-1"
+               :size="18"
+            /> {{ t('general.copy') }}</span>
+         <BaseIcon
+            icon-name="mdiChevronRight"
+            class="mt-1 text-light"
+            :size="18"
+         />
          <div class="context-submenu">
             <div
                v-if="selectedRows.length === 1"
@@ -13,32 +22,57 @@
                @click="copyCell"
             >
                <span class="d-flex">
-                  <i class="mdi mdi-18px mdi-numeric-0 mdi-rotate-90 text-light pr-1" /> {{ t('database.cell', 1) }}
+                  <BaseIcon
+                     icon-name="mdiNumeric0"
+                     class="mr-1 mt-1 text-light"
+                     rotate="90deg"
+                     :size="18"
+                  /> {{ t('database.cell', 1) }}
                </span>
             </div>
             <div class="context-element" @click="copyRow('html')">
                <span class="d-flex">
-                  <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('database.row', selectedRows.length) }} ({{ t('database.table') }})
+                  <BaseIcon
+                     icon-name="mdiTableRow"
+                     class="mr-1 mt-1 text-light"
+                     :size="18"
+                  /> {{ t('database.row', selectedRows.length) }} ({{ t('database.table') }})
                </span>
             </div>
             <div class="context-element" @click="copyRow('json')">
                <span class="d-flex">
-                  <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('database.row', selectedRows.length) }} (JSON)
+                  <BaseIcon
+                     icon-name="mdiTableRow"
+                     class="mr-1 mt-1 text-light"
+                     :size="18"
+                  /> {{ t('database.row', selectedRows.length) }} (JSON)
                </span>
             </div>
             <div class="context-element" @click="copyRow('csv')">
                <span class="d-flex">
-                  <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('database.row', selectedRows.length) }} (CSV)
+                  <BaseIcon
+                     icon-name="mdiTableRow"
+                     class="mr-1 mt-1 text-light"
+                     :size="18"
+                  /> {{ t('database.row', selectedRows.length) }} (CSV)
                </span>
             </div>
             <div class="context-element" @click="copyRow('php')">
                <span class="d-flex">
-                  <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('database.row', selectedRows.length) }} (PHP)
+                  <BaseIcon
+                     icon-name="mdiTableRow"
+                     class="mr-1 mt-1 text-light"
+                     :size="18"
+                  /> {{ t('database.row', selectedRows.length) }} (PHP)
                </span>
             </div>
             <div class="context-element" @click="copyRow('sql')">
                <span class="d-flex">
-                  <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('database.row', selectedRows.length) }} (SQL INSERT)
+                  <BaseIcon
+                     icon-name="mdiTableRow"
+                     class="mr-1 mt-1 text-light"
+                     :size="18"
+                  /> {{ t('database.row', selectedRows.length) }} (SQL INSERT)
                </span>
             </div>
          </div>
@@ -49,7 +83,11 @@
          @click="duplicateRow"
       >
          <span class="d-flex">
-            <i class="mdi mdi-18px mdi-content-duplicate text-light pr-1" /> {{ t('general.duplicate') }}
+            <BaseIcon
+               icon-name="mdiContentDuplicate"
+               class="mr-1 mt-1 text-light"
+               :size="18"
+            /> {{ t('general.duplicate') }}
          </span>
       </div>
       <div
@@ -57,9 +95,17 @@
          class="context-element"
       >
          <span class="d-flex">
-            <i class="mdi mdi-18px mdi-auto-fix text-light pr-1" /> {{ t('database.fillCell') }}
+            <BaseIcon
+               icon-name="mdiAutoFix"
+               class="mr-1 mt-1 text-light"
+               :size="18"
+            /> {{ t('database.fillCell') }}
          </span>
-         <i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
+         <BaseIcon
+            icon-name="mdiChevronRight"
+            class="mt-1 text-light"
+            :size="18"
+         />
          <div class="context-submenu">
             <div
                v-for="method in fakerMethods[fakerGroup]"
@@ -79,7 +125,11 @@
          @click="setNull"
       >
          <span class="d-flex">
-            <i class="mdi mdi-18px mdi-null text-light pr-1" /> {{ t('database.setNull') }}
+            <BaseIcon
+               icon-name="mdiNull"
+               class="mr-1 mt-1 text-light"
+               :size="18"
+            /> {{ t('database.setNull') }}
          </span>
       </div>
       <div
@@ -88,7 +138,11 @@
          @click="showConfirmModal"
       >
          <span class="d-flex">
-            <i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ t('database.deleteRows', selectedRows.length) }}
+            <BaseIcon
+               icon-name="mdiDelete"
+               class="mr-1 mt-1 text-light"
+               :size="18"
+            /> {{ t('database.deleteRows', selectedRows.length) }}
          </span>
       </div>
    </BaseContextMenu>
@@ -100,6 +154,7 @@ import { computed, Prop } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import BaseContextMenu from '@/components/BaseContextMenu.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 
 const { t } = useI18n();
 
diff --git a/src/renderer/components/WorkspaceTabQueryTableRow.vue b/src/renderer/components/WorkspaceTabQueryTableRow.vue
index 2d24a3b7..8b8d1ab8 100644
--- a/src/renderer/components/WorkspaceTabQueryTableRow.vue
+++ b/src/renderer/components/WorkspaceTabQueryTableRow.vue
@@ -81,7 +81,11 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-playlist-edit mr-1" /> <span class="cut-text">{{ t('general.edit') }} "{{ editingField }}"</span>
+               <BaseIcon
+                  icon-name="mdiPlaylistEdit"
+                  class="mr-1"
+                  :size="24"
+               /> <span class="cut-text">{{ t('general.edit') }} "{{ editingField }}"</span>
             </div>
          </template>
          <template #body>
@@ -129,7 +133,11 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-map mr-1" /> <span class="cut-text">"{{ editingField }}"</span>
+               <BaseIcon
+                  icon-name="mdiMap"
+                  class="mr-1"
+                  :size="24"
+               /> <span class="cut-text">"{{ editingField }}"</span>
             </div>
          </template>
          <template #body>
@@ -144,7 +152,11 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-playlist-edit mr-1" />
+               <BaseIcon
+                  icon-name="mdiPlaylistEdit"
+                  class="mr-1"
+                  :size="24"
+               />
                <span class="cut-text">{{ t('general.edit') }} "{{ editingField }}"</span>
             </div>
          </template>
@@ -158,16 +170,24 @@
                         class="img-responsive p-centered bg-checkered"
                      >
                      <div v-else class="text-center">
-                        <i class="mdi mdi-36px mdi-file" />
+                        <BaseIcon icon-name="mdiFile" :size="36" />
                      </div>
                      <div class="editor-buttons mt-2">
                         <button class="btn btn-link btn-sm" @click="downloadFile">
                            <span>{{ t('general.download') }}</span>
-                           <i class="mdi mdi-24px mdi-download ml-1" />
+                           <BaseIcon
+                              icon-name="mdiDownload"
+                              class="ml-1"
+                              :size="24"
+                           />
                         </button>
                         <button class="btn btn-link btn-sm" @click="prepareToDelete">
                            <span>{{ t('general.delete') }}</span>
-                           <i class="mdi mdi-24px mdi-delete-forever ml-1" />
+                           <BaseIcon
+                              icon-name="mdiDeleteForever"
+                              class="ml-1"
+                              :size="24"
+                           />
                         </button>
                      </div>
                   </div>
@@ -225,6 +245,7 @@ import { computed, nextTick, onBeforeUnmount, Prop, Ref, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseMap from '@/components/BaseMap.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import TextEditor from '@/components/BaseTextEditor.vue';
diff --git a/src/renderer/components/WorkspaceTabTable.vue b/src/renderer/components/WorkspaceTabTable.vue
index c2f01087..dbada82b 100644
--- a/src/renderer/components/WorkspaceTabTable.vue
+++ b/src/renderer/components/WorkspaceTabTable.vue
@@ -11,11 +11,22 @@
                         :title="`${t('general.refresh')}`"
                         @click="reloadTable"
                      >
-                        <i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh mr-1" />
-                        <i v-else class="mdi mdi-24px mdi-history mdi-flip-h mr-1" />
+                        <BaseIcon
+                           v-if="!+autorefreshTimer"
+                           class="mr-1"
+                           icon-name="mdiRefresh"
+                           :size="24"
+                        />
+                        <BaseIcon
+                           v-else
+                           class="mr-1"
+                           icon-name="mdiHistory"
+                           flip="horizontal"
+                           :size="24"
+                        />
                      </button>
                      <div class="btn btn-dark btn-sm dropdown-toggle pl-0 pr-0" tabindex="0">
-                        <i class="mdi mdi-24px mdi-menu-down" />
+                        <BaseIcon icon-name="mdiMenuDown" :size="24" />
                      </div>
                      <div class="menu px-3">
                         <span>{{ t('general.autoRefresh') }}: <b>{{ +autorefreshTimer ? `${autorefreshTimer}s` : 'OFF' }}</b></span>
@@ -38,7 +49,7 @@
                      :title="t('application.previousResultsPage')"
                      @click="pageChange('prev')"
                   >
-                     <i class="mdi mdi-24px mdi-skip-previous" />
+                     <BaseIcon icon-name="mdiSkipPrevious" :size="24" />
                   </button>
                   <div class="dropdown" :class="{'active': isPageMenu}">
                      <div @click="openPageMenu">
@@ -64,7 +75,7 @@
                      :title="t('application.nextResultsPage')"
                      @click="pageChange('next')"
                   >
-                     <i class="mdi mdi-24px mdi-skip-next" />
+                     <BaseIcon icon-name="mdiSkipNext" :size="24" />
                   </button>
                </div>
 
@@ -77,7 +88,7 @@
                   :class="{'btn-primary': isSearch, 'btn-dark': !isSearch}"
                   @click="isSearch = !isSearch"
                >
-                  <i class="mdi mdi-24px mdi-magnify" />
+                  <BaseIcon icon-name="mdiMagnify" :size="24" />
                </button>
                <button
                   v-if="isTable"
@@ -85,7 +96,11 @@
                   :disabled="isQuering"
                   @click="showFakerModal()"
                >
-                  <i class="mdi mdi-24px mdi-playlist-plus mr-1" />
+                  <BaseIcon
+                     icon-name="mdiPlaylistPlus"
+                     class="mr-1"
+                     :size="24"
+                  />
                   <span>{{ t('database.insertRow', 2) }}</span>
                </button>
 
@@ -95,9 +110,13 @@
                      class="btn btn-dark btn-sm dropdown-toggle mr-0 pr-0"
                      tabindex="0"
                   >
-                     <i class="mdi mdi-24px mdi-file-export mr-1" />
+                     <BaseIcon
+                        icon-name="mdiFileExport"
+                        class="mr-1"
+                        :size="24"
+                     />
                      <span>{{ t('database.export') }}</span>
-                     <i class="mdi mdi-24px mdi-menu-down" />
+                     <BaseIcon icon-name="mdiMenuDown" :size="24" />
                   </button>
                   <ul class="menu text-left">
                      <li class="menu-item">
@@ -123,7 +142,7 @@
                   :title="t('application.settings')"
                   @click="openTableSettingTab()"
                >
-                  <i class="mdi mdi-24px mdi-cog" />
+                  <BaseIcon icon-name="mdiCog" :size="24" />
                   <!-- <span>{{ t('application.settings') }}</span> -->
                </button>
             </div>
@@ -133,7 +152,12 @@
                   class="d-flex"
                   :title="t('database.queryDuration')"
                >
-                  <i class="mdi mdi-timer-sand mdi-rotate-180 pr-1" /> <b>{{ results[0].duration / 1000 }}s</b>
+                  <BaseIcon
+                     class="mr-1 mt-1"
+                     icon-name="mdiTimerSand"
+                     rotate="180deg"
+                     :size="16"
+                  /> <b>{{ results[0].duration / 1000 }}s</b>
                </div>
                <div v-if="results.length && results[0].rows">
                   {{ t('general.results') }}: <b>{{ localeString(results[0].rows.length) }}</b>
@@ -147,7 +171,11 @@
                   </b>
                </div>
                <div class="d-flex" :title="t('database.schema')">
-                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+                  <BaseIcon
+                     class="mt-1 mr-1"
+                     icon-name="mdiDatabase"
+                     :size="18"
+                  /><b>{{ schema }}</b>
                </div>
             </div>
          </div>
@@ -163,7 +191,7 @@
          <BaseLoader v-if="isQuering" />
          <div v-if="!isQuering && !results[0]?.rows.length" class="empty">
             <div class="empty-icon">
-               <i class="mdi mdi-48px mdi-island" />
+               <BaseIcon icon-name="mdiIsland" :size="56" />
             </div>
             <p class="h4 empty-subtitle">
                {{ t('database.noResultsPresent') }}
@@ -206,6 +234,7 @@ import { storeToRefs } from 'pinia';
 import { computed, onBeforeUnmount, Prop, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import ModalFakerRows from '@/components/ModalFakerRows.vue';
 import WorkspaceTabQueryTable from '@/components/WorkspaceTabQueryTable.vue';
diff --git a/src/renderer/components/WorkspaceTabTableFilters.vue b/src/renderer/components/WorkspaceTabTableFilters.vue
index f75546fa..17ab92e8 100644
--- a/src/renderer/components/WorkspaceTabTableFilters.vue
+++ b/src/renderer/components/WorkspaceTabTableFilters.vue
@@ -43,7 +43,11 @@
             type="button"
             @click="removeRow(index)"
          >
-            <i class="mdi mdi-minus-circle-outline" />
+            <BaseIcon
+               icon-name="mdiMinusCircleOutline"
+               class="mt-1"
+               :size="16"
+            />
          </button>
       </div>
       <div class="workspace-table-filters-buttons">
@@ -58,7 +62,11 @@
             type="button"
             @click="addRow"
          >
-            <i class="mdi mdi-plus-circle-outline" />
+            <BaseIcon
+               icon-name="mdiPlusCircleOutline"
+               class="mt-1"
+               :size="16"
+            />
          </button>
       </div>
    </form>
@@ -72,6 +80,7 @@ import { TableFilterClausole } from 'common/interfaces/tableApis';
 import { computed, Prop, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import BaseIcon from '@/components/BaseIcon.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 
 const { t } = useI18n();
diff --git a/src/renderer/components/WorkspaceTabsContext.vue b/src/renderer/components/WorkspaceTabsContext.vue
index dd168631..c7041717 100644
--- a/src/renderer/components/WorkspaceTabsContext.vue
+++ b/src/renderer/components/WorkspaceTabsContext.vue
@@ -4,19 +4,39 @@
       @close-context="closeContext"
    >
       <div class="context-element" @click.stop="closeAllTabs">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-asterisk text-light pr-1" /> {{ t('application.closeAllTabs') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiAsterisk"
+               :size="18"
+            /> {{ t('application.closeAllTabs') }}</span>
       </div>
 
       <div class="context-element" @click.stop="closeOtherTabs">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-not-equal text-light pr-1" /> {{ t('application.closeOtherTabs') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiNotEqual"
+               :size="18"
+            /> {{ t('application.closeOtherTabs') }}</span>
       </div>
 
       <div class="context-element" @click.stop="closeLeftTabs">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-less-than text-light pr-1" /> {{ t('application.closeTabsToLeft') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiLessThan"
+               :size="18"
+            /> {{ t('application.closeTabsToLeft') }}</span>
       </div>
 
       <div class="context-element" @click.stop="closeRightTabs">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-greater-than text-light pr-1" /> {{ t('application.closeTabsToRight') }}</span>
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiGreaterThan"
+               :size="18"
+            /> {{ t('application.closeTabsToRight') }}</span>
       </div>
    </BaseContextMenu>
 </template>
@@ -25,6 +45,7 @@
 import { useI18n } from 'vue-i18n';
 
 import BaseContextMenu from '@/components/BaseContextMenu.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
 
 const { t } = useI18n();
 
diff --git a/src/renderer/scss/_table-keys.scss b/src/renderer/scss/_table-keys.scss
index 0c28866a..8c19da99 100644
--- a/src/renderer/scss/_table-keys.scss
+++ b/src/renderer/scss/_table-keys.scss
@@ -1,10 +1,5 @@
 /* stylelint-disable selector-class-pattern */
 .column-key {
-  transform: rotate(45deg);
-  font-size: 0.7rem;
-  line-height: 1.5;
-  margin-right: 0.2rem;
-
   &.key-pri,
   &.key-PRIMARY {
     color: goldenrod;
diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss
index e8aa4c9d..87a269d5 100644
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@@ -295,6 +295,12 @@ option:checked {
   }
 }
 
+.has-icon-left svg.form-icon,
+.has-icon-right svg.form-icon {
+  width: auto;
+  height: auto;
+}
+
 .form-select {
   cursor: pointer;
 
diff --git a/src/renderer/untyped.d.ts b/src/renderer/untyped.d.ts
index 0dc38501..2d0ca0c9 100644
--- a/src/renderer/untyped.d.ts
+++ b/src/renderer/untyped.d.ts
@@ -79,3 +79,34 @@ declare module 'vuedraggable' {// <- to export as default
   }>;
    export = draggableComponent;
 }
+
+declare let SvgIcon: import('vue').DefineComponent<{
+    type: {
+      type: StringConstructor;
+      default: string;
+    };
+    path: {
+      type: StringConstructor;
+      default: string;
+    };
+    size: {
+      type: NumberConstructor;
+      optional: boolean;
+    };
+    viewbox: {
+      type: StringConstructor;
+      optional: boolean;
+    };
+    flip: {
+      type: StringConstructor;
+      optional: boolean;
+    };
+    rotate: {
+      type: StringConstructor;
+      optional: boolean;
+    };
+  }>;
+
+  declare module '@jamescoyle/vue-icon' {
+    export default SvgIcon;
+  }