diff --git a/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.js b/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.js
index 37634ddac..095cfa20f 100644
--- a/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.js
+++ b/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020-2021 The Tekton Authors
+Copyright 2020-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -15,6 +15,14 @@ limitations under the License.
 import PropTypes from 'prop-types';
 import React from 'react';
 
+const tableSizeClassNames = {
+  xs: 'bx--data-table--xs',
+  sm: 'bx--data-table--sm',
+  md: 'bx--data-table--md',
+  lg: 'bx--data-table--lg',
+  xl: 'bx--data-table--xl'
+};
+
 const DataTableSkeleton = ({
   className,
   columnCount,
@@ -35,7 +43,7 @@ const DataTableSkeleton = ({
     </tr>
   ));
 
-  const sizeClassName = size ? `bx--data-table--${size}` : '';
+  const sizeClassName = tableSizeClassNames[size] || '';
 
   return (
     <table
diff --git a/packages/components/src/components/StatusIcon/StatusIcon.js b/packages/components/src/components/StatusIcon/StatusIcon.js
index 1c26cd80a..2e3db7c96 100644
--- a/packages/components/src/components/StatusIcon/StatusIcon.js
+++ b/packages/components/src/components/StatusIcon/StatusIcon.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020-2021 The Tekton Authors
+Copyright 2020-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -27,14 +27,6 @@ import { isRunning } from '@tektoncd/dashboard-utils';
 import { Spinner } from '..';
 
 const icons = {
-  normal: {
-    cancelled: CloseFilled,
-    error: CloseFilled,
-    pending: Pending,
-    running: Spinner,
-    success: CheckmarkFilled,
-    warning: CheckmarkFilledWarning
-  },
   inverse: {
     cancelled: CloseOutline,
     error: CloseOutline,
@@ -42,9 +34,31 @@ const icons = {
     running: Spinner,
     success: CheckmarkOutline,
     warning: WarningFilled
+  },
+  normal: {
+    cancelled: CloseFilled,
+    error: CloseFilled,
+    pending: Pending,
+    running: Spinner,
+    success: CheckmarkFilled,
+    warning: CheckmarkFilledWarning
   }
 };
 
+const statusClassNames = {
+  cancelled: 'tkn--status-icon--cancelled',
+  error: 'tkn--status-icon--error',
+  pending: 'tkn--status-icon--pending',
+  running: 'tkn--status-icon--running',
+  success: 'tkn--status-icon--success',
+  warning: 'tkn--status-icon--warning'
+};
+
+const typeClassNames = {
+  inverse: 'tkn--status-icon--type-inverse',
+  normal: 'tkn--status-icon--type-normal'
+};
+
 export default function StatusIcon({
   DefaultIcon,
   hasWarning,
@@ -84,13 +98,9 @@ export default function StatusIcon({
 
   return Icon ? (
     <Icon
-      className={classNames(
-        'tkn--status-icon',
-        {
-          [`tkn--status-icon--${statusClass}`]: statusClass
-        },
-        `tkn--status-icon--type-${type}`
-      )}
+      className={classNames('tkn--status-icon', typeClassNames[type], {
+        [statusClassNames[statusClass]]: statusClass
+      })}
     >
       {title && <title>{title}</title>}
     </Icon>
diff --git a/packages/components/src/components/StatusIcon/StatusIcon.scss b/packages/components/src/components/StatusIcon/StatusIcon.scss
index 12bb7f08a..95fff7e0d 100644
--- a/packages/components/src/components/StatusIcon/StatusIcon.scss
+++ b/packages/components/src/components/StatusIcon/StatusIcon.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2020-2021 The Tekton Authors
+Copyright 2020-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -16,23 +16,23 @@ limitations under the License.
   width: 20px;
   height: 20px;
 
-  &--cancelled {
+  &.tkn--status-icon--cancelled {
     fill: $ui-04;
   }
 
-  &--error {
+  &.tkn--status-icon--error {
     fill: $support-01;
   }
 
-  &--running {
+  &.tkn--status-icon--running {
     fill: $support-04;
   }
 
-  &--success {
+  &.tkn--status-icon--success {
     fill: $support-02;
   }
 
-  &--warning {
+  &.tkn--status-icon--warning {
     &.tkn--status-icon--type-normal {
       fill: $support-02;