diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css
index f34ac5fd110186245ce86f61a203d9f7c52fd0ae..787be776b4f17581841adf9d641b873e6009edbf 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.css
+++ b/src/components/sprite-selector-item/sprite-selector-item.css
@@ -5,6 +5,8 @@
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
+    position: relative;
+
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 0.8rem;
     background: white;
@@ -50,7 +52,9 @@
     min-width: 0;
 }
 
-.sprite-delete-button {
-    background: red;
-    color: white;
+.delete-button {
+    position: absolute;
+    top: 0.125rem;
+    right: 0.125rem;
+    z-index: 2;
 }
diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx
index 8d2937fb5fa52f5209934dbbdd8b960c0e503864..cd66a52ad0d96a46573c6e5b159044b7edd42a4d 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.jsx
+++ b/src/components/sprite-selector-item/sprite-selector-item.jsx
@@ -3,6 +3,7 @@ const React = require('react');
 
 const Box = require('../box/box.jsx');
 const CostumeCanvas = require('../costume-canvas/costume-canvas.jsx');
+const CloseButton = require('../close-button/close-button.jsx');
 const styles = require('./sprite-selector-item.css');
 
 const SpriteSelectorItem = props => (
@@ -25,12 +26,11 @@ const SpriteSelectorItem = props => (
             />
         ) : null}
         <div className={styles.spriteName}>{props.name}</div>
-        <div
-            className={styles.spriteDeleteButton}
+        <CloseButton
+            className={styles.deleteButton}
+            size={CloseButton.SIZE_SMALL}
             onClick={props.onDeleteButtonClick}
-        >
-            𝘅
-        </div>
+        />
     </Box>
 );