diff --git a/frontend/src/metabase/components/EntityMenu.jsx b/frontend/src/metabase/components/EntityMenu.jsx
index f9a9c584991f2cd47794a9e3d0e5d9c61e455ade..5f7ba70f92272d05ffbac643e76259f04df18080 100644
--- a/frontend/src/metabase/components/EntityMenu.jsx
+++ b/frontend/src/metabase/components/EntityMenu.jsx
@@ -19,6 +19,7 @@ type Props = {
   triggerIcon: string,
   className?: string,
   tooltip?: string,
+  triggerProps: object,
 };
 
 class EntityMenu extends Component {
@@ -48,7 +49,7 @@ class EntityMenu extends Component {
   };
 
   render() {
-    const { items, triggerIcon, className, tooltip } = this.props;
+    const { items, triggerIcon, triggerProps, className, tooltip } = this.props;
     const { open, menuItemContent } = this.state;
     return (
       <div className={cx("relative", className)}>
@@ -57,6 +58,7 @@ class EntityMenu extends Component {
           onClick={this.toggleMenu}
           open={open}
           tooltip={tooltip}
+          triggerProps={triggerProps}
         />
         <Popover
           isOpen={open}
diff --git a/frontend/src/metabase/components/EntityMenuTrigger.jsx b/frontend/src/metabase/components/EntityMenuTrigger.jsx
index 84feb268477e42052b492660e3b4a435aba92d7d..c632fd85f12d7e7fd97fe2a7cf902f2565e1920d 100644
--- a/frontend/src/metabase/components/EntityMenuTrigger.jsx
+++ b/frontend/src/metabase/components/EntityMenuTrigger.jsx
@@ -3,9 +3,9 @@ import React from "react";
 import Icon, { IconWrapper } from "metabase/components/Icon";
 import Tooltip from "metabase/components/Tooltip";
 
-const EntityMenuTrigger = ({ icon, onClick, open, tooltip }) => {
+const EntityMenuTrigger = ({ icon, onClick, open, tooltip, triggerProps }) => {
   const trigger = (
-    <IconWrapper onClick={onClick}>
+    <IconWrapper onClick={onClick} {...triggerProps}>
       <Icon size={18} name={icon} m={1} />
     </IconWrapper>
   );
diff --git a/frontend/src/metabase/components/Icon.jsx b/frontend/src/metabase/components/Icon.jsx
index 454c42ebff4c3f4b6574c39c59bf4d8f5ecbe406..00d02a9df73d90be22e442c89f34893255e50a27 100644
--- a/frontend/src/metabase/components/Icon.jsx
+++ b/frontend/src/metabase/components/Icon.jsx
@@ -5,7 +5,7 @@ import RetinaImage from "react-retina-image";
 import styled from "styled-components";
 import { color, space, hover } from "styled-system";
 import cx from "classnames";
-import colors, { darken } from "metabase/lib/colors";
+import colors from "metabase/lib/colors";
 
 import { loadIcon } from "metabase/icon_paths";
 import { stripLayoutProps } from "metabase/lib/utils";
@@ -29,12 +29,13 @@ export const IconWrapper = styled("div")`
     transform: translateY(-2px);
   }
   ${hover};
+  transition: all 300ms ease-in-out;
 `;
 
 IconWrapper.defaultProps = {
   hover: {
-    backgroundColor: darken(colors["brand"]),
-    color: "white",
+    backgroundColor: colors["bg-medium"],
+    color: colors["brand"],
   },
 };
 
diff --git a/frontend/src/metabase/nav/components/ProfileLink.jsx b/frontend/src/metabase/nav/components/ProfileLink.jsx
index 7654eec543bc59c0441094e5f090cfa5e3bbc46f..8c5238f221b682c0dcd78c979f7b7a8e0a3efa54 100644
--- a/frontend/src/metabase/nav/components/ProfileLink.jsx
+++ b/frontend/src/metabase/nav/components/ProfileLink.jsx
@@ -5,6 +5,7 @@ import { Box } from "grid-styled";
 import { t } from "ttag";
 import _ from "underscore";
 import { capitalize } from "metabase/lib/formatting";
+import { color, darken } from "metabase/lib/colors";
 
 import MetabaseSettings from "metabase/lib/settings";
 import * as Urls from "metabase/lib/urls";
@@ -91,6 +92,12 @@ export default class ProfileLink extends Component {
           tooltip={t`Settings`}
           items={this.generateOptionsForUser()}
           triggerIcon="gear"
+          triggerProps={{
+            hover: {
+              backgroundColor: darken(color("brand")),
+              color: "white",
+            },
+          }}
         />
         {modalOpen === "about" ? (
           <Modal small onClose={this.closeModal}>
diff --git a/frontend/src/metabase/nav/containers/Navbar.jsx b/frontend/src/metabase/nav/containers/Navbar.jsx
index ab0509001e193badae4f705badd74a1f8b3f7641..02d96ab8c9738f799f4c7a85dcf6759b91263383 100644
--- a/frontend/src/metabase/nav/containers/Navbar.jsx
+++ b/frontend/src/metabase/nav/containers/Navbar.jsx
@@ -68,6 +68,11 @@ const ActiveSearchColor = color(colors.brand)
   .lighten(0.1)
   .string();
 
+const NavHover = {
+  backgroundColor: darken(colors["brand"]),
+  color: "white",
+};
+
 const SearchWrapper = Flex.extend`
   background-color: ${props =>
     props.active ? ActiveSearchColor : DefaultSearchColor};
@@ -344,6 +349,7 @@ export default class Navbar extends Component {
             tooltip={t`Create`}
             className="hide sm-show mr1"
             triggerIcon="add"
+            triggerProps={{ hover: NavHover }}
             items={[
               {
                 title: t`New dashboard`,
@@ -360,7 +366,10 @@ export default class Navbar extends Component {
             ]}
           />
           {hasNativeWrite && (
-            <IconWrapper className="relative hide sm-show mr1 overflow-hidden">
+            <IconWrapper
+              className="relative hide sm-show mr1 overflow-hidden"
+              hover={NavHover}
+            >
               <Link
                 to={this.props.plainNativeQuery.question().getUrl()}
                 className="flex align-center"
diff --git a/frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap b/frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap
index 5d29abbdf7b48091a2a277af694dbd9026d774ef..b5d51d5b4600176f63f3a2d6cca157563cf3cb20 100644
--- a/frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap
+++ b/frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap
@@ -416,7 +416,7 @@ exports[`EntityMenu should render "Edit menu" correctly 1`] = `
       className="relative"
     >
       <div
-        className="Icon__IconWrapper-ksWXhn fdItMk"
+        className="Icon__IconWrapper-ksWXhn loUASk"
         onClick={[Function]}
       >
         <svg
@@ -450,7 +450,7 @@ exports[`EntityMenu should render "More menu" correctly 1`] = `
       className="relative"
     >
       <div
-        className="Icon__IconWrapper-ksWXhn fdItMk"
+        className="Icon__IconWrapper-ksWXhn loUASk"
         onClick={[Function]}
       >
         <svg
@@ -484,7 +484,7 @@ exports[`EntityMenu should render "Multiple menus" correctly 1`] = `
       className="relative"
     >
       <div
-        className="Icon__IconWrapper-ksWXhn fdItMk"
+        className="Icon__IconWrapper-ksWXhn loUASk"
         onClick={[Function]}
       >
         <svg
@@ -507,7 +507,7 @@ exports[`EntityMenu should render "Multiple menus" correctly 1`] = `
       className="relative"
     >
       <div
-        className="Icon__IconWrapper-ksWXhn fdItMk"
+        className="Icon__IconWrapper-ksWXhn loUASk"
         onClick={[Function]}
       >
         <svg
@@ -531,7 +531,7 @@ exports[`EntityMenu should render "Multiple menus" correctly 1`] = `
       className="relative"
     >
       <div
-        className="Icon__IconWrapper-ksWXhn fdItMk"
+        className="Icon__IconWrapper-ksWXhn loUASk"
         onClick={[Function]}
       >
         <svg
@@ -565,7 +565,7 @@ exports[`EntityMenu should render "Share menu" correctly 1`] = `
       className="relative"
     >
       <div
-        className="Icon__IconWrapper-ksWXhn fdItMk"
+        className="Icon__IconWrapper-ksWXhn loUASk"
         onClick={[Function]}
       >
         <svg