diff --git a/frontend_nuxt/components/HeaderComponent.vue b/frontend_nuxt/components/HeaderComponent.vue
index a58f486aa..a1b8fd99f 100644
--- a/frontend_nuxt/components/HeaderComponent.vue
+++ b/frontend_nuxt/components/HeaderComponent.vue
@@ -29,7 +29,7 @@
           </div>
 
           <div v-if="isMobile" class="theme-icon" @click="cycleTheme">
-            <i :class="iconClass"></i>
+            <component :is="iconClass" />
           </div>
 
           <div v-if="!isMobile" class="invite_text" @click="copyInviteLink">
@@ -226,11 +226,11 @@ const headerMenuItems = computed(() => [
 const iconClass = computed(() => {
   switch (themeState.mode) {
     case ThemeMode.DARK:
-      return 'fas fa-moon'
+      return 'Moon'
     case ThemeMode.LIGHT:
-      return 'fas fa-sun'
+      return 'SunOne'
     default:
-      return 'fas fa-desktop'
+      return 'ComputerOne'
   }
 })
 
diff --git a/frontend_nuxt/components/MenuComponent.vue b/frontend_nuxt/components/MenuComponent.vue
index f30efcfe0..1224e7066 100644
--- a/frontend_nuxt/components/MenuComponent.vue
+++ b/frontend_nuxt/components/MenuComponent.vue
@@ -95,7 +95,7 @@
                   class="section-item-icon"
                   :alt="c.name"
                 />
-                <i v-else :class="['section-item-icon', c.smallIcon || c.icon]"></i>
+                <component v-else :is="c.smallIcon || c.icon" class="section-item-icon" />
               </template>
               <span class="section-item-text">
                 {{ c.name }}
@@ -135,7 +135,7 @@
       <ClientOnly v-if="!isMobile">
         <div class="menu-footer">
           <div class="menu-footer-btn" @click="cycleTheme">
-            <i :class="iconClass"></i>
+            <component :is="iconClass" class="menu-item-icon" />
           </div>
         </div>
       </ClientOnly>
@@ -195,11 +195,11 @@ const {
 const iconClass = computed(() => {
   switch (themeState.mode) {
     case ThemeMode.DARK:
-      return 'fas fa-moon'
+      return 'Moon'
     case ThemeMode.LIGHT:
-      return 'fas fa-sun'
+      return 'SunOne'
     default:
-      return 'fas fa-desktop'
+      return 'ComputerOne'
   }
 })
 
diff --git a/frontend_nuxt/plugins/iconpark.client.ts b/frontend_nuxt/plugins/iconpark.client.ts
index f76c31445..457e106aa 100644
--- a/frontend_nuxt/plugins/iconpark.client.ts
+++ b/frontend_nuxt/plugins/iconpark.client.ts
@@ -18,6 +18,9 @@ import {
   Next,
   DropDownList,
   MoreOne,
+  SunOne,
+  Moon,
+  ComputerOne,
   Comment,
   Link,
   SlyFaceWhitSmile,
@@ -49,6 +52,9 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('Next', Next)
   nuxtApp.vueApp.component('DropDownList', DropDownList)
   nuxtApp.vueApp.component('MoreOne', MoreOne)
+  nuxtApp.vueApp.component('SunOne', SunOne)
+  nuxtApp.vueApp.component('Moon', Moon)
+  nuxtApp.vueApp.component('ComputerOne', ComputerOne)
   nuxtApp.vueApp.component('CommentIcon', Comment)
   nuxtApp.vueApp.component('LinkIcon', Link)
   nuxtApp.vueApp.component('SlyFaceWhitSmile', SlyFaceWhitSmile)