Refactor SVGs to use CSS masks

Replace inline SVG markup with external icon files using CSS mask-based rendering. This approach reduces HTML duplication, enables dynamic color tinting via currentColor, and improves maintainability by centralizing icon definitions. Updates favicon rendering in chrome.js, icon styling in CSS files, and converts icon elements across 404, insecure, and settings pages. Also updates settings page favicon and GitHub link URL.

assets/icons/alert-circle.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <circle cx="12" cy="12" r="10"/>
+  <path d="M12 8v4"/>
+  <path d="M12 16h.01"/>
+</svg>

assets/icons/github.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+  <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"/>
+</svg>

assets/icons/help.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 15a1.25 1.25 0 1 1 0 2.5A1.25 1.25 0 0 1 12 17zm-.02-1.9c-.6 0-1.02-.42-1.02-.98 0-1.97 2.76-1.95 2.76-3.62 0-.77-.66-1.4-1.72-1.4-1 0-1.67.5-2.06 1.22-.3.54-.95.73-1.45.44-.54-.31-.72-1-.42-1.53C7.7 7.7 9.06 6.5 12 6.5c2.26 0 3.98 1.3 3.98 3.35 0 2.74-2.96 2.77-3 3.83-.03.6-.43 1.02-1 1.02z"/>
+</svg>

assets/icons/layers.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M12 9v4"/>
+  <path d="M12 17h.01"/>
+  <path d="M12 2 2 7l10 5 10-5-10-5Z"/>
+  <path d="M2 17l10 5 10-5"/>
+  <path d="M2 12l10 5 10-5"/>
+</svg>

assets/icons/settings.svg

@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.469.0 - ISC -->
+<svg
+  class="lucide lucide-settings"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+  <circle cx="12" cy="12" r="3" />
+</svg>

ui/assets/icons/alert-circle.svg

@@ -0,0 +1,17 @@
+<!-- @license lucide-static v0.469.0 - ISC -->
+<svg
+  class="lucide lucide-circle-alert"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10" />
+  <line x1="12" x2="12" y1="8" y2="12" />
+  <line x1="12" x2="12.01" y1="16" y2="16" />
+</svg>

ui/assets/icons/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"/></svg>

ui/assets/icons/help.svg

@@ -0,0 +1,17 @@
+<!-- @license lucide-static v0.469.0 - ISC -->
+<svg
+  class="lucide lucide-circle-help"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10" />
+  <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+  <path d="M12 17h.01" />
+</svg>

ui/assets/icons/settings.svg

@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.469.0 - ISC -->
+<svg
+  class="lucide lucide-settings"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+  <circle cx="12" cy="12" r="3" />
+</svg>

ui/assets/icons/shield-alert.svg

@@ -0,0 +1,17 @@
+<!-- @license lucide-static v0.469.0 - ISC -->
+<svg
+  class="lucide lucide-shield-alert"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
+  <path d="M12 8v4" />
+  <path d="M12 16h.01" />
+</svg>

ui/css/chrome.css

@@ -165,6 +165,15 @@ button:disabled {
   opacity: 1;
 }
 
