diff --git a/app/assets/css/bootstrap-override.css b/app/assets/css/bootstrap-override.css
index 538a05652..2dbc05bd9 100644
--- a/app/assets/css/bootstrap-override.css
+++ b/app/assets/css/bootstrap-override.css
@@ -20,107 +20,10 @@
   background: var(--bg-dashboard-item) !important;
 }
 
-.btn {
-  border-radius: 5px;
-  display: inline-flex;
-  justify-content: space-around;
-  gap: 5px;
-}
-
-.btn-group {
-  display: inline-flex;
-}
-
-pr-icon {
-  display: inline-block;
-}
-
-.btn.active {
-  box-shadow: none;
-}
-
 .form-control {
   border-radius: 5px;
 }
 
-/* Button Primary */
-.btn-primary {
-  background-color: var(--ui-blue-8);
-}
-
-.btn-primary:hover,
-.btn-primary:focus,
-.btn-primary:active .active {
-  background-color: var(--ui-blue-9);
-}
-
-.btn-primary:active,
-.btn-primary.active,
-.open > .dropdown-toggle.btn-primary {
-  background-color: var(--ui-blue-9);
-}
-
-.nav-pills > li.active > a,
-.nav-pills > li.active > a:hover,
-.nav-pills > li.active > a:focus {
-  background-color: var(--ui-blue-8);
-}
-
-.btn-danger {
-  background-color: var(--ui-error-8);
-}
-
-.btn-success {
-  background-color: var(--ui-success-7);
-}
-
-.btn-dangerlight {
-  background-color: var(--ui-error-2) !important;
-  border: 1px solid var(--border-button-group);
-  color: var(--ui-error-8);
-}
-
-.btn-dangerlight:hover {
-  color: var(--ui-error-9) !important;
-  background-color: var(--ui-error-3) !important;
-}
-
-.btn-light {
-  background-color: var(--bg-button-group);
-  border: 1px solid var(--border-button-group);
-  color: var(--text-button-group);
-}
-
-.btn-light:hover {
-  background-color: var(--ui-gray-2) !important;
-}
-
-.btn-light:active,
-.btn-light.active,
-.open > .dropdown-toggle.btn-light {
-  background-color: var(--ui-gray-3);
-}
-
-/* Button Secondary */
-.btn-secondary {
-  background-color: var(--ui-blue-2);
-  border: 1px solid var(--ui-blue-8);
-  color: var(--ui-blue-9);
-}
-
-.btn-secondary:hover,
-.btn-secondary:focus,
-.btn-secondary:active .active {
-  background-color: var(--ui-blue-3) !important;
-  color: var(--ui-blue-9) !important;
-}
-
-.btn-secondary:disabled {
-  background-color: var(--ui-blue-1);
-  border: 1px solid var(--ui-blue-1);
-  color: var(--ui-blue-5);
-}
-
 /* Input Group Addon */
 .input-group-addon:first-child {
   border-top-left-radius: 5px;
@@ -485,95 +388,6 @@ input:checked + .slider:before {
   background-color: var(--ui-success-7);
 }
 
-/* Feather Icon Variants */
-
-.feather {
-  height: 1em;
-  width: 1em;
-  color: inherit;
-}
-
-.icon-xs {
-  height: 10px;
-  width: 10px;
-}
-
-.icon-sm {
-  height: 14px;
-  width: 14px;
-}
-
-.icon-md {
-  height: 16px;
-  width: 16px;
-}
-
-.icon-lg {
-  height: 22px;
-  width: 22px;
-}
-
-.icon-xl {
-  height: 26px;
-  width: 26px;
-}
-
-.icon-primary {
-  color: var(--ui-blue-8);
-}
-
-.icon-white {
-  color: var(--white-color);
-}
-
-.icon-dark {
-  color: var(--ui-black);
-}
-
-.icon-secondary {
-  color: var(--ui-gray-8);
-}
-
-.icon-warning {
-  color: var(--ui-warning-8);
-}
-
-.icon-danger {
-  color: var(--ui-error-8);
-}
-
-.icon-success {
-  color: var(--ui-success-6);
-}
-
-.icon-nested-gray {
-  width: 18px;
-  height: 18px;
-  height: 30px;
-  width: 30px;
-  padding: 5px;
-  text-align: center;
-  border-radius: 50%;
-  background-color: var(--ui-gray-4);
-  margin-right: 5px;
-}
-
-.icon-nested-blue {
-  width: 18px;
-  height: 18px;
-  height: 30px;
-  width: 30px;
-  padding: 5px;
-  text-align: center;
-  border-radius: 50%;
-  background-color: var(--ui-blue-3);
-  margin-right: 5px;
-}
-
-.icon-container {
-  display: flex;
-  align-items: center;
-}
 /* Required Label with asterisk */
 
 .required:after {
diff --git a/app/assets/css/button.css b/app/assets/css/button.css
new file mode 100644
index 000000000..37fe0ae96
--- /dev/null
+++ b/app/assets/css/button.css
@@ -0,0 +1,91 @@
+.btn {
+  border-radius: 5px;
+  display: inline-flex;
+  justify-content: space-around;
+  gap: 5px;
+}
+
+.btn-group {
+  display: inline-flex;
+}
+
+.btn.active {
+  box-shadow: none;
+}
+
+.btn-primary {
+  background-color: var(--ui-blue-8);
+}
+
+.btn-primary:hover,
+.btn-primary:focus,
+.btn-primary:active .active {
+  background-color: var(--ui-blue-9);
+}
+
+.btn-primary:active,
+.btn-primary.active,
+.open > .dropdown-toggle.btn-primary {
+  background-color: var(--ui-blue-9);
+}
+
+.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+  background-color: var(--ui-blue-8);
+}
+
+.btn-danger {
+  background-color: var(--ui-error-8);
+}
+
+.btn-success {
+  background-color: var(--ui-success-7);
+}
+
+.btn-dangerlight {
+  background-color: var(--ui-error-2) !important;
+  border: 1px solid var(--border-button-group);
+  color: var(--ui-error-8);
+}
+
+.btn-dangerlight:hover {
+  color: var(--ui-error-9) !important;
+  background-color: var(--ui-error-3) !important;
+}
+
+.btn-light {
+  background-color: var(--bg-button-group);
+  border: 1px solid var(--border-button-group);
+  color: var(--text-button-group);
+}
+
+.btn-light:hover {
+  background-color: var(--ui-gray-2) !important;
+}
+
+.btn-light:active,
+.btn-light.active,
+.open > .dropdown-toggle.btn-light {
+  background-color: var(--ui-gray-3);
+}
+
+/* Button Secondary */
+.btn-secondary {
+  background-color: var(--ui-blue-2);
+  border: 1px solid var(--ui-blue-8);
+  color: var(--ui-blue-9);
+}
+
+.btn-secondary:hover,
+.btn-secondary:focus,
+.btn-secondary:active .active {
+  background-color: var(--ui-blue-3) !important;
+  color: var(--ui-blue-9) !important;
+}
+
+.btn-secondary:disabled {
+  background-color: var(--ui-blue-1);
+  border: 1px solid var(--ui-blue-1);
+  color: var(--ui-blue-5);
+}
diff --git a/app/assets/css/icon.css b/app/assets/css/icon.css
new file mode 100644
index 000000000..774ee6de4
--- /dev/null
+++ b/app/assets/css/icon.css
@@ -0,0 +1,115 @@
+.feather {
+  display: block;
+  height: 1em;
+  width: 1em;
+  color: inherit;
+}
+
+pr-icon {
+  display: inline-block;
+}
+
+.icon {
+  color: currentColor;
+  margin: 0;
+}
+
+.icon-xs {
+  height: 10px;
+  width: 10px;
+}
+
+.icon-sm {
+  height: 14px;
+  width: 14px;
+}
+
+.icon-md {
+  height: 16px;
+  width: 16px;
+}
+
+.icon-lg {
+  height: 22px;
+  width: 22px;
+}
+
+.icon-xl {
+  height: 26px;
+  width: 26px;
+}
+
+.icon.icon-alt {
+  fill: var(--black-color);
+  stroke: var(--white-color);
+}
+
+.icon-primary {
+  color: var(--ui-blue-8);
+}
+
+.icon.icon-primary-alt {
+  fill: var(--ui-blue-8);
+  stroke: var(--white-color);
+}
+
+.icon-secondary {
+  color: var(--ui-gray-8);
+}
+
+.icon.icon-secondary-alt {
+  fill: var(--ui-gray-8);
+  stroke: var(--black-color);
+}
+
+.icon-warning {
+  color: var(--ui-warning-8);
+}
+
+.icon.icon-warning-alt {
+  fill: var(--ui-warning-8);
+  stroke: var(--white-color);
+}
+
+.icon-danger {
+  color: var(--ui-error-8);
+}
+
+.icon.icon-danger-alt {
+  fill: var(--ui-error-8);
+  stroke: var(--white-color);
+}
+
+.icon-success {
+  color: var(--ui-success-6);
+}
+
+.icon.icon-success-alt {
+  fill: var(--ui-success-8);
+  stroke: var(--white-color);
+}
+
+.icon-nested-gray {
+  height: 30px;
+  width: 30px;
+  padding: 5px;
+  text-align: center;
+  border-radius: 50%;
+  background-color: var(--ui-gray-4);
+  margin-right: 5px;
+}
+
+.icon-nested-blue {
+  height: 30px;
+  width: 30px;
+  padding: 5px;
+  text-align: center;
+  border-radius: 50%;
+  background-color: var(--ui-blue-3);
+  margin-right: 5px;
+}
+
+.icon-container {
+  display: flex;
+  align-items: center;
+}
diff --git a/app/assets/css/index.js b/app/assets/css/index.js
index a731fc1d8..38010d225 100644
--- a/app/assets/css/index.js
+++ b/app/assets/css/index.js
@@ -24,3 +24,5 @@ import './theme.css';
 import './vendor-override.css';
 import '../fonts/nomad-icon.css';
 import './bootstrap-override.css';
+import './icon.css';
+import './button.css';
diff --git a/app/portainer/react/components/index.ts b/app/portainer/react/components/index.ts
index 94f7c411d..9bbfef726 100644
--- a/app/portainer/react/components/index.ts
+++ b/app/portainer/react/components/index.ts
@@ -34,5 +34,8 @@ export const componentsModule = angular
     'pageHeader',
     r2a(PageHeader, ['title', 'breadcrumbs', 'loading', 'onReload', 'reload'])
   )
