diff --git a/src/runtime/composables/useComponentIcons.ts b/src/runtime/composables/useComponentIcons.ts
new file mode 100644
index 00000000..1a7eecc2
--- /dev/null
+++ b/src/runtime/composables/useComponentIcons.ts
@@ -0,0 +1,41 @@
+import { computed } from 'vue'
+import { useAppConfig } from '#app'
+
+export interface UseComponentIconsProps {
+  icon?: string
+  leading?: boolean
+  leadingIcon?: string
+  trailing?: boolean
+  trailingIcon?: string
+  loading?: boolean
+  loadingIcon?: string
+}
+
+export function useComponentIcons (props: UseComponentIconsProps) {
+  const appConfig = useAppConfig()
+
+  const isLeading = computed(() => (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing && !props.trailingIcon) || !!props.leadingIcon)
+  const isTrailing = computed(() => (props.icon && props.trailing) || (props.loading && props.trailing) || !!props.trailingIcon)
+
+  const leadingIconName = computed(() => {
+    if (props.loading) {
+      return props.loadingIcon || appConfig.ui.icons.loading
+    }
+
+    return props.leadingIcon || props.icon
+  })
+  const trailingIconName = computed(() => {
+    if (props.loading && !isLeading.value) {
+      return props.loadingIcon || appConfig.ui.icons.loading
+    }
+
+    return props.trailingIcon || props.icon
+  })
+
+  return {
+    isLeading,
+    isTrailing,
+    leadingIconName,
+    trailingIconName
+  }
+}