diff --git a/pkg/rancher-components/package.json b/pkg/rancher-components/package.json
index 7b14bf6ac74..7868ba06b05 100644
--- a/pkg/rancher-components/package.json
+++ b/pkg/rancher-components/package.json
@@ -21,6 +21,7 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
+    "@rancher/icons": "^2.0.53",
     "lodash.debounce": "4.0.8"
   },
   "devDependencies": {
diff --git a/pkg/rancher-components/src/components/Pill/RcStatusBadge/RcStatusBadge.vue b/pkg/rancher-components/src/components/Pill/RcStatusBadge/RcStatusBadge.vue
index 83ba3a14bf9..0e9f7ef759a 100644
--- a/pkg/rancher-components/src/components/Pill/RcStatusBadge/RcStatusBadge.vue
+++ b/pkg/rancher-components/src/components/Pill/RcStatusBadge/RcStatusBadge.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { RcStatusBadgeProps } from './types';
+import { useStatusColors } from '@components/utils/status';
 
 const props = defineProps<RcStatusBadgeProps>();
+
+const { backgroundColor, borderColor, textColor } = useStatusColors(props, 'outlined');
 </script>
 
 <template>
@@ -27,47 +30,8 @@ const props = defineProps<RcStatusBadgeProps>();
     font-size: 12px;
     line-height: 19px;
 
-    &.info {
-        background-color: var(--rc-info-secondary);
-        border-color: var(--rc-info-secondary);
-        color: var(--rc-info);
-    }
-
-    &.success {
-        background-color: var(--rc-success-secondary);
-        border-color: var(--rc-success-secondary);
-        color: var(--rc-success);
-    }
-
-    &.warning {
-        background-color: var(--rc-warning);
-        border-color: var(--rc-warning);
-        color: var(--rc-warning-secondary);
-    }
-
-    &.error {
-        background-color: var(--rc-error);
-        border-color: var(--rc-error);
-        color: var(--rc-error-secondary);
-    }
-
-    &.unknown {
-        background-color: var(--rc-unknown);
-        border-color: var(--rc-unknown);
-        color: var(--rc-unknown-secondary);
-    }
-
-    &.none {
-        border-color: var(--rc-none);
-        color: var(--rc-none-secondary);
-    }
-
-    &.prime {
-        background-color: var(--rc-success-secondary);
-        border-color: var(--rc-success-secondary);
-        color: var(--rc-success);
-        font-size: 10px;
-        line-height: 15px;
-    }
+    background-color: v-bind(backgroundColor);
+    border-color: v-bind(borderColor);
+    color: v-bind(textColor);
 }
 </style>
diff --git a/pkg/rancher-components/src/components/Pill/RcStatusBadge/index.ts b/pkg/rancher-components/src/components/Pill/RcStatusBadge/index.ts
index 2da99717d93..bb708968b2f 100644
--- a/pkg/rancher-components/src/components/Pill/RcStatusBadge/index.ts
+++ b/pkg/rancher-components/src/components/Pill/RcStatusBadge/index.ts
@@ -1,2 +1 @@
 export { default } from './RcStatusBadge.vue';
-export type { Status } from '../types';
diff --git a/pkg/rancher-components/src/components/Pill/RcStatusBadge/types.ts b/pkg/rancher-components/src/components/Pill/RcStatusBadge/types.ts
index cba9a88daa7..c22f6527fd8 100644
--- a/pkg/rancher-components/src/components/Pill/RcStatusBadge/types.ts
+++ b/pkg/rancher-components/src/components/Pill/RcStatusBadge/types.ts
@@ -1,4 +1,4 @@
-import { Status } from '@components/Pill/types';
+import { Status } from '@components/utils/status';
 
 export interface RcStatusBadgeProps {
   status: Status;
diff --git a/pkg/rancher-components/src/components/Pill/RcStatusIndicator/RcStatusIndicator.vue b/pkg/rancher-components/src/components/Pill/RcStatusIndicator/RcStatusIndicator.vue
index 777fc2aa0b7..04b437e49e0 100644
--- a/pkg/rancher-components/src/components/Pill/RcStatusIndicator/RcStatusIndicator.vue
+++ b/pkg/rancher-components/src/components/Pill/RcStatusIndicator/RcStatusIndicator.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { RcStatusIndicatorProps } from './types';
+import { useStatusColors } from '@components/utils/status';
 
 const props = defineProps<RcStatusIndicatorProps>();
+
+const { backgroundColor, borderColor } = useStatusColors(props, 'solid');
 </script>
 
 <template>
@@ -42,34 +45,8 @@ const props = defineProps<RcStatusIndicatorProps>();
             border-radius: 2px;
         }
 
