Fleet UI: Update icons (6 icons only) (#11907)

changes/8962-update-icons

@@ -0,0 +1 @@
+- Cleaner icons

frontend/components/DeviceUserError/DeviceUserError.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import ErrorIcon from "../../../assets/images/icon-error-16x16@2x.png";
+import Icon from "components/Icon/Icon";
 
 const baseClass = "device-user-error";
 
@@ -10,7 +10,7 @@ const DeviceUserError = (): JSX.Element => {
       <div className={`${baseClass}__inner`}>
         <div className="info">
           <span className="info__header">
-            <img src={ErrorIcon} alt="error icon" id="error-icon" />
+            <Icon name="error-outline" />
             This URL is invalid or expired.
           </span>
           <span className="info__data">

frontend/components/DeviceUserError/_styles.scss

@@ -3,13 +3,6 @@
   flex-direction: column;
   align-items: center;
 
-  #error-icon {
-    height: 12px;
-    width: 12px;
-    margin-right: 8px;
-    margin-bottom: -1px;
-  }
-
   &__inner {
     display: flex;
     flex-direction: row;
@@ -23,6 +16,13 @@
       font-weight: $bold;
       font-size: $x-small;
       text-align: center;
+
+      .icon {
+        vertical-align: sub;
+        margin-right: $pad-small;
+        position: relative;
+        bottom: 1px;
+      }
     }
     &__data {
       display: block;

frontend/components/FlashMessage/FlashMessage.tsx

@@ -3,12 +3,11 @@ import classnames from "classnames";
 
 import { INotification } from "interfaces/notification";
 // @ts-ignore
-import FleetIcon from "components/icons/FleetIcon";
+import Icon from "components/Icon/Icon";
 import Button from "components/buttons/Button";
 
 import CloseIcon from "../../../assets/images/icon-close-white-16x16@2x.png";
 import CloseIconBlack from "../../../assets/images/icon-close-fleet-black-16x16@2x.png";
-import ErrorIcon from "../../../assets/images/icon-error-white-16x16@2x.png";
 
 const baseClass = "flash-message";
 
@@ -71,11 +70,10 @@ const FlashMessage = ({
   return (
     <div className={baseClasses} id={baseClasses}>
       <div className={`${baseClass}__content`}>
-        {alertType === "success" ? (
-          <FleetIcon name="success-check" />
-        ) : (
-          <img alt="error icon" src={ErrorIcon} />
-        )}
+        <Icon
+          name={alertType === "success" ? "success" : "error"}
+          color="core-fleet-white"
+        />
         <span>{message}</span>
         {onUndoActionClick && undoAction && (
           <Button

frontend/components/Icon/_styles.scss

@@ -2,4 +2,6 @@
   // keeps this element the same size as the svg
   // aligns properly in text, buttons, dropdowns, summary tile custom component
   display: inline-flex;
+  // keeps svg vertically centered for non-16px icons (e.g., arrow-internal-link)
+  align-self: center;
 }

frontend/components/StatusIndicator/_styles.scss

@@ -36,26 +36,6 @@
     }
   }
 
-  // policy status
-  &--yes:before {
-    padding-right: 10px;
-    content: url(../assets/images/icon-check-circle-green-16x16@2x.png);
-    transform: translate(-4px, -6px) scale(0.5);
-  }
-  &--no:before {
-    padding-right: 8px;
-    content: url(../assets/images/icon-action-fail-16x16@2x.png);
-    transform: translate(-4px, -6px) scale(0.5);
-  }
-  &--indeterminate {
-    color: $ui-fleet-black-50;
-    &:before {
-      height: 0;
-      width: 0;
-      margin: 0;
-    }
-  }
-
   // user status
   &--active {
     &:before {

frontend/components/StatusIndicatorWithIcon/StatusIndicatorWithIcon.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta<typeof StatusIndicatorWithIcon> = {
   component: StatusIndicatorWithIcon,
   args: {
     status: "success",
-    value: "100",
+    value: "Yes",
     tooltip: {
       tooltipText: "Tooltip text",
     },

frontend/components/TableContainer/_styles.scss

@@ -175,5 +175,9 @@
       display: block;
       text-overflow: ellipsis;
     }
+
+    .icon {
+      vertical-align: sub;
+    }
   }
 }

frontend/components/buttons/ActionButtons/ActionButtons.tsx

@@ -63,9 +63,6 @@ const ActionButtons = ({ baseClass, actions }: IProps): JSX.Element => {
                 <Button variant="text-icon" onClick={action.onClick}>
                   <>
                     {action.label}
-                    {action.icon && (
-                      <img src={action.icon} alt={action.label} />
-                    )}
                     {action.iconSvg && <Icon name={action.iconSvg} />}
                   </>
                 </Button>

frontend/components/icons/Arrow.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { COLORS, Colors } from "styles/var/colors";
+
+interface IArrowProps {
+  color?: Colors;
+}
+
+const Arrow = ({ color = "core-fleet-blue" }: IArrowProps) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.293 3.707a1 1 0 0 1 1.414-1.414l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L12.586 9H1a1 1 0 0 1 0-2h11.586L9.293 3.707Z"
+        fill={COLORS[color]}
+      />
+    </svg>
+  );
+};
+
+export default Arrow;

frontend/components/icons/ArrowInternalLink.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+const ArrowInternalLink = () => {
+  return (
+    <svg
+      width="18"
+      height="11"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 18 11"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m17.891 5.249-4.297-4.144a.385.385 0 0 0-.528 0l-.957.927a.345.345 0 0 0 0 .502l3.08 2.966-3.08 2.966a.345.345 0 0 0 0 .502l.957.927c.145.14.382.14.527 0l4.298-4.144a.345.345 0 0 0 0-.502Z"
+        fill="#6A67FE"
+      />
+      <rect y="4.5" width="16" height="2" rx="1" fill="#6A67FE" />
+    </svg>
+  );
+};
+
+export default ArrowInternalLink;

frontend/components/icons/Chevron.tsx

@@ -8,14 +8,10 @@ interface IChevronProps {
 }
 
 const SVG_PATH = {
-  up:
-    "M7.749 5.109 3.605 9.406a.385.385 0 0 0 0 .528l.927.957c.14.145.363.145.502 0L8 7.811l2.966 3.08c.14.145.363.145.502 0l.927-.957a.385.385 0 0 0 0-.528L8.251 5.11a.345.345 0 0 0-.502 0Z",
-  down:
-    "m8.751 10.891 4.144-4.297a.385.385 0 0 0 0-.528l-.927-.957a.345.345 0 0 0-.502 0L8.5 8.189l-2.966-3.08a.345.345 0 0 0-.502 0l-.927.957a.385.385 0 0 0 0 .528l4.144 4.297c.14.145.363.145.502 0Z",
-  left:
-    "m5.109 8.251 4.297 4.144c.145.14.383.14.528 0l.957-.927a.345.345 0 0 0 0-.502L7.811 8l3.08-2.966a.345.345 0 0 0 0-.502l-.957-.927a.385.385 0 0 0-.528 0L5.11 7.749a.345.345 0 0 0 0 .502Z",
-  right:
-    "M10.891 7.749 6.594 3.605a.385.385 0 0 0-.528 0l-.957.927a.345.345 0 0 0 0 .502L8.189 8l-3.08 2.966a.345.345 0 0 0 0 .502l.957.927c.145.14.383.14.528 0l4.297-4.144a.345.345 0 0 0 0-.502Z",
+  up: "M4 10L8 6L12 10",
+  down: "m4 6 4 4 4-4",
+  left: "M10 12L6 8L10 4",
+  right: "M6 4L10 8L6 12",
 };
 
 const Chevron = ({
@@ -26,15 +22,16 @@ const Chevron = ({
     <svg
       width="16"
       height="16"
-      viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
     >
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
         d={SVG_PATH[direction]}
-        fill={COLORS[color]}
+        stroke={COLORS[color]}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   );

frontend/components/icons/Error.tsx

@@ -11,14 +11,14 @@ const Error = ({ color = "status-error" }: IErrorProps) => {
     <svg
       width="16"
       height="16"
-      viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
     >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm-2-3h2V3H7v7z"
+        d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8Zm0 3.25a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0V4A.75.75 0 0 1 8 3.25ZM8 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
         fill={COLORS[color]}
       />
     </svg>

frontend/components/icons/ErrorOutline.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { COLORS, Colors } from "styles/var/colors";
+
+interface IErrorOutlineProps {
+  color?: Colors;
+}
+
+const ErrorOutline = ({ color = "status-error" }: IErrorOutlineProps) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Zm0 2A8 8 0 1 0 8 0a8 8 0 0 0 0 16ZM8 4a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0V5a1 1 0 0 1 1-1Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+        fill={COLORS[color]}
+      />
+    </svg>
+  );
+};
+
+export default ErrorOutline;

frontend/components/icons/Refresh.tsx

@@ -1,13 +1,28 @@
 import React from "react";
+import { COLORS, Colors } from "styles/var/colors";
+import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes";
 
-const Refresh = () => {
+interface IRefresh {
+  color?: Colors;
+  size?: IconSizes;
+}
+const Refresh = ({
+  color = "ui-fleet-black-75",
+  size = "medium",
+}: IRefresh) => {
   return (
-    <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      width={ICON_SIZES[size]}
+      height={ICON_SIZES[size]}
+      fill="none"
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M13.996 1.004c0-.55.45-1 1-1s.999.45.999 1v3.998c0 .55-.45 1-1 1h-3.997c-.55 0-1-.45-1-1s.45-1 1-1h1.46A5.995 5.995 0 0 0 8 2.004 6.001 6.001 0 0 0 2.004 8c0 .55-.45 1-1 1s-1-.45-1-1A7.993 7.993 0 0 1 8 .005a7.945 7.945 0 0 1 5.996 2.738V1.004Zm0 6.996c0-.55.45-1 1-1s.999.45.999 1A7.993 7.993 0 0 1 8 15.995a7.945 7.945 0 0 1-5.996-2.738v1.739c0 .55-.45.999-1 .999s-1-.45-1-1v-3.997c0-.55.45-1 1-1h3.998c.55 0 1 .45 1 1s-.45 1-1 1h-1.46A5.995 5.995 0 0 0 8 13.995 6.001 6.001 0 0 0 13.996 8Z"
-        fill="#515774"
+        fill={COLORS[color]}
       />
     </svg>
   );

frontend/components/icons/index.ts

@@ -1,4 +1,6 @@
 import Alert from "./Alert";
+import Arrow from "./Arrow";
+import ArrowInternalLink from "./ArrowInternalLink";
 import CalendarCheck from "./CalendarCheck";
 import Check from "./Check";
 import Chevron from "./Chevron";
@@ -44,6 +46,7 @@ import Success from "./Success";
 import SuccessPartial from "./SuccessPartial";
 import Pending from "./Pending";
 import PendingPartial from "./PendingPartial";
+import ErrorOutline from "./ErrorOutline";
 import Error from "./Error";
 
 import Copy from "./Copy";
@@ -65,6 +68,8 @@ import FilePdf from "./FilePdf";
 // a mapping of the usable names of icons to the icon source.
 export const ICON_MAP = {
   alert: Alert,
+  arrow: Arrow,
+  "arrow-internal-link": ArrowInternalLink,
   "calendar-check": CalendarCheck,
   chevron: Chevron,
   check: Check,
@@ -100,6 +105,7 @@ export const ICON_MAP = {
   pending: Pending,
   "pending-partial": PendingPartial,
   error: Error,
+  "error-outline": ErrorOutline,
   darwin: Apple,
   macOS: Apple,
   windows: Windows,

frontend/interfaces/policy.ts

@@ -61,9 +61,11 @@ export interface IPolicyWebhookPreviewPayload {
   critical?: boolean;
 }
 
+export type PolicyStatusResponse = "pass" | "fail" | "";
+
 // Used on the host details page and other places where the status of individual hosts are displayed
 export interface IHostPolicy extends IPolicy {
-  response: string;
+  response: PolicyStatusResponse;
 }
 
 export interface ILoadAllPoliciesResponse {

frontend/pages/DashboardPage/cards/LearnFleet/LearnFleet.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import LinkArrow from "../../../../../assets/images/icon-arrow-right-vibrant-blue-10x18@2x.png";
+import Icon from "components/Icon/Icon";
 
 const baseClass = "learn-fleet";
 
@@ -18,7 +18,7 @@ const LearnFleet = (): JSX.Element => {
         rel="noopener noreferrer"
       >
         Learn how to use Fleet 
-        <img src={LinkArrow} alt="link arrow" id="link-arrow" />
+        <Icon name="arrow-internal-link" color="core-fleet-blue" />
       </a>
     </div>
   );

frontend/pages/DashboardPage/cards/LearnFleet/_styles.scss

@@ -2,4 +2,8 @@
   p {
     font-size: $x-small;
   }
+  .icon {
+    margin-left: $pad-xsmall;
+    vertical-align: sub;
+  }
 }

frontend/pages/DashboardPage/cards/WelcomeHost/WelcomeHost.tsx

@@ -12,11 +12,8 @@ import hostAPI from "services/entities/hosts";
 import Spinner from "components/Spinner";
 import Button from "components/buttons/Button";
 import Modal from "components/Modal";
+import Icon from "components/Icon/Icon";
 import LaptopMac from "../../../../../assets/images/laptop-mac.png";
-import LinkArrow from "../../../../../assets/images/icon-arrow-right-vibrant-blue-10x18@2x.png";
-import IconDisabled from "../../../../../assets/images/icon-action-disable-red-16x16@2x.png";
-import IconPassed from "../../../../../assets/images/icon-check-circle-green-16x16@2x.png";
-import IconError from "../../../../../assets/images/icon-exclamation-circle-red-16x16@2x.png";
 import SlackButton from "../../../../../assets/images/slack-button-get-help.png";
 
 interface IWelcomeHostCardProps {
@@ -163,12 +160,8 @@ const WelcomeHost = ({
     return (
       <div className={baseClass}>
         <div className={`${baseClass}__error`}>
-          <p>
-            <img
-              alt="Disabled icon"
-              className="icon-disabled"
-              src={IconDisabled}
-            />
+          <p className="error-message">
+            <Icon name="disable" color="status-error" />
             Your device is not communicating with Fleet.
           </p>
           <p>Join the #fleet Slack channel for help troubleshooting.</p>
@@ -193,11 +186,7 @@ const WelcomeHost = ({
       <div className={baseClass}>
         <div className={`${baseClass}__error`}>
           <p className="error-message">
-            <img
-              alt="Disabled icon"
-              className="icon-disabled"
-              src={IconDisabled}
-            />
+            <Icon name="disable" color="status-error" />
             No policies apply to your device.
           </p>
           <p>Join the #fleet Slack channel for help troubleshooting.</p>
@@ -225,7 +214,7 @@ const WelcomeHost = ({
           <div className="info">
             <Link to={PATHS.HOST_DETAILS(host.id)} className="external-link">
               {host.display_name}
-              <img alt="" src={LinkArrow} />
+              <Icon name="arrow-internal-link" />
             </Link>
             <p>Your host is successfully connected to Fleet.</p>
           </div>
@@ -245,11 +234,18 @@ const WelcomeHost = ({
                   onClick={() => handlePolicyModal(p.id)}
                 >
                   <div className="policy-block">
-                    <img
-                      alt={p.response}
-                      src={p.response === POLICY_PASS ? IconPassed : IconError}
+                    <Icon
+                      name={
+                        p.response === POLICY_PASS ? "success" : "error-outline"
+                      }
                     />
                     <span className="info">{p.name}</span>
+                    <Icon
+                      name="chevron"
+                      color="core-fleet-blue"
+                      direction="right"
+                      className="policy-arrow"
+                    />
                   </div>
                 </Button>
               );
@@ -258,9 +254,9 @@ const WelcomeHost = ({
             return null;
           })}
           {host.policies?.length > 3 && (
-            <Link to={PATHS.HOST_DETAILS(host.id)} className="external-link">
+            <Link to={PATHS.HOST_POLICIES(host.id)} className="external-link">
               Go to Host details to see all policies
-              <img alt="" src={LinkArrow} />
+              <Icon name="arrow-internal-link" />
             </Link>
           )}
         </div>
@@ -276,7 +272,7 @@ const WelcomeHost = ({
             onClick={onRefetchHost}
             disabled={showRefetchLoadingSpinner}
           >
-            Refetch
+            <Icon name="refresh" color="core-fleet-white" /> Refetch
           </Button>
           <span>
             Last updated{" "}

frontend/pages/DashboardPage/cards/WelcomeHost/_styles.scss

@@ -9,30 +9,31 @@
     margin-top: 4px;
   }
 
-  .icon-disabled {
-    width: 16px;
-    margin-right: 8px;
-    position: relative;
-    top: 3px;
-  }
-
   p.error-message {
     font-weight: $bold;
     margin: 1.5rem 0;
   }
 
+  p.error-message,
+  .policy-block {
+    .icon {
+      vertical-align: sub;
+      margin-right: $pad-small;
+    }
+  }
+
   .external-link {
     display: flex;
-    align-items: center;
     font-size: $x-small;
     color: $core-vibrant-blue;
     font-weight: $bold;
     text-decoration: none !important;
 
-    img {
-      height: 12px;
-      width: 12px;
+    .icon {
+      margin-left: $pad-small;
+      vertical-align: sub;
     }
+
     &:last-of-type {
       margin-top: $pad-large;
     }
@@ -66,11 +67,6 @@
     button {
       height: auto;
       width: 100%;
-      img {
-        transform: scale(0.58) rotate(-90deg);
-        position: relative;
-        top: 1px;
-      }
     }
 
     .children-wrapper {
@@ -79,6 +75,7 @@
 
     .policy-block {
       min-width: 100%;
+      height: 36px;
       border: 1px solid $ui-fleet-black-25;
       border-radius: 6px;
       display: flex;
@@ -86,13 +83,6 @@
       align-items: center;
       font-weight: $regular;
 
-      img {
-        margin: 0 $pad-small;
-        transform: scale(0.5);
-        position: relative;
-        top: -1px;
-      }
-
       .info {
         line-height: 1;
         white-space: nowrap;
@@ -102,11 +92,8 @@
         text-align: left;
       }
 
-      &::after {
-        content: url("../assets/images/icon-chevron-purple-9x6@2x.png");
-        transform: scale(0.5) rotate(-90deg);
-        border-radius: 0px;
-        margin: 0 $pad-xsmall;
+      .icon {
+        padding-left: $pad-medium;
       }
     }
   }
@@ -127,26 +114,23 @@
         font-size: $x-small;
         height: 38px;
 
-        &::before {
-          display: inline-block;
-          position: relative;
-          padding: 5px 0 0 0; // centers spin
-          display: inline-block;
-          content: url(../assets/images/icon-refetch-white-12x12@2x.png);
-          transform: scale(0.5);
+        .icon {
+          margin-right: 6px;
         }
 
-        &.spin::before {
-          animation: spin 2s linear infinite;
+        &.spin {
+          .icon {
+            animation: spin 2s linear infinite;
+          }
         }
 
         @keyframes spin {
           0% {
-            transform: scale(0.5) rotate(0deg);
+            transform: rotate(0deg);
             transform-origin: center center;
           }
           100% {
-            transform: scale(0.5) rotate(360deg);
+            transform: rotate(360deg);
             transform-origin: center center;
           }
         }

frontend/pages/hosts/ManageHostsPage/_styles.scss

@@ -207,9 +207,6 @@
               .issues__cell {
                 display: flex;
                 align-items: center;
-                .host-issue {
-                  height: 16px;
-                }
               }
 
               .device_mapping__cell,

frontend/pages/hosts/details/_styles.scss

@@ -173,16 +173,7 @@
       .refetch-btn {
         font-size: $x-small;
         height: 38px;
-        margin-right: $pad-small;
-
-        &::before {
-          display: inline-block;
-          position: relative;
-          padding: 5px 0 0 0; // centers spin
-          content: url(../assets/images/icon-refetch-12x12@2x.png);
-          transform: scale(0.5);
-          height: 28px;
-        }
+        margin-left: $pad-small;
       }
 
       .refetch-offline {
@@ -196,24 +187,19 @@
         height: 38px;
         opacity: 50%;
         filter: saturate(100%);
+        margin-left: $pad-small;
 
-        &::before {
-          display: inline-block;
-          position: relative;
-          padding: 5px 0 0 0; // centers spin
-          display: inline-block;
-          content: url(../assets/images/icon-refetch-12x12@2x.png);
-          transform: scale(0.5);
+        .icon {
           animation: spin 2s linear infinite;
         }
 
         @keyframes spin {
           0% {
-            transform: scale(0.5) rotate(0deg);
+            transform: rotate(0deg);
             transform-origin: center center;
           }
           100% {
-            transform: scale(0.5) rotate(360deg);
+            transform: rotate(360deg);
             transform-origin: center center;
           }
         }

frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx

@@ -1,16 +1,17 @@
 import React from "react";
 
 import ReactTooltip from "react-tooltip";
-import TooltipWrapper from "components/TooltipWrapper";
-
-import Button from "components/buttons/Button";
-import DiskSpaceGraph from "components/DiskSpaceGraph";
-import HumanTimeDiffWithDateTip from "components/HumanTimeDiffWithDateTip";
 import { humanHostMemory, wrapFleetHelper } from "utilities/helpers";
 import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
-import StatusIndicator from "components/StatusIndicator";
 import { IHostMacMdmProfile, BootstrapPackageStatus } from "interfaces/mdm";
 import getHostStatusTooltipText from "pages/hosts/helpers";
+
+import TooltipWrapper from "components/TooltipWrapper";
+import Button from "components/buttons/Button";
+import Icon from "components/Icon/Icon";
+import DiskSpaceGraph from "components/DiskSpaceGraph";
+import HumanTimeDiffWithDateTip from "components/HumanTimeDiffWithDateTip";
+import StatusIndicator from "components/StatusIndicator";
 import PremiumFeatureIconWithTooltip from "components/PremiumFeatureIconWithTooltip";
 import IssueIcon from "../../../../../../assets/images/icon-issue-fleet-black-50-16x16@2x.png";
 import MacSettingsIndicator from "./MacSettingsIndicator";
@@ -87,6 +88,7 @@ const HostSummary = ({
             onClick={onRefetchHost}
             variant="text-icon"
           >
+            <Icon name="refresh" color="core-fleet-blue" size="small" />
             {showRefetchSpinner
               ? "Fetching fresh vitals...this may take a moment"
               : "Refetch"}

frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/HostPoliciesTableConfig.tsx

@@ -1,9 +1,10 @@
 import React from "react";
-import StatusIndicator from "components/StatusIndicator";
+import StatusIndicatorWithIcon from "components/StatusIndicatorWithIcon";
 import Button from "components/buttons/Button";
 import { IHostPolicy } from "interfaces/policy";
 import { PolicyResponse, DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 import ViewAllHostsLink from "components/ViewAllHostsLink";
+import { IndicatorStatus } from "components/StatusIndicatorWithIcon/StatusIndicatorWithIcon";
 
 interface IHeaderProps {
   column: {
@@ -11,6 +12,14 @@ interface IHeaderProps {
     isSortedDesc: boolean;
   };
 }
+
+type PolicyStatus = "pass" | "fail";
+
+interface IStatusCellValue {
+  displayName: string;
+  statusName: IndicatorStatus;
+  value: PolicyStatus;
+}
 interface ICellProps {
   cell: {
     value: string;
@@ -30,20 +39,24 @@ interface IDataColumn {
   sortType?: string;
 }
 
-const getPolicyStatus = (policy: IHostPolicy): string => {
-  if (policy.response === "pass") {
-    return "Yes";
-  } else if (policy.response === "fail") {
-    return "No";
-  }
-  return DEFAULT_EMPTY_CELL_VALUE;
-};
-
 // NOTE: cellProps come from react-table
 // more info here https://react-table.tanstack.com/docs/api/useTable#cell-properties
 const generatePolicyTableHeaders = (
   togglePolicyDetails: (policy: IHostPolicy, teamId?: number) => void
 ): IDataColumn[] => {
+  const STATUS_CELL_VALUES: Record<PolicyStatus, IStatusCellValue> = {
+    pass: {
+      displayName: "Yes",
+      statusName: "success",
+      value: "pass",
+    },
+    fail: {
+      displayName: "No",
+      statusName: "error",
+      value: "fail",
+    },
+  };
+
   return [
     {
       title: "Name",
@@ -71,8 +84,17 @@ const generatePolicyTableHeaders = (
       accessor: "response",
       disableSortBy: true,
       Cell: (cellProps) => {
+        if (cellProps.row.original.response === "") {
+          return <>{DEFAULT_EMPTY_CELL_VALUE}</>;
+        }
+
+        const responseValue =
+          STATUS_CELL_VALUES[cellProps.row.original.response];
         return (
-          <StatusIndicator value={getPolicyStatus(cellProps.row.original)} />
+          <StatusIndicatorWithIcon
+            value={responseValue.displayName}
+            status={responseValue.statusName}
+          />
         );
       },
     },

frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTableConfig.tsx

@@ -6,13 +6,12 @@ import { memoize } from "lodash";
 
 import { ColumnInstance } from "react-table";
 
+import Icon from "components/Icon/Icon";
 import TextCell from "components/TableContainer/DataTable/TextCell/TextCell";
 import HeaderCell from "components/TableContainer/DataTable/HeaderCell/HeaderCell";
 
 import { IHostPolicyQuery } from "interfaces/host";
 import sortUtils from "utilities/sort";
-import PassIcon from "../../../../../../assets/images/icon-check-circle-green-16x16@2x.png";
-import FailIcon from "../../../../../../assets/images/icon-action-fail-16x16@2x.png";
 
 interface IHeaderProps {
   column: ColumnInstance & IDataColumn;
@@ -70,12 +69,12 @@ const generateTableHeaders = (): IDataColumn[] => {
         <>
           {cellProps.cell.value.length ? (
             <>
-              <img alt="host passing" src={PassIcon} />
+              <Icon name="success" />
               <span className="status-header-text">Yes</span>
             </>
           ) : (
             <>
-              <img alt="host passing" src={FailIcon} />
+              <Icon name="error" />
               <span className="status-header-text">No</span>
             </>
           )}