diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
index 5c2e82c1..a49ab434 100644
--- a/src/components/Button/Button.css
+++ b/src/components/Button/Button.css
@@ -121,7 +121,7 @@
   @apply outline-none ring;
 }
 
-.sbui-btn-primary:hover svg {
+/* .sbui-btn-primary:hover svg {
   @apply text-gray-500;
 }
 .sbui-btn-secondary:hover svg {
@@ -135,7 +135,7 @@
 }
 .sbui-btn-ghost:hover svg {
   @apply bg-brand-300;
-}
+} */
 
 .sbui-btn--with-icon {
   /* @apply pl-10; */
diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js
index cd5780c3..ef482ef5 100644
--- a/src/components/Button/Button.stories.js
+++ b/src/components/Button/Button.stories.js
@@ -15,7 +15,7 @@ export const withBlock = (args) => <Button {...args}>Button text</Button>
 export const withOnlyIcon = (args) => <Button {...args}/>
 export const withOnlyLoading = (args) => <Button {...args}/>
 
-const icon = <Icon className={''} type={"Package"}/>
+const icon = <Icon type={"Package"}/>
 
 withIcon.args = {
   type: 'primary',
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 3def1927..01a2f950 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -7,7 +7,6 @@ interface Props {
   type?: string,
   color?: string,
   strokeWidth?: number,
-  stroke?:string,
 }
 
 function Icon({
@@ -16,7 +15,6 @@ function Icon({
   type,
   color,
   strokeWidth,
-  stroke,
   ...props
 }: Props) {
   // @ts-ignore
@@ -24,7 +22,7 @@ function Icon({
 
   return (
     <FeatherIcon
-      stroke={stroke ? stroke : color ? color : 'currentColor'}
+      color={color ? color : 'currentColor'}
       className={`${className}`}
       strokeWidth={strokeWidth}
       size={size}
diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
index 1b824737..decc1f7a 100644
--- a/src/components/Input/Input.stories.tsx
+++ b/src/components/Input/Input.stories.tsx
@@ -25,7 +25,7 @@ export const textArea = (args :any) => <Input.TextArea {...args} />
 
 export const textAreaWithLimit = (args :any) => <Input.TextArea {...args} />
 
-const icon : any = <Icon stroke={'#666666'} className={''} type={"Package"}/>
+const icon : any = <Icon type={"Package"}/>
 
 Default.args = {
   placeholder: 'Type text here ...',
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 3233706c..34452ba0 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -65,7 +65,7 @@ export const withDescription = (args: any) => (
 )
 
 const data = ['England', 'Wales', 'Scotland', 'Ireland']
-const icon = <Icon stroke={'#666666'} type={'Book'} />
+const icon = <Icon  type={'Book'} />
 
 Default.args = {
   disabled: false,
diff --git a/src/lib/Layout/InputIconContainer.css b/src/lib/Layout/InputIconContainer.css
index d88abf88..f6cd2287 100644
--- a/src/lib/Layout/InputIconContainer.css
+++ b/src/lib/Layout/InputIconContainer.css
@@ -1,3 +1,6 @@
 .sbui-input-icon-container {
   @apply absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none;
+  /* set the default color of the icon */
+  @apply text-gray-600;
+  @apply dark:text-white;
 }
\ No newline at end of file