diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index 5ea534620c..b107d4c889 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { shallowRef, computed } from 'vue'
 import { LinkBase } from '#components'
+import type { IconClass } from '~/types/icon'
 
 interface Props {
   title: string
@@ -8,7 +9,7 @@ interface Props {
   isLoading?: boolean
   headingLevel?: `h${number}`
   id: string
-  icon?: string
+  icon?: IconClass
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/app/components/Diff/SidebarPanel.vue b/app/components/Diff/SidebarPanel.vue
index 385a779d20..7cc37e7bb4 100644
--- a/app/components/Diff/SidebarPanel.vue
+++ b/app/components/Diff/SidebarPanel.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { packageRoute } from '~/utils/router'
+import type { IconClass } from '~/types/icon'
 
 const props = defineProps<{
   compare: CompareResponse
@@ -19,7 +20,7 @@ const fileFilter = defineModel<'all' | 'added' | 'removed' | 'modified'>('fileFi
 
 const sectionOrder = ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies']
 const { t } = useI18n()
-const sectionMeta = computed<Record<string, { label: string; icon: string }>>(() => ({
+const sectionMeta = computed<Record<string, { label: string; icon: IconClass }>>(() => ({
   dependencies: { label: t('compare.dependencies'), icon: 'i-lucide:box' },
   devDependencies: { label: t('compare.dev_dependencies'), icon: 'i-lucide:wrench' },
   peerDependencies: { label: t('compare.peer_dependencies'), icon: 'i-lucide:users' },