diff --git a/src/components/filter/filter.jsx b/src/components/filter/filter.jsx
index 57186904a..6e140eb80 100644
--- a/src/components/filter/filter.jsx
+++ b/src/components/filter/filter.jsx
@@ -9,6 +9,7 @@ const styles = require('./filter.css');
 const FilterComponent = props => {
     const {
         onChange,
+        onClear,
         placeholderText,
         filterQuery
     } = props;
@@ -31,7 +32,10 @@ const FilterComponent = props => {
                 value={filterQuery}
                 onChange={onChange}
             />
-            <div className={styles.xIconWrapper}>
+            <div
+                className={styles.xIconWrapper}
+                onClick={onClear}
+            >
                 <img
                     className={styles.xIcon}
                     src={xIcon}
@@ -44,6 +48,7 @@ const FilterComponent = props => {
 FilterComponent.propTypes = {
     filterQuery: PropTypes.string,
     onChange: PropTypes.func,
+    onClear: PropTypes.func,
     placeholderText: PropTypes.string
 };
 FilterComponent.defaultProps = {
diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 9b03b0b8d..ad33743be 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -12,6 +12,7 @@ class LibraryComponent extends React.Component {
         super(props);
         bindAll(this, [
             'handleFilterChange',
+            'handleFilterClear',
             'handleMouseEnter',
             'handleMouseLeave',
             'handleSelect'
@@ -32,9 +33,10 @@ class LibraryComponent extends React.Component {
         if (this.props.onItemMouseLeave) this.props.onItemMouseLeave(this.getFilteredData()[id]);
     }
     handleFilterChange (event) {
-        this.setState({
-            filterQuery: event.target.value
-        });
+        this.setState({filterQuery: event.target.value});
+    }
+    handleFilterClear () {
+        this.setState({filterQuery: ''});
     }
     getFilteredData () {
         return this.props.data.filter(dataItem =>
@@ -48,6 +50,7 @@ class LibraryComponent extends React.Component {
                 filterQuery={this.state.filterQuery}
                 visible={this.props.visible}
                 onFilterChange={this.handleFilterChange}
+                onFilterClear={this.handleFilterClear}
                 onRequestClose={this.props.onRequestClose}
             >
                 <div className={styles.libraryScrollGrid}>
diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx
index a6af18b81..2a743bd74 100644
--- a/src/components/modal/modal.jsx
+++ b/src/components/modal/modal.jsx
@@ -28,6 +28,7 @@ class ModalComponent extends React.Component {
                             <Filter
                                 filterQuery={this.props.filterQuery}
                                 onChange={this.props.onFilterChange}
+                                onClear={this.props.onFilterClear}
                             />
                         </div>
                         <div
@@ -62,6 +63,7 @@ ModalComponent.propTypes = {
     contentLabel: PropTypes.string.isRequired,
     filterQuery: PropTypes.string,
     onFilterChange: PropTypes.func,
+    onFilterClear: PropTypes.func,
     onRequestClose: PropTypes.func,
     visible: PropTypes.bool.isRequired
 };