diff --git a/frontend/src/__tests__/group-edit-unrepresentable-permissions.test.ts b/frontend/src/__tests__/group-edit-unrepresentable-permissions.test.ts
index 4f260daf8..b83d88abe 100644
--- a/frontend/src/__tests__/group-edit-unrepresentable-permissions.test.ts
+++ b/frontend/src/__tests__/group-edit-unrepresentable-permissions.test.ts
@@ -252,7 +252,8 @@ describe('regression: group edit no longer drops/widens unrepresentable permissi
       const resourceSelect = document.querySelector('.perm-resource') as HTMLSelectElement;
 
       // No breakout payload parsed as a live element anywhere in the modal.
-      expect(document.querySelectorAll('img, script, svg, iframe, style').length).toBe(0);
+      // svg.icon is the Remove button's own trash icon (src/icons.ts), not injected markup.
+      expect(document.querySelectorAll('img, script, svg:not(.icon), iframe, style').length).toBe(0);
 
       // No extra <option> was smuggled in via the closing-tag breakout: the
       // action select is ALL_ACTIONS + the empty placeholder + the one
@@ -485,7 +486,8 @@ describe('regression: group edit preserves constraints.accounts (#1629)', () =>
     group.permissions = [{ action: 'view', resource: 'history', constraints: { accounts: [payload] } }];
     await openEdit(group);
 
-    expect(document.querySelectorAll('img, script, svg, iframe, style').length).toBe(0);
+    // svg.icon is the Remove button's own trash icon (src/icons.ts), not injected markup.
+    expect(document.querySelectorAll('img, script, svg:not(.icon), iframe, style').length).toBe(0);
     expect(accountsInput().value).toBe(payload);
 
     await clickSave();
diff --git a/frontend/src/__tests__/groups.test.ts b/frontend/src/__tests__/groups.test.ts
index f0d34d12b..5e319f30f 100644
--- a/frontend/src/__tests__/groups.test.ts
+++ b/frontend/src/__tests__/groups.test.ts
@@ -242,12 +242,18 @@ describe('groups/groupList', () => {
       groupList.renderGroups([xssGroup]);
 
       const container = document.getElementById('groups-list');
-      // Verify script tag is escaped (not executable)
-      expect(container?.innerHTML).not.toContain('<script>');
-      expect(container?.innerHTML).toContain('&lt;script&gt;');
-      // Verify img tag is escaped (not executable)
-      expect(container?.innerHTML).not.toContain('<img');
-      expect(container?.innerHTML).toContain('&lt;img');
+      // The name and description must stay text: no element is created
+      // from them anywhere in the card.
+      expect(container?.querySelector('script, img')).toBeNull();
+      expect(container?.querySelector('h4')?.textContent).toBe(xssGroup.name);
+      expect(container?.querySelector('.group-description')?.textContent).toBe(xssGroup.description);
+      // The icon buttons carry the name in aria-label. The attribute must
+      // round-trip the raw string, so a quote cannot end it early. (innerHTML
+      // serialises attribute values without escaping < and >, which is why
+      // this checks the DOM rather than the serialised markup.)
+      const edit = container?.querySelector('.edit-group-btn');
+      expect(edit?.getAttribute('aria-label')).toBe(`Edit group ${xssGroup.name}`);
+      expect(edit?.getAttributeNames().sort()).toEqual(['aria-label', 'class', 'data-group-id', 'title']);
     });
 
     it('should not render if container not found', () => {
diff --git a/frontend/src/__tests__/icons.test.ts b/frontend/src/__tests__/icons.test.ts
new file mode 100644
index 000000000..14bbd1814
--- /dev/null
+++ b/frontend/src/__tests__/icons.test.ts
@@ -0,0 +1,77 @@
+/**
+ * Tests for the shared SVG icon set (issue #751).
+ */
+import fs from 'fs';
+import path from 'path';
+import { createIcon, iconSvg, type IconName } from '../icons';
+import { showToast } from '../toast';
+
+const ALL: IconName[] = [
+  'alert-triangle', 'check', 'check-circle', 'chevron-down', 'chevron-right',
+  'chevron-up', 'chevrons-up-down', 'copy', 'download', 'edit', 'filter', 'info',
+  'pause', 'play', 'rotate-cw', 'settings', 'slash', 'trash-2', 'x', 'x-circle',
+];
+
+function parse(markup: string): SVGSVGElement {
+  const host = document.createElement('div');
+  host.innerHTML = markup;
+  return host.firstElementChild as SVGSVGElement;
+}
+
+describe('icons', () => {
+  it.each(ALL)('%s renders as a decorative currentColor SVG', (name) => {
+    const svg = parse(iconSvg(name));
+    expect(svg.tagName.toLowerCase()).toBe('svg');
+    expect(svg.getAttribute('class')).toBe(`icon icon-${name}`);
+    expect(svg.getAttribute('viewBox')).toBe('0 0 24 24');
+    expect(svg.getAttribute('stroke')).toBe('currentColor');
+    expect(svg.getAttribute('aria-hidden')).toBe('true');
+    expect(svg.getAttribute('focusable')).toBe('false');
+    expect(svg.childElementCount).toBeGreaterThan(0);
+  });
+
+  it.each(ALL)('createIcon(%s) builds the same SVG as iconSvg', (name) => {
+    const built = createIcon(name);
+    expect(built.namespaceURI).toBe('http://www.w3.org/2000/svg');
+    expect(built.outerHTML).toBe(parse(iconSvg(name)).outerHTML);
+  });
+
+  it('toasts use an SVG icon and an SVG close button for every kind', () => {
+    for (const kind of ['success', 'info', 'warning', 'error'] as const) {
+      showToast({ message: kind, kind, timeout: null });
+    }
+    const toasts = Array.from(document.querySelectorAll('.toast'));
+    expect(toasts).toHaveLength(4);
+    for (const t of toasts) {
+      expect(t.querySelector('.toast-icon svg.icon')).not.toBeNull();
+      expect(t.querySelector('.toast-icon')?.textContent).toBe('');
+      expect(t.querySelector('.toast-close svg.icon-x')).not.toBeNull();
+    }
+    document.body.replaceChildren();
+  });
+
+  // Regression guard: the platform-font glyphs replaced by the icon set
+  // must not creep back into the rendered UI. Comments and tests are
+  // allowed to name them.
+  it('the replaced Unicode icon glyphs no longer appear in UI source', () => {
+    const banned = /[⏸⏵✎⛛ⓘ⚙↻]|&#9432;|&#x26DB;|\\u26db|\\u2195/i;
+    const srcDir = path.join(__dirname, '..');
+    const offenders: string[] = [];
+    const walk = (dir: string): void => {
+      for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+        const full = path.join(dir, entry.name);
+        if (entry.isDirectory()) {
+          if (entry.name !== '__tests__') walk(full);
+          continue;
+        }
+        if (!/\.(ts|html)$/.test(entry.name) || entry.name === 'docs.html') continue;
+        fs.readFileSync(full, 'utf8').split('\n').forEach((line, i) => {
+          const code = line.replace(/\/\/.*$/, '').replace(/^\s*\*.*$/, '');
+          if (banned.test(code)) offenders.push(`${path.relative(srcDir, full)}:${i + 1}`);
+        });
+      }
+    };
+    walk(srcDir);
+    expect(offenders).toEqual([]);
+  });
+});
diff --git a/frontend/src/__tests__/plans-permissions.test.ts b/frontend/src/__tests__/plans-permissions.test.ts
index 53a4d835a..c59747c5b 100644
--- a/frontend/src/__tests__/plans-permissions.test.ts
+++ b/frontend/src/__tests__/plans-permissions.test.ts
@@ -135,6 +135,10 @@ describe('Plans page permission gating (issue #365)', () => {
       const buttons = Array.from(pp.querySelectorAll('td.actions button'));
       expect(buttons.length).toBeGreaterThanOrEqual(4);
       for (const b of buttons) expect(b.getAttribute('aria-label')).toBeTruthy();
+      // Issue #751: actions use the shared SVG icon set, not platform-font
+      // glyphs, and the money-triggering Run now action carries a text label.
+      for (const b of buttons) expect(b.querySelector('svg.icon')).not.toBeNull();
+      expect(pp.querySelector('button[data-action="run"]')?.textContent?.trim()).toBe('Run now');
     });
   });
 
diff --git a/frontend/src/__tests__/row-action-icons.test.ts b/frontend/src/__tests__/row-action-icons.test.ts
new file mode 100644
index 000000000..f1e3e8a41
--- /dev/null
+++ b/frontend/src/__tests__/row-action-icons.test.ts
@@ -0,0 +1,164 @@
+/**
+ * Icon-only row actions on the admin page (issue #751 review feedback).
+ *
+ * API key Revoke/Delete, the group editor's permission Remove, and the
+ * users/groups Edit, Duplicate and Delete actions used to be
+ * chunky text buttons. They now render an SVG from the shared icon set, so
+ * the accessible name has to come from aria-label. These tests pin the icon,
+ * the name a screen reader (and getByRole) sees, the tooltip, and that the
+ * click handlers still fire.
+ */
+import { getByRole, queryByRole } from '@testing-library/dom';
+import { loadApiKeys } from '../apikeys';
+import { addPermission } from '../groups/groupModals';
+import { renderGroups } from '../groups/groupList';
+import { renderUsers } from '../users/userList';
+import * as userState from '../users/state';
+
+jest.mock('../api', () => ({
+  getApiKeys: jest.fn(),
+  getApiKeysUsageStats: jest.fn(),
+  revokeApiKey: jest.fn(),
+  deleteApiKey: jest.fn(),
+}));
+
+const mockConfirmDialog = jest.fn<Promise<boolean>, [unknown]>(() => Promise.resolve(true));
+jest.mock('../confirmDialog', () => ({
+  confirmDialog: (opts: unknown) => mockConfirmDialog(opts),
+}));
+
+import * as api from '../api';
+
+function expectIconButton(btn: HTMLElement, icon: string, name: string): void {
+  expect(btn.classList.contains('icon-btn')).toBe(true);
+  expect(btn.querySelector(`svg.icon.icon-${icon}`)).not.toBeNull();
+  // No visible text: the name comes only from aria-label, the tooltip from title.
+  expect(btn.textContent?.trim()).toBe('');
+  expect(btn.getAttribute('aria-label')).toBe(name);
+  expect(btn.getAttribute('title')).toBe(name);
+}
+
+describe('API key row actions', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="apikeys-usage-summary"></div><div id="apikeys-list"></div>';
+    (api.getApiKeysUsageStats as jest.Mock).mockResolvedValue({
+      total_active: 1, total_requests_window: 0, total_requests_lifetime: 0, top_keys: [],
+    });
+    (api.getApiKeys as jest.Mock).mockResolvedValue({
+      api_keys: [
+        { id: 'k-active', name: 'CI', key_prefix: 'abc', is_active: true, created_at: '2026-01-01T00:00:00Z' },
+        { id: 'k-revoked', name: 'Old', key_prefix: 'def', is_active: false, created_at: '2026-01-01T00:00:00Z' },
+      ],
+    });
+    mockConfirmDialog.mockClear();
+  });
+
+  it('render as slash and trash icon buttons with accessible names', async () => {
+    await loadApiKeys();
+    const rows = document.querySelectorAll<HTMLElement>('#apikeys-list tbody tr');
+    expect(rows).toHaveLength(2);
+
+    const revoke = getByRole(rows[0]!, 'button', { name: 'Revoke API key' });
+    const del = getByRole(rows[0]!, 'button', { name: 'Delete API key' });
+    expectIconButton(revoke, 'slash', 'Revoke API key');
+    expectIconButton(del, 'trash-2', 'Delete API key');
+    // Warning/danger colour variants are kept.
+    expect(revoke.classList.contains('btn-warning')).toBe(true);
+    expect(del.classList.contains('btn-danger')).toBe(true);
+    // Side by side in one non-wrapping group.
+    expect(revoke.parentElement).toBe(del.parentElement);
+    expect(revoke.parentElement?.classList.contains('row-actions')).toBe(true);
+
+    // A revoked key offers only Delete.
+    expect(queryByRole(rows[1]!, 'button', { name: /Revoke/ })).toBeNull();
+    expect(getByRole(rows[1]!, 'button', { name: 'Delete API key' })).toBeTruthy();
+  });
+
+  it('keep their data attributes and confirm-then-act handlers', async () => {
+    (api.revokeApiKey as jest.Mock).mockResolvedValue({});
+    (api.deleteApiKey as jest.Mock).mockResolvedValue({});
+    await loadApiKeys();
+    const row = document.querySelector<HTMLElement>('#apikeys-list tbody tr')!;
+    const revoke = getByRole(row, 'button', { name: /Revoke/ });
+    expect(revoke.dataset['keyId']).toBe('k-active');
+
+    revoke.click();
+    await new Promise(resolve => setTimeout(resolve, 0));
+    expect(mockConfirmDialog).toHaveBeenCalledTimes(1);
+    expect(api.revokeApiKey).toHaveBeenCalledWith('k-active');
+
+    getByRole(row, 'button', { name: /Delete/ }).click();
+    await new Promise(resolve => setTimeout(resolve, 0));
+    expect(mockConfirmDialog).toHaveBeenCalledTimes(2);
+    expect(api.deleteApiKey).toHaveBeenCalledWith('k-active');
+  });
+});
+
+describe('group editor permission Remove', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="permissions-list"></div>';
+  });
+
+  it('is a trash icon button named "Remove permission" that still removes its row', () => {
+    addPermission({ action: 'view', resource: 'plans' });
+    addPermission({ action: 'update', resource: 'purchases' });
+    const list = document.getElementById('permissions-list')!;
+    expect(list.querySelectorAll('.permission-item')).toHaveLength(2);
+
+    const first = list.querySelector<HTMLElement>('.permission-item')!;
+    const remove = getByRole(first, 'button', { name: 'Remove permission' });
+    expectIconButton(remove, 'trash-2', 'Remove permission');
+    expect(remove.classList.contains('btn-danger')).toBe(true);
+    expect(remove.classList.contains('remove-permission-btn')).toBe(true);
+
+    remove.click();
+    expect(list.querySelectorAll('.permission-item')).toHaveLength(1);
+    expect(list.querySelector<HTMLSelectElement>('.perm-action')?.value).toBe('update');
+  });
+});
+
+describe('users table and group card actions', () => {
+  afterEach(() => {
+    document.body.replaceChildren();
+  });
+
+  it('users Edit/Delete are pencil and trash icon buttons with per-user names', () => {
+    document.body.innerHTML = '<div id="users-list"></div>';
+    renderUsers([
+      { id: 'u1', email: 'alice@example.com', groups: [], mfa_enabled: false },
+    ] as unknown as Parameters<typeof renderUsers>[0]);
+    const row = document.querySelector<HTMLElement>('#users-list tbody tr')!;
+    const edit = getByRole(row, 'button', { name: 'Edit user alice@example.com' });
+    const del = getByRole(row, 'button', { name: 'Delete user alice@example.com' });
+    expect(edit.querySelector('svg.icon-edit')).not.toBeNull();
+    expect(del.querySelector('svg.icon-trash-2')).not.toBeNull();
+    expect(edit.textContent?.trim()).toBe('');
+    expect(del.textContent?.trim()).toBe('');
+    expect(edit.getAttribute('title')).toBe('Edit user');
+    expect(del.getAttribute('title')).toBe('Delete user');
+    expect(del.classList.contains('btn-danger')).toBe(true);
+    expect(edit.parentElement?.classList.contains('row-actions')).toBe(true);
+  });
+
+  it('group Edit/Duplicate/Delete are icon buttons named after the group', () => {
+    document.body.innerHTML = '<div id="groups-list"></div>';
+    userState.setAllUsers([]);
+    renderGroups([
+      { id: 'g1', name: 'Ops', description: '', permissions: [], allowed_accounts: [] },
+    ] as unknown as Parameters<typeof renderGroups>[0]);
+    const card = document.querySelector<HTMLElement>('#groups-list .group-card')!;
+    const cases: Array<[string, string, string, string]> = [
+      ['Edit group Ops', 'edit', 'Edit group', 'edit-group-btn'],
+      ['Duplicate group Ops', 'copy', 'Duplicate group', 'duplicate-group-btn'],
+      ['Delete group Ops', 'trash-2', 'Delete group', 'delete-group-btn'],
+    ];
+    for (const [name, icon, title, cls] of cases) {
+      const btn = getByRole(card, 'button', { name });
+      expect(btn.querySelector(`svg.icon-${icon}`)).not.toBeNull();
+      expect(btn.textContent?.trim()).toBe('');
+      expect(btn.getAttribute('title')).toBe(title);
+      expect(btn.classList.contains(cls)).toBe(true);
+      expect(btn.dataset['groupId']).toBe('g1');
+    }
+  });
+});
diff --git a/frontend/src/apikeys.ts b/frontend/src/apikeys.ts
index 2f02d6a22..9dd178cf5 100644
--- a/frontend/src/apikeys.ts
+++ b/frontend/src/apikeys.ts
@@ -9,6 +9,7 @@ import { escapeHtml, formatDateTime, formatRelativeTime } from './utils';
 import { confirmDialog } from './confirmDialog';
 import { friendlyError } from './api/errors';
 import { showToast } from './toast';
