diff --git a/frontend/components/Icon/README.md b/frontend/components/Icon/README.md
new file mode 100644
index 0000000000..d2b4a9464a
--- /dev/null
+++ b/frontend/components/Icon/README.md
@@ -0,0 +1,26 @@
+# Fleet icons library
+
+## Migrating icons
+
+There is a current migration of icons from pixelated PNG files to SVG components.
+
+For internal developers, the source of truth for icon SVGs is on [Fleet style guide](https://www.figma.com/file/qbjRu8jf01BzEfdcge1dgu/Fleet-style-guide-2022-(WIP)?type=design&node-id=213-30309&t=kZelMf1i2hQ7GAaI-0) on Figma. Current progress on migrating icons is tracked on a [Fleet icons spreadsheet](https://docs.google.com/spreadsheets/d/1dNcppmEmnlDvozNKQZ7fgZlqkf7_delkDMtIJCJ2X20/edit?usp=sharing).
+
+## Code organization
+
+### Icon directory
+
+The `Icon` directory includes global styling, the global `Icon` component, and the storybook integration.
+
+### icons directory
+
+The `icons` directory includes separate files for all SVG components for Fleet icons.
+
+Each component can be modified to take various props including but not limited to `color` using `frontend/styles/var/colors.ts`, `size` using `frontend/styles/var/icon_sizes`, or `direction` using custom SVG paths (e.g., `Chevron.tsx`).
+
+`index.ts` maps all icon names used in `<Icon name="icon-name" />` to its respective SVG component.
+
+## How to view Fleet icons
+
+Figma extensions for SVG previews cannot render all SVG components. Use [Storybook](../../README.md#storybook) to easily view Fleet icons by running `yarn storybook`.
+
diff --git a/frontend/components/buttons/ActionButtons/ActionButtons.tsx b/frontend/components/buttons/ActionButtons/ActionButtons.tsx
index 994cc94d13..dc993b03e2 100644
--- a/frontend/components/buttons/ActionButtons/ActionButtons.tsx
+++ b/frontend/components/buttons/ActionButtons/ActionButtons.tsx
@@ -5,6 +5,7 @@ import { ButtonVariant } from "components/buttons/Button/Button";
 // @ts-ignore
 import DropdownButton from "components/buttons/DropdownButton";
 import Icon from "components/Icon/Icon";
+import { IconNames } from "components/icons";
 
 import MoreIcon from "../../../../assets/images/icon-more-menu-3x13@2x.png";
 
@@ -13,6 +14,7 @@ export interface IActionButtonProps {
   label: string;
   buttonVariant?: ButtonVariant;
   icon?: string;
+  iconSvg?: IconNames;
   hideAction?: boolean;
   onClick: () => void;
 }
@@ -63,7 +65,7 @@ const ActionButtons = ({ baseClass, actions }: IProps): JSX.Element => {
                 <Button variant="text-icon" onClick={action.onClick}>
                   <>
                     {action.label}
-                    {action.icon && <Icon name={action.icon} />}
+                    {action.iconSvg && <Icon name={action.iconSvg} />}
                   </>
                 </Button>
               ))