diff --git a/packages/icon/test/hammer.svg.js b/packages/icon/test/hammer.svg.js
index 4b0f53b11..aa6130703 100644
--- a/packages/icon/test/hammer.svg.js
+++ b/packages/icon/test/hammer.svg.js
@@ -1 +1 @@
-export default '<svg focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="svg-hammer"><path d="M.476 12.915L6.7 6 9 8.556l-6.223 6.915a1.542 1.542 0 0 1-1.15.529 1.54 1.54 0 0 1-1.15-.53c-.636-.706-.636-1.85 0-2.555zm12.638-9.031L16 6.863 12.866 10 4 .919 9.35 0l1.912 1.972.251-.251c.52-.52 2.4 1.363 1.88 1.882l-.279.28z"></path></svg>';
+export default '<svg focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" data-test-id="svg-hammer"><path d="M.476 12.915L6.7 6 9 8.556l-6.223 6.915a1.542 1.542 0 0 1-1.15.529 1.54 1.54 0 0 1-1.15-.53c-.636-.706-.636-1.85 0-2.555zm12.638-9.031L16 6.863 12.866 10 4 .919 9.35 0l1.912 1.972.251-.251c.52-.52 2.4 1.363 1.88 1.882l-.279.28z"></path></svg>';
diff --git a/packages/icon/test/heart.svg.js b/packages/icon/test/heart.svg.js
index 0617efdbb..05f2b801a 100644
--- a/packages/icon/test/heart.svg.js
+++ b/packages/icon/test/heart.svg.js
@@ -1 +1 @@
-export default '<svg focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="svg-heart"><path d="M8.002 14.867a.828.828 0 0 1-.324-.066C7.36 14.665 0 11.466 0 6.153 0 3.592 1.543.825 4.98 1.01c1.465.077 2.437.828 3.018 1.491.581-.667 1.553-1.414 3.023-1.491.107-.008.207-.008.31-.008C13.58 1.001 16 2.614 16 6.153c0 5.313-7.36 8.512-7.671 8.644a.787.787 0 0 1-.327.07z"></path></svg>';
+export default '<svg focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" data-test-id="svg-heart"><path d="M8.002 14.867a.828.828 0 0 1-.324-.066C7.36 14.665 0 11.466 0 6.153 0 3.592 1.543.825 4.98 1.01c1.465.077 2.437.828 3.018 1.491.581-.667 1.553-1.414 3.023-1.491.107-.008.207-.008.31-.008C13.58 1.001 16 2.614 16 6.153c0 5.313-7.36 8.512-7.671 8.644a.787.787 0 0 1-.327.07z"></path></svg>';
diff --git a/packages/icon/test/lion-icon.test.js b/packages/icon/test/lion-icon.test.js
index 0587fe598..675c4002b 100644
--- a/packages/icon/test/lion-icon.test.js
+++ b/packages/icon/test/lion-icon.test.js
@@ -13,7 +13,7 @@ describe('lion-icon', () => {
       `,
     );
 
-    expect(el.children[0].id).to.equal('svg-heart');
+    expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
     expect(el.getAttribute('role')).to.equal('img');
     expect(el.getAttribute('aria-label')).to.equal('Love');
     expect(el.getAttribute('aria-hidden')).to.equal('false');
@@ -25,7 +25,7 @@ describe('lion-icon', () => {
         <lion-icon .svg=${hammerSvg}></lion-icon>
       `,
     );
-    expect(el.children[0].id).to.equal('svg-hammer');
+    expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-hammer');
     expect(el.getAttribute('aria-hidden')).to.equal('true');
     expect(el.hasAttribute('aria-label')).to.equal(false);
   });
@@ -45,10 +45,10 @@ describe('lion-icon', () => {
         <lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>
       `,
     );
-    expect(el.children[0].id).to.equal('svg-heart');
+    expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
     el.svg = hammerSvg;
     await el.updateComplete;
-    expect(el.children[0].id).to.equal('svg-hammer');
+    expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-hammer');
   });
 
   it('can add or remove the aria-label attribute', async () => {
@@ -94,7 +94,7 @@ describe('lion-icon', () => {
     );
     await el.svg;
     await el.updateComplete;
-    expect(el.children[0].id).to.equal('svg-heart');
+    expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
   });
 
   it('uses the default export, by default', async () => {
@@ -105,7 +105,7 @@ describe('lion-icon', () => {
     );
     await el.svg;
     await el.updateComplete;
-    expect(el.children[0].id).to.equal('svg-heart');
+    expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
   });
 
   it('supports dynamic icon bundles', async () => {
@@ -119,7 +119,7 @@ describe('lion-icon', () => {
     );
     await el.svg;
     await el.updateComplete;
-    expect(el.children[0].id).to.equal('svg-heart');
+    expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
   });
 
   it('supports dynamic icons using until directive', async () => {
@@ -147,7 +147,7 @@ describe('lion-icon', () => {
     // You can not use updateComplete as until renders on it's own
     await aTimeout();
 
-    expect(el.children[0].id).to.equal('svg-heart');
+    expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
   });
 
   it('does not render "undefined" if changed from valid input to undefined', async () => {
@@ -205,7 +205,7 @@ describe('lion-icon', () => {
       await aTimeout();
       [svg] = icon.children;
       expect(svg).to.exist;
-      expect(svg.id).to.equal('svg-hammer');
+      expect(svg.getAttribute('data-test-id')).to.equal('svg-hammer');
 
       [icon, resolveHeartSvg, resolveHammerSvg] = await prepareRaceCondition(
         Promise.resolve(heartSvg),
@@ -216,7 +216,7 @@ describe('lion-icon', () => {
       await aTimeout();
       [svg] = icon.children;
       expect(svg).to.exist;
-      expect(svg.id).to.equal('svg-hammer');
+      expect(svg.getAttribute('data-test-id')).to.equal('svg-hammer');
     });
 
     it('renders if a resolved promise was replaced by a string', async () => {
@@ -228,7 +228,7 @@ describe('lion-icon', () => {
       await aTimeout();
       const [svg] = icon.children;
       expect(svg).to.exist;
-      expect(svg.id).to.equal('svg-hammer');
+      expect(svg.getAttribute('data-test-id')).to.equal('svg-hammer');
     });
 
     it('does not render if a resolved promise was replaced by another unresolved promise', async () => {