feat(design): surface phase PR 1 — Lucide icon migration + scale enforcement

Replaces every hand-inlined SVG in the chrome (60 across 15 files)
with Lucide components. Snaps icon sizes to the doc's 16/24 scale —
all icons in this pass land at 16. AppLogo wordmark stays as the
legitimate "custom app icon" exception per the doc; GraphView's <svg>
mount point for D3 stays as well.

Replaces emoji-as-icons in clear button-affordance cases with their
Lucide equivalents: ✕ → X (close/dismiss buttons across 8 files), ✓ →
Check (ProjectView task-advance button), 🎤 → Mic (ChatPanel voice
CTA), 📎 → Paperclip (ChatView context toggle), &uarr; → ArrowUp
(ChatInputBar Send), &times; → X (ChatPanel context-note remove), ☀/☾
→ Sun/Moon (AppHeader theme toggle).

Inline emoji punctuation in textual confirmation copy ("Saved ✓",
"Created ✓", `done: "✓"` status maps, `'✓' : '📄'` interpolations)
is left for surface-phase voice/tone touchups — replacing requires
structural template changes and is best done per-component.

Stroke weight stays at Lucide's default 2px; tightening to the doc's
1.5/1 is deferred per the surface-phase spec (option ii: drop-in +
scale enforcement).

Adds lucide-vue-next ^0.469.0 to frontend/package.json. Docker
rebuild handles the install.

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

frontend/src/views/CalendarView.vue

@@ -10,6 +10,7 @@ import { listEvents, updateEvent, type EventEntry } from "@/api/client";
 import EventSlideOver from "@/components/EventSlideOver.vue";
 import { useToastStore } from "@/stores/toast";
 import { fmtTime, fmtDateTime, fmtDayLabel } from "@/utils/dateFormat";
+import { MapPin } from "lucide-vue-next";
 
 const toast = useToastStore();
 const calendarRef = ref<InstanceType<typeof FullCalendar> | null>(null);
