diff --git a/samples/Dressca/dressca-frontend/src/App.vue b/samples/Dressca/dressca-frontend/src/App.vue
index 843b27ba9..2d93a8fb1 100644
--- a/samples/Dressca/dressca-frontend/src/App.vue
+++ b/samples/Dressca/dressca-frontend/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ShoppingCartIcon } from '@heroicons/vue/solid';
+import { ShoppingCartIcon } from '@heroicons/vue/24/solid';
 import { useAuthenticationStore } from '@/stores/authentication/authentication';
 
 const authenticationStore = useAuthenticationStore();
diff --git a/samples/Dressca/dressca-frontend/src/components/basket/BasketItem.vue b/samples/Dressca/dressca-frontend/src/components/basket/BasketItem.vue
index ef2685a08..4c3c01ce6 100644
--- a/samples/Dressca/dressca-frontend/src/components/basket/BasketItem.vue
+++ b/samples/Dressca/dressca-frontend/src/components/basket/BasketItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { BasketItemResponse } from '@/generated/api-client/models/basket-item-response';
-import { TrashIcon } from '@heroicons/vue/outline';
+import { TrashIcon } from '@heroicons/vue/24/outline';
 import * as yup from 'yup';
 import { useField, useForm } from 'vee-validate';
 import currencyHelper from '@/shared/helpers/currencyHelper';
diff --git a/samples/Dressca/dressca-frontend/src/components/common/CarouselSlider.vue b/samples/Dressca/dressca-frontend/src/components/common/CarouselSlider.vue
index 757e8d2b7..9dc19b44f 100644
--- a/samples/Dressca/dressca-frontend/src/components/common/CarouselSlider.vue
+++ b/samples/Dressca/dressca-frontend/src/components/common/CarouselSlider.vue
@@ -3,8 +3,8 @@ import { onBeforeUnmount, onMounted, reactive } from 'vue';
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
-  MinusSmIcon,
-} from '@heroicons/vue/solid';
+  MinusSmallIcon,
+} from '@heroicons/vue/24/solid';
 
 const props = defineProps<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -118,14 +118,14 @@ onBeforeUnmount(() => {
       <div class="flex justify-center">
         <template v-for="index in props.items.length" :key="index">
           <template v-if="index == state.currentIndex + 1">
-            <MinusSmIcon class="h-10 w-10 text-gray-500"></MinusSmIcon>
+            <MinusSmallIcon class="h-10 w-10 text-gray-500"></MinusSmallIcon>
           </template>
           <template v-if="index != state.currentIndex + 1">
-            <MinusSmIcon
+            <MinusSmallIcon
               class="h-10 w-10 text-gray-300"
               data-test="page-indicator"
               @click="selectSlide(index - 1)"
-            ></MinusSmIcon>
+            ></MinusSmallIcon>
           </template>
         </template>
       </div>
diff --git a/samples/Dressca/dressca-frontend/src/views/account/LoginView.vue b/samples/Dressca/dressca-frontend/src/views/account/LoginView.vue
index e0484f251..2f8adebec 100644
--- a/samples/Dressca/dressca-frontend/src/views/account/LoginView.vue
+++ b/samples/Dressca/dressca-frontend/src/views/account/LoginView.vue
@@ -3,7 +3,7 @@ import { useField, useForm } from 'vee-validate';
 import * as yup from 'yup';
 import { validationItems } from '@/validation/validation-items';
 import { useAuthenticationStore } from '@/stores/authentication/authentication';
-import { MailIcon, KeyIcon } from '@heroicons/vue/solid';
+import { EnvelopeIcon, KeyIcon } from '@heroicons/vue/24/solid';
 import { useRoutingStore } from '@/stores/routing/routing';
 
 // フォーム固有のバリデーション定義
@@ -34,7 +34,7 @@ const signIn = () => {
     <form class="mt-8">
       <div class="form-group">
         <div class="flex justify-between">
-          <MailIcon class="h-8 w-8 text-blue-500 opacity-50" />
+          <EnvelopeIcon class="h-8 w-8 text-blue-500 opacity-50" />
           <input
             id="email"
             v-model="email"
diff --git a/samples/Dressca/dressca-frontend/tsconfig.json b/samples/Dressca/dressca-frontend/tsconfig.json
index 31f90037c..3d3f6aeb2 100644
--- a/samples/Dressca/dressca-frontend/tsconfig.json
+++ b/samples/Dressca/dressca-frontend/tsconfig.json
@@ -10,5 +10,10 @@
     {
       "path": "./tsconfig.vitest.json"
     }
-  ]
+  ],
+  "compilerOptions": {
+    "typeRoots": [
+      "../node_modules/@heroicons/**/*.d.ts"
+    ]
+  },
 }