diff --git a/frontend/components/AddHostsModal/PlatformWrapper/_styles.scss b/frontend/components/AddHostsModal/PlatformWrapper/_styles.scss
index f30c0fb485..1fe8795bf9 100644
--- a/frontend/components/AddHostsModal/PlatformWrapper/_styles.scss
+++ b/frontend/components/AddHostsModal/PlatformWrapper/_styles.scss
@@ -72,6 +72,10 @@
   &__copy-message {
     font-weight: $regular;
     vertical-align: top;
+    background-color: $ui-light-grey;
+    border: solid 1px #e2e4ea;
+    border-radius: 10px;
+    padding: 2px 6px;
   }
 
   .buttons {
diff --git a/frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretRow/EnrollSecretRow.tsx b/frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretRow/EnrollSecretRow.tsx
index 6d85842d73..606c314f46 100644
--- a/frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretRow/EnrollSecretRow.tsx
+++ b/frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretRow/EnrollSecretRow.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { uniqueId } from "lodash";
 
 import { stringToClipboard } from "utilities/copy_text";
 import { IEnrollSecret } from "interfaces/enroll_secret";
@@ -6,11 +7,7 @@ import { IEnrollSecret } from "interfaces/enroll_secret";
 import Button from "components/buttons/Button";
 // @ts-ignore
 import InputField from "components/forms/fields/InputField";
-// @ts-ignore
-import ClipboardIcon from "../../../../../assets/images/icon-copy-clipboard-fleet-blue-20x20@2x.png";
-import EyeIcon from "../../../../../assets/images/icon-eye-16x16@2x.png";
-import EditIcon from "../../../../../assets/images/icon-pencil-14x14@2x.png";
-import DeleteIcon from "../../../../../assets/images/icon-trash-14x14@2x.png";
+import Icon from "components/Icon";
 
 const baseClass = "enroll-secrets";
 
@@ -78,29 +75,29 @@ const EnrollSecretRow = ({
           )}
           <Button
             variant="unstyled"
-            className={`${baseClass}__secret-copy-icon`}
+            className={`${baseClass}__copy-secret-icon`}
             onClick={onCopySecret}
           >
-            <img src={ClipboardIcon} alt="copy to clipboard" />
+            <Icon name="clipboard" />
           </Button>
-          <a
-            href="#showSecret"
+          <Button
+            variant="unstyled"
+            className={`${baseClass}__show-secret-icon`}
             onClick={onToggleSecret}
-            className={`${baseClass}__show-secret`}
           >
-            <img src={EyeIcon} alt="show/hide" />
-          </a>
+            <Icon name="eye" />
+          </Button>
         </span>
       </span>
     );
   };
 
   return (
-    <div className={`${baseClass}__secret`} key={secret.secret}>
+    <div className={`${baseClass}__secret`} key={uniqueId()}>
       <InputField
         disabled
         inputWrapperClass={`${baseClass}__secret-input`}
-        name="osqueryd-secret"
+        name={`osqueryd-secret-${uniqueId()}`}
         label={renderLabel()}
         type={showSecret ? "text" : "password"}
         value={secret.secret}
@@ -109,21 +106,17 @@ const EnrollSecretRow = ({
         <>
           <Button
             onClick={onEditSecretClick}
-            className={`${baseClass}__edit-secret-btn`}
+            className={`${baseClass}__edit-secret-icon`}
             variant="text-icon"
           >
-            <>
-              <img src={EditIcon} alt="Edit secret icon" />
-            </>
+            <Icon name="pencil" />
           </Button>
           <Button
             onClick={onDeleteSecretClick}
-            className={`${baseClass}__delete-secret-btn`}
+            className={`${baseClass}__delete-secret-icon`}
             variant="text-icon"
           >
-            <>
-              <img src={DeleteIcon} alt="Delete secret icon" />
-            </>
+            <Icon name="trash" />
           </Button>
         </>
       )}
diff --git a/frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretRow/_styles.scss b/frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretRow/_styles.scss
index 7490055ff6..3ec534d186 100644
--- a/frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretRow/_styles.scss
+++ b/frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretRow/_styles.scss
@@ -15,12 +15,10 @@
       font-size: $x-small;
       font-weight: $bold;
       margin-bottom: 0;
-      width: 485px;
+      width: 500px;
     }
 
     .input-field {
-      width: 560px;
-
       &--disabled {
         letter-spacing: 0;
       }
@@ -31,10 +29,13 @@
     }
   }
 
