diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index bb026e7..0a17ac3 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,7 +14,6 @@
         "@angular/forms": "^19.0.0",
         "@angular/platform-browser": "^19.0.0",
         "@angular/router": "^19.0.0",
-        "lucide-angular": "^0.545.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
@@ -6449,19 +6448,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/lucide-angular": {
-      "version": "0.545.0",
-      "resolved": "https://registry.npmjs.org/lucide-angular/-/lucide-angular-0.545.0.tgz",
-      "integrity": "sha512-uXAM660zZQftFn+co0OFD91GwLTuEYk1/qUaoRbI9rlttvF/m6KHYbESlJSdWXTWYUEkyhzeTvn0dVi9MomuNA==",
-      "license": "ISC",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "13.x - 20.x",
-        "@angular/core": "13.x - 20.x"
-      }
-    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 94273ae..05cbb6f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,7 +29,6 @@
     "@angular/forms": "^19.0.0",
     "@angular/platform-browser": "^19.0.0",
     "@angular/router": "^19.0.0",
-    "lucide-angular": "^0.545.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
diff --git a/frontend/src/app/app.ts b/frontend/src/app/app.ts
index 611d008..eea6301 100644
--- a/frontend/src/app/app.ts
+++ b/frontend/src/app/app.ts
@@ -3,12 +3,11 @@ import { CommonModule } from '@angular/common';
 import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
 import { provideHttpClient } from '@angular/common/http';
 import { ArtifactService } from './services/artifact';