@@ -333,9 +334,7 @@ const upcomingGrouped = computed(() => {
                   </template>
                 </div>
                 <div v-if="ev.location" class="upcoming-card-meta">
-                  <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0">
-                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
-                  </svg>
+                  <MapPin :size="16" style="flex-shrink:0" />
                   {{ ev.location }}
                 </div>
                 <div v-if="ev.description" class="upcoming-card-desc">{{ ev.description }}</div>
@@ -367,9 +366,7 @@ const upcomingGrouped = computed(() => {
             </template>
           </div>
           <div v-if="popover.location" class="popover-meta">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0;margin-top:1px">
-              <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
-            </svg>
+            <MapPin :size="16" style="flex-shrink:0;margin-top:1px" />
             {{ popover.location }}
           </div>
           <div v-if="popover.description" class="popover-desc">{{ popover.description }}</div>

frontend/src/views/ChatView.vue

@@ -4,6 +4,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useChatStore } from "@/stores/chat";
 import { apiGet } from "@/api/client";
 import ChatPanel from "@/components/ChatPanel.vue";
+import { MoreVertical, Menu, Paperclip } from "lucide-vue-next";
 
 const route = useRoute();
 const router = useRouter();
@@ -314,9 +315,7 @@ onUnmounted(() => {
               aria-label="List actions"
               title="List actions"
             >
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                <circle cx="12" cy="5" r="1.75"/><circle cx="12" cy="12" r="1.75"/><circle cx="12" cy="19" r="1.75"/>
-              </svg>
+              <MoreVertical :size="16" />
             </button>
             <div v-if="sidebarKebabOpen" class="kebab-menu">
               <button
@@ -388,11 +387,7 @@ onUnmounted(() => {
       <template v-if="store.currentConversation">
         <div class="chat-header">
           <button class="btn-sidebar-toggle hide-desktop" aria-label="Toggle sidebar" @click="toggleSidebar">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <line x1="3" y1="6" x2="21" y2="6"/>
-              <line x1="3" y1="12" x2="21" y2="12"/>
-              <line x1="3" y1="18" x2="21" y2="18"/>
-            </svg>
+            <Menu :size="24" />
           </button>
           <h2>{{ store.currentConversation.title || "New Chat" }}</h2>
 
@@ -433,7 +428,7 @@ onUnmounted(() => {
             @click="toggleContextSidebar"
             :title="contextSidebarOpen ? 'Hide context panel' : 'Show context panel'"
           >
-            <span class="context-icon">📎</span>
+            <Paperclip class="context-icon" :size="16" />
             <span class="context-label">Context</span>
             <span class="context-count-badge">{{ contextCount }}</span>
           </button>
@@ -446,9 +441,7 @@ onUnmounted(() => {
               aria-label="Conversation actions"
               title="Conversation actions"
             >
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                <circle cx="12" cy="5" r="1.75"/><circle cx="12" cy="12" r="1.75"/><circle cx="12" cy="19" r="1.75"/>
-              </svg>
+              <MoreVertical :size="16" />
             </button>
             <div v-if="headerKebabOpen" class="kebab-menu kebab-menu--right">
               <button
@@ -470,11 +463,7 @@ onUnmounted(() => {
 
       <div v-else class="no-conversation">
         <button class="btn-sidebar-toggle no-conv-toggle hide-desktop" @click="toggleSidebar">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <line x1="3" y1="6" x2="21" y2="6"/>
-            <line x1="3" y1="12" x2="21" y2="12"/>
-            <line x1="3" y1="18" x2="21" y2="18"/>
-          </svg>
+          <Menu :size="24" />
         </button>
         <p>Select a conversation or start a new chat.</p>
         <button class="btn-new-conv" @click="newConversation">

frontend/src/views/GraphView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { X } from "lucide-vue-next";
 import { ref, onMounted, onUnmounted, watch, computed } from "vue";
 import { useRouter } from "vue-router";
 import { forceSimulation, forceLink, forceManyBody, forceX, forceY, forceCollide, SimulationNodeDatum, SimulationLinkDatum, Simulation } from "d3-force";
@@ -543,7 +544,7 @@ onUnmounted(() => {
                 :to="peekNode.type === 'task' ? `/tasks/${peekNode.id}/edit` : `/notes/${peekNode.id}/edit`"
                 class="peek-link"
               >Edit</router-link>
-              <button class="peek-close" @click="closePeek" title="Close (Esc)">✕</button>
+              <button class="peek-close" @click="closePeek" title="Close (Esc)"><X :size="16" /></button>
             </div>
           </div>
 

frontend/src/views/KnowledgeView.vue

@@ -7,6 +7,20 @@ import { useChatStore } from "@/stores/chat";
 import GraphView from "@/views/GraphView.vue";
 import ChatPanel from "@/components/ChatPanel.vue";
 import ChatInputBar from "@/components/ChatInputBar.vue";
+import {
+  FileText,
+  CheckSquare,
+  User,
+  MapPin,
+  List,
+  Search,
+  Share2,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  ChevronDown,
+  X,
+} from "lucide-vue-next";
 
 const router = useRouter();
 const chatStore = useChatStore();
@@ -426,23 +440,23 @@ onUnmounted(() => {
           </button>
           <div v-if="newNoteMenuOpen" class="new-note-menu">
             <button @click="createNew('note')">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+              <FileText :size="16" />
               Note
             </button>
             <button @click="createNew('task')">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
+              <CheckSquare :size="16" />
               Task
             </button>
             <button @click="createNew('person')">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+              <User :size="16" />
               Person
             </button>
             <button @click="createNew('place')">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+              <MapPin :size="16" />
               Place
             </button>
             <button @click="createNew('list')">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+              <List :size="16" />
               List
             </button>
           </div>
@@ -493,7 +507,7 @@ onUnmounted(() => {
         <!-- Toolbar -->
         <div class="knowledge-toolbar">
           <div class="search-wrap">
-            <svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+            <Search class="search-icon" :size="16" />
             <input
               v-model="searchQuery"
               @input="onSearchInput"
@@ -509,10 +523,7 @@ onUnmounted(() => {
             <option value="type">By type</option>
           </select>
           <button class="btn-graph" :class="{ active: graphOpen }" @click="toggleGraph" title="Toggle graph view">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
-              <path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98"/>
-            </svg>
+            <Share2 :size="16" />
             Graph
           </button>
         </div>
@@ -630,12 +641,12 @@ onUnmounted(() => {
               @click="toggleGraphExpand"
               :title="graphExpanded ? 'Narrow panel' : 'Expand panel'"
             >
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline v-if="graphExpanded" points="15 18 9 12 15 6"/>
-                <polyline v-else points="9 18 15 12 9 6"/>
-              </svg>
+              <ChevronLeft v-if="graphExpanded" :size="16" />
+              <ChevronRight v-else :size="16" />
+            </button>
+            <button class="btn-icon-sm" @click="toggleGraph" title="Close graph">
+              <X :size="16" />
             </button>
-            <button class="btn-icon-sm" @click="toggleGraph" title="Close graph">✕</button>
           </div>
         </div>
         <div class="graph-embed">
@@ -656,12 +667,12 @@ onUnmounted(() => {
             @click="chatCollapsed = !chatCollapsed"
             :title="chatCollapsed ? 'Expand' : 'Collapse'"
           >
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-              <polyline v-if="chatCollapsed" points="18 15 12 9 6 15"/>
-              <polyline v-else points="6 9 12 15 18 9"/>
-            </svg>
+            <ChevronUp v-if="chatCollapsed" :size="16" />
+            <ChevronDown v-else :size="16" />
+          </button>
+          <button class="btn-icon-sm" @click="closeChat" title="Close chat">
+            <X :size="16" />
           </button>
-          <button class="btn-icon-sm" @click="closeChat" title="Close chat">✕</button>
         </div>
       </div>
 

frontend/src/views/NoteViewerView.vue

@@ -9,6 +9,7 @@ import type { Note } from "@/types/note";
 import TagPill from "@/components/TagPill.vue";
 import TableOfContents from "@/components/TableOfContents.vue";
 import ShareDialog from "@/components/ShareDialog.vue";
+import { Clock, Pencil, Link as LinkIcon } from "lucide-vue-next";
 
 const route = useRoute();
 const router = useRouter();
@@ -238,12 +239,12 @@ async function convertToTask() {
         <h1 class="note-title">{{ store.currentNote.title || "Untitled" }}</h1>
         <p class="meta">
           <span class="meta-item">
-            <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg>
+            <Clock :size="16" />
             Updated {{ relativeTime(store.currentNote.updated_at) }}
           </span>
           <span class="meta-sep" aria-hidden="true">·</span>
           <span class="meta-item">
-            <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+            <Pencil :size="16" />
             Created {{ relativeTime(store.currentNote.created_at) }}
           </span>
         </p>
@@ -265,7 +266,7 @@ async function convertToTask() {
 
         <div v-if="backlinks.length" class="backlinks">
           <h3 class="backlinks-heading">
-            <svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor" aria-hidden="true"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>
+            <LinkIcon :size="16" />
             Backlinks
             <span class="backlinks-count">{{ backlinks.length }}</span>
           </h3>

frontend/src/views/ProjectView.vue

@@ -5,6 +5,16 @@ import { apiGet, apiPatch, apiDelete, apiPost } from "@/api/client";
 import { useToastStore } from "@/stores/toast";
 import { relativeTime } from "@/composables/useRelativeTime";
 import ShareDialog from "@/components/ShareDialog.vue";
+import {
+  LayoutGrid,
+  Clock,
+  FileText,
+  ChevronRight,
+  ChevronDown,
+  Pencil,
+  Trash2,
+  Check,
+} from "lucide-vue-next";
 
 interface Milestone {
   id: number;
@@ -330,7 +340,7 @@ async function confirmDelete() {
       <router-link to="/projects" class="btn-back">← Projects</router-link>
       <div class="page-header-actions">
         <router-link v-if="project" :to="`/workspace/${project.id}`" class="btn-workspace">
-          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
+          <LayoutGrid :size="16" />
           Workspace
         </router-link>
         <button v-if="project" class="btn-share" @click="showShare = true">Share</button>
@@ -359,7 +369,7 @@ async function confirmDelete() {
         </div>
         <p v-if="project.goal" class="project-goal">{{ project.goal }}</p>
         <p v-if="project.summary?.last_activity" class="project-activity">
-          <svg viewBox="0 0 24 24" width="11" height="11" fill="currentColor" aria-hidden="true"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg>
+          <Clock :size="16" />
           Active {{ relativeTime(project.summary.last_activity) }}
         </p>
       </div>
@@ -382,7 +392,7 @@ async function confirmDelete() {
           <span class="stat-label">done</span>
         </div>
         <div class="stat-chip stat-notes">
-          <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" aria-hidden="true" style="opacity:0.6"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>
+          <FileText :size="16" style="opacity:0.6" />
           <span class="stat-val">{{ project.summary.note_count }}</span>
           <span class="stat-label">notes</span>
         </div>
@@ -463,7 +473,8 @@ async function confirmDelete() {
                   @click="group.milestone && renamingMilestoneId !== group.milestone.id && toggleMilestoneCollapse(group.milestone.id)"
                 >
                   <span class="ms-chevron" v-if="group.milestone">
-                    <svg viewBox="0 0 24 24" width="10" height="10" fill="currentColor"><path :d="collapsedMilestones.has(group.milestone.id) ? 'M8 5l8 7-8 7V5z' : 'M5 8l7 8 7-8H5z'"/></svg>
+                    <ChevronRight v-if="collapsedMilestones.has(group.milestone.id)" :size="16" />
+                    <ChevronDown v-else :size="16" />
                   </span>
                   <template v-if="group.milestone && renamingMilestoneId === group.milestone.id">
                     <input
@@ -485,10 +496,10 @@ async function confirmDelete() {
                     <span class="ms-pct">{{ group.milestone.pct }}%</span>
                     <div class="ms-actions" @click.stop>
                       <button class="ms-action-btn" title="Rename" @click="startRenameMilestone(group.milestone)">
-                        <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+                        <Pencil :size="16" />
                       </button>
                       <button class="ms-action-btn ms-action-delete" title="Delete" @click="deletingMilestone = group.milestone">
-                        <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
+                        <Trash2 :size="16" />
                       </button>
                     </div>
                   </template>
@@ -554,7 +565,7 @@ async function confirmDelete() {
                             title="Mark as Done"
                             :disabled="advancingTaskId === task.id"
                             @click="advanceTaskStatus(task, $event)"
-                          >✓</button>
+                          ><Check :size="16" /></button>
                         </div>
                       </router-link>
                       <p v-if="!group.tasks.filter(t => t.status === 'in_progress').length" class="col-empty">No tasks</p>
@@ -598,7 +609,7 @@ async function confirmDelete() {
             </div>
             <template v-else>
               <router-link v-for="note in notes" :key="note.id" :to="`/notes/${note.id}`" class="note-row">
-                <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" class="note-icon" aria-hidden="true"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>
+                <FileText class="note-icon" :size="16" />
                 <span class="note-title">{{ note.title || "Untitled" }}</span>
                 <span class="note-date">{{ relativeTime(note.updated_at) }}</span>
               </router-link>

frontend/src/views/SettingsView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { X } from "lucide-vue-next";
 import { ref, computed, watch, onMounted } from "vue";
 import { useSettingsStore } from "@/stores/settings";
 import { useAuthStore } from "@/stores/auth";
@@ -2098,7 +2099,7 @@ function formatUserDate(iso: string): string {
                   class="btn-remove-slot"
                   @click="removeBlendSlot(idx)"
                   title="Remove this voice"
-                >✕</button>
+                ><X :size="16" /></button>
               </div>
             </div>
           </div>

frontend/src/views/TaskViewerView.vue

@@ -13,6 +13,7 @@ import PriorityBadge from "@/components/PriorityBadge.vue";
 import TagPill from "@/components/TagPill.vue";
 import TableOfContents from "@/components/TableOfContents.vue";
 import ShareDialog from "@/components/ShareDialog.vue";
+import { Clock, Pencil, Link as LinkIcon } from "lucide-vue-next";
 
 const route = useRoute();
 const router = useRouter();
@@ -314,12 +315,12 @@ const subTaskProgress = computed(() => {
         <h1 class="task-title">{{ store.currentTask.title || "Untitled" }}</h1>
         <p class="meta">
           <span class="meta-item">
-            <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg>
+            <Clock :size="16" />
             Updated {{ relativeTime(store.currentTask.updated_at) }}
           </span>
           <span class="meta-sep" aria-hidden="true">·</span>
           <span class="meta-item">
-            <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+            <Pencil :size="16" />
             Created {{ relativeTime(store.currentTask.created_at) }}
           </span>
         </p>
@@ -395,7 +396,7 @@ const subTaskProgress = computed(() => {
 
         <div v-if="backlinks.length" class="backlinks">
           <h3 class="backlinks-heading">
-            <svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor" aria-hidden="true"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>
+            <LinkIcon :size="16" />
             Backlinks
             <span class="backlinks-count">{{ backlinks.length }}</span>
           </h3>