diff --git a/src/components/Alert/Alert.test.tsx b/src/components/Alert/Alert.test.tsx
index 531b7e59..91f3e239 100644
--- a/src/components/Alert/Alert.test.tsx
+++ b/src/components/Alert/Alert.test.tsx
@@ -69,7 +69,7 @@ describe('<Alert />', () => {
     // Icon is displayed: External link
     const externalIcon = await within(linkTwo).findByRole('img');
     expect(externalIcon).toBeInTheDocument();
-    expect(externalIcon).toHaveClass('cf-icon-svg__external-link');
+    expect(externalIcon).toHaveClass('cf-icon-svg--external-link');
   });
 
   it('renders field-level alerts', async () => {
diff --git a/src/components/Icon/Icon.test.tsx b/src/components/Icon/Icon.test.tsx
index 9e43e028..641e623c 100644
--- a/src/components/Icon/Icon.test.tsx
+++ b/src/components/Icon/Icon.test.tsx
@@ -10,7 +10,7 @@ describe('Icon', () => {
 
     // Need to wait for icon to load
     const icon = await screen.findByRole(/img/i);
-    expect(icon.getAttribute('class')).toMatch(`cf-icon-svg__${name}`);
+    expect(icon.getAttribute('class')).toMatch(`cf-icon-svg--${name}`);
   });
 
   it('Renders a round icon', async () => {
@@ -20,7 +20,7 @@ describe('Icon', () => {
 
     // Need to wait for icon to load
     const icon = await screen.findByRole(/img/i);
-    expect(icon.getAttribute('class')).toMatch(`cf-icon-svg__${name}`);
+    expect(icon.getAttribute('class')).toMatch(`cf-icon-svg--${name}`);
   });
 
   it('Renders a square icon', async () => {
@@ -30,7 +30,7 @@ describe('Icon', () => {
 
     // Need to wait for icon to load
     const icon = await screen.findByRole(/img/i);
-    expect(icon.getAttribute('class')).toMatch(`cf-icon-svg__${name}`);
+    expect(icon.getAttribute('class')).toMatch(`cf-icon-svg--${name}`);
   });
 
   it('Renders an open number icon', async () => {
@@ -40,7 +40,7 @@ describe('Icon', () => {
 
     // Need to wait for icon to load
     const icon = await screen.findByRole(/img/i);
-    expect(icon.getAttribute('class')).toMatch(`cf-icon-svg__${name}-open`);
+    expect(icon.getAttribute('class')).toMatch(`cf-icon-svg--${name}-open`);
   });
 
   it('Renders a closed number icon', async () => {
@@ -50,7 +50,7 @@ describe('Icon', () => {
 
     // Need to wait for icon to load
     const icon = await screen.findByRole(/img/i);
-    expect(icon.getAttribute('class')).toMatch(`cf-icon-svg__${name}-closed`);
+    expect(icon.getAttribute('class')).toMatch(`cf-icon-svg--${name}-closed`);
   });
 
   it('Provides message for unknown icons', async () => {
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 3881eebf..de635507 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -88,7 +88,7 @@ export const Icon = ({
 }: IconProperties): JSX.Element | null => {
   const shapeModifier = getShapeModifier(name, withBg);
   const fileName = `${name}${shapeModifier}`;
-  const classes = ['cf-icon-svg', `cf-icon-svg__${fileName}`];
+  const classes = ['cf-icon-svg', `cf-icon-svg--${fileName}`];
 
   const icon = useIconSvg(fileName);