diff --git a/scm-ui/ui-components/src/CardColumn.stories.tsx b/scm-ui/ui-components/src/CardColumn.stories.tsx
index bbdeb762d9..fbf8ffdf78 100644
--- a/scm-ui/ui-components/src/CardColumn.stories.tsx
+++ b/scm-ui/ui-components/src/CardColumn.stories.tsx
@@ -36,7 +36,7 @@ const Wrapper = styled.div`
 const Container: FC = ({ children }) => <Wrapper>{children}</Wrapper>;
 
 const title = <strong>title</strong>;
-const avatar = <Icon name="icons fa-2x" className="media-left" />;
+const avatar = <Icon name="icons fa-2x fa-fw" />;
 const link = "/foo/bar";
 const footerLeft = <small>left footer</small>;
 const footerRight = <small>right footer</small>;
diff --git a/scm-ui/ui-components/src/CardColumnSmall.stories.tsx b/scm-ui/ui-components/src/CardColumnSmall.stories.tsx
index db9c065486..d94f8af7c6 100644
--- a/scm-ui/ui-components/src/CardColumnSmall.stories.tsx
+++ b/scm-ui/ui-components/src/CardColumnSmall.stories.tsx
@@ -36,7 +36,7 @@ const Wrapper = styled.div`
 const Container: FC = ({ children }) => <Wrapper>{children}</Wrapper>;
 
 const link = "/foo/bar";
-const icon = <Icon name="icons fa-2x" className="media-left" />;
+const icon = <Icon name="icons fa-2x fa-fw" />;
 const contentLeft = <strong className="is-marginless">main content</strong>;
 const contentRight = <small>more text</small>;
 
diff --git a/scm-ui/ui-components/src/CardColumnSmall.tsx b/scm-ui/ui-components/src/CardColumnSmall.tsx
index eeb0f2135c..82b4889b91 100644
--- a/scm-ui/ui-components/src/CardColumnSmall.tsx
+++ b/scm-ui/ui-components/src/CardColumnSmall.tsx
@@ -62,11 +62,15 @@ const StyledLink = styled(Link)`
   }
 `;
 
+const IconWrapper = styled.figure`
+  margin-right: 0.5rem;
+`;
+
 const CardColumnSmall: FC<Props> = ({ link, icon, contentLeft, contentRight, footer }) => {
   return (
     <StyledLink to={link}>
       <div className="media">
-        {icon}
+        <IconWrapper className="media-left">{icon}</IconWrapper>
         <FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
           <CenteredItems className="is-flex">
             <ContentLeft>{contentLeft}</ContentLeft>
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 14bb932217..ccd2fcd609 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -461,7 +461,7 @@ exports[`Storyshots CardColumn default 1`] = `
       className="CardColumn__AvatarWrapper-sc-1w6lsih-1 bZyfne media-left"
     >
       <i
-        className="fas fa-icons fa-2x has-text-grey-light media-left"
+        className="fas fa-icons fa-2x fa-fw has-text-grey-light"
       />
     </figure>
     <div
@@ -525,9 +525,13 @@ exports[`Storyshots CardColumnSmall default 1`] = `
     <div
       className="media"
     >
-      <i
-        className="fas fa-icons fa-2x has-text-grey-light media-left"
-      />
+      <figure
+        className="CardColumnSmall__IconWrapper-tk9h0o-5 bEHHUw media-left"
+      >
+        <i
+          className="fas fa-icons fa-2x fa-fw has-text-grey-light"
+        />
+      </figure>
       <div
         className="CardColumnSmall__FlexFullHeight-tk9h0o-0 fwRxNw media-content text-box is-flex"
       >