+import { iconSvg } from './icons';
 import { openModal, closeModal } from './modal';
 import { showSkeletonRows, showSkeletonText, teardownSkeleton } from './lib/skeleton';
 import { parseLocalDateInputValue, toLocalDateInputValue } from './lib/local-date';
@@ -146,8 +147,10 @@ export function renderApiKeysList(): void {
               <td class="apikeys-count-cell">${countTotal}</td>
               <td>${key.expires_at ? formatDateTime(key.expires_at) : '<span class="text-muted">Never</span>'}</td>
               <td>
-                ${key.is_active && !isExpired ? `<button class="btn-small btn-warning revoke-key-btn" data-key-id="${escapeHtml(key.id)}">Revoke</button>` : ''}
-                <button class="btn-small btn-danger delete-key-btn" data-key-id="${escapeHtml(key.id)}">Delete</button>
+                <div class="row-actions">
+                  ${key.is_active && !isExpired ? `<button type="button" class="btn-small btn-warning icon-btn revoke-key-btn" data-key-id="${escapeHtml(key.id)}" aria-label="Revoke API key" title="Revoke API key">${iconSvg('slash')}</button>` : ''}
+                  <button type="button" class="btn-small btn-danger icon-btn delete-key-btn" data-key-id="${escapeHtml(key.id)}" aria-label="Delete API key" title="Delete API key">${iconSvg('trash-2')}</button>
+                </div>
               </td>
             </tr>
           `;
diff --git a/frontend/src/confirmDialog.ts b/frontend/src/confirmDialog.ts
index 6b5a7f136..495b1b440 100644
--- a/frontend/src/confirmDialog.ts
+++ b/frontend/src/confirmDialog.ts
@@ -16,6 +16,7 @@
  */
 
 import { FOCUSABLE_SELECTOR } from './modal';
+import { createIcon } from './icons';
 
 let dialogSeq = 0;
 
@@ -61,7 +62,7 @@ export function confirmDialog(opts: ConfirmDialogOptions): Promise<boolean> {
     closeBtn.type = 'button';
     closeBtn.className = 'modal-confirm-close';
     closeBtn.setAttribute('aria-label', 'Close');
-    closeBtn.textContent = '×';
+    closeBtn.appendChild(createIcon('x'));
     dialog.appendChild(closeBtn);
 
     const titleEl = document.createElement('h3');
diff --git a/frontend/src/federation.ts b/frontend/src/federation.ts
index f6240f71b..d53ce10db 100644
--- a/frontend/src/federation.ts
+++ b/frontend/src/federation.ts
@@ -10,6 +10,7 @@
 
 import { getFederationIaC } from './api';
 import { showToast } from './toast';
+import { createIcon } from './icons';
 
 // ---------------------------------------------------------------------------
 // Download helper
@@ -102,12 +103,12 @@ function makeFormatButton(opt: FormatOption, target: string, source: string): HT
   // .btn-download class together signal the click action).
   btn.setAttribute('aria-label', `Download ${opt.label} (${opt.sublabel}) for ${target.toUpperCase()}`);
 
-  // A leading ↓ glyph communicates "download" visually. aria-hidden so
-  // screen readers rely on the aria-label above, not the glyph.
+  // A leading download icon communicates "download" visually. aria-hidden
+  // so screen readers rely on the aria-label above, not the icon.
   const iconSpan = document.createElement('span');
   iconSpan.className = 'download-icon';
   iconSpan.setAttribute('aria-hidden', 'true');
-  iconSpan.textContent = '↓';
+  iconSpan.appendChild(createIcon('download'));
   btn.appendChild(iconSpan);
 
   const labelSpan = document.createElement('span');
diff --git a/frontend/src/groups/groupList.ts b/frontend/src/groups/groupList.ts
index 23830e26b..a3525b5a3 100644
--- a/frontend/src/groups/groupList.ts
+++ b/frontend/src/groups/groupList.ts
@@ -7,6 +7,7 @@ import { allUsers } from '../users/state';
 import { escapeHtml } from '../users/utils';
 import { openEditGroupModal, deleteGroup } from './groupActions';
 import { openDuplicateGroupModal } from './groupModals';
+import { iconSvg } from '../icons';
 import { isSystemManagedGroup, SYSTEM_GROUP_NOTE } from './systemGroups';
 
 /**
@@ -64,11 +65,13 @@ export function renderGroups(groups: APIGroup[]): void {
           </div>
           <div class="group-card-actions">
             <span class="badge">${memberCount} member${memberCount !== 1 ? 's' : ''}</span>
-            ${locked
-              ? `<span class="badge badge-muted system-group-badge" title="${escapeHtml(SYSTEM_GROUP_NOTE)}">System group<span class="sr-only">. ${escapeHtml(SYSTEM_GROUP_NOTE)}</span></span>`
-              : `<button class="btn-small edit-group-btn" data-group-id="${escapeHtml(group.id)}">Edit</button>`}
-            <button class="btn-small duplicate-group-btn" data-group-id="${escapeHtml(group.id)}" title="Duplicate">Duplicate</button>
-            ${locked ? '' : `<button class="btn-small btn-danger delete-group-btn" data-group-id="${escapeHtml(group.id)}">Delete</button>`}
+            <span class="row-actions">
+              ${locked
+                ? `<span class="badge badge-muted system-group-badge" title="${escapeHtml(SYSTEM_GROUP_NOTE)}">System group<span class="sr-only">. ${escapeHtml(SYSTEM_GROUP_NOTE)}</span></span>`
+                : `<button class="btn-small icon-btn edit-group-btn" data-group-id="${escapeHtml(group.id)}" aria-label="Edit group ${escapeHtml(group.name)}" title="Edit group">${iconSvg('edit')}</button>`}
+              <button class="btn-small icon-btn duplicate-group-btn" data-group-id="${escapeHtml(group.id)}" aria-label="Duplicate group ${escapeHtml(group.name)}" title="Duplicate group">${iconSvg('copy')}</button>
+              ${locked ? '' : `<button class="btn-small btn-danger icon-btn delete-group-btn" data-group-id="${escapeHtml(group.id)}" aria-label="Delete group ${escapeHtml(group.name)}" title="Delete group">${iconSvg('trash-2')}</button>`}
+            </span>
           </div>
         </div>
         <div class="group-card-body">
diff --git a/frontend/src/groups/groupModals.ts b/frontend/src/groups/groupModals.ts
index 704140c95..9adf77bd0 100644
--- a/frontend/src/groups/groupModals.ts
+++ b/frontend/src/groups/groupModals.ts
@@ -9,6 +9,7 @@ import { availableGroups } from '../users/state';
 import { escapeHtml, showError, showSuccess } from '../users/utils';
 import { loadUsers } from '../users/userActions';
 import { openModal, closeModal } from '../modal';
+import { iconSvg } from '../icons';
 import { clearGroupFormValidation, validateGroupForm } from './groupFormValidation';
 import { buildActionOptions, buildResourceOptions } from './permissionOptions';
 
@@ -197,7 +198,7 @@ export function addPermission(permission?: Permission): void {
           ${buildResourceOptions(permission?.resource)}
         </select>
       </label>
-      <button type="button" class="btn-small btn-danger remove-permission-btn">Remove</button>
+      <button type="button" class="btn-small btn-danger icon-btn remove-permission-btn" aria-label="Remove permission" title="Remove permission">${iconSvg('trash-2')}</button>
     </div>
     <div class="constraints-section">
       <h4>Constraints (Optional)</h4>
diff --git a/frontend/src/history.ts b/frontend/src/history.ts
index 0739cb5a1..01ee0e590 100644
--- a/frontend/src/history.ts
+++ b/frontend/src/history.ts
@@ -11,6 +11,7 @@ import { switchTab } from './navigation';
 import { confirmDialog } from './confirmDialog';
 import { approvalDetailsUnavailableMessage, buildApprovalDetailsBody } from './approval-details';
 import { showToast } from './toast';
+import { iconSvg } from './icons';
 import {
   historyTruncationMessage,
   mergeHistoryPages,
@@ -1063,7 +1064,7 @@ function renderPendingActionButtons(p: HistoryPurchase): string {
 function renderLineageLinks(p: HistoryPurchase): string[] {
   const lineage: string[] = [];
   if (p.retry_execution_id) {
-    lineage.push(`<a href="#history?execution=${encodeURIComponent(p.retry_execution_id)}" class="history-retry-link" title="Jump to the retry execution">↻ Retried as #${escapeHtml(shortExecID(p.retry_execution_id))}</a>`);
+    lineage.push(`<a href="#history?execution=${encodeURIComponent(p.retry_execution_id)}" class="history-retry-link" title="Jump to the retry execution">${iconSvg('rotate-cw')} Retried as #${escapeHtml(shortExecID(p.retry_execution_id))}</a>`);
   }
   if ((p.retry_attempt_n ?? 0) > 0) {
     // We don't carry a back-pointer field — a future enhancement
@@ -1074,7 +1075,7 @@ function renderLineageLinks(p: HistoryPurchase): string[] {
     // (api.getHistory), so the TS number type is not a runtime guarantee
     // and this value sits inside a title="..." attribute.
     const attemptN = Number(p.retry_attempt_n) || 0;
-    lineage.push(`<span class="history-retry-link history-retry-of" title="This row is retry #${attemptN} in its chain">↻ Retry #${attemptN}</span>`);
+    lineage.push(`<span class="history-retry-link history-retry-of" title="This row is retry #${attemptN} in its chain">${iconSvg('rotate-cw')} Retry #${attemptN}</span>`);
   }
   return lineage;
 }
