diff --git a/src/components/Iconify/index.vue b/src/components/Iconify/index.vue
index b5e8706..084c017 100644
--- a/src/components/Iconify/index.vue
+++ b/src/components/Iconify/index.vue
@@ -14,21 +14,29 @@ interface Props {
 }
 const props = withDefaults(defineProps<Props>(), {
   size: 'inherit',
-  color: 'inherit',
 });
 
 const iconSize = computed(() => (Number.isNaN(Number(props.size)) ? `${props.size}` : `${props.size}rpx`));
+
+const iconStyle = computed(() => {
+  const styles: Record<string, string> = {};
+  if (props.color) {
+    styles.color = props.color;
+  }
+  if (props.size) {
+    styles.fontSize = iconSize.value;
+  }
+  return styles;
+});
 </script>
 
 <template>
-  <text class="iconify-icon" :class="[props.icon]" />
+  <text class="iconify" :class="[props.icon]" :style="iconStyle" />
 </template>
 
 <style lang="scss" scoped>
-.iconify-icon {
+.iconify {
   display: inline-block;
   line-height: 1;
-  font-size: v-bind('iconSize');
-  color: v-bind('color');
 }
 </style>
diff --git a/src/pages/demo/index.vue b/src/pages/demo/index.vue
index 7d0037f..780d07f 100644
--- a/src/pages/demo/index.vue
+++ b/src/pages/demo/index.vue
@@ -13,7 +13,7 @@ const demo = ref('Demo');
     <view class="mt-30px center flex flex-row gap-10px">
       <Iconify icon="i-mdi-account-box" size="64" color="blue" />
       <Iconify icon="i-mdi-account-box" size="48" color="orange" />
-      <Iconify icon="i-mdi-account-box" size="32" color="green" />
+      <Iconify icon="i-mdi-account-box text-green-400" size="32" />
       <Iconify icon="i-mdi-account-box" />
       <Iconify icon="i-svg-spinners-12-dots-scale-rotate" />
     </view>