diff --git a/frontend/src/components/FinalMaskForm.tsx b/frontend/src/components/FinalMaskForm.tsx
index c6afa002..b66709da 100644
--- a/frontend/src/components/FinalMaskForm.tsx
+++ b/frontend/src/components/FinalMaskForm.tsx
@@ -138,7 +138,7 @@ export default function FinalMaskForm({ stream, protocol, onChange }: FinalMaskF
               <Divider style={{ margin: 0 }}>
                 TCP Mask {mIdx + 1}
                 <DeleteOutlined
-                  style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
+                  className="danger-icon"
                   onClick={() => {
                     stream.delTcpMask(mIdx);
                     notify();
@@ -238,7 +238,7 @@ export default function FinalMaskForm({ stream, protocol, onChange }: FinalMaskF
               <Divider style={{ margin: 0 }}>
                 UDP Mask {mIdx + 1}
                 <DeleteOutlined
-                  style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
+                  className="danger-icon"
                   onClick={() => {
                     stream.delUdpMask(mIdx);
                     notify();
@@ -403,7 +403,7 @@ function HeaderCustomGroups({
               <Divider style={{ margin: 0 }}>
                 {groupKey === 'clients' ? 'Clients' : 'Servers'} Group {gi + 1}
                 <DeleteOutlined
-                  style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
+                  className="danger-icon"
                   onClick={() => {
                     (settings[groupKey] as ItemRow[][]).splice(gi, 1);
                     onChange();
@@ -445,7 +445,7 @@ function UdpHeaderCustom({ mask, onChange }: { mask: MaskRow; onChange: () => vo
               <Divider style={{ margin: 0 }}>
                 {groupKey === 'client' ? 'Client' : 'Server'} {ci + 1}
                 <DeleteOutlined
-                  style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
+                  className="danger-icon"
                   onClick={() => {
                     (settings[groupKey] as ItemRow[]).splice(ci, 1);
                     onChange();
@@ -493,7 +493,7 @@ function NoiseItems({ mask, onChange }: { mask: MaskRow; onChange: () => void })
           <Divider style={{ margin: 0 }}>
             Noise {ni + 1}
             <DeleteOutlined
-              style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
+              className="danger-icon"
               onClick={() => {
                 (settings.noise as ItemRow[]).splice(ni, 1);
                 onChange();
diff --git a/frontend/src/pages/inbounds/InboundFormModal.css b/frontend/src/pages/inbounds/InboundFormModal.css
index 444ab670..ab149e81 100644
--- a/frontend/src/pages/inbounds/InboundFormModal.css
+++ b/frontend/src/pages/inbounds/InboundFormModal.css
@@ -1,9 +1,3 @@
-.danger-icon {
-  margin-left: 6px;
-  cursor: pointer;
-  color: var(--ant-color-error);
-}
-
 .vless-auth-state {
   display: block;
   margin-top: 6px;
diff --git a/frontend/src/pages/xray/OutboundFormModal.css b/frontend/src/pages/xray/OutboundFormModal.css
index 60f2cb5a..6cd6c5b6 100644
--- a/frontend/src/pages/xray/OutboundFormModal.css
+++ b/frontend/src/pages/xray/OutboundFormModal.css
@@ -1,9 +1,3 @@
-.danger-icon {
-  cursor: pointer;
-  color: var(--ant-color-error);
-  margin-left: 8px;
-}
-
 .item-heading {
   display: flex;
   align-items: center;
diff --git a/frontend/src/styles/utils.css b/frontend/src/styles/utils.css
index fca7aa5a..cff6fe63 100644
--- a/frontend/src/styles/utils.css
+++ b/frontend/src/styles/utils.css
@@ -21,3 +21,9 @@
   cursor: pointer;
   color: var(--ant-color-primary);
 }
+
+.danger-icon {
+  margin-left: 8px;
+  cursor: pointer;
+  color: var(--ant-color-error);
+}