diff --git a/client/galaxy/scripts/mvc/workflow/workflow-view.js b/client/galaxy/scripts/mvc/workflow/workflow-view.js
index eb5449e4268..f4a29b16cf1 100644
--- a/client/galaxy/scripts/mvc/workflow/workflow-view.js
+++ b/client/galaxy/scripts/mvc/workflow/workflow-view.js
@@ -47,6 +47,7 @@ function reset_tool_search(initValue) {
 
         // Reset search input.
         tool_menu_frame.find("#search-spinner").hide();
+        tool_menu_frame.find("#search-clear-btn").show();
         if (initValue) {
             var search_input = tool_menu_frame.find("#tool-search-query");
             search_input.val("search tools");
@@ -155,6 +156,7 @@ export default Backbone.View.extend({
                     }
                     // Start a new ajax-request in X ms
                     $("#search-spinner").show();
+                    $("#search-clear-btn").hide();
                     this.timer = window.setTimeout(() => {
                         $.get(
                             self.urls.tool_search,
@@ -209,6 +211,7 @@ export default Backbone.View.extend({
                                     $("#search-no-results").show();
                                 }
                                 $("#search-spinner").hide();
+                                $("#search-clear-btn").show();
                             },
                             "json"
                         );
diff --git a/templates/webapps/galaxy/workflow/editor.mako b/templates/webapps/galaxy/workflow/editor.mako
index 09f66de636d..f5872a6c4cc 100644
--- a/templates/webapps/galaxy/workflow/editor.mako
+++ b/templates/webapps/galaxy/workflow/editor.mako
@@ -146,10 +146,10 @@
     </div>
 
     <div class="unified-panel-controls">
-        <div id="tool-search" class="bar">
+        <div id="tool-search" class="search-input">
             <input id="tool-search-query" class="search-query parent-width" name="query" placeholder="search tools" autocomplete="off" type="text">
-             <a id="search-clear-btn" title="" data-original-title="clear search (esc)"> </a>
-             <span id="search-spinner" class="search-spinner fa fa-spinner fa-spin"></span>
+            <span id="search-clear-btn" class="search-clear fa fa-times-circle" title="" data-original-title="clear search (esc)" />
+            <span id="search-spinner" class="search-loading fa fa-spinner fa-spin" />
         </div>
     </div>