-import { LucideAngularModule, Database, Upload, Search } from 'lucide-angular';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive, LucideAngularModule],
+  imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive],
   template: `
     <div class="container">
       <header>
@@ -21,13 +20,13 @@ import { LucideAngularModule, Database, Upload, Search } from 'lucide-angular';
 
       <nav class="tabs">
         <a routerLink="/artifacts" routerLinkActive="active" class="tab-button">
-          <lucide-icon [img]="Database" [size]="16"></lucide-icon> Artifacts
+          <span class="material-icons md-16">storage</span> Artifacts
         </a>
         <a routerLink="/upload" routerLinkActive="active" class="tab-button">
-          <lucide-icon [img]="Upload" [size]="16"></lucide-icon> Upload
+          <span class="material-icons md-16">upload</span> Upload
         </a>
         <a routerLink="/query" routerLinkActive="active" class="tab-button">
-          <lucide-icon [img]="Search" [size]="16"></lucide-icon> Query
+          <span class="material-icons md-16">search</span> Query
         </a>
       </nav>
 
@@ -39,9 +38,6 @@ import { LucideAngularModule, Database, Upload, Search } from 'lucide-angular';
 export class AppComponent implements OnInit {
   deploymentMode: string = '';
   storageBackend: string = '';
-  readonly Database = Database;
-  readonly Upload = Upload;
-  readonly Search = Search;
 
   constructor(private artifactService: ArtifactService) {}
 
diff --git a/frontend/src/app/components/artifacts-list/artifacts-list.html b/frontend/src/app/components/artifacts-list/artifacts-list.html
index 4d1defa..ad74e61 100644
--- a/frontend/src/app/components/artifacts-list/artifacts-list.html
+++ b/frontend/src/app/components/artifacts-list/artifacts-list.html
@@ -1,7 +1,7 @@
 <div class="artifacts-container">
   <div class="toolbar">
     <button (click)="loadArtifacts()" class="btn btn-primary">
-      <lucide-icon [img]="RefreshCw" [size]="16"></lucide-icon> Refresh
+      <span class="material-icons md-16">refresh</span> Refresh
     </button>
     <button (click)="toggleAutoRefresh()"
             [class.btn-success]="autoRefreshEnabled"
@@ -10,13 +10,13 @@
       Auto-refresh: {{ autoRefreshEnabled ? 'ON' : 'OFF' }}
     </button>
     <button (click)="generateSeedData()" class="btn btn-secondary">
-      <lucide-icon [img]="Sparkles" [size]="16"></lucide-icon> Generate Seed Data
+      <span class="material-icons md-16">auto_awesome</span> Generate Seed Data
     </button>
 
     <span class="count-badge">{{ filteredArtifacts.length }} artifacts</span>
 
     <div class="filter-inline">
-      <lucide-icon [img]="Search" [size]="16" class="search-icon"></lucide-icon>
+      <span class="material-icons md-16 search-icon">search</span>
       <input
         type="text"
         [(ngModel)]="searchTerm"
@@ -24,7 +24,7 @@
         placeholder="Search..."
         class="search-input">
       <button (click)="clearSearch()" class="btn-clear" *ngIf="searchTerm">
-        <lucide-icon [img]="X" [size]="14"></lucide-icon>
+        <span class="material-icons md-16">close</span>
       </button>
     </div>
   </div>
@@ -82,10 +82,10 @@
           <td>
             <div class="action-buttons">
               <button (click)="downloadArtifact(artifact, $event)" class="icon-btn" title="Download">
-                <lucide-icon [img]="Download" [size]="16"></lucide-icon>
+                <span class="material-icons md-16">download</span>
               </button>
               <button (click)="deleteArtifact(artifact, $event)" class="icon-btn danger" title="Delete">
-                <lucide-icon [img]="Trash2" [size]="16"></lucide-icon>
+                <span class="material-icons md-16">delete</span>
               </button>
             </div>
           </td>
@@ -179,10 +179,10 @@
       </div>
       <div class="modal-actions">
         <button (click)="downloadArtifact(selectedArtifact, $event)" class="btn btn-primary">
-          <lucide-icon [img]="Download" [size]="16"></lucide-icon> Download
+          <span class="material-icons md-16">download</span> Download
         </button>
         <button (click)="deleteArtifact(selectedArtifact, $event); closeDetail()" class="btn btn-danger">
-          <lucide-icon [img]="Trash2" [size]="16"></lucide-icon> Delete
+          <span class="material-icons md-16">delete</span> Delete
         </button>
       </div>
     </div>
diff --git a/frontend/src/app/components/artifacts-list/artifacts-list.ts b/frontend/src/app/components/artifacts-list/artifacts-list.ts
index 720fa75..916dfdd 100644
--- a/frontend/src/app/components/artifacts-list/artifacts-list.ts
+++ b/frontend/src/app/components/artifacts-list/artifacts-list.ts
@@ -5,12 +5,11 @@ import { ArtifactService } from '../../services/artifact';
 import { Artifact } from '../../models/artifact.model';
 import { interval, Subscription } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
-import { LucideAngularModule, RefreshCw, Search, X, Download, Trash2, Sparkles } from 'lucide-angular';
 
 @Component({
   selector: 'app-artifacts-list',
   standalone: true,
-  imports: [CommonModule, FormsModule, LucideAngularModule],
+  imports: [CommonModule, FormsModule],
   templateUrl: './artifacts-list.html',
   styleUrls: ['./artifacts-list.css']
 })
@@ -36,14 +35,6 @@ export class ArtifactsListComponent implements OnInit, OnDestroy {
   loading: boolean = false;
   error: string | null = null;
 
-  // Lucide icons
-  readonly RefreshCw = RefreshCw;
-  readonly Search = Search;
-  readonly X = X;
-  readonly Download = Download;
-  readonly Trash2 = Trash2;
-  readonly Sparkles = Sparkles;
-
   constructor(private artifactService: ArtifactService) {}
 
   ngOnInit() {
diff --git a/frontend/src/app/components/query-form/query-form.html b/frontend/src/app/components/query-form/query-form.html
index 452e4c2..2529a96 100644
--- a/frontend/src/app/components/query-form/query-form.html
+++ b/frontend/src/app/components/query-form/query-form.html
@@ -92,10 +92,10 @@
 
     <div class="button-group">
       <button type="submit" class="btn btn-primary btn-large">
-        <lucide-icon [img]="Search" [size]="18"></lucide-icon> Search
+        <span class="material-icons md-18">search</span> Search
       </button>
       <button type="button" (click)="clearForm()" class="btn btn-secondary">
-        <lucide-icon [img]="X" [size]="18"></lucide-icon> Clear
+        <span class="material-icons md-18">close</span> Clear
       </button>
     </div>
   </form>
diff --git a/frontend/src/app/components/query-form/query-form.ts b/frontend/src/app/components/query-form/query-form.ts
index a611b4c..a209f38 100644
--- a/frontend/src/app/components/query-form/query-form.ts
+++ b/frontend/src/app/components/query-form/query-form.ts
@@ -3,20 +3,17 @@ import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormBuilder, FormGroup } from '@angular/forms';
 import { ArtifactService } from '../../services/artifact';
 import { Artifact, ArtifactQuery } from '../../models/artifact.model';
-import { LucideAngularModule, Search, X } from 'lucide-angular';
 
 @Component({
   selector: 'app-query-form',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule],
+  imports: [CommonModule, ReactiveFormsModule],
   templateUrl: './query-form.html',
   styleUrls: ['./query-form.css']
 })
 export class QueryFormComponent {
   queryForm: FormGroup;
   @Output() resultsFound = new EventEmitter<Artifact[]>();
-  readonly Search = Search;
-  readonly X = X;
 
   constructor(
     private fb: FormBuilder,
diff --git a/frontend/src/app/components/upload-form/upload-form.html b/frontend/src/app/components/upload-form/upload-form.html
index 4317b9b..e52ddc0 100644
--- a/frontend/src/app/components/upload-form/upload-form.html
+++ b/frontend/src/app/components/upload-form/upload-form.html
@@ -98,7 +98,7 @@
     </div>
 
     <button type="submit" class="btn btn-primary btn-large" [disabled]="uploading">
-      <lucide-icon [img]="Upload" [size]="18"></lucide-icon>
+      <span class="material-icons md-18">upload</span>
       {{ uploading ? 'Uploading...' : 'Upload Artifact' }}
     </button>
   </form>
diff --git a/frontend/src/app/components/upload-form/upload-form.ts b/frontend/src/app/components/upload-form/upload-form.ts
index d50f131..69caa34 100644
--- a/frontend/src/app/components/upload-form/upload-form.ts
+++ b/frontend/src/app/components/upload-form/upload-form.ts
@@ -2,12 +2,11 @@ import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ArtifactService } from '../../services/artifact';
-import { LucideAngularModule, Upload } from 'lucide-angular';
 
 @Component({
   selector: 'app-upload-form',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule],
+  imports: [CommonModule, ReactiveFormsModule],
   templateUrl: './upload-form.html',
   styleUrls: ['./upload-form.css']
 })
@@ -16,7 +15,6 @@ export class UploadFormComponent {
   selectedFile: File | null = null;
   uploading: boolean = false;
   uploadStatus: { message: string, success: boolean } | null = null;
-  readonly Upload = Upload;
 
   constructor(
     private fb: FormBuilder,
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 3af61ec..bf5ba55 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -6,6 +6,7 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 151913b..0d04177 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -546,6 +546,27 @@ tr.clickable {
     color: #64748b;
 }
 
+/* Material Icons */
+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 20px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    vertical-align: middle;
+}
+
+.material-icons.md-16 { font-size: 16px; }
+.material-icons.md-18 { font-size: 18px; }
+.material-icons.md-20 { font-size: 20px; }
+.material-icons.md-24 { font-size: 24px; }
+
 @media (max-width: 768px) {
     .form-row {
         grid-template-columns: 1fr;