diff --git a/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-group.html b/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-group.html
index e75f30d7eb..35b3eb7353 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-group.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-group.html
@@ -3,7 +3,10 @@
 
         <ng-form name="groupNameForm" data-element="group-name">
             <div class="umb-group-builder__group-title control-group -no-margin" ng-class="{'-inherited': vm.group.inherited}">
-                <i class="umb-group-builder__group-title-icon icon-navigation" ng-if="vm.sorting && !vm.group.inherited"></i>
+                <umb-icon icon="icon-navigation"
+                          class="umb-group-builder__group-title-icon"
+                          ng-if="vm.sorting && !vm.group.inherited">
+                </umb-icon>
                 <input data-element="group-name-field"
                         class="umb-group-builder__group-title-input"
                         type="text"
@@ -30,7 +33,7 @@
 
         <div class="umb-group-builder__group-title-right">
             <div class="umb-group-builder__group-inherited-label" ng-if="vm.group.inherited">
-                <i class="icon icon-merge"></i>
+                <umb-icon icon="icon-merge" class="icon"></umb-icon>
                 <localize key="contentTypeEditor_inheritedFrom"></localize>: {{ vm.group.inheritedFromName }}
                 <span ng-repeat="contentTypeName in vm.group.parentTabContentTypeNames">
                     <button type="button" class="btn-link btn-small p0" ng-click="vm.clickComposition(vm.group.parentTabContentTypes[$index])">{{ contentTypeName }}</button>
@@ -52,7 +55,7 @@
         </div>
 
         <div class="umb-group-builder__group-remove" ng-if="vm.allowRemove">
-            <i class="icon-trash" ng-click="vm.removeGroup()"></i>
+            <umb-icon icon="icon-trash" ng-click="vm.removeGroup()"></umb-icon>
         </div>
     </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-property.html b/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-property.html
index 5724aa4e2e..8751a4723f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-property.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-property.html
@@ -46,7 +46,7 @@
       </ng-form>
 
       <div ng-if="vm.sortable" class="flex items-center">
-          <i class="icon icon-navigation" ng-if="!vm.property.inherited" style="margin-right: 10px;"></i>
+          <umb-icon icon="icon-navigation" class="icon" ng-if="!vm.property.inherited" style="margin-right: 10px;"></umb-icon>
           <span class="umb-group-builder__property-meta-label">{{ vm.property.label }}</span>
           <span class="umb-group-builder__property-meta-alias" style="margin-bottom: 0; margin-left: 5px; margin-top: 1px;">({{ vm.property.alias }})</span>
           <input name="propertySortOrder" type="number" class="umb-group-builder__group-sort-value umb-property-editor-tiny" ng-model="vm.property.sortOrder" ng-disabled="vm.property.inherited" ng-blur="vm.changeSortOrderValue()" />
@@ -65,32 +65,32 @@
           </span>
 
           <div class="umb-group-builder__property-tag -white" ng-if="vm.property.validation.mandatory">
-              <i class="umb-group-builder__property-tag-icon">*</i>
+              <span class="umb-group-builder__property-tag-icon">*</span>
               <localize key="general_mandatory"></localize>
           </div>
 
           <div class="umb-group-builder__property-tag -white" ng-if="vm.property.showOnMemberProfile">
-              <i class="icon-eye umb-group-builder__property-tag-icon"></i>
+              <umb-icon icon="icon-eye" class="umb-group-builder__property-tag-icon"></umb-icon>
               <localize key="contentTypeEditor_showOnMemberProfile"></localize>
           </div>
 
           <div class="umb-group-builder__property-tag -white" ng-if="vm.property.memberCanEdit">
-              <i class="icon-edit umb-group-builder__property-tag-icon"></i>
+              <umb-icon icon="icon-edit" class="umb-group-builder__property-tag-icon"></umb-icon>
               <localize key="contentTypeEditor_memberCanEdit"></localize>
           </div>
 
           <div class="umb-group-builder__property-tag -white" ng-if="vm.property.isSensitiveData">
-              <i class="icon-lock umb-group-builder__property-tag-icon"></i>
+              <umb-icon icon="icon-lock" class="umb-group-builder__property-tag-icon"></umb-icon>
               <localize key="contentTypeEditor_isSensitiveData"></localize>
           </div>
 
           <div class="umb-group-builder__property-tag -white" ng-if="vm.property.allowCultureVariant">
