diff --git a/ui/src/components/close/index.js b/ui/src/components/close/index.js
index 8ff69263..bc955fe9 100644
--- a/ui/src/components/close/index.js
+++ b/ui/src/components/close/index.js
@@ -1,6 +1,6 @@
 const React = require('react');
 const Styled = require('styled-components');
-const closeIcon = require('../../shared/assets/close.png');
+
 const fns = require('../../shared/functions');
 
 const {
@@ -30,7 +30,7 @@ const Close = ({
     >
       <img
         alt="Close"
-        src={closeIcon}
+        src="./close.svg"
       />
     </StyledButton>
   );
diff --git a/ui/src/shared/assets/close.svg b/ui/src/shared/assets/close.svg
new file mode 100644
index 00000000..02b2b668
--- /dev/null
+++ b/ui/src/shared/assets/close.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+    <title>icon: close</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="ui-components-revised" transform="translate(-3367.000000, -870.000000)" fill="#646464">
+            <g id="notifications" transform="translate(2457.000000, 72.000000)">
+                <g id="notification:-error" transform="translate(0.000000, 780.000000)">
+                    <path d="M916.899495,22.8994949 L916.899495,16.8994949 L914.899495,16.8994949 L914.899495,22.8994949 L908.899495,22.8994949 L908.899495,24.8994949 L914.899495,24.8994949 L914.899495,30.8994949 L916.899495,30.8994949 L916.899495,24.8994949 L922.899495,24.8994949 L922.899495,22.8994949 L916.899495,22.8994949 Z" id="icon:-close" transform="translate(915.899495, 23.899495) rotate(45.000000) translate(-915.899495, -23.899495) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/ui/stories/index.js b/ui/stories/index.js
index 2ce40224..e9d1f274 100644
--- a/ui/stories/index.js
+++ b/ui/stories/index.js
@@ -56,8 +56,6 @@ const {
   RadioGroup
 } = require('../src/');
 
-
-
 const seed = require('./seed');
 const {
 	selectData
@@ -368,7 +366,14 @@ storiesOf('Tabs', module)
 
 storiesOf('Close', module)
   .add('Default', () => (
-    <Close onClick={function noop() {}} />
+    <Base
+      style={{
+        position: 'relative',
+        width: 60
+      }}
+    >
+      <Close onClick={function noop() {}} />
+    </Base>
   ));
 
 storiesOf('Toggle', module)
diff --git a/ui/test/index.js b/ui/test/index.js
index 567c4204..8ef664a9 100644
--- a/ui/test/index.js
+++ b/ui/test/index.js
@@ -24,6 +24,12 @@ test('renders <Button> without exploding', (t) => {
   t.deepEqual(wrapper.length, 1);
 });
 
+test('renders <Close> without exploding', (t) => {
+  const Close = require('../src/components/close');
+  const wrapper = shallow(<Close />);
+  t.deepEqual(wrapper.length, 1);
+});
+
 test('renders <Checkbox> without exploding', (t) => {
   const Checkbox = require('../src/components/checkbox');
   const wrapper = shallow(<Checkbox />);