diff --git a/samples/Dressca/dressca-frontend/package-lock.json b/samples/Dressca/dressca-frontend/package-lock.json
index 57c0266ff..9d574dbb0 100644
--- a/samples/Dressca/dressca-frontend/package-lock.json
+++ b/samples/Dressca/dressca-frontend/package-lock.json
@@ -8,7 +8,7 @@
       "name": "dressca-frontend",
       "version": "0.0.0",
       "dependencies": {
-        "@heroicons/vue": "^1.0.5",
+        "@heroicons/vue": "^2.0.18",
         "axios": "^1.6.1",
         "pinia": "^2.0.11",
         "vee-validate": "^4.5.8",
@@ -689,9 +689,9 @@
       }
     },
     "node_modules/@heroicons/vue": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-1.0.5.tgz",
-      "integrity": "sha512-idWtp20Fjr7mqnD7EdGDUDi83oWHnx3SwyuQY6GZyF33OApzpBOLxz7xa4t6rPOddGz9tI5RGnndLk+ake7ijQ==",
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.0.18.tgz",
+      "integrity": "sha512-BcTC9nq2TkwNSfQuqo96J7ehx4etezypc2YeTq7KsXWxrcrerhkgjLrxGRBnStN0wrXo0Gv4BInybqz5uBG6Cw==",
       "peerDependencies": {
         "vue": ">= 3"
       }
@@ -10054,9 +10054,9 @@
       }
     },
     "@heroicons/vue": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-1.0.5.tgz",
-      "integrity": "sha512-idWtp20Fjr7mqnD7EdGDUDi83oWHnx3SwyuQY6GZyF33OApzpBOLxz7xa4t6rPOddGz9tI5RGnndLk+ake7ijQ==",
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.0.18.tgz",
+      "integrity": "sha512-BcTC9nq2TkwNSfQuqo96J7ehx4etezypc2YeTq7KsXWxrcrerhkgjLrxGRBnStN0wrXo0Gv4BInybqz5uBG6Cw==",
       "requires": {}
     },
     "@humanwhocodes/config-array": {
diff --git a/samples/Dressca/dressca-frontend/package.json b/samples/Dressca/dressca-frontend/package.json
index 27f3e9d8e..0625addbb 100644
--- a/samples/Dressca/dressca-frontend/package.json
+++ b/samples/Dressca/dressca-frontend/package.json
@@ -14,7 +14,7 @@
     "generate-client": "openapi-generator-cli generate -g typescript-axios -i ./../dressca-backend/src/Dressca.Web/dressca-api.json --additional-properties=withSeparateModelsAndApi=true,modelPackage=models,apiPackage=api,supportsES6=true -o ./src/generated/api-client"
   },
   "dependencies": {
-    "@heroicons/vue": "^1.0.5",
+    "@heroicons/vue": "^2.0.18",
     "axios": "^1.6.1",
     "pinia": "^2.0.11",
     "vee-validate": "^4.5.8",
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"
+    ]
+  },
 }