diff --git a/specifyweb/frontend/js_src/lib/components/Atoms/Icons.tsx b/specifyweb/frontend/js_src/lib/components/Atoms/Icons.tsx
index 5d526e9bd26..cefe3fcb775 100644
--- a/specifyweb/frontend/js_src/lib/components/Atoms/Icons.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Atoms/Icons.tsx
@@ -26,7 +26,6 @@ export const iconClassName = 'w-6 h-6 flex-shrink-0';
  */
 export const legacyNonJsxIcons = {
   arrowsExpand: `<svg class="${iconClassName}" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 11-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 012 0v1.586l2.293-2.293a1 1 0 111.414 1.414L6.414 15H8a1 1 0 010 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 010-2h1.586l-2.293-2.293a1 1 0 111.414-1.414L15 13.586V12a1 1 0 011-1z" clip-rule="evenodd"></path></svg>`,
-  ban: `<svg class="${iconClassName}" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd" /></svg>`,
   link: `<svg class="${iconClassName}" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" /><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" /></svg>`,
   printer: `<svg class="${iconClassName}" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 4v3H4a2 2 0 00-2 2v3a2 2 0 002 2h1v2a2 2 0 002 2h6a2 2 0 002-2v-2h1a2 2 0 002-2V9a2 2 0 00-2-2h-1V4a2 2 0 00-2-2H7a2 2 0 00-2 2zm8 0H7v3h6V4zm0 8H7v4h6v-4z" clip-rule="evenodd" /></svg>`,
 } as const;
diff --git a/specifyweb/frontend/js_src/lib/components/Molecules/SvgIcon.tsx b/specifyweb/frontend/js_src/lib/components/Molecules/SvgIcon.tsx
index 77bf5c00302..bc167939298 100644
--- a/specifyweb/frontend/js_src/lib/components/Molecules/SvgIcon.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Molecules/SvgIcon.tsx
@@ -60,6 +60,8 @@ export function SvgIcon({
       </g>
       <g>
         <text
+          alignmentBaseline="middle"
+          baselineShift="-10%"
           dominantBaseline="central"
           fill="#FFFFFF"
           fontFamily="Francois One,sans-serif"
diff --git a/specifyweb/frontend/js_src/lib/components/WorkBench/hotProps.tsx b/specifyweb/frontend/js_src/lib/components/WorkBench/hotProps.tsx
index e91763f109c..369922d229f 100644
--- a/specifyweb/frontend/js_src/lib/components/WorkBench/hotProps.tsx
+++ b/specifyweb/frontend/js_src/lib/components/WorkBench/hotProps.tsx
@@ -2,9 +2,8 @@ import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 
 import { wbPlanText } from '../../localization/wbPlan';
-import { f } from '../../utils/functools';
 import { icons } from '../Atoms/Icons';
-import { getTable } from '../DataModel/tables';
+import { TableIcon } from '../Molecules/TableIcon';
 import { userPreferences } from '../Preferences/userPreferences';
 import type { Dataset } from '../WbPlanView/Wrapped';
 import type { WbMapping } from './mapping';
@@ -62,23 +61,19 @@ export function useHotProps({
 
   const colHeaders = React.useCallback(
     (physicalCol: number) => {
-      const tableIcon = mappings?.mappedHeaders?.[physicalCol];
-      const isMapped = tableIcon !== undefined;
+      const tableIconUrl = mappings?.mappedHeaders?.[physicalCol];
+      const isMapped = tableIconUrl !== undefined;
       const mappingCol = physicalColToMappingCol(physicalCol);
       const tableName =
         (typeof mappingCol === 'number'
           ? mappings?.tableNames[mappingCol]
-          : undefined) ?? tableIcon?.split('/').slice(-1)?.[0]?.split('.')?.[0];
-      const tableLabel = isMapped
-        ? f.maybe(tableName, getTable)?.label ?? tableName ?? ''
-        : '';
-      // REFACTOR: use new table icons
+          : undefined) ?? tableIconUrl?.split('/').at(-1)?.split('.')[0];
+
       return ReactDOMServer.renderToString(
         <ColumnHeader
           columnName={dataset.columns[physicalCol]}
           isMapped={isMapped}
-          tableIcon={tableIcon}
-          tableLabel={tableLabel}
+          tableName={tableName}
         />
       );
     },
@@ -133,23 +128,17 @@ export function useHotProps({
 
 function ColumnHeader({
   isMapped,
-  tableLabel,
-  tableIcon,
   columnName,
+  tableName,
 }: {
   readonly isMapped: boolean;
-  readonly tableLabel: string;
-  readonly tableIcon: string | undefined;
   readonly columnName: string;
+  readonly tableName: string | undefined;
 }): JSX.Element {
   return (
     <div className="flex items-center gap-1 pl-4">
-      {isMapped ? (
-        <img
-          alt={tableLabel}
-          className="w-table-icon h-table-icon"
-          src={tableIcon}
-        />
+      {isMapped && tableName !== undefined ? (
+        <TableIcon label={false} name={tableName} />
       ) : (
         <span
           aria-label={wbPlanText.unmappedColumn()}