+/* Local Lucide/Octicons SVGs: paint with tab text color */
+.tab-favicon.has-favicon.tinted-icon {
+  background: currentColor;
+  border-radius: 3px;
+  opacity: 1;
+  -webkit-mask: var(--tab-icon-mask) center / contain no-repeat;
+  mask: var(--tab-icon-mask) center / contain no-repeat;
+}
+
 .tab-favicon.empty {
   width: 13px;
   height: 13px;

ui/css/settings.css

@@ -710,11 +710,17 @@ input[type="color"] {
 .github-btn:hover, .help-btn:hover { 
   background: var(--surface-hover);
 }
-.github-btn svg, .help-btn svg {
+.github-btn .btn-icon, .help-btn .btn-icon {
   width: 16px;
   height: 16px;
-  fill: currentColor;
+  flex-shrink: 0;
+  display: inline-block;
+  background-color: currentColor;
+  -webkit-mask: var(--btn-icon-mask) center / contain no-repeat;
+  mask: var(--btn-icon-mask) center / contain no-repeat;
 }
+.btn-icon-github { --btn-icon-mask: url("../assets/icons/github.svg"); }
+.btn-icon-help { --btn-icon-mask: url("../assets/icons/help.svg"); }
 .about-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
 
 /* Debug info */

ui/js/chrome.js

@@ -133,16 +133,35 @@ function postCommand(command, payload = '') {
   }
 }
 
+function isTintableLocalIcon(url) {
+  // Lucide/Octicons under assets/icons use currentColor — tint via CSS mask.
+  // Branding SVGs keep their own colors and stay as <img>.
+  try {
+    const path = new URL(url, window.location.href).pathname.replace(/\\/g, '/').toLowerCase();
+    return path.includes('/assets/icons/') && path.endsWith('.svg');
+  } catch {
+    const normalized = String(url).replace(/\\/g, '/').toLowerCase();
+    return normalized.includes('/assets/icons/') && normalized.endsWith('.svg');
+  }
+}
+
 function renderFavicon(favicon, tab) {
   const url = (tab.favicon || '').trim();
   favicon.className = 'tab-favicon';
   favicon.textContent = '';
+  favicon.style.removeProperty('--tab-icon-mask');
 
   if (!url) {
     favicon.classList.add('empty');
     return;
   }
 
+  if (isTintableLocalIcon(url)) {
+    favicon.classList.add('has-favicon', 'tinted-icon');
+    favicon.style.setProperty('--tab-icon-mask', `url("${url.replace(/\\/g, '/').replace(/"/g, '\\"')}")`);
+    return;
+  }
+
   const image = document.createElement('img');
   image.alt = '';
   image.decoding = 'async';

ui/pages/404.html

@@ -13,12 +13,13 @@
   .card { max-width:780px; width:100%; background:linear-gradient(145deg,#1c1c1c,#242424); border:1px solid #2c2c2c; border-radius:20px; padding:40px 46px 48px; box-shadow:0 8px 28px -6px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,0.04); position:relative; overflow:hidden; }
   .card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 18% 15%,rgba(255,255,255,.08),transparent 55%), radial-gradient(circle at 82% 78%,rgba(255,255,255,.05),transparent 60%); pointer-events:none; }
   h1 { font-size: clamp(1.9rem, 2.6vw, 2.6rem); margin:0 0 12px; letter-spacing:-.5px; display:flex; align-items:center; gap:.6rem; }
-  h1 svg { width:28px; height:28px; flex-shrink:0; }
+  h1 img.page-icon,
+  h1 .page-icon { width:28px; height:28px; flex-shrink:0; display:inline-block; background-color:currentColor; -webkit-mask:url("../assets/icons/alert-circle.svg") center / contain no-repeat; mask:url("../assets/icons/alert-circle.svg") center / contain no-repeat; }
   h1 span.badge { font-size:12px; letter-spacing:1px; padding:4px 8px; border:1px solid var(--danger); color:var(--danger); border-radius:999px; text-transform:uppercase; background:rgba(220,38,38,0.1); }
   p.lede { font-size:1.05rem; line-height:1.55; margin:0 0 22px; color:var(--muted); }
   code { background:#252525; padding:3px 6px; border-radius:6px; font-size:.9rem; color:#e0e0e0; }
   .url-box { font-family:monospace; font-size:.92rem; padding:10px 12px; background:#181818; border:1px solid #2a2a2a; border-radius:10px; word-break:break-all; margin:0 0 22px; display:flex; align-items:center; gap:.75rem; }
-  .url-box svg { flex:0 0 auto; width:22px; height:22px; stroke:var(--danger); }
+  .url-box img { flex:0 0 auto; width:22px; height:22px; }
   ul { margin:0 0 26px 1.1rem; padding:0; line-height:1.5; color:var(--muted); }
   ul li { margin-bottom:6px; }
   .actions { display:flex; flex-wrap:wrap; gap:14px; }
@@ -37,7 +38,7 @@
 <body>
   <div class="card fade-in">
     <h1>
-      <svg viewBox="0 0 24 24" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
+      <span class="page-icon" aria-hidden="true"></span>
       Page Not Found <span class="badge">404</span>
     </h1>
     <p class="lede">The page you're looking for doesn't exist or has been moved. You've warped into an unknown sector of the web.</p>

ui/pages/insecure.html

@@ -13,11 +13,13 @@
   .card { max-width:780px; width:100%; background:linear-gradient(145deg,#1c1c1c,#242424); border:1px solid #2c2c2c; border-radius:20px; padding:40px 46px 48px; box-shadow:0 8px 28px -6px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,0.04); position:relative; overflow:hidden; }
   .card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 18% 15%,rgba(255,255,255,.08),transparent 55%), radial-gradient(circle at 82% 78%,rgba(255,255,255,.05),transparent 60%); pointer-events:none; }
   h1 { font-size: clamp(1.9rem, 2.6vw, 2.6rem); margin:0 0 12px; letter-spacing:-.5px; display:flex; align-items:center; gap:.6rem; }
+  h1 img.page-icon,
+  h1 .page-icon { width:28px; height:28px; flex-shrink:0; display:inline-block; background-color:currentColor; -webkit-mask:url("../assets/icons/shield-alert.svg") center / contain no-repeat; mask:url("../assets/icons/shield-alert.svg") center / contain no-repeat; }
   h1 span.badge { font-size:12px; letter-spacing:1px; padding:4px 8px; border:1px solid var(--warn); color:var(--warn); border-radius:999px; text-transform:uppercase; background:rgba(217,119,6,0.1); }
   p.lede { font-size:1.05rem; line-height:1.55; margin:0 0 22px; color:var(--muted); }
   code { background:#252525; padding:3px 6px; border-radius:6px; font-size:.9rem; color:#e0e0e0; }
   .url-box { font-family:monospace; font-size:.92rem; padding:10px 12px; background:#181818; border:1px solid #2a2a2a; border-radius:10px; word-break:break-all; margin:0 0 22px; display:flex; align-items:center; gap:.75rem; }
-  .url-box svg { flex:0 0 auto; width:22px; height:22px; stroke:var(--warn); }
+  .url-box img { flex:0 0 auto; width:22px; height:22px; }
   ul { margin:0 0 26px 1.1rem; padding:0; line-height:1.5; color:var(--muted); }
   ul li { margin-bottom:6px; }
   .actions { display:flex; flex-wrap:wrap; gap:14px; }
@@ -37,7 +39,7 @@
 <body>
   <div class="card fade-in">
     <h1>
-      <svg viewBox="0 0 24 24" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4"/><path d="M12 17h.01"/><path d="M12 2 2 7l10 5 10-5-10-5Z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+      <span class="page-icon" aria-hidden="true"></span>
       Connection Not Secure <span class="badge">http</span>
     </h1>
     <p class="lede">You’re about to visit a page using <strong>HTTP (unencrypted)</strong>. Information you send or view can potentially be intercepted or modified. If this is a site you trust and you understand the risks, you can continue anyway.</p>

ui/pages/settings.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <title>Settings</title>
   <link rel="stylesheet" href="../css/settings.css" />
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚙️</text></svg>">
+  <link rel="icon" href="../assets/icons/settings.svg" type="image/svg+xml">
   <!-- Inline styles removed; styles now live in settings.css for a cleaner, modern look. -->
 </head>
 <body>
@@ -306,18 +306,12 @@
 
         <div class="customization-group about-actions">
           <button id="copy-about-btn">Copy diagnostics</button>
-          <a id="github-link" href="https://gitpub.zambazosmedia.group/#repo/nebula-project/NebulaBrowser" class="github-btn" rel="noopener noreferrer">
+          <a id="github-link" href="https://git.zambazosmedia.group/nebula-project/NebulaBrowser" class="github-btn" rel="noopener noreferrer">
-            <!-- GitHub mark (Octicons) MIT License -->
+            <span class="btn-icon btn-icon-github" aria-hidden="true"></span>
-            <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" role="img">
+            <span>Repo</span>
-              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.01.08-2.11 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.91.08 2.11.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
-            </svg>
-            <span>Gitpub</span>
           </a>
           <a id="help-link" href="https://nebula.zambazosmedia.group" class="help-btn" rel="noopener noreferrer">
-            <!-- Help icon -->
+            <span class="btn-icon btn-icon-help" aria-hidden="true"></span>
-            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" role="img">
-              <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 15a1.25 1.25 0 1 1 0 2.5A1.25 1.25 0 0 1 12 17zm-.02-1.9c-.6 0-1.02-.42-1.02-.98 0-1.97 2.76-1.95 2.76-3.62 0-.77-.66-1.4-1.72-1.4-1 0-1.67.5-2.06 1.22-.3.54-.95.73-1.45.44-.54-.31-.72-1-.42-1.53C7.7 7.7 9.06 6.5 12 6.5c2.26 0 3.98 1.3 3.98 3.35 0 2.74-2.96 2.77-3 3.83-.03.6-.43 1.02-1 1.02z"/>
-            </svg>
             <span>Help</span>
           </a>
         </div>