diff --git a/src/components/IconClose/IconClose.example.js b/src/components/IconClose/IconClose.example.js
index a369dff7..0bdfc3b8 100644
--- a/src/components/IconClose/IconClose.example.js
+++ b/src/components/IconClose/IconClose.example.js
@@ -5,3 +5,11 @@ export const Icon = {
   props: {},
   group: 'icons',
 };
+
+export const IconSmall = {
+  component: IconClose,
+  props: {
+    size: 'small',
+  },
+  group: 'icons',
+};
diff --git a/src/components/IconClose/IconClose.js b/src/components/IconClose/IconClose.js
index b8c9858a..7ff131ca 100644
--- a/src/components/IconClose/IconClose.js
+++ b/src/components/IconClose/IconClose.js
@@ -3,11 +3,23 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './IconClose.css';
+const SIZE_SMALL = 'small';
 
 const IconClose = props => {
-  const { className, rootClassName } = props;
+  const { className, rootClassName, size } = props;
   const classes = classNames(rootClassName || css.root, className);
 
+  if (size === SIZE_SMALL) {
+    return (
+      <svg className={classes} width="9" height="9" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M2.175 8.396l2.482-2.482 2.482 2.482a.889.889 0 1 0 1.258-1.257L5.914 4.657l2.482-2.483A.89.89 0 0 0 7.139.917L4.657 3.4 2.175.918A.888.888 0 1 0 .917 2.174L3.4 4.657.918 7.139a.889.889 0 1 0 1.257 1.257"
+          fillRule="evenodd"
+        />
+      </svg>
+    );
+  }
+
   return (
     <svg
       className={classes}