diff --git a/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss b/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss
index 89ea78a14d..c43606f2f3 100644
--- a/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss
@@ -37,7 +37,7 @@ $-breadcrumb-outline-color: sage-color(primary, 200);
     }
 
     .sage-breadcrumbs--progressbar &::after {
-      content: ""
+      content: "";
     }
     .sage-breadcrumbs--progressbar pds-icon {
       margin: 0 sage-spacing(xs) sage-spacing(2xs);
diff --git a/packages/sage-assets/lib/stylesheets/components/_form_select.scss b/packages/sage-assets/lib/stylesheets/components/_form_select.scss
index 5c6cc40435..2ae0e9657c 100644
--- a/packages/sage-assets/lib/stylesheets/components/_form_select.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_form_select.scss
@@ -50,8 +50,8 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $-
   grid-row: 2 / 3;
   position: relative;
   z-index: sage-z-index(default, 1);
-  pointer-events: none;
   height: $-select-height;
+  pointer-events: none;
 }
 
 .sage-select__arrow::before {
diff --git a/packages/sage-assets/lib/stylesheets/components/_hint.scss b/packages/sage-assets/lib/stylesheets/components/_hint.scss
index b3ef9d4948..7beb28c3a6 100644
--- a/packages/sage-assets/lib/stylesheets/components/_hint.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_hint.scss
@@ -10,9 +10,9 @@ $-hint-background-color: sage-color(grey, 300);
 
 .sage-hint {
   display: flex;
+  align-items: center;
   padding: sage-spacing(xs) rem(12px);
   background-color: $-hint-background-color;
-  align-items: center;
 }
 
 .sage-hint__icon {
diff --git a/packages/sage-assets/lib/stylesheets/components/_link.scss b/packages/sage-assets/lib/stylesheets/components/_link.scss
index a01f360d7e..e31e99452c 100644
--- a/packages/sage-assets/lib/stylesheets/components/_link.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_link.scss
@@ -59,9 +59,9 @@ $-link-base-styles: (
 
 .sage-link {
   @extend %t-sage-body-semi;
-  align-items: center;
-  gap: sage-spacing(2xs);
   display: inline-flex;
+  gap: sage-spacing(xs);
+  align-items: center;
   position: relative;
   max-width: 100%;
   min-width: 0; /* the is needed so that truncation work when the link doesn't have an explicit width set  */
diff --git a/packages/sage-react/lib/Icon/Icon.jsx b/packages/sage-react/lib/Icon/Icon.jsx
index da4b76a430..93b68afca5 100644
--- a/packages/sage-react/lib/Icon/Icon.jsx
+++ b/packages/sage-react/lib/Icon/Icon.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { SageTokens } from '../configs';
 import { ICON_ADJACENT_TYPES, ICON_CARD_COLORS, ICON_SIZES } from './configs';
 
@@ -56,7 +57,7 @@ export const Icon = ({
   };
 
   const renderIcon = () => (
-    <pds-icon name={icon} class={`t-sage--color-${color}`} size={sizeMapping[size]} />
+    <pds-icon name={icon} class={`t-sage--color-${color}, ${classNames}`} size={sizeMapping[size]} />
   );
 
   const setBackgroundDimensions = () => {