-  &__secret-copy-icon {
-    color: $core-vibrant-blue;
-    margin-left: $pad-small;
-    margin-right: $pad-medium;
+  &__copy-message {
+    position: absolute;
+    right: 65px;
+    background-color: $ui-light-grey;
+    border: solid 1px #e2e4ea;
+    border-radius: 10px;
+    padding: 2px 6px;
   }
 
   .buttons {
@@ -48,48 +49,19 @@
     span {
       font-weight: $regular;
     }
-
-    a {
-      display: flex;
-      align-items: center;
-    }
-
-    img {
-      width: 16px;
-      height: 16px;
-    }
-  }
-
-  &__secret-download-icon {
-    display: block;
-    font-size: $x-small;
-    color: $core-vibrant-blue;
-    font-weight: $bold;
-
-    a {
-      display: flex;
-      align-items: center;
-    }
-
-    img {
-      width: 12px;
-      height: 12px;
-      margin-left: 7px;
-    }
   }
 
   &--multiple-secrets {
     .form-field__label {
       margin-top: 0;
     }
-
-    .enroll-secrets__secret-download-icon {
-      margin-bottom: $pad-medium;
-    }
   }
 
-  &__edit-secret-btn,
-  &__delete-secret-btn {
-    margin: 0 $pad-small;
+  &__show-secret-icon,
+  &__copy-secret-icon,
+  &__edit-secret-icon,
+  &__delete-secret-icon {
+    padding: 0 $pad-small;
+    margin-left: $pad-xsmall;
   }
 }
diff --git a/frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretTable.tsx b/frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretTable.tsx
index 60dfe0dfe6..ef6ca07b70 100644
--- a/frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretTable.tsx
+++ b/frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretTable.tsx
@@ -48,11 +48,12 @@ const EnrollSecretTable = ({
       </div>
     );
   }
+
   return (
     <div className={enrollSecretsClass}>
-      {secrets.map((secretInfo) => (
-        <EnrollSecretRow secret={secretInfo} key={secretInfo.secret} />
-      ))}
+      {secrets.map((secretInfo) => {
+        return <EnrollSecretRow secret={secretInfo} key={secretInfo.secret} />;
+      })}
     </div>
   );
 };
diff --git a/frontend/components/EnrollSecrets/SecretField/_styles.scss b/frontend/components/EnrollSecrets/SecretField/_styles.scss
index 4f53cecf61..dadfe1273e 100644
--- a/frontend/components/EnrollSecrets/SecretField/_styles.scss
+++ b/frontend/components/EnrollSecrets/SecretField/_styles.scss
@@ -30,15 +30,6 @@
     margin-right: $pad-small;
   }
 
