diff --git a/src/components/buttons/flat-button/flat-button.js b/src/components/buttons/flat-button/flat-button.js
index f7e618cafa..5c63a15b74 100644
--- a/src/components/buttons/flat-button/flat-button.js
+++ b/src/components/buttons/flat-button/flat-button.js
@@ -58,15 +58,27 @@ export const FlatButton = props => {
           padding: 0;
           min-height: initial;
           p {
-            color: ${props.isDisabled
-              ? vars.colorGray
-              : getTextColor(props.tone)};
+            color: ${
+              props.isDisabled ? vars.colorGray : getTextColor(props.tone)
+            };
           }
-          &:hover {
+          &:hover,
+          &:focus {
             p {
-              color: ${props.isDisabled
-                ? vars.colorGray
-                : getTextColor(props.tone, true)};
+              color: ${
+                props.isDisabled
+                  ? vars.colorGray
+                  : getTextColor(props.tone, true)
+              };
+            }
+
+            svg * {
+                fill: ${
+                  props.isDisabled
+                    ? vars.colorGray
+                    : getTextColor(props.tone, true)
+                };
+              }
             }
           }
         `}