diff --git a/src/app/assets/icons/circle_info.svg b/src/app/assets/icons/circle_info.svg
new file mode 100644
index 00000000..a2ee2f5d
--- /dev/null
+++ b/src/app/assets/icons/circle_info.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336H192v48h24 80 24V336H296h-8V248 224H264 216 192v48h24 24v64H216zm72-144V128H224v64h64z"/></svg>
\ No newline at end of file
diff --git a/src/app/common/common.less b/src/app/common/common.less
index 286ee6ab..6e6bf8b5 100644
--- a/src/app/common/common.less
+++ b/src/app/common/common.less
@@ -20,9 +20,16 @@
         z-index: 5;
         overflow: hidden;
 
+        .icon {
+            display: inline;
+            width: 1em;
+            height: 1em;
+            fill: @base-color;
+            padding-top: 0.2em;
+        }
+
         .info-icon {
             margin-right: 5px;
-            width: 12px;
             flex-shrink: 0;
         }
 
diff --git a/src/app/common/common.tsx b/src/app/common/common.tsx
index 98de7a4c..85c0bfd9 100644
--- a/src/app/common/common.tsx
+++ b/src/app/common/common.tsx
@@ -13,6 +13,7 @@ import { ReactComponent as CopyIcon } from "../assets/icons/history/copy.svg";
 import { ReactComponent as CircleIcon } from "../assets/icons/circle.svg";
 import { ReactComponent as KeyIcon } from "../assets/icons/key.svg";
 import { ReactComponent as RotateIcon } from "../assets/icons/rotate_left.svg";
+import { ReactComponent as CircleInfoIcon } from "../assets/icons/circle_info.svg";
 
 import "./common.less";
 
@@ -250,11 +251,11 @@ class InfoMessage extends React.Component<{ width: number; children: React.React
         return (
             <div className="info-message">
                 <div className="message-icon">
-                    <i className="fa-sharp fa-solid fa-circle-info" />
+                    <CircleInfoIcon className="icon" />
                 </div>
                 <div className="message-content" style={{ width: this.props.width }}>
                     <div className="info-icon">
-                        <i className="fa-sharp fa-solid fa-circle-info" />
+                        <CircleInfoIcon className="icon" />
                     </div>
                     <div className="info-children">{this.props.children}</div>
                 </div>