diff --git a/packages/standard-components/src/Icon.svelte b/packages/standard-components/src/Icon.svelte
index 783411cc14..d175bfd6b0 100644
--- a/packages/standard-components/src/Icon.svelte
+++ b/packages/standard-components/src/Icon.svelte
@@ -6,11 +6,15 @@
 
   export let icon = ""
   export let size = "fa-lg"
-  export let color = "#000"
+  export let color = "#f00"
+  $: styles = {
+  ...$component.styles,
+  normal: {
+    ...$component.styles.normal,
+    color
+  }
+}
 </script>
 
-<div style="color: {color}; display: contents">
-  <i
-  use:styleable={$component.styles}
-  class="{icon} {size}" />
-</div>
\ No newline at end of file
+<i use:styleable={styles}
+  class="{icon} {size}" />
\ No newline at end of file