diff --git a/awx/ui/client/lib/components/input/lookup.partial.html b/awx/ui/client/lib/components/input/lookup.partial.html
index 4d354ab462..24cde94edc 100644
--- a/awx/ui/client/lib/components/input/lookup.partial.html
+++ b/awx/ui/client/lib/components/input/lookup.partial.html
@@ -22,13 +22,8 @@
                 ng-if="state._lookupTags"
                 ng-disabled="state._disabled || form.disabled">
                 <div class="LabelList-tagContainer" ng-repeat="tag in state._value track by $index">
-                    <div class="LabelList-tag LabelList-tag--deletable">
-                        <span ng-if="tag.hostname" class="LabelList-name">{{ tag.hostname }}</span>
-                        <span ng-if="!tag.hostname" class="LabelList-name">{{ tag }}</span>
-                    </div>
-                    <div class="LabelList-deleteContainer" ng-click="vm.removeTag(tag)">
-                        <i class="fa fa-times LabelList-tagDelete"></i>
-                    </div>
+                    <at-tag ng-if="!tag.hostname" tag="tag" remove-tag="vm.removeTag(tag)"></at-tag>
+                    <at-tag ng-if="tag.hostname" tag="tag.hostname" remove-tag="vm.removeTag(tag)"></at-tag>
                 </div>
             </span>
         </div>
@@ -37,4 +32,4 @@
     </div>
 
     <div ui-view="{{ state._resource }}"></div>
-    </div>
\ No newline at end of file
+    </div>
diff --git a/awx/ui/client/src/shared/instance-groups-multiselect/instance-groups.partial.html b/awx/ui/client/src/shared/instance-groups-multiselect/instance-groups.partial.html
index df82cf5d85..ac82763c5a 100644
--- a/awx/ui/client/src/shared/instance-groups-multiselect/instance-groups.partial.html
+++ b/awx/ui/client/src/shared/instance-groups-multiselect/instance-groups.partial.html
@@ -8,13 +8,7 @@
     <span id="InstanceGroups" class="form-control Form-textInput Form-textInput--variableHeight input-medium lookup LabelList-lookupTags"
         ng-disabled="fieldIsDisabled">
         <div class="LabelList-tagContainer" ng-repeat="tag in instanceGroupsTags">
-            <div class="LabelList-tag LabelList-tag--deletable">
-                <span class="LabelList-name">{{ tag.name }}</span>
-            </div>
-            <div class="LabelList-deleteContainer"
-                ng-click="deleteTag(tag)">
-                <i class="fa fa-times LabelList-tagDelete"></i>
-            </div>
+            <at-tag tag="tag.name" remove-tag="deleteTag(tag)"></at-tag>
         </div>
     </span>
 </div>
diff --git a/awx/ui/client/src/shared/multi-select-preview/multi-select-preview.partial.html b/awx/ui/client/src/shared/multi-select-preview/multi-select-preview.partial.html
index 48eb41b1b5..891026dd8a 100644
--- a/awx/ui/client/src/shared/multi-select-preview/multi-select-preview.partial.html
+++ b/awx/ui/client/src/shared/multi-select-preview/multi-select-preview.partial.html
@@ -6,13 +6,8 @@
         <div class="MultiSelectPreview-previewTags--outer">
             <div class="MultiSelectPreview-previewTags--inner">
                 <div class="MultiSelectPreview-previewTagContainer" ng-repeat="selectedRow in selectedRows">
-                    <div class="MultiSelectPreview-previewTagContainerDelete" ng-click="unselectSelectedRow($index)">
-                        <i class="fa fa-times MultiSelectPreview-previewTagContainerTagDelete"></i>
-                    </div>
-                    <div class="MultiSelectPreview-previewTag MultiSelectPreview-previewTag--deletable">
-                        <span>{{selectedRow.name}}</span>
-                        <span ng-if="selectedRow.hostname">{{selectedRow.hostname}}</span>
-                    </div>
+                    <at-tag ng-if="selectedRow.name" tag="selectedRow.name" remove-tag="unselectSelectedRow($index)"></at-tag>
+                    <at-tag ng-if="selectedRow.hostname" tag="selectedRow.hostname" remove-tag="unselectSelectedRow($index)"></at-tag>
                 </div>
             </div>
         </div>
diff --git a/awx/ui/client/src/shared/smart-search/smart-search.block.less b/awx/ui/client/src/shared/smart-search/smart-search.block.less
index cd97490440..a27dd3d1f4 100644
--- a/awx/ui/client/src/shared/smart-search/smart-search.block.less
+++ b/awx/ui/client/src/shared/smart-search/smart-search.block.less
@@ -154,6 +154,9 @@
 .SmartSearch-deleteContainer:hover > .SmartSearch-tagDelete {
     color: @default-bg;
 }
+.SmartSearch-clearAll-container{
+  .at-mixin-VerticallyCenter();
+}
 .SmartSearch-clearAll{
     font-size: 10px;
     padding-top: 14px;
diff --git a/awx/ui/client/src/shared/smart-search/smart-search.partial.html b/awx/ui/client/src/shared/smart-search/smart-search.partial.html
index 04615f9460..25e303688d 100644
--- a/awx/ui/client/src/shared/smart-search/smart-search.partial.html
+++ b/awx/ui/client/src/shared/smart-search/smart-search.partial.html
@@ -20,14 +20,11 @@
         <div class="SmartSearch-tagSection">
             <div class="SmartSearch-flexContainer">
                 <div class="SmartSearch-tagContainer" ng-repeat="tag in searchTags track by $index">
-                    <div class="SmartSearch-deleteContainer" ng-click="removeTerm($index)">
-                        <i class="fa fa-times SmartSearch-tagDelete"></i>
-                    </div>
-                    <div class="SmartSearch-tag SmartSearch-tag--deletable">
-                        <span class="SmartSearch-name">{{tag}}</span>
-                    </div>
+                    <at-tag tag="tag" remove-tag="removeTerm($index)"></at-tag>
+                </div>
+                <div class="SmartSearch-clearAll-container">
+                    <a href class="SmartSearch-clearAll" ng-click="clearAllTerms()" translate>CLEAR ALL</a>
                 </div>
-                <a href class="SmartSearch-clearAll" ng-click="clearAllTerms()" translate>CLEAR ALL</a>
             </div>
         </div>
     </div>