@@ -1101,11 +1102,13 @@ function renderActionCell(p: HistoryPurchase): string {
       // Keep the lineage links next to the hint (issue #1040): a legacy row
       // retried before the re-drive gate (#967) now carries the permanent
       // hint, and the operator still needs the link to its successor.
-      return [`<span class="history-ops-hint" title="${title}">⚠ ${escapeHtml(p.ops_hint)}</span>`, ...renderLineageLinks(p)].join(' ');
+      return [`<span class="history-ops-hint" title="${title}">${iconSvg('alert-triangle')} ${escapeHtml(p.ops_hint)}</span>`, ...renderLineageLinks(p)].join(' ');
     }
     if (canRetryFailedRow(p) && p.purchase_id) {
       const overThreshold = retryThresholdReached(p);
-      const label = overThreshold ? `⚠ Retried ${Number(p.retry_attempt_n) || 0}× — click to override` : '↻ Retry';
+      const label = overThreshold
+        ? `${iconSvg('alert-triangle')} Retried ${Number(p.retry_attempt_n) || 0}× — click to override`
+        : `${iconSvg('rotate-cw')} Retry`;
       const cls = overThreshold ? 'btn-link history-retry-btn history-retry-over-threshold' : 'btn-link history-retry-btn';
       return `<button type="button" class="${cls}" data-retry-id="${escapeHtmlAttr(p.purchase_id)}">${label}</button>`;
     }