-              <i class="icon-shuffle umb-group-builder__property-tag-icon"></i>
+              <umb-icon icon="icon-shuffle" class="umb-group-builder__property-tag-icon"></umb-icon>
               <localize key="contentTypeEditor_cultureVariantLabel"></localize>
           </div>
 
           <div class="umb-group-builder__property-tag -white" ng-if="vm.property.allowSegmentVariant">
-              <i class="icon-shuffle umb-group-builder__property-tag-icon"></i>
+              <umb-icon icon="icon-shuffle" class="umb-group-builder__property-tag-icon"></umb-icon>
               <localize key="contentTypeEditor_segmentVariantLabel"></localize>
           </div>
 
@@ -99,13 +99,13 @@
       <div class="umb-group-builder__property-tags -right">
 
           <div class="umb-group-builder__property-tag" ng-if="vm.property.inherited">
-              <umb-icon icon="icon-merge" class="icon-merge"></umb-icon>
+              <umb-icon icon="icon-merge"></umb-icon>
               <span style="margin-right: 3px"><localize key="contentTypeEditor_inheritedFrom"></localize></span>
               {{vm.property.contentTypeName}}
           </div>
 
           <div class="umb-group-builder__property-tag" ng-if="vm.property.locked">
-              <umb-icon icon="icon-lock" class="icon-lock"></umb-icon>
+              <umb-icon icon="icon-lock"></umb-icon>
               <localize key="general_locked"></localize>
           </div>
 
@@ -119,7 +119,7 @@
           </umb-property-editor>
       </ng-form>
 
-      <button aria-label="Open settings" class="umb-group-builder__open-settings" ng-if="!vm.property.inherited && !vm.property.locked" ng-click="vm.edit()"></button>
+      <button type="button" aria-label="Open settings" class="umb-group-builder__open-settings" ng-if="!vm.property.inherited && !vm.property.locked" ng-click="vm.edit()"></button>
 
   </div>
 
@@ -130,15 +130,15 @@
 
           <!-- settings for property -->
           <div class="umb-group-builder__property-action">
-              <button aria-label="Open settings" class="btn-icon" ng-click="vm.edit()" localize="title" title="@general_edit">
-                  <umb-icon icon="icon-settings" class="icon-settings"></umb-icon>
+              <button type="button" aria-label="Open settings" class="btn-icon" ng-click="vm.edit()" localize="title" title="@general_edit">
+                  <umb-icon icon="icon-settings"></umb-icon>
               </button>
           </div>
 
           <!-- delete property -->
           <div ng-if="!vm.property.locked" class="umb-group-builder__property-action">
-              <button aria-label="Delete property" class="btn-icon" ng-click="vm.remove()">
-                  <umb-icon icon="icon-trash" class="icon-trash"></umb-icon>
+              <button type="button" aria-label="Delete property" class="btn-icon" ng-click="vm.remove()">
+                  <umb-icon icon="icon-trash"></umb-icon>
               </button>
           </div>
 
@@ -146,4 +146,4 @@
 
   </div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-tab.html b/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-tab.html
index ada6273217..59476f7e26 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-tab.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-tab.html
@@ -19,8 +19,14 @@
           </span>
       </div>
       <div class="umb-group-builder__tab-title-wrapper">
-            <i class="umb-group-builder__tab-title-icon icon-navigation" ng-if="vm.sorting && !vm.tab.inherited"></i>
-            <i class="umb-group-builder__tab-title-icon icon-merge" ng-if="vm.tab.inherited"></i>
+            <umb-icon icon="icon-navigation"
+                      class="umb-group-builder__tab-title-icon"
+                      ng-if="vm.sorting && !vm.tab.inherited">
+            </umb-icon>
+            <umb-icon icon="icon-merge"
+                      class="umb-group-builder__tab-title-icon"
+                      ng-if="vm.tab.inherited">
+            </umb-icon>
             <ng-form name="tabNameForm" data-element="tab-name">
                 <div class="umb-group-builder__tab-name" ng-if="vm.tab.inherited" title="{{vm.tab.alias}}">{{ vm.tab.name }}</div>
                 <input
@@ -65,7 +71,7 @@
   </div>
   <div class="umb-group-builder__tab-remove" ng-if="vm.allowRemove">
       <button type="button" class="btn-reset" ng-click="vm.removeTab()">
-          <i class="icon-trash"></i>
+          <umb-icon icon="icon-trash"></umb-icon>
       </button>
   </div>
 </div>