diff --git a/frontend/web/components/EditPermissions.tsx b/frontend/web/components/EditPermissions.tsx
index b8920a1dbd7e..48026328cb96 100644
--- a/frontend/web/components/EditPermissions.tsx
+++ b/frontend/web/components/EditPermissions.tsx
@@ -6,6 +6,9 @@ import React, {
   useImperativeHandle,
 } from 'react'
 import { find } from 'lodash'
+import { close as closeIcon } from 'ionicons/icons'
+import { IonIcon } from '@ionic/react'
+
 import _data from 'common/data/base/_data'
 import {
   AvailablePermission,
@@ -646,7 +649,12 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = forwardRef(
                           style={{ marginBottom: 4, marginTop: 4 }}
                         >
                           <span className='font-weight-bold'>{r.name}</span>
-                          <span className='chip-icon ion ion-ios-close' />
+                          <span className='chip-icon ion'>
+                            <IonIcon
+                              icon={closeIcon}
+                              style={{ fontSize: '13px' }}
+                            />
+                          </span>
                         </Row>
                       ))}
                       <Button
diff --git a/frontend/web/components/modals/CreateRole.tsx b/frontend/web/components/modals/CreateRole.tsx
index 53236253f2ee..7250dca25153 100644
--- a/frontend/web/components/modals/CreateRole.tsx
+++ b/frontend/web/components/modals/CreateRole.tsx
@@ -33,6 +33,8 @@ import {
   useDeleteRolePermissionGroupMutation,
   useGetRolePermissionGroupQuery,
 } from 'common/services/useRolePermissionGroup'
+import { close as closeIcon } from 'ionicons/icons'
+import { IonIcon } from '@ionic/react'
 
 type CreateRoleType = {
   organisationId?: string
@@ -450,7 +452,12 @@ const CreateRole: FC<CreateRoleType> = ({
                       <span className='font-weight-bold'>
                         {u.first_name} {u.last_name}
                       </span>
-                      <span className='chip-icon ion ion-ios-close' />
+                      <span className='chip-icon ion'>
+                        <IonIcon
+                          icon={closeIcon}
+                          style={{ fontSize: '13px' }}
+                        />
+                      </span>
                     </Row>
                   ))}
               </div>
@@ -486,7 +493,12 @@ const CreateRole: FC<CreateRoleType> = ({
                       className='chip my-1 role-list'
                     >
                       <span className='font-weight-bold'>{g.name}</span>
-                      <span className='chip-icon ion ion-ios-close' />
+                      <span className='chip-icon ion'>
+                        <IonIcon
+                          icon={closeIcon}
+                          style={{ fontSize: '13px' }}
+                        />
+                      </span>
                     </Row>
                   ))}
               </div>