diff --git a/frontend/src/icons.ts b/frontend/src/icons.ts
new file mode 100644
index 000000000..8f6ef09d9
--- /dev/null
+++ b/frontend/src/icons.ts
@@ -0,0 +1,140 @@
+/**
+ * One SVG icon set for the whole UI (issue #751).
+ *
+ * Before this module the sidebar used inline Feather SVGs while row
+ * actions, toasts, sort arrows, filter triggers and tooltips used Unicode
+ * glyphs (▶ ⏸ ⏵ ✎ ✕ ↻ ⚠ ↕ ▲ ▼ ⛛ ⓘ ⚙︎). Those glyphs come from whatever
+ * font the platform picks, so their size and weight drift between
+ * browsers, and ⏸ / ⏵ / ⚠ can render as color emoji on macOS. Every icon
+ * here uses the same 24x24 grid, 2px round stroke and `currentColor`, so
+ * it inherits the surrounding text color and matches the sidebar icons.
+ *
+ * Shapes are copied from Feather (MIT, https://feathericons.com); the
+ * one icon Feather lacks, chevrons-up-down, comes from its fork Lucide
+ * (ISC, https://lucide.dev).
+ *
+ * Icons are decorative: both renderers set aria-hidden="true" and
+ * focusable="false", so callers must give the surrounding control a
+ * text label or an aria-label.
+ */
+
+type Attrs = Readonly<Record<string, string>>;
+type Shape = readonly [tag: 'path' | 'line' | 'polyline' | 'polygon' | 'circle' | 'rect', attrs: Attrs];
+
+const ICONS = {
+  'alert-triangle': [
+    ['path', { d: 'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z' }],
+    ['line', { x1: '12', y1: '9', x2: '12', y2: '13' }],
+    ['line', { x1: '12', y1: '17', x2: '12.01', y2: '17' }],
+  ],
+  check: [['polyline', { points: '20 6 9 17 4 12' }]],
+  'check-circle': [
+    ['path', { d: 'M22 11.08V12a10 10 0 1 1-5.93-9.14' }],
+    ['polyline', { points: '22 4 12 14.01 9 11.01' }],
+  ],
+  'chevron-down': [['polyline', { points: '6 9 12 15 18 9' }]],
+  'chevron-right': [['polyline', { points: '9 18 15 12 9 6' }]],
+  'chevron-up': [['polyline', { points: '18 15 12 9 6 15' }]],
+  'chevrons-up-down': [
+    ['path', { d: 'm7 15 5 5 5-5' }],
+    ['path', { d: 'm7 9 5-5 5 5' }],
+  ],
+  copy: [
+    ['rect', { x: '9', y: '9', width: '13', height: '13', rx: '2', ry: '2' }],
+    ['path', { d: 'M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1' }],
+  ],
+  download: [
+    ['path', { d: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' }],
+    ['polyline', { points: '7 10 12 15 17 10' }],
+    ['line', { x1: '12', y1: '15', x2: '12', y2: '3' }],
+  ],
+  edit: [['path', { d: 'M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z' }]],
+  filter: [['polygon', { points: '22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3' }]],
+  info: [
+    ['circle', { cx: '12', cy: '12', r: '10' }],
+    ['line', { x1: '12', y1: '16', x2: '12', y2: '12' }],
+    ['line', { x1: '12', y1: '8', x2: '12.01', y2: '8' }],
+  ],
+  pause: [
+    ['rect', { x: '6', y: '4', width: '4', height: '16' }],
+    ['rect', { x: '14', y: '4', width: '4', height: '16' }],
+  ],
+  play: [['polygon', { points: '5 3 19 12 5 21 5 3' }]],
+  'rotate-cw': [
+    ['polyline', { points: '23 4 23 10 17 10' }],
+    ['path', { d: 'M20.49 15a9 9 0 1 1-2.12-9.36L23 10' }],
+  ],
+  settings: [
+    ['circle', { cx: '12', cy: '12', r: '3' }],
+    ['path', { d: 'M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z' }],
+  ],
+  slash: [
+    ['circle', { cx: '12', cy: '12', r: '10' }],
+    ['line', { x1: '4.93', y1: '4.93', x2: '19.07', y2: '19.07' }],
+  ],
+  'trash-2': [
+    ['polyline', { points: '3 6 5 6 21 6' }],
+    ['path', { d: 'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2' }],
+    ['line', { x1: '10', y1: '11', x2: '10', y2: '17' }],
+    ['line', { x1: '14', y1: '11', x2: '14', y2: '17' }],
+  ],
+  x: [
+    ['line', { x1: '18', y1: '6', x2: '6', y2: '18' }],
+    ['line', { x1: '6', y1: '6', x2: '18', y2: '18' }],
+  ],
+  'x-circle': [
+    ['circle', { cx: '12', cy: '12', r: '10' }],
+    ['line', { x1: '15', y1: '9', x2: '9', y2: '15' }],
+    ['line', { x1: '9', y1: '9', x2: '15', y2: '15' }],
+  ],
+} as const satisfies Record<string, readonly Shape[]>;
+
+export type IconName = keyof typeof ICONS;
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+/** Attributes shared by every icon's <svg> root. Sized in em so the icon tracks the font size of its context. */
+function rootAttrs(name: IconName): Attrs {
+  return {
+    class: `icon icon-${name}`,
+    viewBox: '0 0 24 24',
+    width: '1em',
+    height: '1em',
+    fill: 'none',
+    stroke: 'currentColor',
+    'stroke-width': '2',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'aria-hidden': 'true',
+    focusable: 'false',
+  };
+}
+
+function attrString(attrs: Attrs): string {
+  return Object.entries(attrs).map(([k, v]) => `${k}="${v}"`).join(' ');
+}
+
+/**
+ * Markup for an icon, for use inside the template-literal renderers
+ * (`<button>${iconSvg('play')}</button>`). The output is built only from
+ * the constant table above, never from caller data, so it is safe to
+ * interpolate into innerHTML.
+ */
+export function iconSvg(name: IconName): string {
+  const shapes = (ICONS[name] as readonly Shape[])
+    .map(([tag, attrs]) => `<${tag} ${attrString(attrs)}/>`)
+    .join('');
+  return `<svg ${attrString(rootAttrs(name))}>${shapes}</svg>`;
+}
+
+/** DOM version of iconSvg for the createElement-based renderers that avoid innerHTML. */
+export function createIcon(name: IconName): SVGSVGElement {
+  const svg = document.createElementNS(SVG_NS, 'svg');
+  for (const [k, v] of Object.entries(rootAttrs(name))) svg.setAttribute(k, v);
+  for (const [tag, attrs] of ICONS[name] as readonly Shape[]) {
+    const child = document.createElementNS(SVG_NS, tag);
+    for (const [k, v] of Object.entries(attrs)) child.setAttribute(k, v);
+    svg.appendChild(child);
+  }
+  return svg;
+}
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 291f024b6..374bfadb6 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -334,7 +334,7 @@ <h2>Savings trends</h2>
                         <div class="section-header">
                             <h2>Convertible RI Exchange</h2>
                             <div class="section-header-actions">
-                                <button id="ri-exchange-settings-btn" class="btn btn-small" title="Jump to Exchange Automation settings in Admin → Purchasing policies">⚙︎ Exchange settings</button>
+                                <button id="ri-exchange-settings-btn" class="btn btn-small icon-label" title="Jump to Exchange Automation settings in Admin → Purchasing policies"><svg class="icon icon-settings" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg><span>Exchange settings</span></button>
                                 <button id="ri-exchange-refresh-btn" class="btn btn-small">Refresh</button>
                             </div>
                         </div>
@@ -382,7 +382,7 @@ <h2>Global Configuration</h2>
                                          three checkboxes below. Use a span with an id that the grouping
                                          div references via aria-labelledby instead. -->
                                     <span id="enabled-providers-label" class="label-like">Enabled Providers</span>
-                                    <span class="info-icon">&#9432;<span class="tooltip-text">Select which cloud providers to monitor for commitment recommendations.</span></span>
+                                    <span class="info-icon"><svg class="icon icon-info" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg><span class="tooltip-text">Select which cloud providers to monitor for commitment recommendations.</span></span>
                                 </div>
                                 <div class="setting-input" role="group" aria-labelledby="enabled-providers-label">
                                     <label><input type="checkbox" id="provider-aws" value="aws" checked> AWS</label>
@@ -393,7 +393,7 @@ <h2>Global Configuration</h2>
                             <div class="setting-row">
                                 <div class="setting-info">
                                     <label for="setting-notification-email">Notification Email</label>
-                                    <span class="info-icon">&#9432;<span class="tooltip-text">Email address for purchase notifications and approval requests.</span></span>
+                                    <span class="info-icon"><svg class="icon icon-info" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg><span class="tooltip-text">Email address for purchase notifications and approval requests.</span></span>
                                 </div>
                                 <div class="setting-input">
                                     <input type="email" id="setting-notification-email" placeholder="admin@example.com" required aria-label="Notification email address" autocomplete="email" autocapitalize="none" autocorrect="off">
@@ -406,7 +406,7 @@ <h2>Global Configuration</h2>
                                          input and provides the click target. aria-labelledby on the input keeps
                                          the descriptive text as the toggle's accessible name. Issue #464. -->
                                     <span id="setting-auto-collect-label">Auto-collect Recommendations</span>
-                                    <span class="info-icon">&#9432;<span class="tooltip-text">Automatically fetch recommendations from cloud providers on a schedule.</span></span>
+                                    <span class="info-icon"><svg class="icon icon-info" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg><span class="tooltip-text">Automatically fetch recommendations from cloud providers on a schedule.</span></span>
                                 </div>
                                 <div class="setting-input">
                                     <label class="toggle-label">
@@ -418,7 +418,7 @@ <h2>Global Configuration</h2>
                             <div class="setting-row sub-setting" id="collection-schedule-row">
                                 <div class="setting-info">
                                     <label for="setting-collection-schedule">Collection Schedule</label>
-                                    <span class="info-icon">&#9432;<span class="tooltip-text">How often to automatically fetch recommendations.</span></span>
+                                    <span class="info-icon"><svg class="icon icon-info" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg><span class="tooltip-text">How often to automatically fetch recommendations.</span></span>
                                 </div>
                                 <div class="setting-input">
                                     <select id="setting-collection-schedule">
@@ -431,7 +431,7 @@ <h2>Global Configuration</h2>
                             <div class="setting-row">
                                 <div class="setting-info">
                                     <label for="setting-notification-days">Notification Days Before Purchase</label>
-                                    <span class="info-icon">&#9432;<span class="tooltip-text">How many days before a scheduled purchase to send email notification.</span></span>
+                                    <span class="info-icon"><svg class="icon icon-info" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg><span class="tooltip-text">How many days before a scheduled purchase to send email notification.</span></span>
                                 </div>
                                 <div class="setting-input">
                                     <input type="number" id="setting-notification-days" value="3" min="1" max="30" inputmode="numeric" pattern="[0-9]*" autocomplete="off">
@@ -440,7 +440,7 @@ <h2>Global Configuration</h2>
                             <div class="setting-row">
                                 <div class="setting-info">
                                     <label for="setting-recs-stale-hours">Recommendations Cache Stale Threshold (hours)</label>
-                                    <span class="info-icon">&#9432;<span class="tooltip-text">Age (in hours) at which the recommendations cache is considered stale and a background refresh fires automatically. Set to 0 to disable automatic background refresh (the cron scheduler and manual Refresh button still work). Valid range: 0&ndash;8760 (up to one year). Default: 24.</span></span>
+                                    <span class="info-icon"><svg class="icon icon-info" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg><span class="tooltip-text">Age (in hours) at which the recommendations cache is considered stale and a background refresh fires automatically. Set to 0 to disable automatic background refresh (the cron scheduler and manual Refresh button still work). Valid range: 0&ndash;8760 (up to one year). Default: 24.</span></span>
                                 </div>
                                 <div class="setting-input">
                                     <input type="number" id="setting-recs-stale-hours" value="24" min="0" max="8760" step="1" inputmode="numeric" pattern="[0-9]*" autocomplete="off">
@@ -520,7 +520,7 @@ <h2>Purchasing Settings</h2>
                         <div class="setting-row">
                             <div class="setting-info">
                                 <label for="setting-recs-lookback-days"><span class="provider-badge aws">AWS</span> lookback period</label>
-                                <span class="info-icon">&#9432;<span class="tooltip-text">AWS Cost Explorer LookbackPeriodInDays. A longer window smooths out utilisation spikes but may under-represent recent workload changes. Default: 7 days.</span></span>
+                                <span class="info-icon"><svg class="icon icon-info" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg><span class="tooltip-text">AWS Cost Explorer LookbackPeriodInDays. A longer window smooths out utilisation spikes but may under-represent recent workload changes. Default: 7 days.</span></span>
                             </div>
                             <div class="setting-input">
                                 <select id="setting-recs-lookback-days">
@@ -757,7 +757,7 @@ <h2>Accounts</h2>
                         <p class="settings-description">Download pre-populated IaC to onboard a new account via workload identity federation. No long-lived credentials needed.</p>
                         <div class="target-cloud-row">
                             <label>Target cloud:</label>
-                            <span class="info-icon">&#9432;<span class="tooltip-text">The cloud where the new account lives. The downloaded IaC will be pre-configured to trust CUDly's current deployment.</span></span>
+                            <span class="info-icon"><svg class="icon icon-info" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg><span class="tooltip-text">The cloud where the new account lives. The downloaded IaC will be pre-configured to trust CUDly's current deployment.</span></span>
                             <div id="federation-target-cloud-pills" class="target-cloud-pills" role="group" aria-label="Target cloud"></div>
                         </div>
                         <div id="federation-setup-panel" class="federation-accounts"></div>
@@ -1000,7 +1000,7 @@ <h3>Automation Settings</h3>
                         <div class="setting-row">
                             <div class="setting-info">
                                 <label for="plan-auto-purchase">Auto-Purchase</label>
-                                <span class="info-icon">&#9432;<span class="tooltip-text">Automatically execute purchases according to the schedule. You'll receive email notifications before each purchase.</span></span>
+                                <span class="info-icon"><svg class="icon icon-info" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg><span class="tooltip-text">Automatically execute purchases according to the schedule. You'll receive email notifications before each purchase.</span></span>
                             </div>
                             <div class="setting-input">
                                 <label class="toggle-label">
@@ -1012,7 +1012,7 @@ <h3>Automation Settings</h3>
                         <div class="setting-row">
                             <div class="setting-info">
                                 <label for="plan-notify-days">Notify Days Before</label>
-                                <span class="info-icon">&#9432;<span class="tooltip-text">Send email notification this many days before each scheduled purchase.</span></span>
+                                <span class="info-icon"><svg class="icon icon-info" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg><span class="tooltip-text">Send email notification this many days before each scheduled purchase.</span></span>
                             </div>
                             <div class="setting-input">
                                 <input type="number" id="plan-notify-days" value="3" min="1" max="30" inputmode="numeric" pattern="[0-9]*" autocomplete="off">
@@ -1171,7 +1171,7 @@ <h2 id="group-modal-title">Create Group</h2>
             <div class="modal-content modal-wide">
                 <div class="modal-header-row">
                     <h2 id="group-duplicate-modal-title">Duplicate Group</h2>
-                    <button type="button" class="modal-close" id="close-group-duplicate-modal-btn" aria-label="Close">&times;</button>
+                    <button type="button" class="modal-close" id="close-group-duplicate-modal-btn" aria-label="Close"><svg class="icon icon-x" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
                 </div>
                 <form id="group-duplicate-form">
                     <div class="form-group">
diff --git a/frontend/src/ladder.ts b/frontend/src/ladder.ts
index 3c9e6ecfe..51f5e6323 100644
--- a/frontend/src/ladder.ts
+++ b/frontend/src/ladder.ts
@@ -16,6 +16,7 @@
 import * as api from './api';
 import { escapeHtml, formatDate } from './utils';
 import { showToast } from './toast';
+import { iconSvg } from './icons';
 import { openModal, closeModal } from './modal';
 import { canAccess } from './permissions';
 import { initLadderTimeline } from './ladder-timeline';
@@ -137,7 +138,7 @@ function renderLadderingSection(globalEnabled: boolean): string {
     <div class="modal-header">
       <h3 id="ladder-modal-title">Commitment Laddering Config</h3>
       <button type="button" class="modal-close" id="ladder-modal-close-btn"
-              aria-label="Close">&times;</button>
+              aria-label="Close">${iconSvg('x')}</button>
     </div>
     <div class="modal-body">
       <form id="ladder-config-form" novalidate>
diff --git a/frontend/src/lib/history-filter-popover.ts b/frontend/src/lib/history-filter-popover.ts
index 738c9003a..309bc74e6 100644
--- a/frontend/src/lib/history-filter-popover.ts
+++ b/frontend/src/lib/history-filter-popover.ts
@@ -21,6 +21,7 @@ import {
   type ColumnFilterKind,
 } from './column-filters';
 import { escapeHtmlAttr } from '../utils';
+import { iconSvg } from '../icons';
 
 export interface PopoverConfig<TColumnId extends string> {
   // Namespace of the owning table (e.g. 'history' / 'queue'). Both tables
@@ -379,7 +380,7 @@ export function renderHistoryFilterButton<TColumnId extends string>(
   );
   const safeColumn = escapeHtmlAttr(String(column));
   const safeScope = escapeHtmlAttr(scope);
-  // Use the same gear-style glyph (⛛) the recommendations popover
-  // uses so the two surfaces are visually identical to the user.
-  return `<button type="button" class="${cls}" data-filter-scope="${safeScope}" data-column="${safeColumn}" aria-haspopup="dialog" aria-expanded="false" aria-label="${ariaLabel}" title="${ariaLabel}">⛛</button>`;
+  // Use the same filter icon the recommendations popover uses so the
+  // two surfaces are visually identical to the user.
+  return `<button type="button" class="${cls}" data-filter-scope="${safeScope}" data-column="${safeColumn}" aria-haspopup="dialog" aria-expanded="false" aria-label="${ariaLabel}" title="${ariaLabel}">${iconSvg('filter')}</button>`;
 }
diff --git a/frontend/src/plans.ts b/frontend/src/plans.ts
index 85ee670da..3c7afd11e 100644
--- a/frontend/src/plans.ts
+++ b/frontend/src/plans.ts
@@ -7,6 +7,7 @@ import * as state from './state';
 import { buildCommitmentSummary, withIntro } from './commitmentSummary';
 import { formatDate, formatTerm, getStatusBadge, escapeHtml, escapeHtmlAttr, formatCurrency, CURRENCY_DEFAULT_DIGITS, NO_VALUE, providerBadgeHtml } from './utils';
 import { showToast } from './toast';
+import { iconSvg } from './icons';
 import { confirmDialog } from './confirmDialog';
 import type { PlansResponse, LocalPlan, SavePlanData } from './types';
 import { viewPlanHistory } from './history';
@@ -158,7 +159,7 @@ function renderPlannedPurchasesInternal(): void {
   const filterBtn = (column: state.PlansColumnId, lbl: string): string => {
     const active = filters[column] ? ' active' : '';
     const label = filters[column] ? `Filter ${lbl} \u2014 currently active` : `Filter ${lbl}`;
-    return `<button type="button" class="column-filter-btn${active}" data-column="${column}" aria-haspopup="dialog" aria-expanded="false" aria-label="${label}" title="${label}">\u26db</button>`;
+    return `<button type="button" class="column-filter-btn${active}" data-column="${column}" aria-haspopup="dialog" aria-expanded="false" aria-label="${label}" title="${label}">${iconSvg('filter')}</button>`;
   };
 
   const tbody = filtered.length === 0
@@ -460,11 +461,11 @@ function renderPlannedPurchaseRow(purchase: PlannedPurchase): string {
       <td class="savings">${savingsCell}</td>
       <td><span class="status-badges"><span class="status-badge ${statusClass}">${escapeHtml(purchase.status)}</span>${overdueBadge}</span>${overdueHintHtml}</td>
       <td class="actions">
-        ${canRunPurchase ? `<button data-action="run" data-id="${escapeHtmlAttr(purchase.id)}" class="btn-small primary" title="Run now" aria-label="Run now">▶</button>` : ''}
-        ${canPauseOrResumePurchase && isPending ? `<button data-action="pause" data-id="${escapeHtmlAttr(purchase.id)}" class="btn-small" title="Pause" aria-label="Pause">⏸</button>` : ''}
-        ${canPauseOrResumePurchase && isPaused ? `<button data-action="resume" data-id="${escapeHtmlAttr(purchase.id)}" class="btn-small" title="Resume" aria-label="Resume">⏵</button>` : ''}
-        ${canEditPlan ? `<button data-action="edit" data-id="${escapeHtmlAttr(purchase.id)}" data-plan-id="${escapeHtmlAttr(purchase.plan_id)}" class="btn-small" title="Edit Plan" aria-label="Edit Plan">✎</button>` : ''}
-        ${canDisablePlan ? `<button data-action="disable" data-id="${escapeHtmlAttr(purchase.id)}" class="btn-small danger" title="Cancel this purchase and disable its plan" aria-label="Cancel this purchase and disable its plan">✕</button>` : ''}
+        ${canRunPurchase ? `<button data-action="run" data-id="${escapeHtmlAttr(purchase.id)}" class="btn-small primary icon-label" title="Run now" aria-label="Run now">${iconSvg('play')}<span>Run now</span></button>` : ''}
+        ${canPauseOrResumePurchase && isPending ? `<button data-action="pause" data-id="${escapeHtmlAttr(purchase.id)}" class="btn-small" title="Pause" aria-label="Pause">${iconSvg('pause')}</button>` : ''}
+        ${canPauseOrResumePurchase && isPaused ? `<button data-action="resume" data-id="${escapeHtmlAttr(purchase.id)}" class="btn-small" title="Resume" aria-label="Resume">${iconSvg('play')}</button>` : ''}
+        ${canEditPlan ? `<button data-action="edit" data-id="${escapeHtmlAttr(purchase.id)}" data-plan-id="${escapeHtmlAttr(purchase.plan_id)}" class="btn-small" title="Edit Plan" aria-label="Edit Plan">${iconSvg('edit')}</button>` : ''}
+        ${canDisablePlan ? `<button data-action="disable" data-id="${escapeHtmlAttr(purchase.id)}" class="btn-small danger" title="Cancel this purchase and disable its plan" aria-label="Cancel this purchase and disable its plan">${iconSvg('x')}</button>` : ''}
       </td>
     </tr>
   `;
diff --git a/frontend/src/recommendations.ts b/frontend/src/recommendations.ts
index ec4a75082..8efa9d988 100644
--- a/frontend/src/recommendations.ts
+++ b/frontend/src/recommendations.ts
@@ -9,6 +9,7 @@ import { formatCurrency, formatTerm, escapeHtml, CURRENCY_DEFAULT_DIGITS, NO_VAL
 import { getRecommendationsFreshness, refreshRecommendations as refreshRecommendationsAPI } from './api/recommendations';
 import type { RecommendationsFreshness } from './api/recommendations';
 import { showToast } from './toast';
+import { createIcon, iconSvg } from './icons';
 import {
   isPaymentSupported,
   isSavingsPlanService,
@@ -748,11 +749,11 @@ function renderLookbackToolbar(): void {
     });
   }
 
-  // Info tooltip. textContent only (static constant, never API text) so
-  // there is no innerHTML injection surface.
+  // Info tooltip. DOM-built only (static icon, tooltip via textContent,
+  // never API text) so there is no innerHTML injection surface.
   const info = document.createElement('span');
   info.className = 'info-icon';
-  info.textContent = 'ⓘ'; // circled lowercase i
+  info.appendChild(createIcon('info'));
   const tip = document.createElement('span');
   tip.className = 'tooltip-text';
   tip.textContent = canEdit ? LOOKBACK_TOOLTIP : LOOKBACK_NO_PERMISSION_TOOLTIP;
@@ -1926,10 +1927,10 @@ function columnLabel(column: string): string {
 }
 
 function sortIndicator(column: string, active: string, direction: 'asc' | 'desc'): string {
-  if (column !== active) return '<span class="sort-indicator" aria-hidden="true">\u2195</span>';
+  if (column !== active) return `<span class="sort-indicator" aria-hidden="true">${iconSvg('chevrons-up-down')}</span>`;
   return direction === 'asc'
-    ? '<span class="sort-indicator active" aria-hidden="true">\u25B2</span>'
-    : '<span class="sort-indicator active" aria-hidden="true">\u25BC</span>';
+    ? `<span class="sort-indicator active" aria-hidden="true">${iconSvg('chevron-up')}</span>`
+    : `<span class="sort-indicator active" aria-hidden="true">${iconSvg('chevron-down')}</span>`;
 }
 
 // sortedRecommendations was removed in issues #225/#226: group-level sorting
@@ -3269,7 +3270,7 @@ function buildListMarkup(
     const active = filters[column] ? ' active' : '';
     const lbl = getColumnLabel(column, period);
     const label = filters[column] ? `Filter ${lbl} \u2014 currently active` : `Filter ${lbl}`;
-    return `<button type="button" class="column-filter-btn${active}" data-column="${column}" aria-haspopup="dialog" aria-expanded="false" aria-label="${label}" title="${label}">\u26db</button>`;
+    return `<button type="button" class="column-filter-btn${active}" data-column="${column}" aria-haspopup="dialog" aria-expanded="false" aria-label="${label}" title="${label}">${iconSvg('filter')}</button>`;
   };
   const colHeader = (col: ColumnDef): string => {
     const lbl = getColumnLabel(col.key, period);
@@ -3344,7 +3345,7 @@ function buildListMarkup(
         ? (accountNamesCache.get(spRep.cloud_account_id) || spRep.cloud_account_id)
         : '\u2014';
       const isSpExpanded = expandedSpGroups.has(sgk);
-      const spChevron = isSpExpanded ? '\u25bc' : '\u25b6';
+      const spChevron = iconSvg(isSpExpanded ? 'chevron-down' : 'chevron-right');
       const spSlugs = childCellKeys.map((ck) => groups.get(ck)![0]!.service);
       const spLabel = savingsPlansBucketLabel(spSlugs);
       const planTypeCount = childCellKeys.length;
@@ -3403,7 +3404,7 @@ function buildListMarkup(
         const childTermDisplay = selectedChildVariant
           ? formatTerm(selectedChildVariant.term)
           : formatTermRange(childSummary.termMin, childSummary.termMax);
-        const cellChevron = isCellExpanded ? '\u25bc' : '\u25b6';
+        const cellChevron = iconSvg(isCellExpanded ? 'chevron-down' : 'chevron-right');
         const childIdentityParts = [
           `${escapeHtml(childRep.resource_type)}${childRep.engine ? ` (${escapeHtml(childRep.engine)})` : ''}`,
         ];
@@ -3473,7 +3474,7 @@ function buildListMarkup(
       ? formatTerm(selectedVariant.term)
       : formatTermRange(summary.termMin, summary.termMax);
 
-    const chevron = isExpanded ? '\u25bc' : '\u25b6';
+    const chevron = iconSvg(isExpanded ? 'chevron-down' : 'chevron-right');
     const identityParts = [
       `${escapeHtml(rep.resource_type)}${rep.engine ? ` (${escapeHtml(rep.engine)})` : ''}`,
     ];
diff --git a/frontend/src/riexchange.ts b/frontend/src/riexchange.ts
index 52144a374..c419f5d1f 100644
--- a/frontend/src/riexchange.ts
+++ b/frontend/src/riexchange.ts
@@ -32,6 +32,7 @@ import type {
 import { openModal, closeModal } from './modal';
 import { showSkeletonRows, showSkeletonText, teardownSkeleton } from './lib/skeleton';
 import { canAccess } from './permissions';
+import { createIcon, iconSvg } from './icons';
 import { applyReadOnlySettings, isPermissionDeniedError } from './settings';
 import { showToast } from './toast';
 import { getCurrentUser } from './state';
@@ -409,7 +410,7 @@ function renderRIsTable(container: HTMLElement, accountID?: string): void {
     const active = filters[column] ? ' active' : '';
     const lbl = activeRiLabelFor(column);
     const label = filters[column] ? `Filter ${lbl} — currently active` : `Filter ${lbl}`;
-    return `<button type="button" class="column-filter-btn${active}" data-column="${column}" aria-haspopup="dialog" aria-expanded="false" aria-label="${escapeHtml(label)}" title="${escapeHtml(label)}">&#x26DB;</button>`;
+    return `<button type="button" class="column-filter-btn${active}" data-column="${column}" aria-haspopup="dialog" aria-expanded="false" aria-label="${escapeHtml(label)}" title="${escapeHtml(label)}">${iconSvg('filter')}</button>`;
   };
 
   container.innerHTML = `
@@ -934,7 +935,7 @@ function renderRecommendations(container: HTMLElement): void {
     const active = filters[column] ? ' active' : '';
     const lbl = riexLabelFor(column);
     const label = filters[column] ? `Filter ${lbl} — currently active` : `Filter ${lbl}`;
-    return `<button type="button" class="column-filter-btn${active}" data-column="${column}" aria-haspopup="dialog" aria-expanded="false" aria-label="${escapeHtml(label)}" title="${escapeHtml(label)}">⛛</button>`;
+    return `<button type="button" class="column-filter-btn${active}" data-column="${column}" aria-haspopup="dialog" aria-expanded="false" aria-label="${escapeHtml(label)}" title="${escapeHtml(label)}">${iconSvg('filter')}</button>`;
   };
 
   // Render an indexable list so per-row Exchange buttons can find the
@@ -1277,7 +1278,7 @@ export function openExchangeModal(riId: string, count: number, suggestedTargetTy
     const removeBtn = document.createElement('button');
     removeBtn.type = 'button';
     removeBtn.className = 'btn exchange-remove-target';
-    removeBtn.textContent = '×';
+    removeBtn.appendChild(createIcon('x'));
     removeBtn.setAttribute('aria-label', 'Remove target');
     removeBtn.addEventListener('click', () => {
       if (targetRows.length <= 1) return; // keep at least one row
diff --git a/frontend/src/settings.ts b/frontend/src/settings.ts
index 071785ab3..b882ef42f 100644
--- a/frontend/src/settings.ts
+++ b/frontend/src/settings.ts
@@ -11,6 +11,7 @@ import { friendlyError } from './api/errors';
 import { deleteAccount } from './settings-account-delete';
 import { reflectDirtyState } from './settings-subnav';
 import { showToast } from './toast';
+import { createIcon } from './icons';
 import { isValidCombination, getValidPaymentOptions, getValidTermOptions, getPaymentLabel, getCommitmentConfig, normalizePaymentValue } from './commitmentOptions';
 import { openModal, closeModal } from './modal';
 import { loadRecommendations } from './recommendations';
@@ -3755,7 +3756,7 @@ export function copyToClipboard(elementId: string): void {
     btn.replaceChildren();
     const tick = document.createElement('span');
     tick.className = 'copy-icon';
-    tick.textContent = '✓'; // ✓
+    tick.appendChild(createIcon('check'));
     btn.appendChild(tick);
     btn.classList.add('copied');
     setTimeout(() => {
diff --git a/frontend/src/styles/icons.css b/frontend/src/styles/icons.css
new file mode 100644
index 000000000..32362cc56
--- /dev/null
+++ b/frontend/src/styles/icons.css
@@ -0,0 +1,67 @@
+/* Shared SVG icon set (issue #751). Icons come from src/icons.ts and are
+ * sized in em, so they follow the font size of the control they sit in
+ * and take its text color through stroke="currentColor". */
+.icon {
+    display: inline-block;
+    flex-shrink: 0;
+    width: 1em;
+    height: 1em;
+    /* Sit on the text baseline like the glyphs they replaced. */
+    vertical-align: -0.125em;
+    pointer-events: none;
+}
+
+/* Icon followed by a text label (e.g. "Run now", "Retry", "Exchange settings"). */
+.icon-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3em;
+}
+
+
+/* The sort indicator's font-size is 0.75em, sized for the old ↕ ▲ ▼ glyphs
+ * whose ink filled the em box; the chevrons need a little more room to
+ * stay legible next to the header label. */
+th.sortable .sort-indicator .icon {
+    width: 1.25em;
+    height: 1.25em;
+}
+
+/* Icon-only row action (API key Revoke/Delete, user and group Edit/Delete,
+ * permission Remove). A compact square that keeps the colour variant it is
+ * combined with (.btn-warning, .btn-danger, plain .btn-small), so warning
+ * and danger still read as such. The element qualifier lets it override
+ * .btn-small's padding and margin regardless of stylesheet order. Callers
+ * must set aria-label and title, since the icon itself is aria-hidden. */
+button.icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+    margin: 0;
+    font-size: var(--cudly-fs-md);
+    line-height: 1;
+}
+
+/* A cell's icon buttons sit side by side and never wrap into a stack. */
+.row-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    white-space: nowrap;
+}
+
+/* Group editor: the Remove button shares a flex row with the Action and
+ * Resource labels, which wrap their selects. Stretching made it as tall as
+ * label + select; instead pin it to the row's bottom and give it the
+ * selects' height so it lines up with them. The 1rem offset matches the
+ * labels' bottom margin (.modal-content label in modals.css), which sits
+ * below each select. */
+.permission-item .form-row > .remove-permission-btn {
+    align-self: flex-end;
+    margin-bottom: 1rem;
+    width: 2.25rem;
+    height: 2.25rem;
+}
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index fb04d5eac..601e4de8f 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -11,6 +11,7 @@
 @import './mfa.css';
 @import './tabs.css';
 @import './charts.css';
+@import './icons.css';
 @import './plans.css';
 @import './settings.css';
 @import './responsive.css';
diff --git a/frontend/src/toast.ts b/frontend/src/toast.ts
index a043de2d4..0469f9341 100644
--- a/frontend/src/toast.ts
+++ b/frontend/src/toast.ts
@@ -19,6 +19,8 @@
  * of the upload).
  */
 
+import { createIcon, type IconName } from './icons';
+
 export type ToastKind = 'success' | 'info' | 'warning' | 'error';
 
 export interface ToastAction {
@@ -41,11 +43,11 @@ export interface ToastHandle {
 const DEFAULT_TIMEOUT_MS = 30_000;
 const CONTAINER_ID = 'toast-container';
 
-const KIND_ICONS: Record<ToastKind, string> = {
-  success: '\u2713',  // ✓
-  info: '\u2139',     // ℹ
-  warning: '\u26A0',  // ⚠
-  error: '\u2715',    // ✕
+const KIND_ICONS: Record<ToastKind, IconName> = {
+  success: 'check-circle',
+  info: 'info',
+  warning: 'alert-triangle',
+  error: 'x-circle',
 };
 
 function ensureContainer(): HTMLElement {
@@ -80,7 +82,7 @@ export function showToast(opts: ToastOptions): ToastHandle {
   const icon = document.createElement('span');
   icon.className = 'toast-icon';
   icon.setAttribute('aria-hidden', 'true');
-  icon.textContent = KIND_ICONS[kind];
+  icon.appendChild(createIcon(KIND_ICONS[kind]));
   toast.appendChild(icon);
 
   const body = document.createElement('div');
@@ -113,7 +115,7 @@ export function showToast(opts: ToastOptions): ToastHandle {
   closeBtn.type = 'button';
   closeBtn.className = 'toast-close';
   closeBtn.setAttribute('aria-label', 'Dismiss notification');
-  closeBtn.textContent = '\u00D7'; // ×
+  closeBtn.appendChild(createIcon('x'));
   closeBtn.addEventListener('click', () => handle.dismiss());
   toast.appendChild(closeBtn);
 
diff --git a/frontend/src/users/userList.ts b/frontend/src/users/userList.ts
index a5ff25da4..da971a056 100644
--- a/frontend/src/users/userList.ts
+++ b/frontend/src/users/userList.ts
@@ -19,6 +19,7 @@ import { openEditUserModal, deleteUser, refreshCurrentUserAccess } from './userA
 import { ADMINISTRATORS_GROUP_ID } from '../permissions';
 import { confirmDialog } from '../confirmDialog';
 import { getCurrentUser } from '../state';
+import { createIcon, iconSvg } from '../icons';
 
 // Placeholder row id withCurrentUser prepends when the API omits the caller.
 const SYNTHETIC_USER_ID = 'current';
@@ -104,7 +105,7 @@ export function renderUsers(users: APIUser[]): void {
               <input type="checkbox" class="user-checkbox" data-user-id="${escapeHtml(user.id)}" aria-label="Select ${escapeHtml(user.email)}" ${selectedUserIds.has(user.id) ? 'checked' : ''} ${user.id === SYNTHETIC_USER_ID ? 'disabled' : ''}>
             </td>
             <td>
-              <button class="btn-small btn-icon user-expand-btn" data-user-id="${escapeHtml(user.id)}" title="Expand" aria-label="Expand user ${escapeHtml(user.email)}" aria-expanded="false">&#x25B8;</button>
+              <button class="btn-small btn-icon user-expand-btn" data-user-id="${escapeHtml(user.id)}" title="Expand" aria-label="Expand user ${escapeHtml(user.email)}" aria-expanded="false">${iconSvg('chevron-right')}</button>
             </td>
             <td>
               <div class="user-email">
@@ -125,9 +126,9 @@ export function renderUsers(users: APIUser[]): void {
             <td><span class="text-muted">${user.created_at ? formatDate(user.created_at) : '-'}</span></td>
             <td><span class="text-muted">${user.last_login ? formatRelativeTime(user.last_login) : 'Never'}</span></td>
             <td>
-              <div class="action-buttons">
-                <button class="btn-small edit-user-btn" data-user-id="${escapeHtml(user.id)}" ${user.id === SYNTHETIC_USER_ID ? 'disabled' : ''} aria-label="Edit user ${escapeHtml(user.email)}">Edit</button>
-                <button class="btn-small btn-danger delete-user-btn" data-user-id="${escapeHtml(user.id)}" ${user.id === SYNTHETIC_USER_ID ? 'disabled' : ''} aria-label="Delete user ${escapeHtml(user.email)}">Delete</button>
+              <div class="action-buttons row-actions">
+                <button class="btn-small icon-btn edit-user-btn" data-user-id="${escapeHtml(user.id)}" ${user.id === SYNTHETIC_USER_ID ? 'disabled' : ''} aria-label="Edit user ${escapeHtml(user.email)}" title="Edit user">${iconSvg('edit')}</button>
+                <button class="btn-small btn-danger icon-btn delete-user-btn" data-user-id="${escapeHtml(user.id)}" ${user.id === SYNTHETIC_USER_ID ? 'disabled' : ''} aria-label="Delete user ${escapeHtml(user.email)}" title="Delete user">${iconSvg('trash-2')}</button>
               </div>
             </td>
           </tr>
@@ -439,11 +440,11 @@ function setupUserTableListeners(): void {
         if (user) panel.innerHTML = renderUserExpandPanel(user);
         expandRow.classList.remove('hidden');
         btn.setAttribute('aria-expanded', 'true');
-        btn.textContent = '\u25BE'; // ▾ down-pointing triangle
+        btn.replaceChildren(createIcon('chevron-down'));
       } else {
         expandRow.classList.add('hidden');
         btn.setAttribute('aria-expanded', 'false');
-        btn.textContent = '\u25B8'; // ▸ right-pointing triangle
+        btn.replaceChildren(createIcon('chevron-right'));
       }
     });
   });
diff --git a/frontend/tests-e2e/admin-row-actions.spec.ts b/frontend/tests-e2e/admin-row-actions.spec.ts
new file mode 100644
index 000000000..1a7aff906
--- /dev/null
+++ b/frontend/tests-e2e/admin-row-actions.spec.ts
@@ -0,0 +1,60 @@
+import { test, expect, type Page } from '@playwright/test';
+import { mockApi, seedAuth } from './fixtures/recs';
+
+// Issue #751 review feedback: the admin page's row actions are compact SVG
+// icon buttons. API key Revoke/Delete sit side by side instead of stacking,
+// and the group editor's Remove permission button lines up with the selects
+// instead of stretching to the height of label + select.
+
+const GROUP = {
+  id: 'g-ops', name: 'Ops', description: '', allowed_accounts: [],
+  permissions: [{ action: 'view', resource: 'plans' }, { action: 'update', resource: 'purchases' }],
+};
+
+async function openAdminUsers(page: Page): Promise<void> {
+  await page.route('**/*', route => new URL(route.request().url()).hostname === '127.0.0.1' ? route.fallback() : route.abort());
+  await seedAuth(page);
+  await mockApi(page);
+  await page.route('**/api/api-keys', route => route.fulfill({ json: { api_keys: [
+    { id: 'k1', name: 'ci', key_prefix: 'cud_a1', is_active: true, created_at: '2026-09-01T10:00:00Z' },
+  ] } }));
+  await page.route('**/api/api-keys/usage-stats', route => route.fulfill({ json: { total_active: 1, total_requests_window: 0, total_requests_lifetime: 0, top_keys: [] } }));
+  await page.route('**/api/users', route => route.fulfill({ json: { users: [] } }));
+  await page.route('**/api/groups', route => route.fulfill({ json: { groups: [GROUP] } }));
+  await page.route('**/api/groups/g-ops', route => route.fulfill({ json: GROUP }));
+  await page.goto('/admin/users');
+}
+
+test('API key Revoke and Delete are icon buttons side by side', async ({ page }) => {
+  await openAdminUsers(page);
+  const revoke = page.getByRole('button', { name: 'Revoke API key' });
+  const del = page.getByRole('button', { name: 'Delete API key' });
+  await expect(revoke).toBeVisible();
+  await expect(revoke.locator('svg.icon-slash')).toHaveCount(1);
+  await expect(del.locator('svg.icon-trash-2')).toHaveCount(1);
+  const r = (await revoke.boundingBox())!;
+  const d = (await del.boundingBox())!;
+  expect(Math.abs(r.y - d.y)).toBeLessThanOrEqual(1);
+  expect(d.x).toBeGreaterThan(r.x + r.width);
+  expect(d.x - (r.x + r.width)).toBeLessThanOrEqual(8);
+  expect(r.height).toBeLessThanOrEqual(32);
+});
+
+test('Remove permission is a small icon button aligned with the selects', async ({ page }) => {
+  await openAdminUsers(page);
+  await page.locator('.edit-group-btn[data-group-id="g-ops"]').click();
+  const rows = page.locator('#permissions-list .permission-item');
+  await expect(rows).toHaveCount(2);
+  const removes = page.getByRole('button', { name: 'Remove permission' });
+  await expect(removes).toHaveCount(2);
+  for (const row of await rows.all()) {
+    const sel = (await row.locator('select.perm-resource').boundingBox())!;
+    const btn = (await row.getByRole('button', { name: 'Remove permission' }).boundingBox())!;
+    expect(Math.abs(btn.y - sel.y)).toBeLessThanOrEqual(1);
+    expect(Math.abs(btn.height - sel.height)).toBeLessThanOrEqual(1);
+    expect(btn.width).toBeLessThanOrEqual(btn.height + 1);
+    expect(btn.x).toBeGreaterThan(sel.x + sel.width);
+  }
+  await removes.first().click();
+  await expect(rows).toHaveCount(1);
+});