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

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
+              <Button
-                href="#downloadCertificate"
+                variant="text-icon"
                 className={`${baseClass}__fleet-certificate-download`}
                 onClick={onDownloadCertificate}
               >
                 Download
-                <img src={DownloadIcon} alt="download" />
+                <Icon name="download" color="core-fleet-blue" size="small" />
-              </a>
+              </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
+                    <Button
-                      href="#downloadEnrollSecret"
+                      variant="text-icon"
                       onClick={onDownloadEnrollSecret}
                     >
                       Download
-                      <img src={DownloadIcon} alt="download icon" />
+                      <Icon
-                    </a>
+                        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" />
+                        <Icon
-                      </a>
+                          name="download"
+                          color="core-fleet-blue"
+                          size="small"
+                        />
+                      </Button>
                     )}
                   </p>
                 </div>

frontend/components/AddHostsModal/PlatformWrapper/_styles.scss

@@ -85,11 +85,14 @@
   }
 
   .buttons {
-    display: block;
+    display: flex;
+    flex-direction: row-reverse;
     align-items: center;
-    position: absolute;
+    position: relative;
-    right: 15px;
     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 {

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>

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"

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>

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 ? (
+                    {action.icon && <Icon name={action.icon} />}
-                      <img src={action.icon} alt={action.label} />
-                    ) : (
-                      <></>
-                    )}
                   </>
                 </Button>
               ))

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 (

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;

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;
 }

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"

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;

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>
   );

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"
+      width={ICON_SIZES[size]}
-      height="16"
+      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>

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"
+      width={ICON_SIZES[size]}
-      height="16"
+      height={ICON_SIZES[size]}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 16 16"
     >
-      <g clipPath="url(#a)" fill="#6a67fe">
+      <g clipPath="url(#a)">
-        <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" />
+        <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">

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"
+        d="M8 3v10M3 8h10"
-        clipRule="evenodd"
+        stroke={COLORS[color]}
-        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"
+        strokeWidth="2"
-        fill={color}
+        strokeLinecap="round"
       />
     </svg>
   );

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"
+      width={ICON_SIZES[size]}
-      height="16"
+      height={ICON_SIZES[size]}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 16 16"

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,

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>

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,
                 },

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>
         )}

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>
+                Add label
-                <img src={PlusIcon} alt="Add label icon" />
+                <Icon name="plus" />
               </>
             </Button>
           )}

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"}>
+              <Button onClick={onClickEditLabel} variant="small-icon">
-                <img src={PencilIcon} alt="Edit label" />
+                <Icon name="pencil" size="small" />
               </Button>
-              <Button onClick={onClickDeleteLabel} variant={"text-icon"}>
+              <Button onClick={onClickDeleteLabel} variant="small-icon">
-                <img src={TrashIcon} alt="Delete label" />
+                <Icon name="trash" size="small" />
               </Button>
             </>
           )}

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>

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)}>
+            <Button
-              <img
+              variant="small-icon"
-                className={`edit-icon ${isEditingName && "hide"}`}
+              className="edit-link"
-                alt="Edit name"
+              onClick={() => setIsEditingName(true)}
-                src={PencilIcon}
+            >
+              <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
+              <Icon
-                className={`edit-icon ${isEditingDescription && "hide"}`}
+                name="pencil"
-                alt="Edit name"
+                className={`edit-icon ${isEditingDescription ? "hide" : ""}`}
-                src={PencilIcon}
+                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
+              <Icon
-                className={`edit-icon ${isEditingResolution && "hide"}`}
+                name="pencil"
-                alt="Edit name"
+                className={`edit-icon ${isEditingResolution ? "hide" : ""}`}
-                src={PencilIcon}
+                size="small"
               />
-            </a>
+            </Button>
           </div>
         </>
       );

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;

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}`}{" "}
+            Export {tableType}
-            <img alt={`Export ${tableType}`} src={DownloadIcon} />
+            <Icon name="download" color="core-fleet-blue" />
           </>
         </Button>
       </div>

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)}>
+            <Button
-              <img
+              variant="small-icon"
-                className={`edit-icon ${isEditingName && "hide"}`}
+              className="edit-link"
-                alt="Edit name"
+              onClick={() => setIsEditingName(true)}
-                src={PencilIcon}
+            >
+              <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
+              <Icon
-                className={`edit-icon ${isEditingDescription && "hide"}`}
+                name="pencil"
-                alt="Edit name"
+                className={`edit-icon ${isEditingDescription ? "hide" : ""}`}
-                src={PencilIcon}
+                size="small"
               />
-            </a>
+            </Button>
           </div>
         </>
       );

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 {

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}`}{" "}
+            Export {tableType}
-            <img alt={`Export ${tableType}`} src={DownloadIcon} />
+            <Icon name="download" color="core-fleet-blue" />
           </>
         </Button>
       </div>

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);