diff --git a/lib/components/PhosphorIcon.vue b/lib/components/PhosphorIcon.vue
index 1a46140e..d49d5b28 100644
--- a/lib/components/PhosphorIcon.vue
+++ b/lib/components/PhosphorIcon.vue
@@ -47,6 +47,7 @@
 
 <script setup lang="ts">
 import { computed, ref, shallowRef, defineAsyncComponent, watch } from 'vue'
+import isArray from 'lodash/isArray'
 import isObject from 'lodash/isObject'
 import camelCase from 'lodash/camelCase'
 import upperFirst from 'lodash/upperFirst'
@@ -69,7 +70,7 @@ const WEIGHTS = Object.freeze({
 
 const props = defineProps({
   name: {
-    type: [String, Object],
+    type: [String, Object, Array],
     required: true
   },
   size: {
@@ -141,28 +142,29 @@ function findComponentByName(name: string) {
   })
 }
 
-const component = shallowRef(null)
+const component = shallowRef()
 
-watch(
-  () => props.name,
-  () => {
-    component.value = isObject(props.name) ? props.name : findComponentByName(props.name)
-  },
-  { immediate: true }
-)
+const setComponent = (icon: Array<any> | string | object) => {
+  if (isArray(icon)) {
+    setComponent(icon[0])
+  } else if (isObject(icon)) {
+    component.value = icon
+  } else {
+    component.value = findComponentByName(icon)
+  }
+}
 
-const currentHover = ref(false)
+watch(() => props.name, setComponent, { immediate: true })
 
-watch(
-  () => props.hover,
-  () => {
-    currentHover.value = props.hover
-  },
-  { immediate: true }
-)
+const currentHover = ref(false)
+watch(() => props.hover, () => { currentHover.value = props.hover }, { immediate: true })
 
 
 const weight = computed(() => {
+  if (isArray(props.name) && props.name.length > 1) {
+    return WEIGHTS[props.name[1]]
+  }
+  
   if (currentHover.value && props.hoverWeight) {
     return WEIGHTS[props.hoverWeight]
   }
diff --git a/stories/murmur/components/PhosphorIcon.stories.js b/stories/murmur/components/PhosphorIcon.stories.js
index fe9ebab6..f940974d 100644
--- a/stories/murmur/components/PhosphorIcon.stories.js
+++ b/stories/murmur/components/PhosphorIcon.stories.js
@@ -1,4 +1,4 @@
-import { PhHorse } from "@phosphor-icons/vue"
+import { PhHorse, PhWindowsLogo } from "@phosphor-icons/vue"
 
 import { PhosphorIcon } from '@/components'
 
@@ -105,6 +105,15 @@ export const WithComponent = {
   }
 }
 
+
+export const WithArray = {
+  args: {
+    name: ['windows-logo', 'fill'],
+    variant: 'primary',
+    size: '2xl'
+  }
+}
+
 export const HoverWeight = {
   args: {
     name: 'lego',