diff --git a/src/components/close-button/close-button.css b/src/components/close-button/close-button.css
new file mode 100644
index 0000000000000000000000000000000000000000..ef48624c4c69a1d2a3d96d263a3eeaa44bdf65f2
--- /dev/null
+++ b/src/components/close-button/close-button.css
@@ -0,0 +1,44 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+.close-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    color: gray;
+    background-color: $blue;
+
+    border-radius: 50%;
+    border-color: #dbdbdb;
+    border-style: solid;
+
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    cursor: pointer;
+    transition: all 0.15s ease-out; /* @todo: standardize with var */
+}
+
+.small {
+    width: 1rem;
+    height: 1rem;
+    border-width: 1px;
+}
+
+.large {
+    width: 2.75rem;
+    height: 2.75rem;
+    border-width: 2px;
+}
+
+.close-button:hover {
+    transform: scale(1.1, 1.1);
+}
+
+/*  Same icon as Sprite Selector Add button, but rotated.
+    TODO: reuse?
+*/
+.close-icon {
+    transform-origin: 50%;
+    transform: rotate(45deg);
+    width: 40%;
+}
diff --git a/src/components/close-button/close-button.jsx b/src/components/close-button/close-button.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7335dbd11f915a33af4393ee45c6a320d24fca06
--- /dev/null
+++ b/src/components/close-button/close-button.jsx
@@ -0,0 +1,38 @@
+const React = require('react');
+const classNames = require('classnames');
+
+const styles = require('./close-button.css');
+const closeIcon = require('./icon--close.svg');
+
+const CloseButton = (props) => (
+    <div
+        className={classNames(
+            styles.closeButton,
+            props.className,
+            {
+                [styles.large]: props.size === CloseButton.SIZE_LARGE,
+                [styles.small]: props.size === CloseButton.SIZE_SMALL
+            }
+        )}
+        onClick={props.onClick}
+    >
+        <img
+            className={styles.closeIcon}
+            src={closeIcon}
+        />
+    </div>
+);
+
+CloseButton.SIZE_LARGE = 'large';
+CloseButton.SIZE_SMALL = 'small';
+
+CloseButton.propTypes = {
+    onClick: React.PropTypes.func,
+    size: React.PropTypes.oneOf([CloseButton.SIZE_LARGE, CloseButton.SIZE_SMALL])
+};
+
+CloseButton.defaultProps = {
+    size: CloseButton.SIZE_LARGE
+};
+
+module.exports = CloseButton
diff --git a/src/components/modal/icon--close.svg b/src/components/close-button/icon--close.svg
similarity index 100%
rename from src/components/modal/icon--close.svg
rename to src/components/close-button/icon--close.svg
diff --git a/src/components/modal/modal.css b/src/components/modal/modal.css
index 46a51a19111398728c0196fa48f90527b11460e5..dea04e1f428504b8cedeb8d9d24cec9c2e964b14 100644
--- a/src/components/modal/modal.css
+++ b/src/components/modal/modal.css
@@ -33,38 +33,9 @@
     background: $ui-pane-gray;
 }
 
-.modal-close-button {
-    display: flex;
+.close-button {
     position: absolute;
-    z-index: 2147483647;
-    align-items: center;
-    justify-content: center;
-
     top: 1rem;
     right: 1rem;
-    width: 2.75rem !important;
-    height: 2.75rem !important;
-
-    color: gray;
-    background-color: $blue;
-
-    border-radius: 50% !important;
-    border: 2px solid #dbdbdb;
-
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    cursor: pointer;
-    transition: all 0.15s ease-out; /* @todo: standardize with var */ 
-}
-
-.modal-close-button:hover {
-    transform: scale(1.1, 1.1);
-}
-
-/*  Same icon as Sprite Selector Add button, but rotated.
-    @todo: reuse? 
-*/
-.close-icon {
-    transform-origin: 50%;
-    transform: rotate(45deg);
-    width: 40%;
+    z-index: 2;
 }
diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx
index 51c5e353daa73cf83c820e2df64b7475fb59cc68..17537a8922616a8a223d007ac7851c4e14d10e29 100644
--- a/src/components/modal/modal.jsx
+++ b/src/components/modal/modal.jsx
@@ -2,9 +2,9 @@ const React = require('react');
 const ReactModal = require('react-modal');
 
 const Box = require('../box/box.jsx');
+const CloseButton = require('../close-button/close-button.jsx');
 
 const styles = require('./modal.css');
-const closeIcon = require('./icon--close.svg');
 
 class ModalComponent extends React.Component {
     render () {
@@ -17,15 +17,10 @@ class ModalComponent extends React.Component {
                 ref={m => (this.modal = m)}
                 onRequestClose={this.props.onRequestClose}
             >
-                <div
-                    className={styles.modalCloseButton}
+                <CloseButton
+                    className={styles.closeButton}
                     onClick={this.props.onRequestClose}
-                >
-                    <img
-                        className={styles.closeIcon}
-                        src={closeIcon}
-                    />
-                </div>
+                />
                 <Box
                     className={styles.modalChildren}
                     direction="column"