diff --git a/common/changes/office-ui-fabric-react/hotfix-IconButton-states-background_2018-04-09-21-14.json b/common/changes/office-ui-fabric-react/hotfix-IconButton-states-background_2018-04-09-21-14.json
new file mode 100644
index 0000000000000..b3bd31c366806
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/hotfix-IconButton-states-background_2018-04-09-21-14.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Fix IconButton state styles",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "jordanjanzen@jordanjanzen.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
index 288b828f23dcf..52d3ff04150f1 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
@@ -242,9 +242,11 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
                     top: -2px;
                   }
                   &:hover {
+                    background-color: #f4f4f4;
                     color: #004578;
                   }
                   &:active {
+                    background-color: #eaeaea;
                     color: #0078d4;
                   }
               data-is-focusable={true}
diff --git a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.styles.ts
index 7792c4b2551b0..b40dc2cfa89ef 100644
--- a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.styles.ts
@@ -17,6 +17,7 @@ export const getStyles = memoizeFunction((
 ): IButtonStyles => {
   const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);
   const splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme);
+  const { palette, semanticColors } = theme;
   const iconButtonStyles: IButtonStyles = {
     root: {
       padding: '0 4px',
@@ -26,27 +27,29 @@ export const getStyles = memoizeFunction((
     },
 
     rootHovered: {
-      color: theme.palette.themeDarker
+      color: palette.themeDarker,
+      backgroundColor: semanticColors.buttonBackground,
     },
 
     rootPressed: {
-      color: theme.palette.themePrimary
+      color: palette.themePrimary,
+      backgroundColor: semanticColors.buttonBackgroundHovered,
     },
 
     rootExpanded: {
-      color: theme.palette.themePrimary
+      color: palette.themePrimary
     },
 
     rootChecked: {
-      backgroundColor: theme.palette.neutralTertiaryAlt,
+      backgroundColor: semanticColors.buttonBackgroundChecked,
     },
 
     rootCheckedHovered: {
-      backgroundColor: theme.palette.neutralLight
+      backgroundColor: semanticColors.buttonBackgroundHovered,
     },
 
     rootDisabled: {
-      color: theme.palette.neutralTertiary
+      color: semanticColors.disabledText,
     }
   };
 
diff --git a/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap
index 3ab6ab56d0c6f..d19ca6d1df818 100644
--- a/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -571,9 +571,11 @@ exports[`Button renders IconButton correctly 1`] = `
         top: -2px;
       }
       &:hover {
+        background-color: #f4f4f4;
         color: #004578;
       }
       &:active {
+        background-color: #eaeaea;
         color: #0078d4;
       }
   data-is-focusable={true}