craft/src/panels/context-menu/ContextMenu.tsx

@@ -16,6 +16,8 @@ interface ContextMenuProps {
 
 interface MenuItem {
   label: string;
+  /** Font Awesome icon suffix (e.g. 'magic' for fa-magic), rendered before the label. */
+  icon?: string;
   shortcut?: string;
   action: () => void;
   danger?: boolean;
@@ -189,7 +191,8 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
 
   const items: MenuItem[] = [
     {
-      label: '✨ Ask Sitesmith',
+      label: 'Ask Sitesmith',
+      icon: 'magic',
       action: askSitesmith,
       disabled: isRoot,
       dividerAfter: true,
@@ -291,7 +294,10 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
               (e.target as HTMLElement).style.background = 'transparent';
             }}
           >
-            <span>{item.label}</span>
+            <span>
+              {item.icon && <i className={`fa fa-${item.icon}`} style={{ marginRight: 6, width: 12 }} />}
+              {item.label}
+            </span>
             {item.shortcut && (
               <span
                 style={{

craft/src/panels/left/AssetsPanel.tsx

@@ -296,7 +296,7 @@ export const AssetsPanel: React.FC = () => {
                     cursor: 'pointer',
                   }}
                 >
-                  ✕
+                  <i className="fa fa-times" aria-hidden />
                 </button>
               </div>
             ) : (
@@ -328,7 +328,7 @@ export const AssetsPanel: React.FC = () => {
                 onMouseEnter={(e) => { (e.target as HTMLElement).style.opacity = '1'; }}
                 onMouseLeave={(e) => { (e.target as HTMLElement).style.opacity = '0.7'; }}
               >
-                &#10005;
+                <i className="fa fa-times" aria-hidden />
               </button>
             )}
           </div>

craft/src/panels/left/PagesPanel.tsx

@@ -394,7 +394,7 @@ export const PagesPanel: React.FC = () => {
                       cursor: 'pointer',
                     }}
                   >
-                    ✕
+                    <i className="fa fa-trash" />
                   </button>
                 )}
               </div>

craft/src/panels/sitesmith/SitesmithButton.tsx

@@ -21,8 +21,8 @@ export const SitesmithButton: React.FC<Props> = ({ onClick }) => {
         color: '#fff', border: 'none', padding: '6px 12px', borderRadius: 6, cursor: 'pointer', fontWeight: 500,
       }}
     >
-      ✨ Sitesmith
-      {locked && <span aria-hidden style={{ marginLeft: 6, fontSize: 12 }}>🔒</span>}
+      <i className="fa fa-magic" aria-hidden style={{ marginRight: 6 }} /> Sitesmith
+      {locked && <i className="fa fa-lock" aria-hidden style={{ marginLeft: 6, fontSize: 12 }} />}
       {capped && !locked && <span aria-hidden style={{ marginLeft: 6, fontSize: 11, opacity: 0.85 }}>(cap)</span>}
     </button>
   );

craft/src/panels/sitesmith/SitesmithModal.tsx

@@ -103,7 +103,10 @@ export const SitesmithModal: React.FC<Props> = ({ onClose, target }) => {
     >
       <div style={panel}>
         <div style={header}>
-          <div style={{ fontWeight: 600, color: '#fff' }}>✨ Sitesmith</div>
+          <div style={{ fontWeight: 600, color: '#fff' }}>
+            <i className="fa fa-magic" aria-hidden style={{ marginRight: 6 }} />
+            Sitesmith
+          </div>
           {summary && summary.enabled && (
             <div style={{ fontSize: 12, color: '#a1a1aa', marginLeft: 16 }}>
               {summary.monthly_used} / {summary.monthly_cap} this month
@@ -136,7 +139,7 @@ export const SitesmithModal: React.FC<Props> = ({ onClose, target }) => {
               </button>
             )
           )}
-          <button onClick={onClose} aria-label="Close" style={closeBtn}>✕</button>
+          <button onClick={onClose} aria-label="Close" style={closeBtn}><i className="fa fa-times" aria-hidden /></button>
         </div>
         <div style={body}>
           <UpgradeBanner summary={summary} />

craft/src/panels/topbar/TemplateModal.tsx

@@ -248,7 +248,7 @@ export const TemplateModal: React.FC<TemplateModalProps> = ({ open, onClose }) =
             </p>
           </div>
           <button onClick={onClose} style={closeButtonStyle} title="Close">
-            &#10005;
+            <i className="fa fa-times" aria-hidden />
           </button>
         </div>