diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/usergrouppicker/usergrouppicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/usergrouppicker/usergrouppicker.html
index 252c1b7cd5..dbddb141dd 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/usergrouppicker/usergrouppicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/usergrouppicker/usergrouppicker.html
@@ -18,7 +18,7 @@
                 <umb-box-content>
 
                     <umb-search-filter
-                        input-id="composition-search"
+                        input-id="usergroup-search"
                         model="searchTerm"
                         label-key="placeholders_filter"
                         text="Type to filter..."
@@ -36,7 +36,7 @@
                             </button>
 
                             <div class="umb-user-group-picker-list-item__icon">
-                                <i ng-if="!userGroup.selected" class="{{userGroup.icon}}" aria-hidden="true"></i>
+                                <umb-icon icon="{{userGroup.icon}}" class="{{userGroup.icon}}" ng-if="!userGroup.selected"></umb-icon>
                                 <umb-checkmark ng-if="userGroup.selected" checked="userGroup.selected" size="xs"></umb-checkmark>
                             </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/users/umb-user-group-preview.html b/src/Umbraco.Web.UI.Client/src/views/components/users/umb-user-group-preview.html
index 20718cf804..db0c6c86c3 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/users/umb-user-group-preview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/users/umb-user-group-preview.html
@@ -1,7 +1,7 @@
 <div class="umb-user-group-preview">
-    
-    <i ng-if="icon" class="umb-user-group-preview__icon {{ icon }}"></i>
-    
+
+    <umb-icon icon="{{icon}}" class="umb-user-group-preview__icon"></umb-icon>
+
     <div class="umb-user-group-preview__content">
         <div class="umb-user-group-preview__name">{{ name }}</div>
 
@@ -20,7 +20,7 @@
                 <span ng-if="contentStartNode">{{ contentStartNode.name }}</span>
             </span>
         </div>
-        
+
         <div class="umb-user-group-preview__permissions" ng-if="!hideMediaStartNode">
             <span>
                 <span class="bold"><localize key="user_mediastartnode">Media start node</localize>:</span>
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html b/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html
index 46923dd27d..106a8c8454 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html
@@ -81,8 +81,8 @@
                 ng-class="{'-selected': group.selected, '-selectable': group.hasAccess && !group.isSystemUserGroup}">
 
                 <div class="umb-table-cell">
-                    <i ng-if="group.icon" class="umb-table-body__icon umb-table-body__fileicon {{ group.icon }}"></i>
-                    <i class="umb-table-body__icon umb-table-body__checkicon icon-check"></i>
+                    <umb-icon icon="{{group.icon}}" class="{{group.icon}} umb-table-body__icon umb-table-body__fileicon" ng-if="!group.selected"></umb-icon>
+                    <umb-icon icon="icon-check" class="icon-check umb-table-body__icon umb-table-body__checkicon" ng-if="group.selected"></umb-icon>
                 </div>
                 <div class="umb-table-cell">
                     <a