Fleet UI: Begin updating icons (6 icons only) (#11852)

2024-11-06 08:55:24 +00:00 · 2023-05-25 09:43:44 -04:00 · 2023-05-25 09:43:44 -04:00 · 210d8d8b8a
commit 210d8d8b8a
parent ef16e1b41f
36 changed files with 250 additions and 149 deletions
--- a/assets/images/icon-copy-clipboard-fleet-blue-20x20@2x.png
+++ b/assets/images/icon-copy-clipboard-fleet-blue-20x20@2x.png
--- a/assets/images/icon-download-12x12@2x.png
+++ b/assets/images/icon-download-12x12@2x.png
--- a/assets/images/icon-eye-16x16@2x.png
+++ b/assets/images/icon-eye-16x16@2x.png
--- a/assets/images/icon-pencil-14x14@2x.png
+++ b/assets/images/icon-pencil-14x14@2x.png
--- a/assets/images/icon-plus-16x16@2x.png
+++ b/assets/images/icon-plus-16x16@2x.png
--- a/assets/images/icon-trash-14x14@2x.png
+++ b/assets/images/icon-trash-14x14@2x.png
--- a/frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx
+++ b/frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx
@ -11,6 +11,7 @@ import { stringToClipboard } from "utilities/copy_text";
 import configAPI from "services/entities/config";

 import Button from "components/buttons/Button";
+import Icon from "components/Icon/Icon";
 import RevealButton from "components/buttons/RevealButton";
 // @ts-ignore
 import InputField from "components/forms/fields/InputField";
@ -20,9 +21,6 @@ import TabsWrapper from "components/TabsWrapper";

 import { isValidPemCertificate } from "../../../pages/hosts/ManageHostsPage/helpers";

-import CopyIcon from "../../../../assets/images/icon-copy-clipboard-fleet-blue-20x20@2x.png";
-import DownloadIcon from "../../../../assets/images/icon-download-12x12@2x.png";
-
 interface IPlatformSubNav {
  name: string;
  type: string;
@ -196,14 +194,14 @@ const PlatformWrapper = ({
                  <br />
                </>
              )}
-              <a
-                href="#downloadCertificate"
+              <Button
+                variant="text-icon"
                className={`${baseClass}__fleet-certificate-download`}
                onClick={onDownloadCertificate}
              >
                Download
-                <img src={DownloadIcon} alt="download" />
-              </a>
+                <Icon name="download" color="core-fleet-blue" size="small" />
+              </Button>
            </p>
          ) : (
            <p className={`${baseClass}__certificate-error`}>
@ -288,18 +286,18 @@ const PlatformWrapper = ({
        )}{" "}
        <span className={`${baseClass}__name`}>
          <span className="buttons">
-            {copyMessage[packageType] && (
-              <span
-                className={`${baseClass}__copy-message`}
-              >{`${copyMessage[packageType]} `}</span>
-            )}
            <Button
              variant="unstyled"
              className={`${baseClass}__installer-copy-icon`}
              onClick={onCopyInstaller}
            >
-              <img src={CopyIcon} alt="copy" />
+              <Icon name="copy" />
            </Button>
+            {copyMessage[packageType] && (
+              <span
+                className={`${baseClass}__copy-message`}
+              >{`${copyMessage[packageType]} `}</span>
+            )}
          </span>
        </span>
      </>
@ -344,13 +342,17 @@ const PlatformWrapper = ({
                    Osquery uses an enroll secret to authenticate with the Fleet
                    server.
                    <br />
-                    <a
-                      href="#downloadEnrollSecret"
+                    <Button
+                      variant="text-icon"
                      onClick={onDownloadEnrollSecret}
                    >
                      Download
-                      <img src={DownloadIcon} alt="download icon" />
-                    </a>
+                      <Icon
+                        name="download"
+                        color="core-fleet-blue"
+                        size="small"
+                      />
+                    </Button>
                  </p>
                </div>
                {renderFleetCertificateBlock("plain")}
@ -368,10 +370,14 @@ const PlatformWrapper = ({
                        {fetchCertificateError}
                      </span>
                    ) : (
-                      <a href="#downloadFlagfile" onClick={onDownloadFlagfile}>
+                      <Button variant="text-icon" onClick={onDownloadFlagfile}>
                        Download
-                        <img src={DownloadIcon} alt="download icon" />
-                      </a>
+                        <Icon
+                          name="download"
+                          color="core-fleet-blue"
+                          size="small"
+                        />
+                      </Button>
                    )}
                  </p>
                </div>
--- a/frontend/components/AddHostsModal/PlatformWrapper/_styles.scss
+++ b/frontend/components/AddHostsModal/PlatformWrapper/_styles.scss
@ -85,11 +85,14 @@
  }

  .buttons {
-    display: block;
+    display: flex;
+    flex-direction: row-reverse;
    align-items: center;
-    position: absolute;
-    right: 15px;
+    position: relative;
    top: 40px;
+    margin-right: $pad-medium;
+    height: 12px;
+    gap: $pad-small;

    a {
      display: flex;
@ -104,7 +107,7 @@

  &__run-osquery-input {
    .buttons {
-      top: 12px;
+      top: 34px;
    }
  }

@ -147,12 +150,6 @@
    }
  }

-  &__advanced--osqueryd {
-    .buttons {
-      top: 73px;
-    }
-  }
-
  .download-certificate--tooltip {
    margin-bottom: 0;
    div {
--- a/frontend/components/EnrollSecrets/EnrollSecretModal/EnrollSecretModal.tsx
+++ b/frontend/components/EnrollSecrets/EnrollSecretModal/EnrollSecretModal.tsx
@ -5,10 +5,9 @@ import { IEnrollSecret } from "interfaces/enroll_secret";

 import Modal from "components/Modal";
 import Button from "components/buttons/Button";
+import Icon from "components/Icon/Icon";
 import EnrollSecretTable from "../EnrollSecretTable";

-import PlusIcon from "../../../../assets/images/icon-plus-16x16@2x.png";
-
 interface IEnrollSecretModal {
  selectedTeam: number;
  onReturnToApp: () => void;
@ -90,7 +89,7 @@ const EnrollSecretModal = ({
            variant="text-icon"
          >
            <>
-              Add secret <img src={PlusIcon} alt="Add secret icon" />
+              Add secret <Icon name="plus" />
            </>
          </Button>
        </div>
--- a/frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretRow/EnrollSecretRow.tsx
+++ b/frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretRow/EnrollSecretRow.tsx
@ -78,7 +78,7 @@ const EnrollSecretRow = ({
            className={`${baseClass}__copy-secret-icon`}
            onClick={onCopySecret}
          >
-            <Icon name="clipboard" />
+            <Icon name="copy" />
          </Button>
          <Button
            variant="unstyled"
--- a/frontend/components/EnrollSecrets/SecretField/SecretField.tsx
+++ b/frontend/components/EnrollSecrets/SecretField/SecretField.tsx
@ -3,11 +3,9 @@ import React, { useState } from "react";
 import { stringToClipboard } from "utilities/copy_text";

 import Button from "components/buttons/Button";
+import Icon from "components/Icon/Icon";
 // @ts-ignore
 import InputField from "components/forms/fields/InputField";
-// @ts-ignore
-import EyeIcon from "../../../../assets/images/icon-eye-16x16@2x.png";
-import ClipboardIcon from "../../../../assets/images/icon-copy-clipboard-fleet-blue-20x20@2x.png";

 const baseClass = "secret-field";

@ -50,14 +48,14 @@ const SecretField = ({ secret }: ISecretFieldProps): JSX.Element | null => {
            className={`${baseClass}__secret-copy-icon`}
            onClick={onCopySecret}
          >
-            <img src={ClipboardIcon} alt="copy to clipboard" />
+            <Icon name="copy" />
          </Button>
          <a
            href="#showSecret"
            onClick={onToggleSecret}
            className={`${baseClass}__show-secret`}
          >
-            <img src={EyeIcon} alt="show/hide" />
+            <Icon name="eye" />
          </a>
        </span>
      </span>
--- a/frontend/components/buttons/ActionButtons/ActionButtons.tsx
+++ b/frontend/components/buttons/ActionButtons/ActionButtons.tsx
@ -4,6 +4,8 @@ import Button from "components/buttons/Button";
 import { ButtonVariant } from "components/buttons/Button/Button";
 // @ts-ignore
 import DropdownButton from "components/buttons/DropdownButton";
+import Icon from "components/Icon/Icon";
+
 import MoreIcon from "../../../../assets/images/icon-more-menu-3x13@2x.png";

 export interface IActionButtonProps {
@ -61,11 +63,7 @@ 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.icon && <Icon name={action.icon} />}
                  </>
                </Button>
              ))
--- a/frontend/components/buttons/Button/Button.tsx
+++ b/frontend/components/buttons/Button/Button.tsx
@ -15,6 +15,8 @@ export type ButtonVariant =
  | "label"
  | "text-link"
  | "text-icon"
+  | "icon" // Buttons without text
+  | "small-icon" // Buttons without text
  | "inverse"
  | "inverse-alert"
  | "block"
@ -113,6 +115,7 @@ class Button extends React.Component<IButtonProps, IButtonState> {
      variant === "text-link" ||
      variant === "inverse" ||
      variant === "text-icon" ||
+      variant === "icon" ||
      variant === "label";

    return (
--- a/frontend/components/buttons/Button/_styles.scss
+++ b/frontend/components/buttons/Button/_styles.scss
@ -196,7 +196,10 @@ $base-class: "button";
    }
  }

-  &--text-icon {
+  // &--icon, &--small-icon used for no text and svg icons
+  &--text-icon,
+  &--icon,
+  &--small-icon {
    @include button-variant(transparent);
    padding: 0;
    border: 0;
@ -223,7 +226,25 @@ $base-class: "button";
    &:focus {
      color: $core-vibrant-blue-over;
    }
+
+    // globally styled gap between text and icon
+    .children-wrapper {
+      gap: $pad-small;
    }
+  }
+
+  &--icon {
+    svg {
+      padding: $pad-icon;
+    }
+  }
+
+  &--small-icon {
+    svg {
+      padding: $pad-small;
+    }
+  }
+
  &--small-text-icon {
    @include button-variant(transparent);
    margin-left: $pad-medium;
--- a/frontend/components/buttons/RevealButton/_styles.scss
+++ b/frontend/components/buttons/RevealButton/_styles.scss
@ -2,5 +2,4 @@
  display: inline-flex;
  align-items: center;
  padding: $pad-small $pad-xxsmall; // larger clickable area
-  gap: $pad-xsmall;
 }
--- a/frontend/components/forms/fields/InputFieldHiddenContent/InputFieldHiddenContent.tsx
+++ b/frontend/components/forms/fields/InputFieldHiddenContent/InputFieldHiddenContent.tsx
@ -60,7 +60,7 @@ const InputFieldHiddenContent = ({
            className={`${baseClass}__copy-secret-icon`}
            onClick={onCopySecret}
          >
-            <Icon name="clipboard" />
+            <Icon name="copy" />
          </Button>
          <Button
            variant="unstyled"
--- a/frontend/components/icons/Copy.tsx
+++ b/frontend/components/icons/Copy.tsx
@ -0,0 +1,35 @@
+import React from "react";
+import { COLORS, Colors } from "styles/var/colors";
+import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes";
+
+interface ICopy {
+  color?: Colors;
+  size?: IconSizes;
+}
+
+const Copy = ({ color = "core-fleet-blue", size = "medium" }: ICopy) => {
+  console.log("color for this icon", color);
+  return (
+    <svg
+      width={ICON_SIZES[size]}
+      height={ICON_SIZES[size]}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+    >
+      <path
+        d="M2 4v9a1 1 0 0 0 1 1h9"
+        stroke={COLORS[color]}
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      <path
+        d="M6 10V2h8v8H6Z"
+        stroke={COLORS[color]}
+        strokeWidth="2"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+export default Copy;
--- a/frontend/components/icons/Download.tsx
+++ b/frontend/components/icons/Download.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 Download = () => {
+interface IDownload {
+  color?: Colors;
+  size?: IconSizes;
+}
+const Download = ({
+  color = "ui-fleet-black-75",
+  size = "medium",
+}: IDownload) => {
  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"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M9 1a1 1 0 0 0-2 0v7.365L5.64 7.232a1 1 0 1 0-1.28 1.536l3 2.5a1 1 0 0 0 1.28 0l3-2.5a1 1 0 1 0-1.28-1.536L9 8.365V1ZM2 9a1 1 0 1 0-2 0v6a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9a1 1 0 1 0-2 0v5H2V9Z"
-        fill="#515774"
+        fill={COLORS[color]}
      />
    </svg>
  );
--- a/frontend/components/icons/Eye.tsx
+++ b/frontend/components/icons/Eye.tsx
@ -1,16 +1,22 @@
 import React from "react";
+import { COLORS, Colors } from "styles/var/colors";
+import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes";

-const Eye = () => {
+interface IEye {
+  color?: Colors;
+  size?: IconSizes;
+}
+const Eye = ({ color = "core-fleet-blue", size = "medium" }: IEye) => {
  return (
    <svg
-      width="16"
-      height="16"
+      width={ICON_SIZES[size]}
+      height={ICON_SIZES[size]}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      data-testid="eye-icon"
    >
-      <g clipPath="url(#a)" fill="#6a67fe">
+      <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" />
        <path d="M6.606 10.075a2.5 2.5 0 0 0 1.387.425A2.507 2.507 0 0 0 10.5 8a2.5 2.5 0 1 0-3.894 2.075Z" />
      </g>
--- a/frontend/components/icons/Pencil.tsx
+++ b/frontend/components/icons/Pencil.tsx
@ -1,16 +1,29 @@
 import React from "react";

-const Pencil = () => {
+import { Colors, COLORS } from "styles/var/colors";
+import { IconSizes, ICON_SIZES } from "styles/var/icon_sizes";
+
+interface IPencil {
+  color?: Colors;
+  size?: IconSizes;
+}
+
+const Pencil = ({ color = "core-fleet-blue", size = "medium" }: IPencil) => {
  return (
    <svg
-      width="16"
-      height="16"
+      width={ICON_SIZES[size]}
+      height={ICON_SIZES[size]}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
    >
-      <g clipPath="url(#a)" fill="#6a67fe">
-        <path d="m9.88 2.688-8.803 8.804a.35.35 0 0 0-.091.16L.01 15.57a.348.348 0 0 0 .42.42l3.917-.976a.347.347 0 0 0 .16-.091l8.805-8.804-3.431-3.43ZM15.493 1.487l-.98-.98c-.655-.655-1.797-.654-2.451 0l-1.2 1.2 3.43 3.431 1.2-1.2c.328-.327.508-.763.508-1.226 0-.462-.18-.898-.507-1.225Z" />
+      <g clipPath="url(#a)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="m14.513.507.98.98c.327.327.507.762.507 1.225 0 .463-.18.899-.508 1.226l-1.2 1.2-3.43-3.43 1.2-1.2c.654-.655 1.796-.656 2.45 0ZM1.077 11.492l8.804-8.805 3.43 3.431-8.804 8.804a.346.346 0 0 1-.16.091l-3.917.976a.343.343 0 0 1-.328-.09.348.348 0 0 1-.092-.33l.976-3.917a.35.35 0 0 1 .091-.16Z"
+          fill={COLORS[color]}
+        />
      </g>
      <defs>
        <clipPath id="a">
--- a/frontend/components/icons/Plus.tsx
+++ b/frontend/components/icons/Plus.tsx
@ -1,23 +1,24 @@
 import React from "react";
+import { COLORS, Colors } from "styles/var/colors";

 interface IPlusProps {
-  color?: string;
+  color?: Colors;
 }

-const Plus = ({ color = "#6a67fe" }: IPlusProps) => {
+const Plus = ({ color = "core-fleet-blue" }: IPlusProps) => {
  return (
    <svg
      width="16"
-      height="12"
+      height="16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
    >
      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M9.01 2.722a1.01 1.01 0 0 0-2.02 0v3.924H3.064a1.01 1.01 0 1 0 0 2.021H6.99v3.925a1.01 1.01 0 0 0 2.022 0V8.667h3.924a1.01 1.01 0 0 0 0-2.02H9.01V2.721Z"
-        fill={color}
+        d="M8 3v10M3 8h10"
+        stroke={COLORS[color]}
+        strokeWidth="2"
+        strokeLinecap="round"
      />
    </svg>
  );
--- a/frontend/components/icons/TrashCan.tsx
+++ b/frontend/components/icons/TrashCan.tsx
@ -1,15 +1,20 @@
 import React from "react";
 import { COLORS, Colors } from "styles/var/colors";
+import { IconSizes, ICON_SIZES } from "styles/var/icon_sizes";

 interface ITrashCanProps {
  color?: Colors;
+  size?: IconSizes;
 }

-const TrashCan = ({ color = "core-fleet-blue" }: ITrashCanProps) => {
+const TrashCan = ({
+  color = "core-fleet-blue",
+  size = "medium",
+}: ITrashCanProps) => {
  return (
    <svg
-      width="16"
-      height="16"
+      width={ICON_SIZES[size]}
+      height={ICON_SIZES[size]}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
--- a/frontend/components/icons/index.ts
+++ b/frontend/components/icons/index.ts
@ -43,7 +43,7 @@ import Pending from "./Pending";
 import PendingPartial from "./PendingPartial";
 import Error from "./Error";

-import Clipboard from "./Clipboard";
+import Copy from "./Copy";
 import Eye from "./Eye";
 import Pencil from "./Pencil";
 import TrashCan from "./TrashCan";
@ -83,7 +83,7 @@ export const ICON_MAP = {
  issue: Issue,
  plus: Plus,
  query: Query,
-  clipboard: Clipboard,
+  copy: Copy,
  eye: Eye,
  pencil: Pencil,
  trash: TrashCan,
--- a/frontend/components/queries/PackQueriesTable/PackQueriesTable.tsx
+++ b/frontend/components/queries/PackQueriesTable/PackQueriesTable.tsx
@ -7,11 +7,11 @@ import TableContainer from "components/TableContainer";
 import { ITableQueryData } from "components/TableContainer/TableContainer";
 import Button from "components/buttons/Button";
 import EmptyTable from "components/EmptyTable";
+import Icon from "components/Icon/Icon";
 import {
  generateTableHeaders,
  generateDataSet,
 } from "./PackQueriesTable/PackQueriesTableConfig";
-import AddQueryIcon from "../../../../assets/images/icon-plus-16x16@2x.png";

 const baseClass = "pack-queries-table";

@ -93,7 +93,7 @@ const PackQueriesTable = ({
          actionButton={{
            name: "add query",
            buttonText: "Add query",
-            icon: AddQueryIcon,
+            icon: "plus",
            variant: "text-icon",
            onActionButtonClick: onAddPackQuery,
          }}
@ -118,7 +118,7 @@ const PackQueriesTable = ({
          >
            <>
              Add query
-              <img src={AddQueryIcon} alt={`Add query icon`} />
+              <Icon name="plus" />
            </>
          </Button>
        </div>
--- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx
+++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx
@ -35,10 +35,6 @@ import SecretEditorModal from "../../../../components/EnrollSecrets/SecretEditor
 import AddHostsModal from "../../../../components/AddHostsModal";
 import EnrollSecretModal from "../../../../components/EnrollSecrets/EnrollSecretModal";

-import EyeIcon from "../../../../../assets/images/icon-eye-16x16@2x.png";
-import PencilIcon from "../../../../../assets/images/icon-pencil-14x14@2x.png";
-import TrashIcon from "../../../../../assets/images/icon-trash-14x14@2x.png";
-
 const baseClass = "team-details";

 interface ITeamDetailsSubNavItem {
@ -418,21 +414,21 @@ const TeamDetailsWrapper = ({
                  type: "secondary",
                  label: "Manage enroll secrets",
                  buttonVariant: "text-icon",
-                  icon: EyeIcon,
+                  icon: "eye",
                  onClick: toggleManageEnrollSecretsModal,
                },
                {
                  type: "secondary",
                  label: "Edit team",
                  buttonVariant: "text-icon",
-                  icon: PencilIcon,
+                  icon: "pencil",
                  onClick: toggleEditTeamModal,
                },
                {
                  type: "secondary",
                  label: "Delete team",
                  buttonVariant: "text-icon",
-                  icon: TrashIcon,
+                  icon: "trash",
                  hideAction: !isGlobalAdmin,
                  onClick: toggleDeleteTeamModal,
                },
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
@ -60,6 +60,7 @@ import {
 import { getNextLocationPath } from "utilities/helpers";

 import Button from "components/buttons/Button";
+import Icon from "components/Icon/Icon";
 // @ts-ignore
 import Dropdown from "components/forms/fields/Dropdown";
 import TableContainer from "components/TableContainer";
@ -96,7 +97,6 @@ import DeleteHostModal from "../components/DeleteHostModal";
 import DeleteLabelModal from "./components/DeleteLabelModal";
 import EditColumnsIcon from "../../../../assets/images/icon-edit-columns-16x16@2x.png";
 import CloseIconBlack from "../../../../assets/images/icon-close-fleet-black-16x16@2x.png";
-import DownloadIcon from "../../../../assets/images/icon-download-12x12@2x.png";
 import LabelFilterSelect from "./components/LabelFilterSelect";
 import HostsFilterBlock from "./components/HostsFilterBlock";

@ -1260,10 +1260,11 @@ const ManageHostsPage = ({
          <Button
            className={`${baseClass}__export-btn`}
            onClick={onExportHostsResults}
-            variant="text-link"
+            variant="text-icon"
          >
            <>
-              Export hosts <img alt="" src={DownloadIcon} />
+              Export hosts
+              <Icon name="download" size="small" color="core-fleet-blue" />
            </>
          </Button>
        )}
--- a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx
@ -4,12 +4,12 @@
 * https://react-select.com/components
 */
 import Button from "components/buttons/Button";
+import Icon from "components/Icon/Icon";
 import { ILabel } from "interfaces/label";
 import React, { useRef } from "react";
 import { components, GroupHeadingProps } from "react-select-5";

 import { IEmptyOption, IGroupOption } from "../LabelFilterSelect/helpers";
-import PlusIcon from "../../../../../../assets/images/icon-plus-16x16@2x.png";

 const baseClass = "custom-label-group-heading";

@ -53,8 +53,8 @@ const CustomLabelGroupHeading = (
              className={`${baseClass}__add-label-btn`}
            >
              <>
-                <span>Add label</span>
-                <img src={PlusIcon} alt="Add label icon" />
+                Add label
+                <Icon name="plus" />
              </>
            </Button>
          )}
--- a/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/HostsFilterBlock.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/HostsFilterBlock.tsx
@ -25,6 +25,7 @@ import {
 // @ts-ignore
 import Dropdown from "components/forms/fields/Dropdown";
 import Button from "components/buttons/Button";
+import Icon from "components/Icon/Icon";

 import FilterPill from "../FilterPill";
 import PoliciesFilter from "../PoliciesFilter";
@ -32,8 +33,6 @@ import { MAC_SETTINGS_FILTER_OPTIONS } from "../../HostsPageConfig";
 import DiskEncryptionStatusFilter from "../DiskEncryptionStatusFilter";
 import BootstrapPackageStatusFilter from "../BootstrapPackageStatusFilter/BootstrapPackageStatusFilter";

-import PencilIcon from "../../../../../../assets/images/icon-pencil-14x14@2x.png";
-import TrashIcon from "../../../../../../assets/images/icon-trash-14x14@2x.png";
 import PolicyIcon from "../../../../../../assets/images/icon-policy-fleet-black-12x12@2x.png";

 const baseClass = "hosts-filter-block";
@ -137,11 +136,11 @@ const HostsFilterBlock = ({
          />
          {label_type !== "builtin" && !isOnlyObserver && (
            <>
-              <Button onClick={onClickEditLabel} variant={"text-icon"}>
-                <img src={PencilIcon} alt="Edit label" />
+              <Button onClick={onClickEditLabel} variant="small-icon">
+                <Icon name="pencil" size="small" />
              </Button>
-              <Button onClick={onClickDeleteLabel} variant={"text-icon"}>
-                <img src={TrashIcon} alt="Delete label" />
+              <Button onClick={onClickDeleteLabel} variant="small-icon">
+                <Icon name="trash" size="small" />
              </Button>
            </>
          )}
--- a/frontend/pages/hosts/details/HostDetailsPage/modals/OSPolicyModal/OSPolicyModal.tsx
+++ b/frontend/pages/hosts/details/HostDetailsPage/modals/OSPolicyModal/OSPolicyModal.tsx
@ -8,11 +8,10 @@ import InputField from "components/forms/fields/InputField";
 import Modal from "components/Modal";
 import TooltipWrapper from "components/TooltipWrapper";
 import Button from "components/buttons/Button";
+import Icon from "components/Icon/Icon";

 import { ITeam } from "interfaces/team";

-import CopyIcon from "../../../../../../../assets/images/icon-copy-clipboard-fleet-blue-20x20@2x.png";
-
 interface IRenderOSPolicyModal {
  onCreateNewPolicy: (team: ITeam) => void;
  onCancel: () => void;
@ -59,11 +58,11 @@ const OSPolicyModal = ({
              >{`${copyMessage} `}</span>
            )}
            <Button
-              variant="unstyled"
+              variant="icon"
              className={`${baseClass}__os-policy-copy-icon`}
              onClick={onCopyOsPolicy}
            >
-              <img src={CopyIcon} alt="copy" />
+              <Icon name="copy" />
            </Button>
          </span>
        </span>
--- a/frontend/pages/policies/PolicyPage/components/PolicyForm/PolicyForm.tsx
+++ b/frontend/pages/policies/PolicyPage/components/PolicyForm/PolicyForm.tsx
@ -26,11 +26,11 @@ import RevealButton from "components/buttons/RevealButton";
 import Checkbox from "components/forms/fields/Checkbox";
 import TooltipWrapper from "components/TooltipWrapper";
 import Spinner from "components/Spinner";
+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";
-import PencilIcon from "../../../../../../assets/images/icon-pencil-14x14@2x.png";

 const baseClass = "policy-form";

@ -288,7 +288,7 @@ const PolicyForm = ({
    }

    return (
-      <Button variant="text-icon" onClick={onOpenSchemaSidebar}>
+      <Button variant="small-icon" onClick={onOpenSchemaSidebar}>
        <>
          <img alt="" src={InfoIcon} />
          Show schema
@ -327,13 +327,17 @@ const PolicyForm = ({
              onKeyPress={onInputKeypress}
              isFocused={isEditingName}
            />
-            <a className="edit-link" onClick={() => setIsEditingName(true)}>
-              <img
-                className={`edit-icon ${isEditingName && "hide"}`}
-                alt="Edit name"
-                src={PencilIcon}
+            <Button
+              variant="small-icon"
+              className="edit-link"
+              onClick={() => setIsEditingName(true)}
+            >
+              <Icon
+                name="pencil"
+                className={`edit-icon ${isEditingName ? "hide" : ""}`}
+                size="small"
              />
-            </a>
+            </Button>
          </div>
        </>
      );
@ -365,16 +369,17 @@ const PolicyForm = ({
              onKeyPress={onInputKeypress}
              isFocused={isEditingDescription}
            />
-            <a
+            <Button
+              variant="text-icon"
              className="edit-link"
              onClick={() => setIsEditingDescription(true)}
            >
-              <img
-                className={`edit-icon ${isEditingDescription && "hide"}`}
-                alt="Edit name"
-                src={PencilIcon}
+              <Icon
+                name="pencil"
+                className={`edit-icon ${isEditingDescription ? "hide" : ""}`}
+                size="small"
              />
-            </a>
+            </Button>
          </div>
        </>
      );
@ -403,16 +408,17 @@ const PolicyForm = ({
              onKeyPress={onInputKeypress}
              isFocused={isEditingResolution}
            />
-            <a
+            <Button
+              variant="small-icon"
              className="edit-link"
              onClick={() => setIsEditingResolution(true)}
            >
-              <img
-                className={`edit-icon ${isEditingResolution && "hide"}`}
-                alt="Edit name"
-                src={PencilIcon}
+              <Icon
+                name="pencil"
+                className={`edit-icon ${isEditingResolution ? "hide" : ""}`}
+                size="small"
              />
-            </a>
+            </Button>
          </div>
        </>
      );
--- a/frontend/pages/policies/PolicyPage/components/PolicyForm/_styles.scss
+++ b/frontend/pages/policies/PolicyPage/components/PolicyForm/_styles.scss
@ -41,7 +41,8 @@

    .edit-link {
      cursor: pointer;
-      padding-left: 12px;
+      padding-left: $pad-small;
+      height: 16px;
    }

    .name-description-resolve {
@ -82,8 +83,6 @@
        }
      }
      .edit-icon {
-        width: 14px;
-        height: 14px;
        opacity: 1;
        transition: opacity 0.2s;
        margin-left: 0;
--- a/frontend/pages/policies/PolicyPage/components/QueryResults/QueryResults.tsx
+++ b/frontend/pages/policies/PolicyPage/components/QueryResults/QueryResults.tsx
@ -11,16 +11,16 @@ import { ICampaign } from "interfaces/campaign";
 import { ITarget } from "interfaces/target";

 import Button from "components/buttons/Button";
+import Icon from "components/Icon/Icon";
 import TabsWrapper from "components/TabsWrapper";
 import InfoBanner from "components/InfoBanner";
 import ShowQueryModal from "components/modals/ShowQueryModal";
+
 import QueryResultsHeading from "components/queries/queryResults/QueryResultsHeading";
 import AwaitingResults from "components/queries/queryResults/AwaitingResults";

 import PolicyQueryTable from "../PolicyQueriesTable/PolicyQueriesTable";
 import PolicyQueriesErrorsTable from "../PolicyQueriesErrorsTable/PolicyQueriesErrorsTable";
-import DownloadIcon from "../../../../../../assets/images/icon-download-12x12@2x.png";
-import EyeIcon from "../../../../../../assets/images/icon-eye-16x16@2x.png";

 interface IQueryResultsProps {
  campaign: ICampaign;
@ -115,10 +115,10 @@ const QueryResults = ({
        <Button
          className={`${baseClass}__show-query-btn`}
          onClick={onShowQueryModal}
-          variant="text-link"
+          variant="text-icon"
        >
          <>
-            Show query <img alt="Show query" src={EyeIcon} />
+            Show query <Icon name="eye" size="small" />
          </>
        </Button>
        <Button
@ -128,11 +128,11 @@ const QueryResults = ({
              ? onExportErrorsResults
              : onExportQueryResults
          }
-          variant="text-link"
+          variant="text-icon"
        >
          <>
-            {`Export ${tableType}`}{" "}
-            <img alt={`Export ${tableType}`} src={DownloadIcon} />
+            Export {tableType}
+            <Icon name="download" color="core-fleet-blue" />
          </>
        </Button>
      </div>
--- a/frontend/pages/queries/QueryPage/components/QueryForm/QueryForm.tsx
+++ b/frontend/pages/queries/QueryPage/components/QueryForm/QueryForm.tsx
@ -24,10 +24,10 @@ import Button from "components/buttons/Button";
 import RevealButton from "components/buttons/RevealButton";
 import Checkbox from "components/forms/fields/Checkbox";
 import Spinner from "components/Spinner";
+import Icon from "components/Icon/Icon";
 import AutoSizeInputField from "components/forms/fields/AutoSizeInputField";
 import NewQueryModal from "../NewQueryModal";
 import InfoIcon from "../../../../../../assets/images/icon-info-purple-14x14@2x.png";
-import PencilIcon from "../../../../../../assets/images/icon-pencil-14x14@2x.png";

 const baseClass = "query-form";

@ -344,13 +344,17 @@ const QueryForm = ({
              onKeyPress={onInputKeypress}
              isFocused={isEditingName}
            />
-            <a className="edit-link" onClick={() => setIsEditingName(true)}>
-              <img
-                className={`edit-icon ${isEditingName && "hide"}`}
-                alt="Edit name"
-                src={PencilIcon}
+            <Button
+              variant="small-icon"
+              className="edit-link"
+              onClick={() => setIsEditingName(true)}
+            >
+              <Icon
+                name="pencil"
+                className={`edit-icon ${isEditingName ? "hide" : ""}`}
+                size="small"
              />
-            </a>
+            </Button>
          </div>
        </>
      );
@ -376,16 +380,17 @@ const QueryForm = ({
              onKeyPress={onInputKeypress}
              isFocused={isEditingDescription}
            />
-            <a
+            <Button
+              variant="small-icon"
              className="edit-link"
              onClick={() => setIsEditingDescription(true)}
            >
-              <img
-                className={`edit-icon ${isEditingDescription && "hide"}`}
-                alt="Edit name"
-                src={PencilIcon}
+              <Icon
+                name="pencil"
+                className={`edit-icon ${isEditingDescription ? "hide" : ""}`}
+                size="small"
              />
-            </a>
+            </Button>
          </div>
        </>
      );
--- a/frontend/pages/queries/QueryPage/components/QueryForm/_styles.scss
+++ b/frontend/pages/queries/QueryPage/components/QueryForm/_styles.scss
@ -41,7 +41,8 @@

    .edit-link {
      cursor: pointer;
-      padding-left: 12px;
+      padding-left: $pad-small;
+      height: 16px;
    }

    .name-description {
--- a/frontend/pages/queries/QueryPage/components/QueryResults/QueryResults.tsx
+++ b/frontend/pages/queries/QueryPage/components/QueryResults/QueryResults.tsx
@ -11,6 +11,7 @@ import { ICampaign } from "interfaces/campaign";
 import { ITarget } from "interfaces/target";

 import Button from "components/buttons/Button";
+import Icon from "components/Icon/Icon";
 import TableContainer from "components/TableContainer";
 import TabsWrapper from "components/TabsWrapper";
 import ShowQueryModal from "components/modals/ShowQueryModal";
@ -19,9 +20,6 @@ import AwaitingResults from "components/queries/queryResults/AwaitingResults";

 import resultsTableHeaders from "./QueryResultsTableConfig";

-import DownloadIcon from "../../../../../../assets/images/icon-download-12x12@2x.png";
-import EyeIcon from "../../../../../../assets/images/icon-eye-16x16@2x.png";
-
 interface IQueryResultsProps {
  campaign: ICampaign;
  isQueryFinished: boolean;
@ -134,10 +132,10 @@ const QueryResults = ({
        <Button
          className={`${baseClass}__show-query-btn`}
          onClick={onShowQueryModal}
-          variant="text-link"
+          variant="text-icon"
        >
          <>
-            Show query <img alt="Show query" src={EyeIcon} />
+            Show query <Icon name="eye" size="small" />
          </>
        </Button>
        <Button
@ -147,11 +145,11 @@ const QueryResults = ({
              ? onExportErrorsResults
              : onExportQueryResults
          }
-          variant="text-link"
+          variant="text-icon"
        >
          <>
-            {`Export ${tableType}`}{" "}
-            <img alt={`Export ${tableType}`} src={DownloadIcon} />
+            Export {tableType}
+            <Icon name="download" color="core-fleet-blue" />
          </>
        </Button>
      </div>
--- a/frontend/styles/var/padding.scss
+++ b/frontend/styles/var/padding.scss
@ -2,6 +2,7 @@ $pad-auto: auto;
 $pad-xxsmall: px-to-rem(2);
 $pad-xsmall: px-to-rem(4);
 $pad-small: px-to-rem(8);
+$pad-icon: px-to-rem(14);
 $pad-medium: px-to-rem(16);
 $pad-large: px-to-rem(24);
 $pad-xlarge: px-to-rem(32);