diff --git a/src/components/delete-button/delete-button.css b/src/components/delete-button/delete-button.css
new file mode 100644
index 0000000000000000000000000000000000000000..be093ac5c5a4f22dce9a4e100eee86c3ba0c38af
--- /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 0000000000000000000000000000000000000000..9e6370160afefc4bf577e63747c046a12b2fbac4
--- /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 0000000000000000000000000000000000000000..3edd347dd6a7af3e0121fa09578ec3deed95f8cc
Binary files /dev/null and b/src/components/delete-button/icon--delete.svg differ
diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css
index 6844ef1c52c2e5c328b4eb668adddb12dd14d50e..dffc189023154b00c2fad62aca907831eea56d15 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 bcccb7fe75355d5d4c010eb6cfd89a21810b46f8..458df186f94b4e4221d678511a99204ec16bad3d 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 }