diff --git a/src/templates/bootstrap3/datagrid/form.ejs b/src/templates/bootstrap3/datagrid/form.ejs
index e2624fb07..836e8c213 100644
--- a/src/templates/bootstrap3/datagrid/form.ejs
+++ b/src/templates/bootstrap3/datagrid/form.ejs
@@ -50,7 +50,7 @@
         {% if (ctx.hasRemoveButtons) { %}
         <td class="col-md-1">
           <button type="button" class="btn btn-default formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow">
-            <i class="{{ctx.iconClass('circle-xmark')}}"></i>
+            <i class="{{ctx.iconClass('remove-circle')}}"></i>
           </button>
         </td>
         {% } %}
diff --git a/src/templates/bootstrap3/iconClass.ts b/src/templates/bootstrap3/iconClass.ts
index 6f443e9a0..c7d1ce749 100644
--- a/src/templates/bootstrap3/iconClass.ts
+++ b/src/templates/bootstrap3/iconClass.ts
@@ -14,7 +14,6 @@ export default (iconset, name, spinning) => {
         name = 'question-circle';
         break;
       case 'remove-circle':
-      case 'circle-xmark':
         name = 'times-circle-o';
         break;
       case 'new-window':
diff --git a/src/templates/bootstrap3/multiValueRow/form.ejs b/src/templates/bootstrap3/multiValueRow/form.ejs
index 30e4a9a21..eedd00f5a 100644
--- a/src/templates/bootstrap3/multiValueRow/form.ejs
+++ b/src/templates/bootstrap3/multiValueRow/form.ejs
@@ -5,7 +5,7 @@
   {% if (!ctx.disabled) { %}
   <td>
     <button type="button" class="btn btn-default" ref="removeRow">
-      <i class="{{ctx.iconClass('circle-xmark')}}"></i>
+      <i class="{{ctx.iconClass('remove-circle')}}"></i>
     </button>
   </td>
   {% } %}
diff --git a/src/templates/bootstrap4/datagrid/form.ejs b/src/templates/bootstrap4/datagrid/form.ejs
index 4973010d0..042d10ca8 100644
--- a/src/templates/bootstrap4/datagrid/form.ejs
+++ b/src/templates/bootstrap4/datagrid/form.ejs
@@ -51,7 +51,7 @@
         {% if (ctx.hasRemoveButtons) { %}
         <td>
           <button type="button" class="btn btn-secondary formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}" aria-label="{{ctx.t('remove')}}" style="display: block; margin: 0 auto">
-            <i class="{{ctx.iconClass('circle-xmark')}}"></i>
+            <i class="{{ctx.iconClass('remove-circle')}}"></i>
           </button>
         </td>
         {% } %}
diff --git a/src/templates/bootstrap4/iconClass.ts b/src/templates/bootstrap4/iconClass.ts
index bfbaf204e..53b9db7d6 100644
--- a/src/templates/bootstrap4/iconClass.ts
+++ b/src/templates/bootstrap4/iconClass.ts
@@ -14,7 +14,6 @@ export default (iconset, name, spinning) => {
         name = 'question-circle';
         break;
       case 'remove-circle':
-      case 'circle-xmark':
         name = 'times-circle-o';
         break;
       case 'new-window':
diff --git a/src/templates/bootstrap4/multiValueRow/form.ejs b/src/templates/bootstrap4/multiValueRow/form.ejs
index cc0b1ea9d..5b6658174 100644
--- a/src/templates/bootstrap4/multiValueRow/form.ejs
+++ b/src/templates/bootstrap4/multiValueRow/form.ejs
@@ -5,7 +5,7 @@
   {% if (!ctx.disabled) { %}
   <td>
     <button type="button" class="btn btn-secondary" ref="removeRow">
-      <i class="{{ctx.iconClass('circle-xmark')}}"></i>
+      <i class="{{ctx.iconClass('remove-circle')}}"></i>
     </button>
   </td>
   {% } %}
diff --git a/src/templates/bootstrap5/datagrid/form.ejs b/src/templates/bootstrap5/datagrid/form.ejs
index 644f9f55b..7856db411 100644
--- a/src/templates/bootstrap5/datagrid/form.ejs
+++ b/src/templates/bootstrap5/datagrid/form.ejs
@@ -51,7 +51,7 @@
         {% if (ctx.hasRemoveButtons) { %}
         <td>
           <button type="button" class="btn btn-secondary formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}" aria-label="{{ctx.t('remove')}}" style="display: block; margin: 0 auto">
-            <i class="{{ctx.iconClass('circle-xmark')}}"></i>
+            <i class="{{ctx.iconClass('remove-circle')}}"></i>
           </button>
         </td>
         {% } %}
diff --git a/src/templates/bootstrap5/iconClass.ts b/src/templates/bootstrap5/iconClass.ts
index 40f0d46e4..cf6f3f4d4 100644
--- a/src/templates/bootstrap5/iconClass.ts
+++ b/src/templates/bootstrap5/iconClass.ts
@@ -1,185 +1,184 @@
 type iconset = 'bi' | 'fa';
 
 export default (iconset: iconset, name: string, spinning: boolean) => {
-    let iconName = name;
-    if (iconset === 'bi') {
-        switch (name) {
-            case 'cog':
-                iconName = 'gear';
-                break;
-            case 'copy':
-                iconName = 'back';
-                break;
-            case 'bars':
-                iconName = 'list';
-                break;
-            case 'remove':
-                iconName = 'trash';
-                break;
-            case 'font':
-                iconName = 'type';
-                break;
-            case 'hashtag':
-                iconName = 'hash';
-                break;
-            case 'th-list':
-                iconName = 'menu-button-wide';
-                break;
-            case 'dot-circle-o':
-                iconName = 'ui-radios';
-                break;
-            case 'plus-square-o':
-                iconName = 'plus-square';
-                break;
-            case 'minus-square-o':
-                iconName = 'dash-square';
-                break;
-            case 'plus-square':
-                iconName = 'ui-checks';
-                break;
-            case 'phone-square':
-                iconName = 'phone';
-                break;
-            case 'home':
-                iconName = 'house';
-                break;
-            case 'clock-o':
-                iconName = 'clock';
-                break;
-            case 'usd':
-                iconName = 'currency-dollar';
-                break;
-            case 'html5':
-                iconName = 'file-richtext';
-                break;
-            case 'pencil-square-o':
-                iconName = 'pencil-square';
-                break;
-            case 'columns':
-                iconName = 'layout-three-columns';
-                break;
-            case 'list-alt':
-                iconName = 'window';
-                break;
-            case 'th-large':
-                iconName = 'grid-fill';
-                break;
-            case 'folder-o':
-                iconName = 'folder';
-                break;
-            case 'square-o':
-                iconName = 'square';
-                break;
-            case 'user-secret':
-                iconName = 'person-fill-slash';
-                break;
-            case 'folder-open':
-                iconName = 'folder2-open';
-                break;
-            case 'th':
-                iconName = 'grid-3x3-gap-fill';
-                break;
-            case 'tasks':
-                iconName = 'view-stacked';
-                break;
-            case 'indent':
-                iconName = 'text-indent-left';
-                break;
-            case 'refresh':
-                iconName = 'arrow-repeat';
-                break;
-            case 'files-o':
-                iconName = 'files';
-                break;
-            case 'wpforms':
-                iconName = 'window-stack';
-                break;
-            case 'cube':
-                iconName = 'box';
-                break;
-            case 'cubes':
-                iconName = 'boxes';
-                break;
-            case 'check-square-o':
-                iconName = 'check-square';
-                break;
-            case 'plus':
-                iconName = 'plus-lg';
-                break;
-            case 'question-sign':
-                name = 'question-circle';
-                iconName = 'question-circle';
-                break;
-            case 'remove-circle':
-            case 'circle-xmark':
-                iconName = 'x-circle';
-                break;
-            case 'new-window':
-                name = 'window-restore';
-                iconName = 'window-plus';
-                break;
-            case 'move':
-                name = 'arrows';
-                iconName = 'arrows-move';
-                break;
-            case 'edit':
-                iconName = 'pencil';
-                break;
-            case 'time':
-                iconName = 'clock';
-                break;
-            case 'video':
-                iconName = 'camera-video';
-                break;
-            case 'microphone':
-                iconName = 'mic';
-                break;
-            case 'folder-open':
-                iconName = 'folder2-open';
-                break;
-            case 'check-circle':
-                iconName = 'check-circle-fill';
-                break;
-            case 'times-circle':
-                iconName = 'x-circle-fill';
-                break;
-            case 'pencil':
-                iconName = 'pencil-fill';
-                break;
-            case 'minus':
-                iconName = 'dash';
-                break;
-            case 'circle':
-                iconName = 'circle-fill';
-                break;
-            case 'search-plus':
-                iconName = 'zoom-in';
-                break;
-            case 'search-minus':
-                iconName = 'zoom-out';
-                break;
-            case 'hand-paper-o':
-                iconName = 'hand-index';
-                break;
-            case 'undo':
-                iconName = 'arrow-counterclockwise';
-                break;
-            case 'repeat':
-                iconName = 'arrow-clockwise';
-                break;
-        }
+    let biName = name;
+    switch (name) {
+        case 'cog':
+            biName = 'gear';
+            break;
+        case 'copy':
+            biName = 'back';
+            break;
+        case 'bars':
+            biName = 'list';
+            break;
+        case 'remove':
+            biName = 'trash';
+            break;
+        case 'font':
+            biName = 'type';
+            break;
+        case 'hashtag':
+            biName = 'hash';
+            break;
+        case 'th-list':
+            biName = 'menu-button-wide';
+            break;
+        case 'dot-circle-o':
+            biName = 'ui-radios';
+            break;
+        case 'plus-square-o':
+            biName = 'plus-square';
+            break;
+        case 'minus-square-o':
+            biName = 'dash-square';
+            break;
+        case 'plus-square':
+            biName = 'ui-checks';
+            break;
+        case 'phone-square':
+            biName = 'phone';
+            break;
+        case 'home':
+            biName = 'house';
+            break;
+        case 'clock-o':
+            biName = 'clock';
+            break;
+        case 'usd':
+            biName = 'currency-dollar';
+            break;
+        case 'html5':
+            biName = 'file-richtext';
+            break;
+        case 'pencil-square-o':
+            biName = 'pencil-square';
+            break;
+        case 'columns':
+            biName = 'layout-three-columns';
+            break;
+        case 'list-alt':
+            biName = 'window';
+            break;
+        case 'th-large':
+            biName = 'grid-fill';
+            break;
+        case 'folder-o':
+            biName = 'folder';
+            break;
+        case 'square-o':
+            biName = 'square';
+            break;
+        case 'user-secret':
+            biName = 'person-fill-slash';
+            break;
+        case 'folder-open':
+            biName = 'folder2-open';
+            break;
+        case 'th':
+            biName = 'grid-3x3-gap-fill';
+            break;
+        case 'tasks':
+            biName = 'view-stacked';
+            break;
+        case 'indent':
+            biName = 'text-indent-left';
+            break;
+        case 'refresh':
+            biName = 'arrow-repeat';
+            break;
+        case 'files-o':
+            biName = 'files';
+            break;
+        case 'wpforms':
+            biName = 'window-stack';
+            break;
+        case 'cube':
+            biName = 'box';
+            break;
+        case 'cubes':
+            biName = 'boxes';
+            break;
+        case 'check-square-o':
+            biName = 'check-square';
+            break;
+        case 'plus':
+            biName = 'plus-lg';
+            break;
+        case 'question-sign':
+            name = 'question-circle';
+            biName = 'question-circle';
+            break;
+        case 'remove-circle':
+            name = 'circle-xmark';
+            biName = 'x-circle';
+            break;
+        case 'new-window':
+            name = 'window-restore';
+            biName = 'window-plus';
+            break;
+        case 'move':
+            name = 'arrows';
+            biName = 'arrows-move';
+            break;
+        case 'edit':
+            biName = 'pencil';
+            break;
+        case 'time':
+            biName = 'clock';
+            break;
+        case 'video':
+            biName = 'camera-video';
+            break;
+        case 'microphone':
+            biName = 'mic';
+            break;
+        case 'folder-open':
+            biName = 'folder2-open';
+            break;
+        case 'check-circle':
+            biName = 'check-circle-fill';
+            break;
+        case 'times-circle':
+            biName = 'x-circle-fill';
+            break;
+        case 'pencil':
+            biName = 'pencil-fill';
+            break;
+        case 'minus':
+            biName = 'dash';
+            break;
+        case 'circle':
+            biName = 'circle-fill';
+            break;
+        case 'search-plus':
+            biName = 'zoom-in';
+            break;
+        case 'search-minus':
+            biName = 'zoom-out';
+            break;
+        case 'hand-paper-o':
+            biName = 'hand-index';
+            break;
+        case 'undo':
+            biName = 'arrow-counterclockwise';
+            break;
+        case 'repeat':
+            biName = 'arrow-clockwise';
+            break;
     }
 
     function generateIconClass() {
         if (spinning){
             return 'spinner-border spinner-border-sm';
         }
+        const iconName = iconset === 'bi' ? biName : name;
         // Handles legacy icons names. For example, fa-remove-circle was changed to fa-circle-xmark in a major version
         // update of font-awesome. To handle cases where customers are still on a very old version of font-awesome add
         // a fallback if statement to handle such cases
         function handleLegacyIconNames() {
-            if (iconName === 'circle-xmark'){
-                return `${iconset}-${iconName} ${iconset}-remove-circle`
+            if (iconset === 'fa' && name === 'circle-xmark'){
+                return `${iconset}-${name} ${iconset}-remove-circle`
             }
             return `${iconset}-${iconName}`;
         }
diff --git a/src/templates/bootstrap5/multiValueRow/form.ejs b/src/templates/bootstrap5/multiValueRow/form.ejs
index cc0b1ea9d..5b6658174 100644
--- a/src/templates/bootstrap5/multiValueRow/form.ejs
+++ b/src/templates/bootstrap5/multiValueRow/form.ejs
@@ -5,7 +5,7 @@
   {% if (!ctx.disabled) { %}
   <td>
     <button type="button" class="btn btn-secondary" ref="removeRow">
-      <i class="{{ctx.iconClass('circle-xmark')}}"></i>
+      <i class="{{ctx.iconClass('remove-circle')}}"></i>
     </button>
   </td>
   {% } %}