From c1e68c27c57c844442556e15398772ca5116ff04 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Mon, 13 Jul 2026 00:55:43 +0100
Subject: [PATCH] Portal Documents: SVG lock and timer icons (#7000)

# Description of Changes

Replaces the emoji lock and timer icons in the document queue and
extraction views with stroke SVG icons.

Part of a portal (processor) UI-consistency pass, split into small
focused PRs.

## Before / after

<!-- paste before / after screenshots here -->

---

## Checklist

### General

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [x] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have run `task check` to verify linters, typechecks, and tests
pass
- [x] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#7-testing)
for more details.
---
 .../src/portal/components/documents/DocumentExtractions.tsx | 3 ++-
 .../src/portal/components/documents/ElevationBanner.tsx     | 6 ++++--
 .../src/portal/components/documents/ReviewQueueTable.tsx    | 3 ++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/editor/src/portal/components/documents/DocumentExtractions.tsx b/frontend/editor/src/portal/components/documents/DocumentExtractions.tsx
index e43076dae3..3c6de80c93 100644
--- a/frontend/editor/src/portal/components/documents/DocumentExtractions.tsx
+++ b/frontend/editor/src/portal/components/documents/DocumentExtractions.tsx
@@ -1,4 +1,5 @@
 import { useTranslation } from "react-i18next";
+import LockRounded from "@mui/icons-material/LockRounded";
 import { StatusBadge, Table, type TableColumn } from "@app/ui";
 import { type Extraction, type ReviewDocument } from "@portal/api/documents";
 import {
@@ -55,7 +56,7 @@ export function DocumentExtractions({
     return (
       <div className="portal-documents__masked">
         <span className="portal-documents__masked-icon" aria-hidden>
-          🔒
+          <LockRounded style={{ fontSize: "1.5rem" }} />
         </span>
         <p className="portal-documents__masked-text">
           {t("portal.documents.extractions.masked")}
diff --git a/frontend/editor/src/portal/components/documents/ElevationBanner.tsx b/frontend/editor/src/portal/components/documents/ElevationBanner.tsx
index 429cd606cb..67a26ad1c2 100644
--- a/frontend/editor/src/portal/components/documents/ElevationBanner.tsx
+++ b/frontend/editor/src/portal/components/documents/ElevationBanner.tsx
@@ -1,4 +1,6 @@
 import { useTranslation } from "react-i18next";
+import ScheduleRounded from "@mui/icons-material/ScheduleRounded";
+import LockRounded from "@mui/icons-material/LockRounded";
 import { Banner, Button } from "@app/ui";
 import { formatCountdown } from "@portal/components/documents/format";
 
@@ -26,7 +28,7 @@ export function ElevationBanner({
     return (
       <Banner
         tone="success"
-        icon={<span aria-hidden>⏱</span>}
+        icon={<ScheduleRounded style={{ fontSize: "1.1rem" }} />}
         title={t("portal.documents.elevation.active.title", {
           time: formatCountdown(secondsLeft),
         })}
@@ -42,7 +44,7 @@ export function ElevationBanner({
   return (
     <Banner
       tone="warning"
-      icon={<span aria-hidden>🔒</span>}
+      icon={<LockRounded style={{ fontSize: "1.1rem" }} />}
       title={t("portal.documents.elevation.gated.title")}
       description={
         fourEyes
diff --git a/frontend/editor/src/portal/components/documents/ReviewQueueTable.tsx b/frontend/editor/src/portal/components/documents/ReviewQueueTable.tsx
index dffa7305d7..bff13d0c4f 100644
--- a/frontend/editor/src/portal/components/documents/ReviewQueueTable.tsx
+++ b/frontend/editor/src/portal/components/documents/ReviewQueueTable.tsx
@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import LockRounded from "@mui/icons-material/LockRounded";
 import { Button, Chip, StatusBadge, Table, type TableColumn } from "@app/ui";
 import {
   classificationTone,
@@ -75,7 +76,7 @@ export function ReviewQueueTable({
                   title={t("portal.documents.table.sensitiveTitle")}
                   aria-label={t("portal.documents.table.sensitiveLabel")}
                 >
-                  🔒
+                  <LockRounded style={{ fontSize: "0.95rem" }} />
                 </span>
               )}
             </div>