-  .component('prIcon', r2a(Icon, ['className', 'feather', 'icon']))
+  .component(
+    'prIcon',
+    r2a(Icon, ['className', 'feather', 'icon', 'mode', 'size'])
+  )
   .component('reactQueryDevTools', r2a(ReactQueryDevtoolsWrapper, [])).name;
diff --git a/app/react/components/Icon.tsx b/app/react/components/Icon.tsx
index 97fb23818..52ef36c26 100644
--- a/app/react/components/Icon.tsx
+++ b/app/react/components/Icon.tsx
@@ -12,9 +12,22 @@ interface Props {
   icon: ReactNode | ComponentType<unknown>;
   feather?: boolean;
   className?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  mode?:
+    | 'alt'
+    | 'primary'
+    | 'primary-alt'
+    | 'secondary'
+    | 'secondary-alt'
+    | 'warning'
+    | 'warning-alt'
+    | 'danger'
+    | 'danger-alt'
+    | 'success'
+    | 'success-alt';
 }
 
-export function Icon({ icon, feather, className }: Props) {
+export function Icon({ icon, feather, className, mode, size }: Props) {
   useEffect(() => {
     if (feather) {
       featherIcons.replace();
@@ -31,11 +44,18 @@ export function Icon({ icon, feather, className }: Props) {
     );
   }
 
+  const classes = clsx(
+    className,
+    'icon',
+    { [`icon-${mode}`]: mode },
+    { [`icon-${size}`]: size }
+  );
+
   if (feather) {
     return (
       <i
         data-feather={icon}
-        className={className}
+        className={classes}
         aria-hidden="true"
         role="img"
       />