diff --git a/lib/components/PhosphorIcon.vue b/lib/components/PhosphorIcon.vue
index 6bbeb9a1..f776a44d 100644
--- a/lib/components/PhosphorIcon.vue
+++ b/lib/components/PhosphorIcon.vue
@@ -1,5 +1,11 @@
 <template>
-  <span class="phosphor-icon" :style="style" :class="classList" @mouseenter="hover = true" @mouseleave="hover = false">
+  <span 
+    class="phosphor-icon" 
+    :class="classList" 
+    :style="style" 
+    @mouseenter="currentHover = true" 
+    @mouseleave="currentHover = hover ?? false"
+  >
     <component
       :size="rawSize"
       :is="component"
@@ -60,8 +66,6 @@ const WEIGHTS = Object.freeze({
   [WEIGHT_DUOTONE]: WEIGHT_DUOTONE
 })
 
-const hover = ref(false)
-
 const props = defineProps({
   name: {
     type: String,
@@ -141,17 +145,19 @@ watch(
   }
 )
 
+const currentHover = ref(false)
+
 watch(
   () => props.hover,
   () => {
-    hover.value = props.hover
+    currentHover.value = props.hover
   },
   { immediate: true }
 )
 
 
 const weight = computed(() => {
-  if (hover.value && props.hoverWeight) {
+  if (currentHover.value && props.hoverWeight) {
     return WEIGHTS[props.hoverWeight]
   }
 
@@ -202,7 +208,7 @@ const classList = computed(() => {
   return {
     [`phosphor-icon--size-${props.size}`]: hasSize.value,
     [`phosphor-icon--has-size`]: hasSize.value,
-    [`phosphor-icon--hover`]: hover.value,
+    [`phosphor-icon--hover`]: currentHover.value,
   }
 })
 </script>
diff --git a/stories/murmur/components/PhosphorIcon.stories.js b/stories/murmur/components/PhosphorIcon.stories.js
index 5c55280c..58bb6287 100644
--- a/stories/murmur/components/PhosphorIcon.stories.js
+++ b/stories/murmur/components/PhosphorIcon.stories.js
@@ -94,6 +94,14 @@ export const VariantSecondary = {
     size: '32px'
   }
 }
+export const HoverWeight = {
+  args: {
+    name: 'lego',
+    variant: 'primary',
+    hoverWeight: 'duotone',
+    size: '32px'
+  }
+}
 
 export const WithText = {
   args: {