diff --git a/app/assets/icons/heart-white.svg b/app/assets/icons/heart-white.svg
new file mode 100644
index 000000000..105ab7a01
--- /dev/null
+++ b/app/assets/icons/heart-white.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 512" width="513" height="512"><title>heart-o</title><path fill="#ffffff" d="M430.3 129.81A115.62 115.62 0 0 0 348 95.72c-55 0-82.69 33.42-91.47 46.59-8.78-13.17-36.48-46.59-91.46-46.59H165a116.44 116.44 0 0 0-82.3 198.71c23.91 23.91 45.83 43.23 67 61.91 29.88 26.33 58.1 51.2 87.69 85.34 3.39 3.92 16.19 20.42 16.32 20.58l2.77 3.57 2.77-3.57c.13-.17 12.92-16.67 16.32-20.58 29.59-34.14 57.81-59 87.69-85.34 21.2-18.68 43.12-38 67-61.91a116.52 116.52 0 0 0 0-164.61zm-22.12 142.5c-23.24 23.24-44.78 42.22-65.6 60.57-29.2 25.73-56.81 50.07-86.09 83.12-29.27-33-56.89-57.39-86.1-83.13-20.82-18.35-42.36-37.32-65.59-60.56A85.12 85.12 0 0 1 165.07 127c60.28 0 80.4 52.21 91.46 71.76C267.59 179.2 287.7 127 348 127a85.16 85.16 0 0 1 60.19 145.31z"/></svg>
diff --git a/app/shared/favorite-button/FavoriteButton.js b/app/shared/favorite-button/FavoriteButton.js
index ad154f806..6947d002f 100644
--- a/app/shared/favorite-button/FavoriteButton.js
+++ b/app/shared/favorite-button/FavoriteButton.js
@@ -1,14 +1,25 @@
 import React, { PropTypes } from 'react';
 import Button from 'react-bootstrap/lib/Button';
+import classnames from 'classnames';
 import iconHeart from 'hel-icons/dist/shapes/heart-o.svg';
 
+import iconHeartWhite from 'assets/icons/heart-white.svg';
 import { injectT } from 'i18n';
 
 function FavoriteButton({ favorited, onClick, t }) {
-  const buttonText = t(`ResourceHeader.${favorited ? 'favoriteRemoveButton' : 'favoriteAddButton'}`);
+  const buttonClassNames = classnames('favorite-button', {
+    'favorite-button--favorite': favorited,
+  });
+  const buttonText = t(
+    `ResourceHeader.${favorited ? 'favoriteRemoveButton' : 'favoriteAddButton'}`
+  );
   return (
-    <Button className="favorite-button" onClick={onClick}>
-      <img alt={buttonText} className="favorite-button-icon" src={iconHeart} />
+    <Button className={buttonClassNames} onClick={onClick}>
+      <img
+        alt={buttonText}
+        className="favorite-button__icon"
+        src={favorited ? iconHeartWhite : iconHeart}
+      />
       <span>{buttonText}</span>
     </Button>
   );
@@ -20,6 +31,6 @@ FavoriteButton.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-FavoriteButton = injectT(FavoriteButton);  // eslint-disable-line
+FavoriteButton = injectT(FavoriteButton); // eslint-disable-line
 
 export default FavoriteButton;
diff --git a/app/shared/favorite-button/FavoriteButton.spec.js b/app/shared/favorite-button/FavoriteButton.spec.js
index c7958feba..cacd43674 100644
--- a/app/shared/favorite-button/FavoriteButton.spec.js
+++ b/app/shared/favorite-button/FavoriteButton.spec.js
@@ -26,14 +26,19 @@ describe('shared/favorite-button/FavoriteButton', () => {
   });
 
   it('has favorite-button class name', () => {
-    expect(wrapper.prop('className')).to.equal('favorite-button');
+    expect(getWrapper({ favorited: false }).prop('className')).to.equal('favorite-button');
+  });
+
+  it('has favorite class modifier if it is favorited', () => {
+    expect(getWrapper({ favorited: true }).prop('className')).to.equal(
+      'favorite-button favorite-button--favorite'
+    );
   });
 
   it('passes onClick prop', () => {
     expect(wrapper.prop('onClick')).to.deep.equal(defaultProps.onClick);
   });
 
-
   it('has remove favorite text if favorited', () => {
     const buttonText = getWrapper({ favorited: true }).find('span');
     expect(buttonText).to.have.length(1);
diff --git a/app/shared/favorite-button/_favorite-button.scss b/app/shared/favorite-button/_favorite-button.scss
index 33db835af..dc66a102e 100644
--- a/app/shared/favorite-button/_favorite-button.scss
+++ b/app/shared/favorite-button/_favorite-button.scss
@@ -1,5 +1,17 @@
 .favorite-button {
-  .favorite-button-icon {
+  &--favorite {
+    &,
+    &:active {
+      &,
+      &:focus,
+      &:hover {
+        background-color: $black;
+        color: $white;
+      }
+    }
+  }
+
+  &__icon {
     height: $line-height-computed;
     width: $line-height-computed;
     margin-right: 8px;