diff --git a/src/Icon/Icon.js b/src/Icon/Icon.js
index 3a7995b..b0dbfdc 100644
--- a/src/Icon/Icon.js
+++ b/src/Icon/Icon.js
@@ -9,9 +9,11 @@ type SizeT = 'tiny' | 'small' | 'base' | 'large' | 'huge'
 type PropsT = {
   children: React.Children,
   fill: string,
+  hoverFill: string,
   name: string,
   size: SizeT,
   stroke: string,
+  hoverStroke: string,
   theme: Object,
 }
 
@@ -79,10 +81,10 @@ const inject = (content: string) => {
 
 // const capitalize = (str: string) => str.charAt(1).toUpperCase() + str.slice(1)
 
-const defaultTheme = ({ fill, stroke, size }: PropsT) => ({
+const defaultTheme = ({ fill, stroke, hoverFill, hoverStroke, size }: PropsT) => ({
   icon: {
-    ...getFillStyle(fill),
-    ...getStrokeStyle(stroke),
+    ...getFillStyle(fill, hoverFill),
+    ...getStrokeStyle(stroke, hoverStroke),
     display: 'flex',
     lineHeight: 0,
   },
@@ -91,21 +93,25 @@ const defaultTheme = ({ fill, stroke, size }: PropsT) => ({
   },
 })
 
-const getFillStyle = (fill: string) => {
+const getFillStyle = (fill: string, hoverFill: string) => {
+  const style = {}
   if (fill) {
-    return {
-      fill,
-    }
+    style.fill = fill
+  }
+  if (hoverFill) {
+    style[':hover'] = { fill: hoverFill }
   }
-  return {}
+  return style
 }
-const getStrokeStyle = (stroke: string) => {
+const getStrokeStyle = (stroke: string, hoverStroke: string) => {
+  const style = {}
   if (stroke) {
-    return {
-      stroke,
-    }
+    style.stroke = stroke
+  }
+  if (hoverStroke) {
+    style[':hover'] = { stroke: hoverStroke }
   }
-  return {}
+  return style
 }
 
 const getSizeStyle = (size: SizeT) => {
diff --git a/src/Icon/Icon.story.js b/src/Icon/Icon.story.js
index b158028..28b1c9c 100644
--- a/src/Icon/Icon.story.js
+++ b/src/Icon/Icon.story.js
@@ -11,8 +11,13 @@ storiesOf('Icon', module).add('Regular', () => (
       <Icon name="logo" size="huge" />
     </Preview>
     <Preview label="With fill">
-      <Icon name="twitter" size="huge" fill={Colors.grey300} />
-      <Icon name="duplicate" size="large" stroke={Colors.grey300} />
+      <Icon name="twitter" size="huge" fill={Colors.grey300} hoverFill={Colors.primary} />
+      <Icon
+        name="duplicate"
+        size="large"
+        stroke={Colors.grey300}
+        hoverStroke={Colors.primary}
+      />
       <Icon name="add-example" size="large" stroke={Colors.grey300} />
       <Icon name="delete" size="large" stroke={Colors.grey300} />
       <Icon name="alignment" size="large" stroke={Colors.grey300} fill={Colors.grey300} />
diff --git a/yarn.lock b/yarn.lock
index 3af5af0..f902115 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4378,7 +4378,7 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
+loose-envify@^1.0.0, loose-envify@^1.1.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -5427,19 +5427,12 @@ promise@~2.0:
   dependencies:
     is-promise "~1"
 
-prop-types@15.5.8:
+prop-types@15.5.8, prop-types@^15.5.8:
   version "15.5.8"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"
   dependencies:
     fbjs "^0.8.9"
 
-prop-types@^15.5.8:
-  version "15.5.10"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
-  dependencies:
-    fbjs "^0.8.9"
-    loose-envify "^1.3.1"
-
 proto-list@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"