feat(ui): replace emoji icons with SVG icon system

Replace all emoji icons with a consistent SVG icon system to improve:
- Visual consistency across platforms
- Design token control and theming
- Professional appearance

Changes:
- Add new Icon.astro component with 16 custom SVG icons
- Update index.astro to use SVG icons in resource cards
- Update index.ts to render SVG icons in search results
- Update utils.ts to return icon names instead of emojis
- Update global.css with proper SVG icon styling
- Remove emoji from Footer component

Icons added: robot, document, lightning, hook, workflow, plug, wrench, book,
plus action icons: close, copy, download, share, external, plus, search, chevron-down

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: joeVenner

website/src/components/Footer.astro

@@ -21,7 +21,7 @@ import { Icon } from "@astrojs/starlight/components";
     )
   }
 
-  <p class="made-by">Made with ❤️ by our amazing <a href="/contributors/">contributors</a></p>
+  <p class="made-by">Made with love by our amazing <a href="/contributors/">contributors</a></p>
 </footer>
 
 <style>

website/src/components/Icon.astro

@@ -0,0 +1,61 @@
+---
+// Icon component with SVG icons to replace emojis
+// Using consistent stroke width and style for all icons
+
+export interface Props {
+  name: 'agents' | 'instructions' | 'skills' | 'hooks' | 'workflows' | 'plugins' | 'tools' | 'learning' | 'close' | 'copy' | 'download' | 'share' | 'external' | 'plus' | 'search' | 'chevron-down' | 'document' | 'lightning' | 'hook' | 'workflow' | 'plug' | 'wrench' | 'book' | 'robot';
+  size?: number;
+  class?: string;
+}
+
+const { name, size = 24, class: className = '' } = Astro.props;
+
+// SVG icon paths - consistent 1.5px stroke width, rounded caps
+const icons: Record<string, string> = {
+  // Resource type icons
+  'robot': `<path d="M9 15.5h6M12 12v3.5M12 6.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 10.5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-7Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.5 12.5h-2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2M19.5 12.5h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+
+  'document': `<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+
+  'lightning': `<path d="M13 2 4.09 12.11a1.23 1.23 0 0 0 .13 1.72l.16.14a1.23 1.23 0 0 0 1.52 0L13 9.5V22l8.91-10.11a1.23 1.23 0 0 0-.13-1.72l-.16-.14a1.23 1.23 0 0 0-1.52 0L13 14.5V2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+
+  'hook': `<path d="M12 22a5 5 0 0 0 5-5c0-2.5-2-3.5-4-5.5s-3-4-3-6.5a5 5 0 0 1 10 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 22a5 5 0 0 1-5-5c0-2.5 2-3.5 4-5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+
+  'workflow': `<path d="M4 7h16M4 17h16M8 3v4M8 13v4M16 3v4M16 13v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="8" cy="7" r="2" stroke="currentColor" stroke-width="1.5"/><circle cx="16" cy="7" r="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8" cy="17" r="2" stroke="currentColor" stroke-width="1.5"/><circle cx="16" cy="17" r="2" stroke="currentColor" stroke-width="1.5"/>`,
+
+  'plug': `<path d="M12 22v-5M8 17h8M6 2v8a4 4 0 0 0 4 4h4a4 4 0 0 0 4-4V2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 2h4M14 2h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+
+  'wrench': `<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+
+  'book': `<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+
+  // Action icons
+  'close': `<path d="M18 6 6 18M6 6l12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+
+  'copy': `<path d="M8 4h8a2 2 0 0 1 2 2v8M8 4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 4v10a2 2 0 0 0 2 2h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+
+  'download': `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+
+  'share': `<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+
+  'external': `<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+
+  'plus': `<path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+
+  'search': `<circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+
+  'chevron-down': `<path d="m6 9 6 6 6-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+};
+
+const iconPath = icons[name] || '';
+---
+
+<svg
+  viewBox="0 0 24 24"
+  width={size}
+  height={size}
+  fill="none"
+  class={className}
+  aria-hidden="true"
+  set:html={iconPath}
+/>

website/src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
 import Modal from '../components/Modal.astro';
+import Icon from '../components/Icon.astro';
 
 const base = import.meta.env.BASE_URL;
 ---
@@ -57,63 +58,71 @@ const base = import.meta.env.BASE_URL;
       <div class="container">
         <div class="cards-grid">
           <a href={`${base}agents/`} class="card card-with-count" id="card-agents">
-            <div class="card-icon" aria-hidden="true">🤖</div>
+            <div class="card-icon" aria-hidden="true"><Icon name="robot" size={40} /></div>
             <div class="card-content">
               <h3>Agents</h3>
               <p>Custom agents for specialized Copilot experiences</p>
             </div>
             <div class="card-count" data-count="agents" aria-label="Agent count">-</div>
           </a>
           <a href={`${base}instructions/`} class="card card-with-count" id="card-instructions">
-            <div class="card-icon" aria-hidden="true">📋</div>
+            <div class="card-icon" aria-hidden="true"><Icon name="document" size={40} /></div>
             <div class="card-content">
               <h3>Instructions</h3>
               <p>Coding standards and best practices for Copilot</p>
             </div>
             <div class="card-count" data-count="instructions" aria-label="Instruction count">-</div>
           </a>
           <a href={`${base}skills/`} class="card card-with-count" id="card-skills">
-            <div class="card-icon" aria-hidden="true">⚡</div>
+            <div class="card-icon" aria-hidden="true"><Icon name="lightning" size={40} /></div>
             <div class="card-content">
               <h3>Skills</h3>
               <p>Self-contained folders with instructions and resources</p>
             </div>
             <div class="card-count" data-count="skills" aria-label="Skill count">-</div>
           </a>
           <a href={`${base}hooks/`} class="card card-with-count" id="card-hooks">
-            <div class="card-icon" aria-hidden="true">🪝</div>
+            <div class="card-icon" aria-hidden="true"><Icon name="hook" size={40} /></div>
             <div class="card-content">
               <h3>Hooks</h3>
               <p>Automated workflows triggered by agent events</p>
             </div>
             <div class="card-count" data-count="hooks" aria-label="Hook count">-</div>
           </a>
           <a href={`${base}workflows/`} class="card card-with-count" id="card-workflows">
-            <div class="card-icon" aria-hidden="true">⚡</div>
+            <div class="card-icon" aria-hidden="true">
+              <Icon name="workflow" size={40} />
+            </div>
             <div class="card-content">
               <h3>Workflows</h3>
               <p>AI-powered automations for GitHub Actions</p>
             </div>
             <div class="card-count" data-count="workflows" aria-label="Workflow count">-</div>
           </a>
           <a href={`${base}plugins/`} class="card card-with-count" id="card-plugins">
-            <div class="card-icon" aria-hidden="true">🔌</div>
+            <div class="card-icon" aria-hidden="true">
+              <Icon name="plug" size={40} />
+            </div>
             <div class="card-content">
               <h3>Plugins</h3>
               <p>Curated plugins organized by themes</p>
             </div>
             <div class="card-count" data-count="plugins" aria-label="Plugin count">-</div>
           </a>
           <a href={`${base}tools/`} class="card card-with-count" id="card-tools">
-            <div class="card-icon" aria-hidden="true">🔧</div>
+            <div class="card-icon" aria-hidden="true">
+              <Icon name="wrench" size={40} />
+            </div>
             <div class="card-content">
               <h3>Tools</h3>
               <p>MCP servers and developer tools</p>
             </div>
             <div class="card-count" data-count="tools" aria-label="Tool count">-</div>
           </a>
           <a href={`${base}learning-hub/`} class="card card-with-count" id="card-learning-hub">
-            <div class="card-icon" aria-hidden="true">📚</div>
+            <div class="card-icon" aria-hidden="true">
+              <Icon name="book" size={40} />
+            </div>
             <div class="card-content">
               <h3>Learning Hub</h3>
               <p>Articles and guides to master GitHub Copilot</p>

website/src/scripts/pages/index.ts

@@ -5,6 +5,22 @@ import { FuzzySearch, type SearchItem } from '../search';
 import { fetchData, debounce, escapeHtml, truncate, getResourceIcon } from '../utils';
 import { setupModal, openFileModal } from '../modal';
 
+// SVG icon paths for search results
+const iconPaths: Record<string, string> = {
+  robot: '<path d="M9 15.5h6M12 12v3.5M12 6.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 10.5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-7Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.5 12.5h-2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2M19.5 12.5h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>',
+  document: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>',
+  lightning: '<path d="M13 2 4.09 12.11a1.23 1.23 0 0 0 .13 1.72l.16.14a1.23 1.23 0 0 0 1.52 0L13 9.5V22l8.91-10.11a1.23 1.23 0 0 0-.13-1.72l-.16-.14a1.23 1.23 0 0 0-1.52 0L13 14.5V2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>',
+  hook: '<path d="M12 22a5 5 0 0 0 5-5c0-2.5-2-3.5-4-5.5s-3-4-3-6.5a5 5 0 0 1 10 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 22a5 5 0 0 1-5-5c0-2.5 2-3.5 4-5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>',
+  workflow: '<path d="M4 7h16M4 17h16M8 3v4M8 13v4M16 3v4M16 13v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="8" cy="7" r="2" stroke="currentColor" stroke-width="1.5"/><circle cx="16" cy="7" r="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8" cy="17" r="2" stroke="currentColor" stroke-width="1.5"/><circle cx="16" cy="17" r="2" stroke="currentColor" stroke-width="1.5"/>',
+  plug: '<path d="M12 22v-5M8 17h8M6 2v8a4 4 0 0 0 4 4h4a4 4 0 0 0 4-4V2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 2h4M14 2h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>',
+  wrench: '<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>',
+};
+
+function getIconSvg(iconName: string): string {
+  const path = iconPaths[iconName] || iconPaths.document;
+  return `<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">${path}</svg>`;
+}
+
 interface Manifest {
   counts: {
     agents: number;
@@ -97,15 +113,17 @@ export async function initHomepage(): Promise<void> {
             statusEl.textContent = 'No results found.';
           }
         } else {
-          resultsDiv.innerHTML = results.map(item => `
+          resultsDiv.innerHTML = results.map(item => {
+            const iconName = getResourceIcon(item.type);
+            return `
             <button type="button" class="search-result" data-path="${escapeHtml(item.path)}" data-type="${escapeHtml(item.type)}">
-              <span class="search-result-type">${getResourceIcon(item.type)}</span>
+              <span class="search-result-type" data-icon="${iconName}">${getIconSvg(iconName)}</span>
               <div>
                 <div class="search-result-title">${search.highlight(item.title, query)}</div>
                 <div class="search-result-description">${truncate(item.description, 60)}</div>
               </div>
             </button>
-          `).join('');
+          `}).join('');
 
           if (statusEl) {
             statusEl.textContent = `${results.length} result${results.length === 1 ? '' : 's'} available.`;

website/src/scripts/utils.ts

@@ -344,18 +344,27 @@ export function formatResourceType(type: string): string {
 }
 
 /**
- * Get icon for resource type
+ * Get icon for resource type (returns SVG icon name)
  */
 export function getResourceIcon(type: string): string {
   const icons: Record<string, string> = {
-    agent: "🤖",
-    instruction: "📋",
-    skill: "⚡",
-    hook: "🪝",
-    workflow: "⚡",
-    plugin: "🔌",
+    agent: "robot",
+    instruction: "document",
+    skill: "lightning",
+    hook: "hook",
+    workflow: "workflow",
+    plugin: "plug",
   };
-  return icons[type] || "📄";
+  return icons[type] || "document";
+}
+
+/**
+ * Get SVG icon HTML for resource type
+ */
+export function getResourceIconSvg(type: string, size = 20): string {
+  const iconName = getResourceIcon(type);
+  // Return a placeholder span that will be replaced with actual SVG
+  return `<span class="resource-icon resource-icon--${iconName}" data-icon="${iconName}" data-size="${size}"></span>`;
 }
 
 /**

website/src/styles/global.css

@@ -304,7 +304,6 @@ body:has(#main-content) {
 }
 
 .search-result-type {
-  font-size: 20px;
   flex-shrink: 0;
   width: 36px;
   height: 36px;
@@ -313,8 +312,23 @@ body:has(#main-content) {
   justify-content: center;
   background: var(--color-bg-tertiary);
   border-radius: var(--border-radius);
+  color: var(--color-primary);
+}
+
+.search-result-type svg {
+  width: 20px;
+  height: 20px;
 }
 
+/* Icon color variations by type */
+.search-result-type[data-icon="robot"] { color: #B870FF; }
+.search-result-type[data-icon="document"] { color: #F4A876; }
+.search-result-type[data-icon="lightning"] { color: #FE4C25; }
+.search-result-type[data-icon="hook"] { color: #C898FD; }
+.search-result-type[data-icon="workflow"] { color: #F08A3A; }
+.search-result-type[data-icon="plug"] { color: #10b981; }
+.search-result-type[data-icon="wrench"] { color: #60a5fa; }
+
 .search-result-title {
   font-weight: 600;
   font-size: 15px;
@@ -417,14 +431,24 @@ body:has(#main-content) {
 }
 
 .card-icon {
-  font-size: 40px;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   margin-bottom: 16px;
-  display: inline-block;
-  transition: transform var(--transition);
+  color: var(--color-primary);
+  transition: transform var(--transition), color var(--transition);
+}
+
+.card-icon svg {
+  width: 100%;
+  height: 100%;
 }
 
 .card:hover .card-icon {
   transform: scale(1.1);
+  color: var(--color-accent-hover);
 }
 
 .card h3 {