Fleet UI: More icons updated (#13270)

frontend/components/BackLink/BackLink.tests.tsx

@@ -7,7 +7,7 @@ describe("BackLink - component", () => {
     render(<BackLink text="Back to software" />);
 
     const text = screen.getByText("Back to software");
-    const icon = screen.getByTestId("icon");
+    const icon = screen.getByTestId("chevron-icon");
 
     expect(text).toBeInTheDocument();
     expect(icon).toBeInTheDocument();

frontend/components/CustomLink/CustomLink.tests.tsx

@@ -32,7 +32,7 @@ describe("CustomLink - component", () => {
       />
     );
 
-    const icon = screen.getByTestId("icon");
+    const icon = screen.getByTestId("external-link-icon");
 
     expect(icon).toBeInTheDocument();
     expect(icon.closest("a")).toHaveAttribute("target", "_blank");

frontend/components/Icon/Icon.tsx

@@ -36,7 +36,7 @@ const Icon = ({ name, color, direction, className, size }: IIconProps) => {
   const IconComponent = ICON_MAP[name];
 
   return (
-    <div className={classNames} data-testid="icon">
+    <div className={classNames} data-testid={`${name}-icon`}>
       <IconComponent {...props} />
     </div>
   );

frontend/components/TableContainer/DataTable/IssueCell/IssueCell.tests.tsx

@@ -18,7 +18,7 @@ describe("Issue cell", () => {
       />
     );
 
-    const icon = screen.queryByTestId("icon");
+    const icon = screen.queryByTestId("issue-icon");
 
     await user.hover(screen.getByText("4"));
 

frontend/components/TableContainer/DataTable/IssueCell/IssueCell.tsx

@@ -4,8 +4,6 @@ import { isEmpty } from "lodash";
 
 import Icon from "components/Icon";
 
-import IssueIcon from "../../../../../assets/images/icon-issue-fleet-black-50-16x16@2x.png";
-
 interface IIssueCellProps<T> {
   issues: {
     total_issues_count: number;

frontend/components/TableContainer/DataTable/PlatformCell/PlatformCell.tests.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Children } from "react";
 import { render, screen } from "@testing-library/react";
 import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 
@@ -11,25 +11,24 @@ describe("Platform cell", () => {
   it("renders platform icons in correct order", () => {
     render(<PlatformCell platforms={PLATFORMS} />);
 
-    const icons = screen.queryAllByTestId("icon");
-    const appleIcon = screen.queryByTestId("apple-icon");
+    const icons = screen.queryByTestId("icons");
+    const appleIcon = screen.queryByTestId("darwin-icon");
     const linuxIcon = screen.queryByTestId("linux-icon");
     const windowsIcon = screen.queryByTestId("windows-icon");
     const chromeIcon = screen.queryByTestId("chrome-icon");
 
-    expect(icons).toHaveLength(4);
-    expect(icons[0].firstChild).toBe(appleIcon);
-    expect(icons[1].firstChild).toBe(windowsIcon);
-    expect(icons[2].firstChild).toBe(linuxIcon);
-    expect(icons[3].firstChild).toBe(chromeIcon);
+    expect(icons?.firstChild).toBe(appleIcon);
+    expect(icons?.firstChild?.nextSibling).toBe(windowsIcon);
+    expect(icons?.firstChild?.nextSibling?.nextSibling).toBe(linuxIcon);
+    expect(icons?.firstChild?.nextSibling?.nextSibling?.nextSibling).toBe(
+      chromeIcon
+    );
   });
   it("renders empty state", () => {
     render(<PlatformCell platforms={[]} />);
 
-    const icons = screen.queryAllByTestId("icon");
     const emptyText = screen.queryByText(DEFAULT_EMPTY_CELL_VALUE);
 
-    expect(icons).toHaveLength(0);
     expect(emptyText).toBeInTheDocument();
   });
 });

frontend/components/TableContainer/DataTable/PlatformCell/PlatformCell.tsx

@@ -30,7 +30,7 @@ const PlatformCell = ({ platforms }: IPlatformCellProps): JSX.Element => {
     platforms.includes(platform)
   );
   return (
-    <span className={`${baseClass}__wrapper`}>
+    <span className={`${baseClass}__wrapper`} data-testid="icons">
       {orderedList.length ? (
         orderedList.map((platform) => {
           return ICONS[platform] ? (

frontend/components/ViewAllHostsLink/ViewAllHostsLink.tests.tsx

@@ -7,7 +7,7 @@ describe("ViewAllHostsLink - component", () => {
     render(<ViewAllHostsLink />);
 
     const text = screen.getByText("View all hosts");
-    const icon = screen.getByTestId("icon");
+    const icon = screen.getByTestId("chevron-icon");
 
     expect(text).toBeInTheDocument();
     expect(icon).toBeInTheDocument();

frontend/components/buttons/Button/Button.tsx

@@ -115,7 +115,6 @@ class Button extends React.Component<IButtonProps, IButtonState> {
       variant === "text-link" ||
       variant === "inverse" ||
       variant === "text-icon" ||
-      variant === "icon" ||
       variant === "label";
 
     return (

frontend/components/buttons/RevealButton/RevealButton.tests.tsx

@@ -40,7 +40,7 @@ describe("Reveal button", () => {
       />
     );
 
-    const icon = screen.queryByTestId("icon");
+    const icon = screen.queryByTestId("chevron-icon");
 
     expect(icon).toBeNull();
   });
@@ -55,7 +55,7 @@ describe("Reveal button", () => {
       />
     );
 
-    const icon = screen.queryByTestId("icon");
+    const icon = screen.queryByTestId("chevron-icon");
     expect(icon?.nextSibling).toHaveTextContent(SHOW_TEXT);
   });
 
@@ -69,7 +69,7 @@ describe("Reveal button", () => {
       />
     );
 
-    const icon = screen.queryByTestId("icon");
+    const icon = screen.queryByTestId("chevron-icon");
 
     expect(icon?.previousSibling).toHaveTextContent(SHOW_TEXT);
   });

frontend/components/icons/Apple.tsx

@@ -18,7 +18,6 @@ const Apple = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 16 16"
-      data-testid="apple-icon"
     >
       <path
         fillRule="evenodd"

frontend/components/icons/Chrome.tsx

@@ -18,7 +18,6 @@ const Chrome = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 16 16"
-      data-testid="chrome-icon"
     >
       <path
         d="M0 8a8.14 8.14 0 0 1 1.07-4.028l3.433 5.975A4.001 4.001 0 0 0 8 12c.447 0 .847-.072 1.275-.206l-2.384 4.131A8.004 8.004 0 0 1 0 8Zm11.41 2.05c.384-.6.59-1.328.59-2.05a4.001 4.001 0 0 0-1.353-3h4.772c.375.925.581 1.94.581 3 0 4.419-3.581 7.972-8 8l3.41-5.95ZM14.93 4H8a3.98 3.98 0 0 0-3.922 3.21L1.693 3.076A7.983 7.983 0 0 1 8 0a7.999 7.999 0 0 1 6.931 4ZM5.25 8a2.75 2.75 0 1 1 5.5 0 2.75 2.75 0 0 1-5.5 0Z"

frontend/components/icons/Eye.tsx

@@ -14,7 +14,6 @@ const Eye = ({ color = "core-fleet-blue", size = "medium" }: IEye) => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 16 16"
-      data-testid="eye-icon"
     >
       <g clipPath="url(#a)" fill={COLORS[color]}>
         <path d="M7.996 14C3.654 14 .246 8.6.102 8.37A.708.708 0 0 1 0 8c0-.133.036-.262.102-.37C.246 7.4 3.654 2 7.996 2c4.342 0 7.758 5.4 7.902 5.63A.708.708 0 0 1 16 8a.708.708 0 0 1-.102.37C15.754 8.6 12.346 14 7.996 14ZM2.198 8c.85 1.17 2.594 4 5.798 4 3.203 0 4.948-2.83 5.797-4-.85-1.17-2.602-4-5.797-4S3.022 6.83 2.198 8Z" />

frontend/components/icons/Info.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { COLORS, Colors } from "styles/var/colors";
+import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes";
+
+interface IInfoProps {
+  color?: Colors;
+  size?: IconSizes;
+}
+
+const Info = ({ size = "small", color = "core-fleet-blue" }: IInfoProps) => {
+  return (
+    <svg
+      width={ICON_SIZES[size]}
+      height={ICON_SIZES[size]}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <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-8Zm0 12.75a.75.75 0 0 0 .75-.75V7a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75ZM8 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
+        fill={COLORS[color]}
+      />
+    </svg>
+  );
+};
+
+export default Info;

frontend/components/icons/Linux.tsx

@@ -18,7 +18,6 @@ const Linux = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 16 16"
-      data-testid="linux-icon"
     >
       <path
         d="M15.992 10.96c-.717-2.833-2.224-4.3-3.069-4.927l-.136-.18c.136-.413.211-.853.211-1.306C12.998 2.033 10.76 0 7.992 0 5.226 0 2.98 2.04 2.98 4.547c0 .453.075.893.211 1.306-.06.074-.113.147-.166.22C2.172 6.72.717 8.187.008 10.96c-.03.12.023.253.129.333.113.08.263.094.392.047.392-.16.912-.4 1.394-.733A5.99 5.99 0 0 0 4.23 14.4h-.904c-.498 0-.905.36-.905.8 0 .44.407.8.905.8h9.288c.498 0 .905-.36.905-.8 0-.44-.407-.8-.905-.8h-.875a5.987 5.987 0 0 0 2.307-3.813c.49.34 1.018.586 1.418.746a.412.412 0 0 0 .392-.046.302.302 0 0 0 .136-.327Zm-8.007 2.86c-2.36 0-4.275-1.88-4.275-4.193 0-1.187.505-2.687 1.312-3.86-.422-.327-.686-.807-.686-1.334 0-.986.905-1.78 2.013-1.78.67 0 1.259.287 1.628.734.37-.447.958-.734 1.629-.734 1.116 0 2.013.8 2.013 1.78 0 .534-.264 1.007-.686 1.334.806 1.173 1.312 2.666 1.312 3.86.015 2.32-1.9 4.193-4.26 4.193Z"

frontend/components/icons/Policy.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { COLORS, Colors } from "styles/var/colors";
+
+interface IPolicies {
+  color?: Colors;
+}
+const Policy = ({ color = "core-fleet-black" }: IPolicies) => {
+  return (
+    <svg
+      width="14"
+      height="16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 14 16"
+    >
+      <g
+        clipPath="url(#a)"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill={COLORS[color]}
+      >
+        <path d="m6.951 9.838 3.112-3.015a.89.89 0 0 0 .27-.634.876.876 0 0 0-.27-.634.91.91 0 0 0-.64-.258.925.925 0 0 0-.638.258L6.313 7.95l-1.1-1.065a.919.919 0 0 0-1.477.29.877.877 0 0 0 .2.979l1.737 1.683a.91.91 0 0 0 .639.258.925.925 0 0 0 .64-.258Z" />
+        <path d="M13.041 2.357v.001L7.345.067a.925.925 0 0 0-.69 0l-6.09 2.45a.906.906 0 0 0-.409.325A.882.882 0 0 0 0 3.34v2.98c0 2.066.634 4.083 1.82 5.796a10.637 10.637 0 0 0 4.84 3.82.926.926 0 0 0 .68 0 10.637 10.637 0 0 0 4.84-3.82A10.162 10.162 0 0 0 14 6.322V3.34a.88.88 0 0 0-.156-.499.905.905 0 0 0-.408-.325l-.395-.16Zm-.86 1.583v2.382a8.4 8.4 0 0 1-1.438 4.692A8.805 8.805 0 0 1 7 14.139a8.804 8.804 0 0 1-3.743-3.125 8.4 8.4 0 0 1-1.439-4.692V3.94L7 1.854l5.182 2.086Z" />
+      </g>
+      <defs>
+        <clipPath id="a">
+          <path fill="#fff" d="M0 0h14v16H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default Policy;

frontend/components/icons/Windows.tsx

@@ -18,7 +18,6 @@ const Windows = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 16 16"
-      data-testid="windows-icon"
     >
       <path
         d="m1.092 13.142 5.192 1.038V8.32H1.092v4.822ZM1.092 7.665h5.192V1.836L1.092 2.874v4.79ZM7.11 7.665h8.382V0L7.11 1.677v5.988ZM7.11 14.34 15.491 16V8.32H7.11v6.02Z"

frontend/components/icons/index.ts

@@ -22,10 +22,12 @@ import EmptyTeams from "./EmptyTeams";
 import ExternalLink from "./ExternalLink";
 import Filter from "./Filter";
 import FilterAlt from "./FilterAlt";
+import Info from "./Info";
 import Issue from "./Issue";
 import More from "./More";
 import Plus from "./Plus";
 import PremiumFeature from "./PremiumFeature";
+import Policy from "./Policy";
 import Query from "./Query";
 import Search from "./Search";
 
@@ -102,9 +104,11 @@ export const ICON_MAP = {
   "low-disk-space-hosts": LowDiskSpaceHosts,
   "missing-hosts": MissingHosts,
   lightbulb: Lightbulb,
+  info: Info,
   issue: Issue,
   more: More,
   plus: Plus,
+  policy: Policy,
   query: Query,
   copy: Copy,
   eye: Eye,

frontend/components/side_panels/QuerySidePanel/QuerySidePanel.tsx

@@ -7,12 +7,10 @@ import { osqueryTableNames } from "utilities/osquery_tables";
 import Dropdown from "components/forms/fields/Dropdown";
 import FleetMarkdown from "components/FleetMarkdown";
 import CustomLink from "components/CustomLink";
+import Icon from "components/Icon/Icon";
 
 import QueryTableColumns from "./QueryTableColumns";
 import QueryTablePlatforms from "./QueryTablePlatforms";
-
-// @ts-ignore
-import CloseIcon from "../../../../assets/images/icon-close-black-50-8x8@2x.png";
 import QueryTableExample from "./QueryTableExample";
 import QueryTableNotes from "./QueryTableNotes";
 import EventedTableTag from "./EventedTableTag";
@@ -70,7 +68,7 @@ const QuerySidePanel = ({
         tabIndex={0}
         onClick={onClose}
       >
-        <img alt="Close sidebar" src={CloseIcon} />
+        <Icon name="ex" color="ui-fleet-black-50" size="small" />
       </div>
       <div className={`${baseClass}__choose-table`}>
         <h2 className={`${baseClass}__header`}>

frontend/components/side_panels/QuerySidePanel/_styles.scss

@@ -10,20 +10,24 @@
     background-color: $core-white;
     position: absolute;
     top: 40px;
-    left: -12px;
+    left: -13px;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     z-index: 2;
 
-    img {
-      transform: scale(0.5);
-    }
-
     &:focus {
       outline: none;
     }
+
+    &:hover {
+      svg {
+        path {
+          stroke: $core-vibrant-blue;
+        }
+      }
+    }
   }
 
   &__choose-table {

frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/SummaryTile.tests.tsx

@@ -60,7 +60,7 @@ describe("SummaryTile - component", () => {
 
     const title = screen.getByText("Windows hosts");
     const count = screen.getByText("200");
-    const icon = screen.queryByTestId("icon");
+    const icon = screen.queryByTestId("windows-circled-icon");
 
     expect(title).toBeInTheDocument();
     expect(count).toBeInTheDocument();

frontend/pages/LabelPage/LabelForm/LabelForm.tsx

@@ -12,7 +12,7 @@ import InputField from "components/forms/fields/InputField";
 import FleetAce from "components/FleetAce";
 // @ts-ignore
 import validateQuery from "components/forms/validators/validate_query";
-import InfoIcon from "../../../../assets/images/icon-info-purple-14x14@2x.png";
+import Icon from "components/Icon/Icon";
 
 interface ILabelFormProps {
   baseError: string;
@@ -169,7 +169,7 @@ const LabelForm = ({
     return (
       <Button variant="text-icon" onClick={onOpenSchemaSidebar}>
         <>
-          <img alt="" src={InfoIcon} />
+          <Icon name="info" size="small" />
           Show schema
         </>
       </Button>

frontend/pages/hosts/ManageHostsPage/components/FilterPill/FilterPill.tests.tsx

@@ -1,13 +1,11 @@
 import React from "react";
 import { noop } from "lodash";
-import { render, screen } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 
 import { renderWithSetup } from "test/test-utils";
 
 import FilterPill from "./FilterPill";
 
-import PolicyIcon from "../../../../../../assets/images/icon-policy-fleet-black-12x12@2x.png";
-
 describe("Filter Pill Component", () => {
   it("renders the pill text", () => {
     render(<FilterPill label="Test Pill" onClear={noop} />);
@@ -15,10 +13,12 @@ describe("Filter Pill Component", () => {
     expect(screen.getByText("Test Pill")).toBeInTheDocument();
   });
 
-  it("renders an passed in icon properly", () => {
-    render(<FilterPill label="Test Pill" icon={PolicyIcon} onClear={noop} />);
+  it("renders icon properly", () => {
+    render(<FilterPill label="Test Pill" icon="policy" onClear={noop} />);
 
-    expect(screen.getByTestId("filter-pill__icon")).toBeInTheDocument();
+    expect(
+      within(screen.getByRole("status")).getByTestId("policy-icon")
+    ).toBeInTheDocument();
   });
 
   it("renders a passed in string tooltip", () => {
@@ -52,7 +52,7 @@ describe("Filter Pill Component", () => {
       <FilterPill label="Test Pill" onClear={spy} />
     );
 
-    await user.click(screen.getByRole("button", { name: "Remove filter" }));
+    await user.click(within(screen.getByRole("button")).getByTestId("ex-icon"));
 
     expect(spy).toHaveBeenCalled();
   });

frontend/pages/hosts/ManageHostsPage/components/FilterPill/FilterPill.tsx

@@ -5,12 +5,13 @@ import classnames from "classnames";
 import Button from "components/buttons/Button";
 import PremiumFeatureIconWithTooltip from "components/PremiumFeatureIconWithTooltip";
 
-import CloseIcon from "../../../../../../assets/images/icon-close-vibrant-blue-16x16@2x.png";
+import Icon from "components/Icon";
+import { IconNames } from "components/icons";
 
 interface IFilterPillProps {
   label: string;
   onClear: () => void;
-  icon?: string;
+  icon?: IconNames;
   tooltipDescription?: string | ReactNode;
   premiumFeatureTooltipDelayHide?: number;
   className?: string;
@@ -44,9 +45,7 @@ const FilterPill = ({
       <>
         <span>
           <div className={labelClasses}>
-            {icon && (
-              <img src={icon} alt="" data-testid={`${baseClass}__icon`} />
-            )}
+            {icon && <Icon name={icon} />}
             {isSandboxMode && sandboxPremiumOnlyIcon && (
               <PremiumFeatureIconWithTooltip
                 tooltipPositionOverrides={{ leftAdj: 120, topAdj: -3 }}
@@ -65,7 +64,7 @@ const FilterPill = ({
               variant={"small-text-icon"}
               title={label}
             >
-              <img src={CloseIcon} alt="Remove filter" />
+              <Icon name="ex" color="core-fleet-blue" size="small" />
             </Button>
           </div>
         </span>

frontend/pages/hosts/ManageHostsPage/components/FilterPill/_styles.scss

@@ -10,18 +10,13 @@
     font-size: $xx-small;
     font-weight: $bold;
     cursor: default;
-
-    img {
-      width: 12px;
-      height: 12px;
-      margin-right: 6px;
-    }
+    gap: $small;
 
     button {
       height: auto;
       padding: 0px;
       border: none;
-      margin-left: $pad-small;
+      margin-left: 0;
 
       img {
         padding: 0px;

frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/HostsFilterBlock.tsx

@@ -33,8 +33,6 @@ import { MAC_SETTINGS_FILTER_OPTIONS } from "../../HostsPageConfig";
 import DiskEncryptionStatusFilter from "../DiskEncryptionStatusFilter";
 import BootstrapPackageStatusFilter from "../BootstrapPackageStatusFilter/BootstrapPackageStatusFilter";
 
-import PolicyIcon from "../../../../../../assets/images/icon-policy-fleet-black-12x12@2x.png";
-
 const baseClass = "hosts-filter-block";
 
 interface IHostsFilterBlockProps {
@@ -201,7 +199,7 @@ const HostsFilterBlock = ({
         onChange={onChangePoliciesFilter}
       />
       <FilterPill
-        icon={PolicyIcon}
+        icon="policy"
         label={policy?.name ?? "..."}
         onClear={() => handleClearFilter(["policy_id", "policy_response"])}
         className={`${baseClass}__policies-filter-pill`}

frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx

@@ -13,7 +13,6 @@ import {
   IDeviceUserResponse,
   IHostDevice,
 } from "interfaces/host";
-import { ISoftware } from "interfaces/software";
 import { IHostPolicy } from "interfaces/policy";
 import { IDeviceGlobalConfig } from "interfaces/config";
 import DeviceUserError from "components/DeviceUserError";
@@ -23,6 +22,7 @@ import Spinner from "components/Spinner";
 import Button from "components/buttons/Button";
 import TabsWrapper from "components/TabsWrapper";
 import InfoBanner from "components/InfoBanner";
+import Icon from "components/Icon/Icon";
 import { normalizeEmptyValues, wrapFleetHelper } from "utilities/helpers";
 import PATHS from "router/paths";
 
@@ -32,7 +32,6 @@ import SoftwareCard from "../cards/Software";
 import PoliciesCard from "../cards/Policies";
 import InfoModal from "./InfoModal";
 
-import InfoIcon from "../../../../../assets/images/icon-info-purple-14x14@2x.png";
 import FleetIcon from "../../../../../assets/images/fleet-avatar-24x24@2x.png";
 import PolicyDetailsModal from "../cards/Policies/HostPoliciesTable/PolicyDetailsModal";
 import AutoEnrollMdmModal from "./AutoEnrollMdmModal";
@@ -297,7 +296,7 @@ const DeviceUserPage = ({
       <div className={`${baseClass}__action-button-container`}>
         <Button onClick={() => setShowInfoModal(true)} variant="text-icon">
           <>
-            Info <img src={InfoIcon} alt="Host info icon" />
+            Info <Icon name="info" size="small" />
           </>
         </Button>
       </div>

frontend/pages/hosts/details/HostDetailsPage/modals/OSPolicyModal/OSPolicyModal.tsx

@@ -58,7 +58,7 @@ const OSPolicyModal = ({
               >{`${copyMessage} `}</span>
             )}
             <Button
-              variant="icon"
+              variant="text-icon"
               className={`${baseClass}__os-policy-copy-icon`}
               onClick={onCopyOsPolicy}
             >

frontend/pages/hosts/details/MacSettingsIndicator/MacSettingsIndicator.tests.tsx

@@ -9,7 +9,7 @@ describe("MacSettingsIndicator", () => {
       <MacSettingsIndicator indicatorText={indicatorText} iconName="success" />
     );
     const renderedIndicatorText = screen.getByText(indicatorText);
-    const renderedIcon = screen.getByTestId("icon");
+    const renderedIcon = screen.getByTestId("success-icon");
 
     expect(renderedIndicatorText).toBeInTheDocument();
     expect(renderedIcon).toBeInTheDocument();
@@ -26,7 +26,7 @@ describe("MacSettingsIndicator", () => {
       />
     );
     const renderedIndicatorText = screen.getByText(indicatorText);
-    const renderedIcon = screen.getByTestId("icon");
+    const renderedIcon = screen.getByTestId("success-icon");
     const renderedTooltipText = screen.getByText(tooltipText);
 
     expect(renderedIndicatorText).toBeInTheDocument();
@@ -52,7 +52,7 @@ describe("MacSettingsIndicator", () => {
     );
 
     const renderedIndicatorText = screen.getByText(indicatorText);
-    const renderedIcon = screen.getByTestId("icon");
+    const renderedIcon = screen.getByTestId("success-icon");
     const renderedButton = screen.getByRole("button");
 
     expect(renderedIndicatorText).toBeInTheDocument();

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

@@ -17,7 +17,6 @@ import {
 import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 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";
 import HostSummaryIndicator from "./HostSummaryIndicator";
 import BootstrapPackageIndicator from "./BootstrapPackageIndicator/BootstrapPackageIndicator";
@@ -121,7 +120,7 @@ const HostSummary = ({
           data-for="host-issue-count"
           data-tip-disable={false}
         >
-          <img alt="host issue" src={IssueIcon} />
+          <Icon name="issue" color="ui-fleet-black-50" />
         </span>
         <ReactTooltip
           place="bottom"

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

@@ -1,7 +1,7 @@
 import { IHostPolicy } from "interfaces/policy";
 import React from "react";
 
-import IssueIcon from "../../../../../../../../assets/images/icon-issue-fleet-black-50-16x16@2x.png";
+import Icon from "components/Icon/Icon";
 
 const baseClass = "policy-failing-count";
 
@@ -20,7 +20,7 @@ const PolicyFailingCount = ({
   return failCount ? (
     <div className={`${baseClass}`}>
       <div className={`${baseClass}__count`}>
-        <img alt="Issue icon" src={IssueIcon} />
+        <Icon name="issue" />
         This device is failing
         {failCount === 1 ? " 1 policy" : ` ${failCount} policies`}
       </div>

frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/PolicyFailingCount/_styles.scss

@@ -15,12 +15,6 @@
     margin-bottom: $pad-medium;
   }
 
-  img {
-    height: 16px;
-    width: auto;
-    padding-right: 10px;
-  }
-
   &__count {
     display: flex;
     align-content: center;

frontend/pages/hosts/details/cards/Software/SoftwareVulnCount/SoftwareVulnCount.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { ISoftware } from "interfaces/software";
-import IssueIcon from "../../../../../../../assets/images/icon-issue-fleet-black-50-16x16@2x.png";
+import Icon from "components/Icon/Icon";
 
 const baseClass = "software-vuln-count";
 
@@ -20,7 +20,7 @@ const SoftwareVulnCount = ({
   return vulnCount ? (
     <div className={`${baseClass}`}>
       <div className={`${baseClass}__count`}>
-        <img alt="Issue icon" src={IssueIcon} />
+        <Icon name="issue" />
         {vulnCount === 1
           ? "1 software item with vulnerabilities detected"
           : `${vulnCount} software items with vulnerabilities detected`}

frontend/pages/hosts/details/cards/Software/SoftwareVulnCount/_styles.scss

@@ -14,17 +14,12 @@
     margin-bottom: 0;
   }
 
-  img {
-    height: 16px;
-    width: auto;
-    padding-right: 10px;
-  }
-
   &__count {
     display: flex;
     align-content: center;
     align-items: center;
     font-size: $x-small;
     font-weight: $bold;
+    gap: $pad-small;
   }
 }

frontend/pages/policies/PolicyPage/components/PolicyForm/PolicyForm.tsx

@@ -30,7 +30,6 @@ import Icon from "components/Icon/Icon";
 import AutoSizeInputField from "components/forms/fields/AutoSizeInputField";
 import PremiumFeatureIconWithTooltip from "components/PremiumFeatureIconWithTooltip";
 import SaveNewPolicyModal from "../SaveNewPolicyModal";
-import InfoIcon from "../../../../../../assets/images/icon-info-purple-14x14@2x.png";
 
 const baseClass = "policy-form";
 
@@ -292,7 +291,7 @@ const PolicyForm = ({
     return (
       <Button variant="small-icon" onClick={onOpenSchemaSidebar}>
         <>
-          <img alt="" src={InfoIcon} />
+          <Icon name="info" size="small" />
           Show schema
         </>
       </Button>

frontend/pages/queries/QueryPage/components/QueryForm/QueryForm.tsx

@@ -34,7 +34,6 @@ import queryAPI from "services/entities/queries";
 
 import { IAceEditor } from "react-ace/lib/types";
 import ReactTooltip from "react-tooltip";
-import { parseSqlTables } from "utilities/sql_tools";
 
 import Avatar from "components/Avatar";
 import FleetAce from "components/FleetAce";
@@ -49,7 +48,6 @@ import Spinner from "components/Spinner";
 import Icon from "components/Icon/Icon";
 import AutoSizeInputField from "components/forms/fields/AutoSizeInputField";
 import SaveQueryModal from "../SaveQueryModal";
-import InfoIcon from "../../../../../../assets/images/icon-info-purple-14x14@2x.png";
 
 const baseClass = "query-form";
 
@@ -434,7 +432,7 @@ const QueryForm = ({
     return (
       <Button variant="text-icon" onClick={onOpenSchemaSidebar}>
         <>
-          <img alt="" src={InfoIcon} />
+          <Icon name="info" size="small" />
           Show schema
         </>
       </Button>