diff --git a/components/frontend/src/measurement/StatusIcon.css b/components/frontend/src/measurement/StatusIcon.css
deleted file mode 100644
index 4967fc5e92..0000000000
--- a/components/frontend/src/measurement/StatusIcon.css
+++ /dev/null
@@ -1,26 +0,0 @@
-i.inverted.circular.icon.target_met {
-    background-color: rgb(30, 148, 78) !important;
-}
-
-i.inverted.circular.icon.target_not_met {
-    background-color: rgb(211, 59, 55) !important;
-}
-
-i.inverted.circular.icon.near_target_met {
-    background-color: rgb(253, 197, 54) !important;
-}
-
-i.inverted.circular.icon.debt_target_met {
-    background-color: rgb(140, 140, 140) !important;
-}
-
-i.inverted.circular.icon.informative {
-    background-color: rgb(0, 165, 255) !important;
-}
-
-i.inverted.circular.icon.unknown {
-    background-color: rgb(245, 245, 245) !important;
-    color: rgb(0, 0, 0);
-    border: solid 1px;
-    border-color: rgb(140, 140, 140);
-}
diff --git a/components/frontend/src/measurement/StatusIcon.js b/components/frontend/src/measurement/StatusIcon.js
index 0d290e4289..15b536d90a 100644
--- a/components/frontend/src/measurement/StatusIcon.js
+++ b/components/frontend/src/measurement/StatusIcon.js
@@ -1,27 +1,26 @@
-import "./StatusIcon.css"
-
+import { Avatar } from "@mui/material"
 import { instanceOf, oneOfType, string } from "prop-types"
-import { Icon } from "semantic-ui-react"
 
-import { STATUS_SHORT_NAME, statusPropType } from "../metric/status"
+import { STATUS_COLORS_MUI, STATUS_ICONS, STATUS_SHORT_NAME, statusPropType } from "../metric/status"
 import { Popup } from "../semantic_ui_react_wrappers"
 import { TimeAgoWithDate } from "../widgets/TimeAgoWithDate"
 
-export function StatusIcon({ status, status_start, size }) {
+export function StatusIcon({ status, statusStart, size }) {
     status = status || "unknown"
-    const icon_name = {
-        target_met: "check",
-        near_target_met: "warning",
-        debt_target_met: "money",
-        target_not_met: "bolt",
-        informative: "info",
-        unknown: "question",
-    }[status]
+    const sizes = { small: 20, tiny: 12, undefined: 32 }
     const statusName = STATUS_SHORT_NAME[status]
-    const icon = <Icon aria-label={statusName} className={status} inverted circular name={icon_name} size={size} />
-    return status_start ? (
+    // Use Avatar to create a round inverted icon:
+    const icon = (
+        <Avatar
+            aria-label={statusName}
+            sx={{ width: sizes[size], height: sizes[size], bgcolor: STATUS_COLORS_MUI[status] }}
+        >
+            {STATUS_ICONS[status]}
+        </Avatar>
+    )
+    return statusStart ? (
         <Popup trigger={icon} flowing hoverable>
-            <TimeAgoWithDate date={status_start}>{`${statusName} since`}</TimeAgoWithDate>
+            <TimeAgoWithDate date={statusStart}>{`${statusName} since`}</TimeAgoWithDate>
         </Popup>
     ) : (
         icon
@@ -29,6 +28,6 @@ export function StatusIcon({ status, status_start, size }) {
 }
 StatusIcon.propTypes = {
     status: statusPropType,
-    status_start: oneOfType([string, instanceOf(Date)]),
+    statusStart: oneOfType([string, instanceOf(Date)]),
     size: string,
 }
diff --git a/components/frontend/src/measurement/StatusIcon.test.js b/components/frontend/src/measurement/StatusIcon.test.js
index 0ad025df06..909060dc5f 100644
--- a/components/frontend/src/measurement/StatusIcon.test.js
+++ b/components/frontend/src/measurement/StatusIcon.test.js
@@ -21,7 +21,7 @@ it("renders a question mark if the status is missing", () => {
 it("renders a popup with the date the status started", async () => {
     let startDate = new Date()
     startDate.setDate(startDate.getDate() - 4)
-    const { queryByLabelText, queryByText } = render(<StatusIcon status="target_met" status_start={startDate} />)
+    const { queryByLabelText, queryByText } = render(<StatusIcon status="target_met" statusStart={startDate} />)
     await userEvent.hover(queryByLabelText(/Target met/))
     await waitFor(() => {
         expect(queryByText("4 days ago")).not.toBe(null)
diff --git a/components/frontend/src/metric/Target.js b/components/frontend/src/metric/Target.js
index 315ad3a067..5c4521a7d5 100644
--- a/components/frontend/src/metric/Target.js
+++ b/components/frontend/src/metric/Target.js
@@ -56,9 +56,8 @@ function ColoredSegment({ children, color, show, status }) {
         <Segment inverted color={color}>
             <Segment inverted={darkMode}>
                 <Header>
-                    <span>
-                        {STATUS_SHORT_NAME[status]} <StatusIcon status={status} size="tiny" />
-                    </span>
+                    {STATUS_SHORT_NAME[status]}&nbsp;
+                    <StatusIcon status={status} size="tiny" />
                     <Header.Subheader>{capitalize(color)}</Header.Subheader>
                 </Header>
                 <b>{children}</b>
diff --git a/components/frontend/src/metric/status.js b/components/frontend/src/metric/status.js
index cef2ff999c..087a4ae103 100644
--- a/components/frontend/src/metric/status.js
+++ b/components/frontend/src/metric/status.js
@@ -1,5 +1,7 @@
 // Metric status constants
 
+import { Bolt, Check, Money, QuestionMark, Warning } from "@mui/icons-material"
+import { blue, green, grey, orange, red } from "@mui/material/colors"
 import { oneOf } from "prop-types"
 
 import { HyperLink } from "../widgets/HyperLink"
@@ -23,6 +25,22 @@ export const STATUS_COLORS_RGB = {
     informative: "rgb(0,165,255)",
     unknown: "rgb(245,245,245)",
 }
+export const STATUS_COLORS_MUI = {
+    target_not_met: red[700],
+    target_met: green[600],
+    near_target_met: orange[300],
+    debt_target_met: grey[500],
+    informative: blue[500],
+    unknown: grey[300],
+}
+export const STATUS_ICONS = {
+    target_met: <Check />,
+    near_target_met: <Warning />,
+    debt_target_met: <Money />,
+    target_not_met: <Bolt />,
+    informative: <b>i</b>,
+    unknown: <QuestionMark />,
+}
 export const STATUS_NAME = {
     informative: "Informative",
     target_met: "Target met",
diff --git a/components/frontend/src/subject/SubjectTableRow.js b/components/frontend/src/subject/SubjectTableRow.js
index b62138dea3..705951900e 100644
--- a/components/frontend/src/subject/SubjectTableRow.js
+++ b/components/frontend/src/subject/SubjectTableRow.js
@@ -301,7 +301,7 @@ export function SubjectTableRow({
             )}
             {nrDates === 1 && settings.hiddenColumns.excludes("status") && (
                 <Table.Cell textAlign="center">
-                    <StatusIcon status={metric.status} status_start={metric.status_start} />
+                    <StatusIcon status={metric.status} statusStart={metric.status_start} />
                 </Table.Cell>
             )}
             {nrDates === 1 && settings.hiddenColumns.excludes("measurement") && (