diff --git a/.changeset/a11y-breadcrumb-hide-svg-from-screen-readers.md b/.changeset/a11y-breadcrumb-hide-svg-from-screen-readers.md
new file mode 100644
index 0000000000..d855e6b227
--- /dev/null
+++ b/.changeset/a11y-breadcrumb-hide-svg-from-screen-readers.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(Breadcrumb): Hide SVGs from screen readers by adding `aria-hidden="true"` to the `span` element that wraps the SVGs.
diff --git a/packages/react-magma-dom/src/components/Breadcrumb/Breadcrumb.test.js b/packages/react-magma-dom/src/components/Breadcrumb/Breadcrumb.test.js
index 2b979c92c3..e1f810deea 100644
--- a/packages/react-magma-dom/src/components/Breadcrumb/Breadcrumb.test.js
+++ b/packages/react-magma-dom/src/components/Breadcrumb/Breadcrumb.test.js
@@ -58,6 +58,19 @@ describe('Breadcrumb', () => {
expect(getByLabelText('Test label')).toBeInTheDocument();
});
+ it('should render the breadcrumb component with aria-hidden', () => {
+ const { container } = render(
+
+ {LINK_TEXT}
+ {SPAN_TEXT}
+
+ );
+
+ const span = container.querySelector('span');
+
+ expect(span).toHaveAttribute('aria-hidden', 'true');
+ });
+
describe('i18n', () => {
it('should use the nav aria-label', () => {
const navAriaLabel = 'test aria label';
diff --git a/packages/react-magma-dom/src/components/Breadcrumb/BreadcrumbItem.tsx b/packages/react-magma-dom/src/components/Breadcrumb/BreadcrumbItem.tsx
index fcf16831cb..785b24daf8 100644
--- a/packages/react-magma-dom/src/components/Breadcrumb/BreadcrumbItem.tsx
+++ b/packages/react-magma-dom/src/components/Breadcrumb/BreadcrumbItem.tsx
@@ -36,7 +36,7 @@ const StyledLink = styled.a<{ isInverse?: boolean }>`
: props.theme.colors.neutral700};
text-decoration: none;
cursor: default;
-
+
&:hover,
&:focus {
color: ${props =>
@@ -82,7 +82,7 @@ export const BreadcrumbItem = React.forwardRef<
{children}
-
+
>