-  .copy-message {
-    position: absolute;
-    right: 44px;
-    background-color: $ui-light-grey;
-    border: solid 1px #e2e4ea;
-    border-radius: 10px;
-    padding: 2px 6px;
-  }
-
   .buttons {
     display: flex;
     align-items: center;
diff --git a/frontend/components/icons/Clipboard.tsx b/frontend/components/icons/Clipboard.tsx
new file mode 100644
index 0000000000..dfd68add86
--- /dev/null
+++ b/frontend/components/icons/Clipboard.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+const Clipboard = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+    >
+      <path
+        d="M6.4 2.4a.8.8 0 0 1 .8-.8h1.6a.8.8 0 1 1 0 1.6H7.2a.8.8 0 0 1-.8-.8Z"
+        fill="#6A67FE"
+      />
+      <path
+        d="M4.8 2.4A1.6 1.6 0 0 0 3.2 4v8.8a1.6 1.6 0 0 0 1.6 1.6h6.4a1.6 1.6 0 0 0 1.6-1.6V4a1.6 1.6 0 0 0-1.6-1.6 2.4 2.4 0 0 1-2.4 2.4H7.2a2.4 2.4 0 0 1-2.4-2.4Z"
+        fill="#6A67FE"
+      />
+    </svg>
+  );
+};
+export default Clipboard;
diff --git a/frontend/components/icons/Eye.tsx b/frontend/components/icons/Eye.tsx
new file mode 100644
index 0000000000..5f20097465
--- /dev/null
+++ b/frontend/components/icons/Eye.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+const Eye = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+    >
+      <g clipPath="url(#a)" fill="#6a67fe">
+        <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>
+      <defs>
+        <clipPath id="a">
+          <path fill="#fff" d="M0 0h16v16H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default Eye;
diff --git a/frontend/components/icons/Pencil.tsx b/frontend/components/icons/Pencil.tsx
new file mode 100644
index 0000000000..4dc5275563
--- /dev/null
+++ b/frontend/components/icons/Pencil.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const Pencil = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      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>
+      <defs>
+        <clipPath id="a">
+          <path fill="#fff" d="M0 0h16v16H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default Pencil;
diff --git a/frontend/components/icons/TrashCan.tsx b/frontend/components/icons/TrashCan.tsx
new file mode 100644
index 0000000000..d0eb1113da
--- /dev/null
+++ b/frontend/components/icons/TrashCan.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const TrashCan = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+    >
+      <path
+        d="M13.25 2H10.5v-.5A1.5 1.5 0 0 0 9 0H7a1.5 1.5 0 0 0-1.5 1.5V2H2.75c-.69 0-1.25.56-1.25 1.25v1a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5v-1c0-.69-.56-1.25-1.25-1.25ZM6.5 1.5A.5.5 0 0 1 7 1h2a.5.5 0 0 1 .5.5V2h-3v-.5ZM2.449 5.75c-.09 0-.16.075-.156.164l.412 8.657A1.498 1.498 0 0 0 4.203 16h7.593c.802 0 1.46-.627 1.498-1.429l.413-8.657a.156.156 0 0 0-.156-.164H2.449ZM9.999 7a.5.5 0 1 1 1 0v6.5a.5.5 0 1 1-1 0V7ZM7.5 7a.5.5 0 1 1 1 0v6.5a.5.5 0 1 1-1 0V7ZM5 7a.5.5 0 1 1 1 0v6.5a.5.5 0 1 1-1 0V7Z"
+        fill="#6a67fe"
+      />
+    </svg>
+  );
+};
+
+export default TrashCan;
diff --git a/frontend/components/icons/index.ts b/frontend/components/icons/index.ts
index c345229754..d0b80f81f7 100644
--- a/frontend/components/icons/index.ts
+++ b/frontend/components/icons/index.ts
@@ -13,6 +13,10 @@ import Error from "./Error";
 import Success from "./Success";
 import Check from "./Check";
 import Plus from "./Plus";
+import Clipboard from "./Clipboard";
+import Eye from "./Eye";
+import Pencil from "./Pencil";
+import TrashCan from "./TrashCan";
 
 // a mapping of the usable names of icons to the icon source.
 export const ICON_MAP = {
@@ -20,6 +24,10 @@ export const ICON_MAP = {
   chevron: Chevron,
   check: Check,
   plus: Plus,
+  clipboard: Clipboard,
+  eye: Eye,
+  pencil: Pencil,
+  trash: TrashCan,
   success: Success,
   error: Error,
   darwin: Apple,