diff --git a/src/components/delete-button/delete-button.css b/src/components/delete-button/delete-button.css
new file mode 100644
index 000000000..be093ac5c
--- /dev/null
+++ b/src/components/delete-button/delete-button.css
@@ -0,0 +1,48 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+/* the delete button has .25rem invisible 'slop' around the visible button
+   to make it easier to tap on a touch device */
+.delete-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    overflow: hidden;  /* Mask the icon animation */
+    width: 2rem;
+    height: 2rem;
+    user-select: none;
+    cursor: pointer;
+    transition: all 0.15s ease-out;
+
+}
+
+/* .delete-button.large:hover {
+    transform: scale(1.1, 1.1);
+    box-shadow: 0 0 0 4px $ui-black-transparent;
+} */
+
+.delete-button-visible {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  overflow: hidden;  /* Mask the icon animation */
+  width: 1.75rem;
+  height: 1.75rem;
+  box-shadow: 0px 0px 0px 2px $motion-transparent;
+  background-color: $motion-primary;
+  color: $ui-white;
+  border-radius: 50%;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  user-select: none;
+  cursor: pointer;
+  transition: all 0.15s ease-out;
+}
+
+.delete-icon {
+    position: relative;
+    margin: 0.25rem;
+    user-select: none;
+    transform-origin: 50%;
+}
diff --git a/src/components/delete-button/delete-button.jsx b/src/components/delete-button/delete-button.jsx
new file mode 100644
index 000000000..9e6370160
--- /dev/null
+++ b/src/components/delete-button/delete-button.jsx
@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+
+import styles from './delete-button.css';
+import deleteIcon from './icon--delete.svg';
+
+const DeleteButton = props => (
+    <div
+        aria-label="Delete"
+        className={classNames(
+            styles.deleteButton,
+            props.className
+        )}
+        role="button"
+        tabIndex="0"
+        onClick={props.onClick}
+    >
+        <div className={styles.deleteButtonVisible}>
+            <img
+                className={styles.deleteIcon}
+                src={deleteIcon}
+            />
+        </div>
+    </div>
+
+);
+
+DeleteButton.propTypes = {
+    className: PropTypes.string,
+    onClick: PropTypes.func.isRequired
+};
+
+export default DeleteButton;
diff --git a/src/components/delete-button/icon--delete.svg b/src/components/delete-button/icon--delete.svg
new file mode 100644
index 000000000..3edd347dd
--- /dev/null
+++ b/src/components/delete-button/icon--delete.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <title>Sound/General/Delete</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M4.54751641,6.99994966 L15.4523042,6.99994966 C15.7284466,6.99994966 15.9523042,7.22380729 15.9523042,7.49994966 C15.9523042,7.51506367 15.9516189,7.5301699 15.9502504,7.54522183 L15.1651793,16.1801783 C15.0715275,17.2102489 14.207924,17.9989808 13.1736049,17.9990897 L6.82662224,17.9997575 C5.79213514,17.9998663 4.92828345,17.2110677 4.83462539,16.180829 L4.04956981,7.54521753 C4.02456905,7.27020922 4.22724022,7.02700381 4.50224854,7.00200306 C4.51729904,7.00063483 4.53240384,6.99994966 4.54751641,6.99994966 Z M7.33333333,4 L7.88603796,2.34188612 C7.95409498,2.13771505 8.14516441,2 8.36037961,2 L11.6396204,2 C11.8548356,2 12.045905,2.13771505 12.113962,2.34188612 L12.6666667,4 L16.5,4 C16.7761424,4 17,4.22385763 17,4.5 L17,5.5 C17,5.77614237 16.7761424,6 16.5,6 L3.5,6 C3.22385763,6 3,5.77614237 3,5.5 L3,4.5 C3,4.22385763 3.22385763,4 3.5,4 L7.33333333,4 Z M8.38742589,4 L11.6125741,4 L11.2792408,3 L8.72075922,3 L8.38742589,4 Z M10,11.7204812 L11.5952436,10.1252376 C11.7905057,9.92997548 12.1070882,9.92997548 12.3023504,10.1252376 L12.3747624,10.1976496 C12.5700245,10.3929118 12.5700245,10.7094943 12.3747624,10.9047564 L10.7795188,12.5 L12.3747624,14.0952436 C12.5700245,14.2905057 12.5700245,14.6070882 12.3747624,14.8023504 L12.3023504,14.8747624 C12.1070882,15.0700245 11.7905057,15.0700245 11.5952436,14.8747624 L10,13.2795188 L8.40475641,14.8747624 C8.20949427,15.0700245 7.89291178,15.0700245 7.69764963,14.8747624 L7.62523762,14.8023504 C7.42997548,14.6070882 7.42997548,14.2905057 7.62523762,14.0952436 L9.22048121,12.5 L7.62523762,10.9047564 C7.42997548,10.7094943 7.42997548,10.3929118 7.62523762,10.1976496 L7.69764963,10.1252376 C7.89291178,9.92997548 8.20949427,9.92997548 8.40475641,10.1252376 L10,11.7204812 Z" id="path-1"></path>
+    </defs>
+    <g id="Sound/General/Delete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="Trash-Can"></g>
+        <g id="White" mask="url(#mask-2)" fill="#FFFFFF">
+            <rect id="Color" x="0" y="0" width="20" height="20"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css
index 6844ef1c5..dffc18902 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.css
+++ b/src/components/sprite-selector-item/sprite-selector-item.css
@@ -94,16 +94,16 @@
 
 .delete-button {
     position: absolute;
-    top: 0.125rem;
+    top: -.625rem;
     z-index: auto;
 }
 
 [dir="ltr"] .delete-button {
-    right: 0.125rem;
+    right: -.625rem;
 }
 
 [dir="rtl"] .delete-button {
-    left: 0.125rem;
+    left: -.625rem;
 }
 
 .number {
diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx
index bcccb7fe7..458df186f 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.jsx
+++ b/src/components/sprite-selector-item/sprite-selector-item.jsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import CloseButton from '../close-button/close-button.jsx';
+import DeleteButton from '../delete-button/delete-button.jsx';
 import styles from './sprite-selector-item.css';
 import {ContextMenuTrigger} from 'react-contextmenu';
 import {DangerousMenuItem, ContextMenu, MenuItem} from '../context-menu/context-menu.jsx';
@@ -48,9 +48,8 @@ const SpriteSelectorItem = props => (
             ) : null}
         </div>
         {(props.selected && props.onDeleteButtonClick) ? (
-            <CloseButton
+            <DeleteButton
                 className={styles.deleteButton}
-                size={CloseButton.SIZE_SMALL}
                 onClick={props.onDeleteButtonClick}
             />
         ) : null }