diff --git a/docs/script.js b/docs/script.js
index 4d9b699..b93af63 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -444,6 +444,8 @@ const sampleCollection = [
     code: `<section class="icon-list">
   <!-- heart -->
   <i class="nes-icon is-large heart"></i>
+  <i class="nes-icon is-large is-half heart"></i>
+  <i class="nes-icon is-large is-transparent heart"></i>
   <i class="nes-icon is-large heart is-empty"></i>
 
   <!-- star -->
diff --git a/scss/icons/heart.scss b/scss/icons/heart.scss
index 85499dd..9f006e5 100644
--- a/scss/icons/heart.scss
+++ b/scss/icons/heart.scss
@@ -19,6 +19,46 @@ $icon-heart: (
   (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
 );
 
+// prettier-ignore
+$icon-heart-half: (
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
+  (0,0,2,2,2,0,0,0,0,0,2,2,2,0,0,0),
+  (0,2,3,3,3,2,0,0,0,2,0,0,0,2,0,0),
+  (2,3,1,1,3,3,2,0,2,0,0,0,0,0,2,0),
+  (2,3,1,3,3,3,3,2,0,0,0,0,0,0,2,0),
+  (2,3,3,3,3,3,3,3,0,0,0,0,0,0,2,0),
+  (2,3,3,3,3,3,3,3,0,0,0,0,0,0,2,0),
+  (2,3,3,3,3,3,3,3,0,0,0,0,0,0,2,0),
+  (0,2,3,3,3,3,3,3,0,0,0,0,0,2,0,0),
+  (0,0,2,3,3,3,3,3,0,0,0,0,2,0,0,0),
+  (0,0,0,2,3,3,3,3,0,0,0,2,0,0,0,0),
+  (0,0,0,0,2,3,3,3,0,0,2,0,0,0,0,0),
+  (0,0,0,0,0,2,3,3,0,2,0,0,0,0,0,0),
+  (0,0,0,0,0,0,2,4,2,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
+);
+
+// prettier-ignore
+$icon-heart-transparent: (
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
+  (0,0,2,2,2,0,0,0,0,0,2,2,2,0,0,0),
+  (0,2,0,0,0,2,0,0,0,2,0,0,0,2,0,0),
+  (2,0,0,0,0,0,2,0,2,0,0,0,0,0,2,0),
+  (2,0,0,0,0,0,0,2,0,0,0,0,0,0,2,0),
+  (2,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0),
+  (2,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0),
+  (2,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0),
+  (0,2,0,0,0,0,0,0,0,0,0,0,0,2,0,0),
+  (0,0,2,0,0,0,0,0,0,0,0,0,2,0,0,0),
+  (0,0,0,2,0,0,0,0,0,0,0,2,0,0,0,0),
+  (0,0,0,0,2,0,0,0,0,0,2,0,0,0,0,0),
+  (0,0,0,0,0,2,0,0,0,2,0,0,0,0,0,0),
+  (0,0,0,0,0,0,2,0,2,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
+);
+
 $icon-heart-empty-colors: (#adafbb);
 // prettier-ignore
 $icon-heart-empty: (
diff --git a/scss/icons/icons.scss b/scss/icons/icons.scss
index 202bb61..0c59b69 100644
--- a/scss/icons/icons.scss
+++ b/scss/icons/icons.scss
@@ -70,6 +70,12 @@
   &.heart::before {
     @include pixelize($default-size, $icon-heart, $icon-heart-colors);
   }
+  &.heart.is-half::before {
+    @include pixelize($default-size, $icon-heart-half, $icon-heart-colors);
+  }
+  &.heart.is-transparent::before {
+    @include pixelize($default-size, $icon-heart-transparent, $icon-heart-colors);
+  }
   &.heart.is-empty::before {
     @include pixelize($default-size, $icon-heart-empty, $icon-heart-empty-colors);
   }
diff --git a/story/_helpers/icons.js b/story/_helpers/icons.js
index a6398ce..82f44c6 100644
--- a/story/_helpers/icons.js
+++ b/story/_helpers/icons.js
@@ -30,6 +30,12 @@ export const Sprites = {
   'snes-jp-logo': 'snes-jp-logo',
 };
 
+export const Reactions = {
+  heart: 'heart',
+  star: 'star',
+  like: 'like',
+};
+
 export const Size = {
   default: '',
   'is-small': 'is-small',
diff --git a/story/icons/icons.stories.js b/story/icons/icons.stories.js
index 1ec95f5..4271dab 100644
--- a/story/icons/icons.stories.js
+++ b/story/icons/icons.stories.js
@@ -3,8 +3,10 @@ import { withKnobs } from '@storybook/addon-knobs';
 
 import Icons from './icons.template';
 import Sprites from './sprites.template';
+import Reactions from './reactions.template';
 
 storiesOf('Icons', module)
   .addDecorator(withKnobs)
   .add('Icons', () => Icons())
-  .add('Sprites', () => Sprites());
+  .add('Sprites', () => Sprites())
+  .add('Reactions', () => Reactions());
diff --git a/story/icons/reactions.template.js b/story/icons/reactions.template.js
new file mode 100644
index 0000000..4a5e87d
--- /dev/null
+++ b/story/icons/reactions.template.js
@@ -0,0 +1,33 @@
+import { select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import { Reactions } from '../_helpers/icons';
+
+export default () => {
+  const reactionIcon = select('Reaction Icon', {
+    ...Reactions,
+  }, 'heart');
+
+  const reactionSize = select('Size Class', {
+    'is-small': 'is-small',
+    'is-medium': 'is-medium',
+    'is-large': 'is-large',
+  }, 'is-large');
+
+  const reactionFill = select('Fill Class', {
+    default: '',
+    'is-half': 'is-half',
+    'is-transparent': 'is-transparent',
+    'is-empty': 'is-empty',
+  });
+
+  const reactionClasses = classNames(
+    'nes-icon',
+    reactionIcon,
+    reactionSize,
+    reactionFill,
+  );
+  return `
+    <i class="${reactionClasses}"></i>
+  `;
+};