diff --git a/packages/big-design-icons/scripts/svgr.config.js b/packages/big-design-icons/scripts/svgr.config.js
index acb844da2..e593963f4 100644
--- a/packages/big-design-icons/scripts/svgr.config.js
+++ b/packages/big-design-icons/scripts/svgr.config.js
@@ -23,7 +23,8 @@ module.exports = {
     BREAK
 
     const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-      const titleId = useUniqueId('icon');
+      const uniqueTitleId = useUniqueId('icon');
+      const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
       BREAK
       return (
diff --git a/packages/big-design-icons/src/base/index.tsx b/packages/big-design-icons/src/base/index.tsx
index 820c0d4dc..bc3250bbc 100644
--- a/packages/big-design-icons/src/base/index.tsx
+++ b/packages/big-design-icons/src/base/index.tsx
@@ -12,6 +12,7 @@ export interface IconProps extends React.SVGProps<SVGSVGElement> {
 
 export interface PrivateIconProps {
   svgRef?: React.Ref<SVGSVGElement>;
+  titleId?: string;
 }
 
 export function createStyledIcon(Icon: React.FC<IconProps>) {
diff --git a/packages/big-design-icons/src/components/AddCircleOutlineIcon.tsx b/packages/big-design-icons/src/components/AddCircleOutlineIcon.tsx
index aff51ef02..5b9b31c1d 100644
--- a/packages/big-design-icons/src/components/AddCircleOutlineIcon.tsx
+++ b/packages/big-design-icons/src/components/AddCircleOutlineIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/AddIcon.tsx b/packages/big-design-icons/src/components/AddIcon.tsx
index de7ddb969..c35a47e2a 100644
--- a/packages/big-design-icons/src/components/AddIcon.tsx
+++ b/packages/big-design-icons/src/components/AddIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/ArrowBackIcon.tsx b/packages/big-design-icons/src/components/ArrowBackIcon.tsx
index d35685be6..0802c7e9a 100644
--- a/packages/big-design-icons/src/components/ArrowBackIcon.tsx
+++ b/packages/big-design-icons/src/components/ArrowBackIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/ArrowDownwardIcon.tsx b/packages/big-design-icons/src/components/ArrowDownwardIcon.tsx
index 34611733f..9e860ac81 100644
--- a/packages/big-design-icons/src/components/ArrowDownwardIcon.tsx
+++ b/packages/big-design-icons/src/components/ArrowDownwardIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/ArrowDropDownIcon.tsx b/packages/big-design-icons/src/components/ArrowDropDownIcon.tsx
index 5d4154ff4..49874f21c 100644
--- a/packages/big-design-icons/src/components/ArrowDropDownIcon.tsx
+++ b/packages/big-design-icons/src/components/ArrowDropDownIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/ArrowForwardIcon.tsx b/packages/big-design-icons/src/components/ArrowForwardIcon.tsx
index 470290dad..a88bc7080 100644
--- a/packages/big-design-icons/src/components/ArrowForwardIcon.tsx
+++ b/packages/big-design-icons/src/components/ArrowForwardIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/ArrowUpwardIcon.tsx b/packages/big-design-icons/src/components/ArrowUpwardIcon.tsx
index 0a426d417..74cc47b4c 100644
--- a/packages/big-design-icons/src/components/ArrowUpwardIcon.tsx
+++ b/packages/big-design-icons/src/components/ArrowUpwardIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/AssignmentIcon.tsx b/packages/big-design-icons/src/components/AssignmentIcon.tsx
index 9d720aa6d..872fc43c0 100644
--- a/packages/big-design-icons/src/components/AssignmentIcon.tsx
+++ b/packages/big-design-icons/src/components/AssignmentIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/BaselineHelpIcon.tsx b/packages/big-design-icons/src/components/BaselineHelpIcon.tsx
index 583790d74..fdb3f4997 100644
--- a/packages/big-design-icons/src/components/BaselineHelpIcon.tsx
+++ b/packages/big-design-icons/src/components/BaselineHelpIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/CheckCircleIcon.tsx b/packages/big-design-icons/src/components/CheckCircleIcon.tsx
index 9b0b79562..ca3137f88 100644
--- a/packages/big-design-icons/src/components/CheckCircleIcon.tsx
+++ b/packages/big-design-icons/src/components/CheckCircleIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/CheckIcon.tsx b/packages/big-design-icons/src/components/CheckIcon.tsx
index 2bef37469..c9c577220 100644
--- a/packages/big-design-icons/src/components/CheckIcon.tsx
+++ b/packages/big-design-icons/src/components/CheckIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/ChevronLeftIcon.tsx b/packages/big-design-icons/src/components/ChevronLeftIcon.tsx
index c3ec0e050..21db5f8ea 100644
--- a/packages/big-design-icons/src/components/ChevronLeftIcon.tsx
+++ b/packages/big-design-icons/src/components/ChevronLeftIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/ChevronRightIcon.tsx b/packages/big-design-icons/src/components/ChevronRightIcon.tsx
index 7d3755af7..98b2d06d5 100644
--- a/packages/big-design-icons/src/components/ChevronRightIcon.tsx
+++ b/packages/big-design-icons/src/components/ChevronRightIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/CloseIcon.tsx b/packages/big-design-icons/src/components/CloseIcon.tsx
index 8b09ae20c..552dc5126 100644
--- a/packages/big-design-icons/src/components/CloseIcon.tsx
+++ b/packages/big-design-icons/src/components/CloseIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/DeleteIcon.tsx b/packages/big-design-icons/src/components/DeleteIcon.tsx
index 21783f0f1..5ddb27247 100644
--- a/packages/big-design-icons/src/components/DeleteIcon.tsx
+++ b/packages/big-design-icons/src/components/DeleteIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/DragIndicatorIcon.tsx b/packages/big-design-icons/src/components/DragIndicatorIcon.tsx
index 286fe8ac8..c97ff75e6 100644
--- a/packages/big-design-icons/src/components/DragIndicatorIcon.tsx
+++ b/packages/big-design-icons/src/components/DragIndicatorIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/EditIcon.tsx b/packages/big-design-icons/src/components/EditIcon.tsx
index 61a4d00ac..c4725568b 100644
--- a/packages/big-design-icons/src/components/EditIcon.tsx
+++ b/packages/big-design-icons/src/components/EditIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/ErrorIcon.tsx b/packages/big-design-icons/src/components/ErrorIcon.tsx
index 26db138ef..e3eef17e2 100644
--- a/packages/big-design-icons/src/components/ErrorIcon.tsx
+++ b/packages/big-design-icons/src/components/ErrorIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/ExpandLessIcon.tsx b/packages/big-design-icons/src/components/ExpandLessIcon.tsx
index 63c755a20..7018d3f52 100644
--- a/packages/big-design-icons/src/components/ExpandLessIcon.tsx
+++ b/packages/big-design-icons/src/components/ExpandLessIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/ExpandMoreIcon.tsx b/packages/big-design-icons/src/components/ExpandMoreIcon.tsx
index bd6533d00..67cf23cc7 100644
--- a/packages/big-design-icons/src/components/ExpandMoreIcon.tsx
+++ b/packages/big-design-icons/src/components/ExpandMoreIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/FileCopyIcon.tsx b/packages/big-design-icons/src/components/FileCopyIcon.tsx
index bbcfd6343..2c8faeb24 100644
--- a/packages/big-design-icons/src/components/FileCopyIcon.tsx
+++ b/packages/big-design-icons/src/components/FileCopyIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/FilterListIcon.tsx b/packages/big-design-icons/src/components/FilterListIcon.tsx
index b3bf1a4a3..2d8a7cf13 100644
--- a/packages/big-design-icons/src/components/FilterListIcon.tsx
+++ b/packages/big-design-icons/src/components/FilterListIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/InfoIcon.tsx b/packages/big-design-icons/src/components/InfoIcon.tsx
index e7dceb926..0fdaeb1be 100644
--- a/packages/big-design-icons/src/components/InfoIcon.tsx
+++ b/packages/big-design-icons/src/components/InfoIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/InvertColorsIcon.tsx b/packages/big-design-icons/src/components/InvertColorsIcon.tsx
index 90e3521d8..012445cca 100644
--- a/packages/big-design-icons/src/components/InvertColorsIcon.tsx
+++ b/packages/big-design-icons/src/components/InvertColorsIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/LanguageIcon.tsx b/packages/big-design-icons/src/components/LanguageIcon.tsx
index 18e7d11de..cfabda82f 100644
--- a/packages/big-design-icons/src/components/LanguageIcon.tsx
+++ b/packages/big-design-icons/src/components/LanguageIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/MenuIcon.tsx b/packages/big-design-icons/src/components/MenuIcon.tsx
index 71133cd1a..e8fb28108 100644
--- a/packages/big-design-icons/src/components/MenuIcon.tsx
+++ b/packages/big-design-icons/src/components/MenuIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/MoreHorizIcon.tsx b/packages/big-design-icons/src/components/MoreHorizIcon.tsx
index 1f5ac3aae..b368fe076 100644
--- a/packages/big-design-icons/src/components/MoreHorizIcon.tsx
+++ b/packages/big-design-icons/src/components/MoreHorizIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/NotificationsIcon.tsx b/packages/big-design-icons/src/components/NotificationsIcon.tsx
index 7167e2ed0..f62acd919 100644
--- a/packages/big-design-icons/src/components/NotificationsIcon.tsx
+++ b/packages/big-design-icons/src/components/NotificationsIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/OpenInNewIcon.tsx b/packages/big-design-icons/src/components/OpenInNewIcon.tsx
index 899a23bff..599065a1b 100644
--- a/packages/big-design-icons/src/components/OpenInNewIcon.tsx
+++ b/packages/big-design-icons/src/components/OpenInNewIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/PublicIcon.tsx b/packages/big-design-icons/src/components/PublicIcon.tsx
index 957aa84ca..6b526caa7 100644
--- a/packages/big-design-icons/src/components/PublicIcon.tsx
+++ b/packages/big-design-icons/src/components/PublicIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/ReceiptIcon.tsx b/packages/big-design-icons/src/components/ReceiptIcon.tsx
index 93a1fa71a..fdfa06e82 100644
--- a/packages/big-design-icons/src/components/ReceiptIcon.tsx
+++ b/packages/big-design-icons/src/components/ReceiptIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/RemoveCircleOutlineIcon.tsx b/packages/big-design-icons/src/components/RemoveCircleOutlineIcon.tsx
index c827ef760..caf836668 100644
--- a/packages/big-design-icons/src/components/RemoveCircleOutlineIcon.tsx
+++ b/packages/big-design-icons/src/components/RemoveCircleOutlineIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/RemoveIcon.tsx b/packages/big-design-icons/src/components/RemoveIcon.tsx
index 6019e9244..41019623c 100644
--- a/packages/big-design-icons/src/components/RemoveIcon.tsx
+++ b/packages/big-design-icons/src/components/RemoveIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/RestoreIcon.tsx b/packages/big-design-icons/src/components/RestoreIcon.tsx
index 97866b8e4..9770db3b4 100644
--- a/packages/big-design-icons/src/components/RestoreIcon.tsx
+++ b/packages/big-design-icons/src/components/RestoreIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/SearchIcon.tsx b/packages/big-design-icons/src/components/SearchIcon.tsx
index 7cf6d6a94..6a4227907 100644
--- a/packages/big-design-icons/src/components/SearchIcon.tsx
+++ b/packages/big-design-icons/src/components/SearchIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/SettingsIcon.tsx b/packages/big-design-icons/src/components/SettingsIcon.tsx
index a7ecde8eb..796b5f73c 100644
--- a/packages/big-design-icons/src/components/SettingsIcon.tsx
+++ b/packages/big-design-icons/src/components/SettingsIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/StarBorderIcon.tsx b/packages/big-design-icons/src/components/StarBorderIcon.tsx
index 5a479dd61..6c1f1d34a 100644
--- a/packages/big-design-icons/src/components/StarBorderIcon.tsx
+++ b/packages/big-design-icons/src/components/StarBorderIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/StarHalfIcon.tsx b/packages/big-design-icons/src/components/StarHalfIcon.tsx
index a7d98b790..f853fb928 100644
--- a/packages/big-design-icons/src/components/StarHalfIcon.tsx
+++ b/packages/big-design-icons/src/components/StarHalfIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/StarIcon.tsx b/packages/big-design-icons/src/components/StarIcon.tsx
index 65fa2abb5..ad23ddfab 100644
--- a/packages/big-design-icons/src/components/StarIcon.tsx
+++ b/packages/big-design-icons/src/components/StarIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/StoreIcon.tsx b/packages/big-design-icons/src/components/StoreIcon.tsx
index 600b1b5af..1926b6b2c 100644
--- a/packages/big-design-icons/src/components/StoreIcon.tsx
+++ b/packages/big-design-icons/src/components/StoreIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/VisibilityIcon.tsx b/packages/big-design-icons/src/components/VisibilityIcon.tsx
index 6d642387a..a83d9fa6c 100644
--- a/packages/big-design-icons/src/components/VisibilityIcon.tsx
+++ b/packages/big-design-icons/src/components/VisibilityIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/VisibilityOffIcon.tsx b/packages/big-design-icons/src/components/VisibilityOffIcon.tsx
index 2e7ac06c3..d014eff30 100644
--- a/packages/big-design-icons/src/components/VisibilityOffIcon.tsx
+++ b/packages/big-design-icons/src/components/VisibilityOffIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design-icons/src/components/WarningIcon.tsx b/packages/big-design-icons/src/components/WarningIcon.tsx
index 4d7a395e0..77cab9fae 100644
--- a/packages/big-design-icons/src/components/WarningIcon.tsx
+++ b/packages/big-design-icons/src/components/WarningIcon.tsx
@@ -7,7 +7,8 @@ import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
 
 const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
-  const titleId = useUniqueId('icon');
+  const uniqueTitleId = useUniqueId('icon');
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
 
   return (
     <svg
diff --git a/packages/big-design/src/components/Alert/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Alert/__snapshots__/spec.tsx.snap
index 2622dc709..88ba36af8 100644
--- a/packages/big-design/src/components/Alert/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Alert/__snapshots__/spec.tsx.snap
@@ -68,7 +68,6 @@ exports[`render default (success) Alert 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="success"
       fill="currentColor"
@@ -172,7 +171,6 @@ exports[`render error Alert 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="danger"
       fill="currentColor"
@@ -272,7 +270,6 @@ exports[`render info Alert 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="primary60"
       fill="currentColor"
@@ -376,7 +373,6 @@ exports[`render warning Alert 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="warning50"
       fill="currentColor"
@@ -613,7 +609,6 @@ exports[`renders close button 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="success"
       fill="currentColor"
@@ -658,7 +653,6 @@ exports[`renders close button 1`] = `
         class="c9"
       >
         <svg
-          aria-labelledby="bd-icon-2"
           class="c10"
           fill="currentColor"
           height="24"
@@ -760,7 +754,6 @@ exports[`renders header 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="success"
       fill="currentColor"
@@ -916,7 +909,6 @@ exports[`renders with external link 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="success"
       fill="currentColor"
@@ -956,7 +948,6 @@ exports[`renders with external link 1`] = `
           Link
         </span>
         <svg
-          aria-labelledby="bd-icon-2"
           class="c9"
           fill="currentColor"
           height="24"
@@ -1073,7 +1064,6 @@ exports[`renders with link 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="success"
       fill="currentColor"
diff --git a/packages/big-design/src/components/Button/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Button/__snapshots__/spec.tsx.snap
index e87b3210c..4581500ec 100644
--- a/packages/big-design/src/components/Button/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Button/__snapshots__/spec.tsx.snap
@@ -606,7 +606,6 @@ exports[`render icon left and right button 1`] = `
     class="c1"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c2"
       fill="currentColor"
       height="24"
@@ -625,7 +624,6 @@ exports[`render icon left and right button 1`] = `
     </svg>
     Button
     <svg
-      aria-labelledby="bd-icon-2"
       class="c2"
       fill="currentColor"
       height="24"
@@ -769,7 +767,6 @@ exports[`render icon left button 1`] = `
     class="c1"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c2"
       fill="currentColor"
       height="24"
@@ -914,7 +911,6 @@ exports[`render icon only button 1`] = `
     class="c1"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c2"
       fill="currentColor"
       height="24"
@@ -1059,7 +1055,6 @@ exports[`render icon right button 1`] = `
   >
     Button
     <svg
-      aria-labelledby="bd-icon-1"
       class="c2"
       fill="currentColor"
       height="24"
diff --git a/packages/big-design/src/components/Checkbox/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Checkbox/__snapshots__/spec.tsx.snap
index 583bc5454..ebc8aab5b 100644
--- a/packages/big-design/src/components/Checkbox/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Checkbox/__snapshots__/spec.tsx.snap
@@ -107,7 +107,6 @@ exports[`render Checkbox checked 1`] = `
     for="bd-checkbox-1"
   >
     <svg
-      aria-labelledby="bd-icon-3"
       class="c4"
       fill="currentColor"
       height="24"
@@ -256,7 +255,6 @@ exports[`render Checkbox disabled checked 1`] = `
     for="bd-checkbox-1"
   >
     <svg
-      aria-labelledby="bd-icon-3"
       class="c4"
       fill="currentColor"
       height="24"
@@ -410,7 +408,6 @@ exports[`render Checkbox disabled indeterminate 1`] = `
     for="bd-checkbox-1"
   >
     <svg
-      aria-labelledby="bd-icon-3"
       class="c4"
       fill="currentColor"
       height="24"
@@ -564,7 +561,6 @@ exports[`render Checkbox disabled unchecked 1`] = `
     for="bd-checkbox-1"
   >
     <svg
-      aria-labelledby="bd-icon-3"
       class="c4"
       fill="currentColor"
       height="24"
@@ -708,7 +704,6 @@ exports[`render Checkbox indeterminate 1`] = `
     for="bd-checkbox-1"
   >
     <svg
-      aria-labelledby="bd-icon-3"
       class="c4"
       fill="currentColor"
       height="24"
@@ -850,7 +845,6 @@ exports[`render Checkbox unchecked 1`] = `
     for="bd-checkbox-1"
   >
     <svg
-      aria-labelledby="bd-icon-3"
       class="c4"
       fill="currentColor"
       height="24"
@@ -1032,7 +1026,6 @@ exports[`render Checkbox with description object 1`] = `
     for="bd-checkbox-1"
   >
     <svg
-      aria-labelledby="bd-icon-3"
       class="c4"
       fill="currentColor"
       height="24"
@@ -1202,7 +1195,6 @@ exports[`render Checkbox with description string 1`] = `
     for="bd-checkbox-1"
   >
     <svg
-      aria-labelledby="bd-icon-3"
       class="c4"
       fill="currentColor"
       height="24"
diff --git a/packages/big-design/src/components/InlineAlert/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/InlineAlert/__snapshots__/spec.tsx.snap
index e42341548..81dd07afc 100644
--- a/packages/big-design/src/components/InlineAlert/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/InlineAlert/__snapshots__/spec.tsx.snap
@@ -61,7 +61,6 @@ exports[`render default (success) InlineAlert 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="success"
       fill="currentColor"
@@ -158,7 +157,6 @@ exports[`render error InlineAlert 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="danger"
       fill="currentColor"
@@ -251,7 +249,6 @@ exports[`render info InlineAlert 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="primary60"
       fill="currentColor"
@@ -348,7 +345,6 @@ exports[`render warning InlineAlert 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="warning50"
       fill="currentColor"
@@ -578,7 +574,6 @@ exports[`renders close button 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="success"
       fill="currentColor"
@@ -724,7 +719,6 @@ exports[`renders header 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="success"
       fill="currentColor"
@@ -873,7 +867,6 @@ exports[`renders with external link 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="success"
       fill="currentColor"
@@ -913,7 +906,6 @@ exports[`renders with external link 1`] = `
           Link
         </span>
         <svg
-          aria-labelledby="bd-icon-2"
           class="c9"
           fill="currentColor"
           height="24"
@@ -1023,7 +1015,6 @@ exports[`renders with link 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="success"
       fill="currentColor"
diff --git a/packages/big-design/src/components/Input/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Input/__snapshots__/spec.tsx.snap
index d524b5a57..26cf6ce57 100644
--- a/packages/big-design/src/components/Input/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Input/__snapshots__/spec.tsx.snap
@@ -193,7 +193,6 @@ exports[`renders all together 1`] = `
       class="c3"
     >
       <svg
-        aria-labelledby="bd-icon-2"
         class="c4"
         data-testid="icon-left"
         fill="currentColor"
@@ -224,7 +223,6 @@ exports[`renders all together 1`] = `
       class="c7"
     >
       <svg
-        aria-labelledby="bd-icon-3"
         class="c4"
         data-testid="icon-right"
         fill="currentColor"
diff --git a/packages/big-design/src/components/Link/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Link/__snapshots__/spec.tsx.snap
index c12b65f3c..85e240565 100644
--- a/packages/big-design/src/components/Link/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Link/__snapshots__/spec.tsx.snap
@@ -82,7 +82,6 @@ exports[`renders with external icon 1`] = `
     Link
   </span>
   <svg
-    aria-labelledby="bd-icon-1"
     class="c1"
     fill="currentColor"
     height="24"
diff --git a/packages/big-design/src/components/Message/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Message/__snapshots__/spec.tsx.snap
index c93559ffb..655c9c37a 100644
--- a/packages/big-design/src/components/Message/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Message/__snapshots__/spec.tsx.snap
@@ -60,7 +60,6 @@ exports[`render default (success) Message 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="success"
       fill="currentColor"
@@ -156,7 +155,6 @@ exports[`render error Message 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="danger"
       fill="currentColor"
@@ -248,7 +246,6 @@ exports[`render info Message 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="primary60"
       fill="currentColor"
@@ -344,7 +341,6 @@ exports[`render warning Message 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="warning50"
       fill="currentColor"
@@ -573,7 +569,6 @@ exports[`renders close button 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="success"
       fill="currentColor"
@@ -717,7 +712,6 @@ exports[`renders header 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="success"
       fill="currentColor"
@@ -865,7 +859,6 @@ exports[`renders with external link 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="success"
       fill="currentColor"
@@ -905,7 +898,6 @@ exports[`renders with external link 1`] = `
           Link
         </span>
         <svg
-          aria-labelledby="bd-icon-2"
           class="c9"
           fill="currentColor"
           height="24"
@@ -1014,7 +1006,6 @@ exports[`renders with link 1`] = `
     class="c0 c3"
   >
     <svg
-      aria-labelledby="bd-icon-1"
       class="c4"
       color="success"
       fill="currentColor"
diff --git a/packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap
index 30b28579e..66de04f80 100644
--- a/packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap
@@ -312,7 +312,6 @@ exports[`render pagination component 1`] = `
       >
         1 - 3 of 10
         <svg
-          aria-labelledby="bd-icon-2"
           class="c6"
           fill="currentColor"
           height="24"
@@ -726,7 +725,6 @@ exports[`render pagination component with invalid page info 1`] = `
       >
         -8 - -6 of 10
         <svg
-          aria-labelledby="bd-icon-2"
           class="c6"
           fill="currentColor"
           height="24"
@@ -1140,7 +1138,6 @@ exports[`render pagination component with invalid range info 1`] = `
       >
         1 - -5 of 10
         <svg
-          aria-labelledby="bd-icon-2"
           class="c6"
           fill="currentColor"
           height="24"
@@ -1555,7 +1552,6 @@ exports[`render pagination component with no items 1`] = `
       >
         0 of 0
         <svg
-          aria-labelledby="bd-icon-2"
           class="c6"
           fill="currentColor"
           height="24"
diff --git a/packages/big-design/src/components/ProgressCircle/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/ProgressCircle/__snapshots__/spec.tsx.snap
index eca6c282d..025e33c4b 100644
--- a/packages/big-design/src/components/ProgressCircle/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/ProgressCircle/__snapshots__/spec.tsx.snap
@@ -10,7 +10,6 @@ exports[`render completed determinant progress circle 1`] = `
 
 <div>
   <svg
-    aria-labelledby="bd-icon-1"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="100"
@@ -114,7 +113,6 @@ exports[`render error determinant progress circle 1`] = `
 
 <div>
   <svg
-    aria-labelledby="bd-icon-1"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
diff --git a/packages/big-design/src/components/Table/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Table/__snapshots__/spec.tsx.snap
index bdc1a87b5..d2fe56dee 100644
--- a/packages/big-design/src/components/Table/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Table/__snapshots__/spec.tsx.snap
@@ -362,7 +362,6 @@ exports[`renders a pagination component 1`] = `
           >
             1 - 3 of 5
             <svg
-              aria-labelledby="bd-icon-3"
               class="c9"
               fill="currentColor"
               height="24"
@@ -910,7 +909,6 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
           for="bd-checkbox-2"
         >
           <svg
-            aria-labelledby="bd-icon-4"
             class="c9"
             fill="currentColor"
             height="24"