-        &.info {
-            background-color: var(--rc-info);
-            border-color: var(--rc-info);
-        }
-
-        &.success {
-            background-color: var(--rc-success);
-            border-color: var(--rc-success);
-        }
-
-        &.warning {
-            background-color: var(--rc-warning);
-            border-color: var(--rc-warning);
-        }
-
-        &.error {
-            background-color: var(--rc-error);
-            border-color: var(--rc-error);
-        }
-
-        &.unknown {
-            background-color: var(--rc-unknown);
-            border-color: var(--rc-unknown);
-        }
-
-        &.none {
-            border-color: var(--rc-none);
-        }
+        background-color: v-bind(backgroundColor);
+        border-color: v-bind(borderColor);
     }
 }
 </style>
diff --git a/pkg/rancher-components/src/components/Pill/RcStatusIndicator/types.ts b/pkg/rancher-components/src/components/Pill/RcStatusIndicator/types.ts
index c035fc69010..6b726318828 100644
--- a/pkg/rancher-components/src/components/Pill/RcStatusIndicator/types.ts
+++ b/pkg/rancher-components/src/components/Pill/RcStatusIndicator/types.ts
@@ -1,4 +1,5 @@
-import { Status } from '../types';
+import { Status } from '@components/utils/status';
+
 export type Shape = 'disc' | 'horizontal-bar' | 'vertical-bar';
 
 export interface RcStatusIndicatorProps {
diff --git a/pkg/rancher-components/src/components/Pill/types.ts b/pkg/rancher-components/src/components/Pill/types.ts
index 073aee225c7..f781d0b6604 100644
--- a/pkg/rancher-components/src/components/Pill/types.ts
+++ b/pkg/rancher-components/src/components/Pill/types.ts
@@ -1,3 +1,2 @@
 export type Shape = 'disc' | 'horizontal-bar' | 'vertical-bar';
-export type Status = 'info' | 'success' | 'warning' | 'error' | 'unknown' | 'none';
 export type Type = 'active' | 'inactive';
diff --git a/pkg/rancher-components/src/components/RcIcon/RcIcon.test.ts b/pkg/rancher-components/src/components/RcIcon/RcIcon.test.ts
new file mode 100644
index 00000000000..143b2c6e050
--- /dev/null
+++ b/pkg/rancher-components/src/components/RcIcon/RcIcon.test.ts
@@ -0,0 +1,51 @@
+import { shallowMount } from '@vue/test-utils';
+import RcIcon from './RcIcon.vue';
+
+describe('rcIcon.vue', () => {
+  it('renders with the correct type class and size classes', () => {
+    const wrapper = shallowMount(RcIcon, {
+      props: {
+        size: 'medium',
+        type: 'search',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('icon-search');
+    expect(wrapper.classes()).toContain('medium');
+  });
+
+  it('sets aria-hidden to true by default', () => {
+    const wrapper = shallowMount(RcIcon, {
+      props: {
+        size: 'medium',
+        type: 'search',
+      },
+    });
+
+    expect(wrapper.attributes('aria-hidden')).toBe('true');
+  });
+
+  it('sets aria-hidden to false when explicitly provided', () => {
+    const wrapper = shallowMount(RcIcon, {
+      props: {
+        size:       'medium',
+        type:       'search',
+        ariaHidden: false,
+      },
+    });
+
+    expect(wrapper.attributes('aria-hidden')).toBe('false');
+  });
+
+  it('sets aria-hidden to true when explicitly provided', () => {
+    const wrapper = shallowMount(RcIcon, {
+      props: {
+        size:       'medium',
+        type:       'search',
+        ariaHidden: true,
+      },
+    });
+
+    expect(wrapper.attributes('aria-hidden')).toBe('true');
+  });
+});
diff --git a/pkg/rancher-components/src/components/RcIcon/RcIcon.vue b/pkg/rancher-components/src/components/RcIcon/RcIcon.vue
new file mode 100644
index 00000000000..c0f178c9e86
--- /dev/null
+++ b/pkg/rancher-components/src/components/RcIcon/RcIcon.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { RcIconProps, RcIconType, RcIconSize } from '@components/RcIcon/types';
+import { computed } from 'vue';
+import { useStatusColors } from '@components/utils/status';
+const props = withDefaults(defineProps<RcIconProps>(), { size: 'small', ariaHidden: true });
+const fontSize = computed(() => {
+  return RcIconSize[props.size];
+});
+
+const iconClass = computed(() => {
+  return RcIconType[props.type];
+});
+
+const status = computed(() => {
+  if (props.status && props.status !== 'inherit') {
+    return props.status;
+  }
+
+  return 'none';
+});
+
+const { textColor } = useStatusColors({ status: status.value }, 'outlined');
+
+const color = computed(() => {
+  if (props.status === 'inherit') {
+    return 'inherit';
+  }
+
+  return textColor.value;
+});
+</script>
+
+<template>
+  <i
+    class="rc-icon"
+    :class="{[props.size]: true, [iconClass]: true}"
+    :aria-hidden="props.ariaHidden"
+  />
+</template>
+
+<style lang="scss" scoped>
+.rc-icon {
+  font-size: v-bind(fontSize);
+  color: v-bind(color);
+}
+</style>
diff --git a/pkg/rancher-components/src/components/RcIcon/index.ts b/pkg/rancher-components/src/components/RcIcon/index.ts
new file mode 100644
index 00000000000..8747fa2eaf0
--- /dev/null
+++ b/pkg/rancher-components/src/components/RcIcon/index.ts
@@ -0,0 +1 @@
+export { default as RcIcon } from './RcIcon.vue';
diff --git a/pkg/rancher-components/src/components/RcIcon/types.ts b/pkg/rancher-components/src/components/RcIcon/types.ts
new file mode 100644
index 00000000000..15535a1e474
--- /dev/null
+++ b/pkg/rancher-components/src/components/RcIcon/types.ts
@@ -0,0 +1,160 @@
+import { Status } from '../utils/status';
+
+export const RcIconType = {
+  actions:                 'icon-actions',
+  ai:                      'icon-ai',
+  'alert-alt':             'icon-alert-alt',
+  alert:                   'icon-alert',
+  anchor:                  'icon-anchor',
+  apple:                   'icon-apple',
+  application:             'icon-application',
+  apps:                    'icon-apps',
+  archive:                 'icon-archive',
+  'backup-restore':        'icon-backup-restore',
+  backup:                  'icon-backup',
+  'brush-icon':            'icon-brush-icon',
+  'category-alt':          'icon-category-alt',
+  checkmark:               'icon-checkmark',
+  'chevron-beginning':     'icon-chevron-beginning',
+  'chevron-down':          'icon-chevron-down',
+  'chevron-end':           'icon-chevron-end',
+  'chevron-left':          'icon-chevron-left',
+  'chevron-right':         'icon-chevron-right',
+  'chevron-up':            'icon-chevron-up',
+  'circle-plus':           'icon-circle-plus',
+  cis:                     'icon-cis',
+  close:                   'icon-close',
+  'cluster-management':    'icon-cluster-management',
+  cluster:                 'icon-cluster',
+  code:                    'icon-code',
+  comment:                 'icon-comment',
+  commit:                  'icon-commit',
+  compass:                 'icon-compass',
+  'confirmation-alt':      'icon-confirmation-alt',
+  copy:                    'icon-copy',
+  dashboard:               'icon-dashboard',
+  dock:                    'icon-dock',
+  docker:                  'icon-docker',
+  document:                'icon-document',
+  'dot-half':              'icon-dot-half',
+  'dot-open':              'icon-dot-open',
+  dot:                     'icon-dot',
+  'downgrade-alt':         'icon-downgrade-alt',
+  download:                'icon-download',
+  edit:                    'icon-edit',
+  elemental:               'icon-elemental',
+  endpoints_connected:     'icon-endpoints_connected',
+  endpoints_disconnected:  'icon-endpoints_disconnected',
+  epinio:                  'icon-epinio',
+  error:                   'icon-error',
+  explore:                 'icon-explore',
+  extension:               'icon-extension',
+  'external-link':         'icon-external-link',
+  file:                    'icon-file',
+  filter_alt:              'icon-filter_alt',
+  flask:                   'icon-flask',
+  fleet:                   'icon-fleet',
+  folder:                  'icon-folder',
+  fork:                    'icon-fork',
+  gatekeeper:              'icon-gatekeeper',
+  gear:                    'icon-gear',
+  gemini:                  'icon-gemini',
+  git:                     'icon-git',
+  github:                  'icon-github',
+  gitlab:                  'icon-gitlab',
+  globe:                   'icon-globe',
+  groups:                  'icon-groups',
+  harvester:               'icon-harvester',
+  helm:                    'icon-helm',
+  hide:                    'icon-hide',
+  history:                 'icon-history',
+  home:                    'icon-home',
+  'info-circle':           'icon-info-circle',
+  info:                    'icon-info',
+  init_container:          'icon-init_container',
+  istio:                   'icon-istio',
+  keyboard:                'icon-keyboard',
+  keyboard_tab:            'icon-keyboard_tab',
+  linux:                   'icon-linux',
+  'list-flat':             'icon-list-flat',
+  'list-grouped':          'icon-list-grouped',
+  lock:                    'icon-lock',
+  logging:                 'icon-logging',
+  longhorn:                'icon-longhorn',
+  marketplace:             'icon-marketplace',
+  menu:                    'icon-menu',
+  minus:                   'icon-minus',
+  monitoring:              'icon-monitoring',
+  more:                    'icon-more',
+  namespace:               'icon-namespace',
+  notifier:                'icon-notifier',
+  'notify-announcement':   'icon-notify-announcement',
+  'notify-bell':           'icon-notify-bell',
+  'notify-busy':           'icon-notify-busy',
+  'notify-error':          'icon-notify-error',
+  'notify-info':           'icon-notify-info',
+  'notify-tick':           'icon-notify-tick',
+  'notify-warning':        'icon-notify-warning',
+  ollama:                  'icon-ollama',
+  openai:                  'icon-openai',
+  'os-management':         'icon-os-management',
+  pause:                   'icon-pause',
+  'pin-outlined':          'icon-pin-outlined',
+  pin:                     'icon-pin',
+  pipeline:                'icon-pipeline',
+  play:                    'icon-play',
+  plus:                    'icon-plus',
+  pod_security:            'icon-pod_security',
+  print:                   'icon-print',
+  'question-mark':         'icon-question-mark',
+  'quick-action':          'icon-quick-action',
+  'rancher-desktop':       'icon-rancher-desktop',
+  'rancher-observability': 'icon-rancher-observability',
+  'refresh-alt':           'icon-refresh-alt',
+  refresh:                 'icon-refresh',
+  'repository-alt':        'icon-repository-alt',
+  repository:              'icon-repository',
+  rio:                     'icon-rio',
+  'role-binding':          'icon-role-binding',
+  search:                  'icon-search',
+  send:                    'icon-send',
+  service:                 'icon-service',
+  show:                    'icon-show',
+  snapshot:                'icon-snapshot',
+  'sort-down':             'icon-sort-down',
+  'sort-up':               'icon-sort-up',
+  sort:                    'icon-sort',
+  sources:                 'icon-sources',
+  spinner:                 'icon-spinner',
+  stackstate:              'icon-stackstate',
+  'star-open':             'icon-star-open',
+  star:                    'icon-star',
+  storage:                 'icon-storage',
+  'tag-alt':               'icon-tag-alt',
+  terminal:                'icon-terminal',
+  'thinking-process':      'icon-thinking-process',
+  trash:                   'icon-trash',
+  unlock:                  'icon-unlock',
+  'upgrade-alt':           'icon-upgrade-alt',
+  upload:                  'icon-upload',
+  'user-check':            'icon-user-check',
+  'user-xmark':            'icon-user-xmark',
+  user:                    'icon-user',
+  'version-alt':           'icon-version-alt',
+  warning:                 'icon-warning',
+  windows:                 'icon-windows',
+};
+
+export const RcIconSize = {
+  large:  '25px',
+  medium: '18px',
+  small:  '14px',
+  none:   undefined
+};
+
+export interface RcIconProps {
+  size: keyof typeof RcIconSize;
+  type: keyof typeof RcIconType;
+  ariaHidden?: boolean;
+  status?: Status | 'inherit';
+}
diff --git a/pkg/rancher-components/src/components/utils/status.test.ts b/pkg/rancher-components/src/components/utils/status.test.ts
new file mode 100644
index 00000000000..de3351922f9
--- /dev/null
+++ b/pkg/rancher-components/src/components/utils/status.test.ts
@@ -0,0 +1,67 @@
+
+import { reactive } from 'vue';
+import { wrapIfVar, useStatusColors, Status } from './status';
+
+describe('utils: status', () => {
+  describe('wrapIfVar', () => {
+    it('should wrap a CSS variable', () => {
+      const result = wrapIfVar('--rc-info');
+
+      expect(result).toBe('var(--rc-info)');
+    });
+
+    it('should not wrap a normal color', () => {
+      const result = wrapIfVar('red');
+
+      expect(result).toBe('red');
+    });
+  });
+
+  describe('useStatusColors', () => {
+    it.each([
+      'info',
+      'success',
+      'warning',
+      'error',
+      'unknown',
+      'none'
+    ])('solid: should return the correct colors for status: %p', (status: Status) => {
+      const props = reactive({ status });
+      const {
+        borderColor,
+        backgroundColor,
+        textColor
+      } = useStatusColors(props, 'solid');
+
+      expect(borderColor.value).toBe(`var(--rc-${ status })`);
+      if (status !== 'none') {
+        // eslint-disable-next-line jest/no-conditional-expect
+        expect(backgroundColor.value).toBe(`var(--rc-${ status })`);
+      }
+      expect(textColor.value).toBe(`var(--rc-${ status }-secondary)`);
+    });
+
+    it.each([
+      'info',
+      'success',
+      'warning',
+      'error',
+      'unknown',
+      'none'
+    ])('outlined: should return the correct colors for status: %p', (status: Status) => {
+      const props = reactive({ status });
+      const {
+        borderColor,
+        backgroundColor,
+        textColor
+      } = useStatusColors(props, 'outlined');
+
+      expect(borderColor.value).toBe(`var(--rc-${ status }-secondary)`);
+      if (status !== 'none') {
+        // eslint-disable-next-line jest/no-conditional-expect
+        expect(backgroundColor.value).toBe(`var(--rc-${ status }-secondary)`);
+      }
+      expect(textColor.value).toBe(`var(--rc-${ status })`);
+    });
+  });
+});
diff --git a/pkg/rancher-components/src/components/utils/status.ts b/pkg/rancher-components/src/components/utils/status.ts
new file mode 100644
index 00000000000..cb95cb8c610
--- /dev/null
+++ b/pkg/rancher-components/src/components/utils/status.ts
@@ -0,0 +1,77 @@
+import { computed } from 'vue';
+
+export const StatusDefinitions = {
+  info: {
+    primary:   '--rc-info',
+    secondary: '--rc-info-secondary'
+  },
+  success: {
+    primary:   '--rc-success',
+    secondary: '--rc-success-secondary'
+  },
+  warning: {
+    primary:   '--rc-warning',
+    secondary: '--rc-warning-secondary'
+  },
+  error: {
+    primary:   '--rc-error',
+    secondary: '--rc-error-secondary'
+  },
+  unknown: {
+    primary:   '--rc-unknown',
+    secondary: '--rc-unknown-secondary'
+  },
+  none: {
+    primary:   '--rc-none',
+    secondary: '--rc-none-secondary'
+  },
+};
+
+export type Status = keyof typeof StatusDefinitions;
+export type StatusObject = { status: Status };
+export type Style = 'solid' | 'outlined';
+
+export function wrapIfVar(colorVar: string) {
+  return colorVar.startsWith('--') ? `var(${ colorVar })` : colorVar;
+}
+
+/**
+ * A composable to make it easier to use status colors in multiple components
+ *
+ * @param propsWithStatus The props which contain a `status: Status` property. Ideally I'd prefer to just pass status but doing so either forces the consumer to wrap the values in a Ref or this code is no longer reactive.
+ * @param style {@link Style} Will the block of code being using the solid or outlined styling
+ * @returns An object containing the relevant style colors
+ */
+export function useStatusColors(propsWithStatus: StatusObject, style: Style) {
+  const statusColors = computed(() => {
+    return StatusDefinitions[propsWithStatus.status];
+  });
+  const isOutlined = style === 'outlined';
+
+  const borderColor = computed(() => {
+    const colorVar = isOutlined ? statusColors.value.secondary : statusColors.value.primary;
+
+    return wrapIfVar(colorVar);
+  });
+
+  const backgroundColor = computed(() => {
+    if (propsWithStatus.status === 'none') {
+      return 'none';
+    }
+    const colorVar = isOutlined ? statusColors.value.secondary : statusColors.value.primary;
+
+    return wrapIfVar(colorVar);
+  });
+
+  const textColor = computed(() => {
+    const colorVar = isOutlined ? statusColors.value.primary : statusColors.value.secondary;
+
+    return wrapIfVar(colorVar);
+  });
+
+  return {
+    borderColor,
+    backgroundColor,
+    textColor
+  };
+}
diff --git a/pkg/rancher-components/src/index.ts b/pkg/rancher-components/src/index.ts
index e501f852404..0a50eae3bc4 100644
--- a/pkg/rancher-components/src/index.ts
+++ b/pkg/rancher-components/src/index.ts
@@ -10,5 +10,6 @@ export {
   RcDropdownTrigger,
   RcDropdownMenu
 } from './components/RcDropdown';
+export { RcIcon } from './components/RcIcon';
 export { RcItemCard, RcItemCardAction } from './components/RcItemCard';
 export * from './components/Form';
diff --git a/shell/pages/c/_cluster/manager/hostedprovider/index.vue b/shell/pages/c/_cluster/manager/hostedprovider/index.vue
index 1dc4071a068..a791d6c33a0 100644
--- a/shell/pages/c/_cluster/manager/hostedprovider/index.vue
+++ b/shell/pages/c/_cluster/manager/hostedprovider/index.vue
@@ -196,7 +196,8 @@ export default {
             <span class="mr-10">{{ row.name }}</span>
             <RcStatusBadge
               v-if="row.prime"
-              status="prime"
+              class="prime-badge"
+              status="success"
             >
               {{ t('providers.hosted.prime') }}
             </RcStatusBadge>
@@ -212,3 +213,10 @@ export default {
     </ResourceTable>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.prime-badge {
+  font-size: 10px;
+  line-height: 15px;
+}
+</style>
diff --git a/storybook/src/stories/Components/RcIcon.mdx b/storybook/src/stories/Components/RcIcon.mdx
new file mode 100644
index 00000000000..7061be95c9d
--- /dev/null
+++ b/storybook/src/stories/Components/RcIcon.mdx
@@ -0,0 +1,14 @@
+import { Meta, Canvas, Story, Controls } from '@storybook/blocks';
+import * as RcIconStories from './RcIcon.stories';
+
+
+
+# RcIcon
+
+Use RcIcon anytime you want to display some Iconography in the app.
+
+<Canvas of={RcIconStories.Default} layout="centered" />
+
+<Controls of={RcIconStories.Default} />
+
+<Canvas of={RcIconStories.All} />
diff --git a/storybook/src/stories/Components/RcIcon.stories.ts b/storybook/src/stories/Components/RcIcon.stories.ts
new file mode 100644
index 00000000000..7d18b4e0bb1
--- /dev/null
+++ b/storybook/src/stories/Components/RcIcon.stories.ts
@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { RcIcon } from '@components/RcIcon';
+import { RcIconSize, RcIconType } from '@components/RcIcon/types';
+import { StatusDefinitions } from '@components/utils/status';
+
+const meta: Meta<typeof RcIcon> = {
+  component: RcIcon,
+  argTypes:  {
+    type: {
+      options:     Object.keys(RcIconType),
+      control:     { type: 'select' },
+      description: `Determines which icon will be shown.`
+    },
+    size: {
+      options:     Object.keys(RcIconSize),
+      control:     { type: 'select' },
+      description: "Determines the size of the icon. `small`, `medium`, and `large` are the standard sizes and 'none' should be used if you plan to style it yourself. We highly discourage using `none` we'd like to limit the amount of sizes we use."
+    },
+    status: {
+      options:     [...Object.keys(StatusDefinitions), 'inherit'],
+      control:     { type: 'select' },
+      description: 'Determines the color of the text based on the status used. This value can also be `inherit` which means that the color should inherit the text of the surrounding text.'
+    },
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof RcIcon>;
+
+export const Default: Story = {
+  render: (args: any) => ({
+    components: { RcIcon },
+    setup() {
+      return { args };
+    },
+    template: '<RcIcon v-bind="args" />',
+  }),
+  args: {
+    type:   'search',
+    size:   'large',
+    status: 'success'
+  },
+};
+
+export const All: Story = {
+  render: (args: any) => ({
+    components: { RcIcon },
+    setup() {
+      return { args, types: Object.keys(RcIconType) };
+    },
+    template: `<div style="display: flex; max-width: 100%; flex-wrap: wrap; ">
+      <div v-for="type in types" :key="type" style="display: inline-flex; justify-content: center; align-items: center; flex-direction: column; flex-basis: 25%; margin-bottom: 20px;">
+
+        <RcIcon :type="type" size="large" status="inherit" style="margin-bottom: 5px;"/>
+
+        <span style="user-select: all;">{{type}}</span>
+      </div>
+    </div>`,
+  }),
+  parameters: {
+    controls: { disabled: true },
+    docs:     { canvas: { sourceState: 'none' } }
+  },
+};
diff --git a/storybook/src/stories/foundation/Icons.mdx b/storybook/src/stories/foundation/Icons.mdx
deleted file mode 100644
index d3d0279d19f..00000000000
--- a/storybook/src/stories/foundation/Icons.mdx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<style>
-  {`
-.sb-icons {
-  // display: flex;
-}
-
-.sb-icon {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #777;
-  margin: 5px;
-  border-radius: 5px;
-  width: 220px;
-  height: 100px;
-}
-
-.sb-icon > i {
-  margin-top: 10px;
-  font-size: 32px;
-  line-height: 32px;
-  width: 32px;
-  height: 32px;
-}
-  `}
-</style>
-
-<Meta title="Foundation/Icons" />
-
-# Icons
-Icons are font based and can be shown via the icon class.
-You can create the icon by using the standard HTML &lt;i&gt element with the class `icon` and the class name of the icon, as shown below.
-
-e.g.
-
-<pre>&lt;i class="icon icon-show" /&gt;</pre>
-
-<p>Current icon set can be viewed here: <a href="https://rancher.github.io/icons/" target="_blank">Rancher Icons</a></p>
-
-<p>Additional icon styles can be found in via <code>assets/styles/fonts/_icons.scss</code>.</p>
-
-
-<iframe src="https://rancher.github.io/icons/" style={{width: '100%', height: '500px', border: '0'}}></iframe>
diff --git a/yarn.lock b/yarn.lock
index 270f68c5512..cf63d4171d0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2826,7 +2826,7 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
-"@rancher/icons@2.0.53":
+"@rancher/icons@2.0.53", "@rancher/icons@^2.0.53":
   version "2.0.53"
   resolved "https://registry.yarnpkg.com/@rancher/icons/-/icons-2.0.53.tgz#0cbfd0f7d16bd8c99683654d83de99e77d2424c9"
   integrity sha512-FkJsVZihlbZiaXI5E42W05jQGlV8HRUrWbIK2zg2JkGCLUO3mvratLGL2Yjx8dFz34y37h11DsH9+nFPoHuppA==
@@ -9263,7 +9263,7 @@ html-tags@^3.3.1:
 
 html-webpack-plugin@5.0.0, html-webpack-plugin@^5.1.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.0.0.tgz#457a9defb33ce368135078b4e0387a27f3fe244d"
+  resolved "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.0.0.tgz#457a9defb33ce368135078b4e0387a27f3fe244d"
   integrity sha512-kxTyb8cyZwEyUqXTgdHRUOF4C7uCrquzw2T+YTudehm/yspodgCkREjdmc4dXI8k2P4NEjqOVbnOOlPZg4TKJA==
   dependencies:
     "@types/html-minifier-terser" "^5.0.0"