@transferwise/icons 3.9.2 → 3.10.0

package/lib/index.esm.js

@@ -5,6 +5,7 @@ const AlertCircleFill = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -13,7 +14,7 @@ const AlertCircleFill = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-alert-circle-fill ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'alert-circle-fill-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -40,6 +41,7 @@ const AlertCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -48,7 +50,7 @@ const AlertCircle = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-alert-circle ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'alert-circle-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -75,6 +77,7 @@ const Alert = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -83,7 +86,7 @@ const Alert = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-alert ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'alert-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -112,6 +115,7 @@ const ArrowDiagonalDown = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -120,7 +124,7 @@ const ArrowDiagonalDown = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-arrow-diagonal-down ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'arrow-diagonal-down-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -146,6 +150,7 @@ const ArrowDiagonalUp = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -154,7 +159,7 @@ const ArrowDiagonalUp = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-arrow-diagonal-up ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'arrow-diagonal-up-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -180,6 +185,7 @@ const ArrowDown = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -188,7 +194,7 @@ const ArrowDown = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-arrow-down ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'arrow-down-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -213,6 +219,7 @@ const ArrowLeft = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -221,7 +228,7 @@ const ArrowLeft = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-arrow-left ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'arrow-left-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -246,6 +253,7 @@ const ArrowRight = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -254,7 +262,7 @@ const ArrowRight = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-arrow-right ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'arrow-right-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -279,6 +287,7 @@ const ArrowUp = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -287,7 +296,7 @@ const ArrowUp = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-arrow-up ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'arrow-up-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -312,6 +321,7 @@ const AutoConvert = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -320,7 +330,7 @@ const AutoConvert = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-auto-convert ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'auto-convert-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -347,6 +357,7 @@ const BankStrikethrough = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -355,7 +366,7 @@ const BankStrikethrough = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-bank-strikethrough ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'bank-strikethrough-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -383,6 +394,7 @@ const BankTransfer = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -391,7 +403,7 @@ const BankTransfer = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-bank-transfer ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'bank-transfer-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -418,6 +430,7 @@ const Ach = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -426,7 +439,7 @@ const Ach = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-ach ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'ach-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -453,6 +466,7 @@ const Bank = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -461,7 +475,7 @@ const Bank = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-bank ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'bank-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -488,6 +502,7 @@ const BarChart = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -496,7 +511,7 @@ const BarChart = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-bar-chart ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'bar-chart-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -521,6 +536,7 @@ const Balance = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -529,7 +545,7 @@ const Balance = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-balance ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'balance-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -554,6 +570,7 @@ const Investments = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -562,7 +579,7 @@ const Investments = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-investments ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'investments-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -587,6 +604,7 @@ const Barcode = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -595,7 +613,7 @@ const Barcode = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-barcode ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'barcode-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -622,6 +640,7 @@ const Batch = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -630,7 +649,7 @@ const Batch = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-batch ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'batch-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -655,6 +674,7 @@ const Beach = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -663,7 +683,7 @@ const Beach = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-beach ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'beach-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -688,6 +708,7 @@ const Holidays = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -696,7 +717,7 @@ const Holidays = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-holidays ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'holidays-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -721,6 +742,7 @@ const BillSplit = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -729,7 +751,7 @@ const BillSplit = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-bill-split ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'bill-split-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -756,6 +778,7 @@ const Bills = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -764,7 +787,7 @@ const Bills = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-bills ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'bills-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -791,6 +814,7 @@ const Bin = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -799,7 +823,7 @@ const Bin = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-bin ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'bin-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -824,6 +848,7 @@ const Book = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -832,7 +857,7 @@ const Book = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-book ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'book-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -857,6 +882,7 @@ const Boxes = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -865,7 +891,7 @@ const Boxes = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-boxes ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'boxes-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -892,6 +918,7 @@ const CostOfGoodsSold = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -900,7 +927,7 @@ const CostOfGoodsSold = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-cost-of-goods-sold ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'cost-of-goods-sold-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -927,6 +954,7 @@ const Briefcase = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -935,7 +963,7 @@ const Briefcase = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-briefcase ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'briefcase-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -960,6 +988,7 @@ const Building = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -968,7 +997,7 @@ const Building = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-building ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'building-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -995,6 +1024,7 @@ const Rent = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1003,7 +1033,7 @@ const Rent = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-rent ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'rent-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1030,6 +1060,7 @@ const Bulb = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1038,7 +1069,7 @@ const Bulb = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-bulb ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'bulb-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1065,6 +1096,7 @@ const Insights = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1073,7 +1105,7 @@ const Insights = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-insights ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'insights-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1100,6 +1132,7 @@ const CalendarCheck = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1108,7 +1141,7 @@ const CalendarCheck = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-calendar-check ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'calendar-check-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1135,6 +1168,7 @@ const CalendarSuccess = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1143,7 +1177,7 @@ const CalendarSuccess = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-calendar-success ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'calendar-success-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1170,6 +1204,7 @@ const Calendar = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1178,7 +1213,7 @@ const Calendar = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-calendar ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'calendar-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1205,6 +1240,7 @@ const Camera = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1213,7 +1249,7 @@ const Camera = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-camera ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'camera-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1240,6 +1276,7 @@ const Car = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1248,7 +1285,7 @@ const Car = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-car ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'car-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1283,6 +1320,7 @@ const DriversLicense = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1291,7 +1329,7 @@ const DriversLicense = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-drivers-license ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'drivers-license-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1326,6 +1364,7 @@ const CardCvc = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1334,7 +1373,7 @@ const CardCvc = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-card-cvc ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'card-cvc-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1361,6 +1400,7 @@ const CardDetail = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1369,7 +1409,7 @@ const CardDetail = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-card-detail ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'card-detail-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1396,6 +1436,7 @@ const CardNumber = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1404,7 +1445,7 @@ const CardNumber = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-card-number ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'card-number-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1431,6 +1472,7 @@ const CardWise = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1439,7 +1481,7 @@ const CardWise = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-card-wise ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'card-wise-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1466,6 +1508,7 @@ const CardTransferwise = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1474,7 +1517,7 @@ const CardTransferwise = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-card-transferwise ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'card-transferwise-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1501,6 +1544,7 @@ const Card = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1509,7 +1553,7 @@ const Card = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-card ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'card-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1536,6 +1580,7 @@ const CashApp = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1544,7 +1589,7 @@ const CashApp = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-cash-app ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'cash-app-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1569,6 +1614,7 @@ const CashRegister = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1577,7 +1623,7 @@ const CashRegister = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-cash-register ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'cash-register-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1604,6 +1650,7 @@ const SalesAndRoyalties = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1612,7 +1659,7 @@ const SalesAndRoyalties = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-sales-and-royalties ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'sales-and-royalties-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1639,6 +1686,7 @@ const Charity = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1647,7 +1695,7 @@ const Charity = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-charity ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'charity-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1674,6 +1722,7 @@ const CheckCircleFill = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1682,7 +1731,7 @@ const CheckCircleFill = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-check-circle-fill ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'check-circle-fill-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1709,6 +1758,7 @@ const CheckCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1717,7 +1767,7 @@ const CheckCircle = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-check-circle ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'check-circle-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1744,6 +1794,7 @@ const Check = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1752,7 +1803,7 @@ const Check = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-check ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'check-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1777,6 +1828,7 @@ const Verified = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1785,7 +1837,7 @@ const Verified = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-verified ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'verified-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1810,6 +1862,7 @@ const ChevronDown = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1818,7 +1871,7 @@ const ChevronDown = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-chevron-down ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'chevron-down-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1843,6 +1896,7 @@ const ChevronLeft = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1851,7 +1905,7 @@ const ChevronLeft = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-chevron-left ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'chevron-left-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1876,6 +1930,7 @@ const ChevronRight = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1884,7 +1939,7 @@ const ChevronRight = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-chevron-right ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'chevron-right-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1909,6 +1964,7 @@ const ChevronUp = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1917,7 +1973,7 @@ const ChevronUp = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-chevron-up ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'chevron-up-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1942,6 +1998,7 @@ const Chip = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1950,7 +2007,7 @@ const Chip = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-chip ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'chip-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -1977,6 +2034,7 @@ const ChipPin = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1985,7 +2043,7 @@ const ChipPin = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-chip-pin ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'chip-pin-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2012,6 +2070,7 @@ const ClickToPay = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2020,7 +2079,7 @@ const ClickToPay = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-click-to-pay ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'click-to-pay-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2045,6 +2104,7 @@ const ClockBorderless = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2053,7 +2113,7 @@ const ClockBorderless = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-clock-borderless ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'clock-borderless-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2080,6 +2140,7 @@ const ClockFill = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2088,7 +2149,7 @@ const ClockFill = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-clock-fill ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'clock-fill-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2115,6 +2176,7 @@ const Clock = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2123,7 +2185,7 @@ const Clock = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-clock ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'clock-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2150,6 +2212,7 @@ const PendingCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2158,7 +2221,7 @@ const PendingCircle = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-pending-circle ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'pending-circle-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2185,6 +2248,7 @@ const Cog = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2193,7 +2257,7 @@ const Cog = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-cog ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'cog-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2220,6 +2284,7 @@ const Settings = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2228,7 +2293,7 @@ const Settings = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-settings ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'settings-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2255,6 +2320,7 @@ const Coins = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2263,7 +2329,7 @@ const Coins = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-coins ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'coins-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2290,6 +2356,7 @@ const Collapse = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2298,7 +2365,7 @@ const Collapse = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-collapse ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'collapse-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2323,6 +2390,7 @@ const Confetti = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2331,7 +2399,7 @@ const Confetti = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-confetti ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'confetti-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2358,6 +2426,7 @@ const Contactless = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2366,7 +2435,7 @@ const Contactless = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-contactless ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'contactless-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2393,6 +2462,7 @@ const Convert = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2401,7 +2471,7 @@ const Convert = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-convert ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'convert-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2426,6 +2496,7 @@ const CrossCircleFill = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2434,7 +2505,7 @@ const CrossCircleFill = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-cross-circle-fill ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'cross-circle-fill-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2461,6 +2532,7 @@ const CrossCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2469,7 +2541,7 @@ const CrossCircle = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-cross-circle ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'cross-circle-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2496,6 +2568,7 @@ const Cross = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2504,7 +2577,7 @@ const Cross = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-cross ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'cross-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2529,6 +2602,7 @@ const CrystalBall = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2537,7 +2611,7 @@ const CrystalBall = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-crystal-ball ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'crystal-ball-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2564,6 +2638,7 @@ const Defrost = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2572,7 +2647,7 @@ const Defrost = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-defrost ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'defrost-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2599,6 +2674,7 @@ const Delivery = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2607,7 +2683,7 @@ const Delivery = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-delivery ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'delivery-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2632,6 +2708,7 @@ const Dial = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2640,7 +2717,7 @@ const Dial = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-dial ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'dial-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2667,6 +2744,7 @@ const PinCode = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2675,7 +2753,7 @@ const PinCode = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-pin-code ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'pin-code-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2702,6 +2780,7 @@ const DirectDebits = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2710,7 +2789,7 @@ const DirectDebits = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-direct-debits ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'direct-debits-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2737,6 +2816,7 @@ const DiscoBall = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2745,7 +2825,7 @@ const DiscoBall = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-disco-ball ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'disco-ball-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2776,6 +2856,7 @@ const Document = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2784,7 +2865,7 @@ const Document = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-document ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'document-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2809,6 +2890,7 @@ const Documents = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2817,7 +2899,7 @@ const Documents = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-documents ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'documents-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2844,6 +2926,7 @@ const Download = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2852,7 +2935,7 @@ const Download = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-download ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'download-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2879,6 +2962,7 @@ const EatingOut = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2887,7 +2971,7 @@ const EatingOut = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-eating-out ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'eating-out-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2914,6 +2998,7 @@ const Edit = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2922,7 +3007,7 @@ const Edit = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-edit ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'edit-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2949,6 +3034,7 @@ const EmailAndMobile = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2957,7 +3043,7 @@ const EmailAndMobile = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-email-and-mobile ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'email-and-mobile-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -2984,6 +3070,7 @@ const EmailAndPhone = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2992,7 +3079,7 @@ const EmailAndPhone = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-email-and-phone ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'email-and-phone-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3019,6 +3106,7 @@ const Email = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3027,7 +3115,7 @@ const Email = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-email ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'email-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3052,6 +3140,7 @@ const Entertainment = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3060,7 +3149,7 @@ const Entertainment = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-entertainment ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'entertainment-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3087,6 +3176,7 @@ const Expand = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3095,7 +3185,7 @@ const Expand = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-expand ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'expand-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3122,6 +3212,7 @@ const EyeShut = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3130,7 +3221,7 @@ const EyeShut = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-eye-shut ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'eye-shut-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3155,6 +3246,7 @@ const Eye = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3163,7 +3255,7 @@ const Eye = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-eye ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'eye-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3190,6 +3282,7 @@ const FaceId = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3198,7 +3291,7 @@ const FaceId = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-face-id ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'face-id-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3225,6 +3318,7 @@ const Facebook = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3233,7 +3327,7 @@ const Facebook = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-facebook ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'facebook-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3258,6 +3352,7 @@ const FacebookSquare = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3266,7 +3361,7 @@ const FacebookSquare = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-facebook-square ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'facebook-square-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3291,6 +3386,7 @@ const FastFlag = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3299,7 +3395,7 @@ const FastFlag = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-fast-flag ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'fast-flag-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3324,6 +3420,7 @@ const Fingerprint = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3332,7 +3429,7 @@ const Fingerprint = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-fingerprint ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'fingerprint-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3359,6 +3456,7 @@ const Fpx = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3367,7 +3465,7 @@ const Fpx = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-fpx ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'fpx-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3394,6 +3492,7 @@ const Freeze = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3402,7 +3501,7 @@ const Freeze = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-freeze ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'freeze-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3427,6 +3526,7 @@ const Gambling = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3435,7 +3535,7 @@ const Gambling = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-gambling ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'gambling-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3462,6 +3562,7 @@ const GeneralFill = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3470,7 +3571,7 @@ const GeneralFill = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-general-fill ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'general-fill-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3497,6 +3598,7 @@ const GeneralFilled = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3505,7 +3607,7 @@ const GeneralFilled = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-general-filled ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'general-filled-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3532,6 +3634,7 @@ const General = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3540,7 +3643,7 @@ const General = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-general ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'general-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3567,6 +3670,7 @@ const GiftBox = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3575,7 +3679,7 @@ const GiftBox = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-gift-box ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'gift-box-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3602,6 +3706,7 @@ const Invite = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3610,7 +3715,7 @@ const Invite = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-invite ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'invite-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3637,6 +3742,7 @@ const Globe = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3645,7 +3751,7 @@ const Globe = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-globe ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'globe-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3670,6 +3776,7 @@ const GraduationCap = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3678,7 +3785,7 @@ const GraduationCap = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-graduation-cap ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'graduation-cap-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3705,6 +3812,7 @@ const Graph = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3713,7 +3821,7 @@ const Graph = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-graph ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'graph-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3740,6 +3848,7 @@ const Groceries = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3748,7 +3857,7 @@ const Groceries = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-groceries ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'groceries-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3773,6 +3882,7 @@ const Handshake = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3781,7 +3891,7 @@ const Handshake = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-handshake ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'handshake-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3806,6 +3916,7 @@ const ContractServices = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3814,7 +3925,7 @@ const ContractServices = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-contract-services ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'contract-services-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3839,6 +3950,7 @@ const HappyEmoji = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3847,7 +3959,7 @@ const HappyEmoji = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-happy-emoji ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'happy-emoji-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3874,6 +3986,7 @@ const Do = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3882,7 +3995,7 @@ const Do = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-do ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'do-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3909,6 +4022,7 @@ const Emoji = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3917,7 +4031,7 @@ const Emoji = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-emoji ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'emoji-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3944,6 +4058,7 @@ const Headset = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3952,7 +4067,7 @@ const Headset = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-headset ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'headset-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -3977,6 +4092,7 @@ const Cs = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3985,7 +4101,7 @@ const Cs = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-cs ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'cs-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4010,6 +4126,7 @@ const Heart = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4018,7 +4135,7 @@ const Heart = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-heart ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'heart-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4043,6 +4160,7 @@ const Family = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4051,7 +4169,7 @@ const Family = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-family ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'family-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4076,6 +4194,7 @@ const House = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4084,7 +4203,7 @@ const House = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-house ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'house-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4109,6 +4228,7 @@ const Home = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4117,7 +4237,7 @@ const Home = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-home ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'home-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4142,6 +4262,7 @@ const Id = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4150,7 +4271,7 @@ const Id = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-id ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'id-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4177,6 +4298,7 @@ const Ideal = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4185,7 +4307,7 @@ const Ideal = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-ideal ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'ideal-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4210,6 +4332,7 @@ const Image = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4218,7 +4341,7 @@ const Image = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-image ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'image-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4245,6 +4368,7 @@ const Picture = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4253,7 +4377,7 @@ const Picture = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-picture ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'picture-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4280,6 +4404,7 @@ const InfoCircleFill = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4288,7 +4413,7 @@ const InfoCircleFill = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-info-circle-fill ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'info-circle-fill-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4315,6 +4440,7 @@ const InfoCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4323,7 +4449,7 @@ const InfoCircle = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-info-circle ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'info-circle-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4350,6 +4476,7 @@ const Info = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4358,7 +4485,7 @@ const Info = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-info ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'info-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4387,6 +4514,7 @@ const InsertCard = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4395,7 +4523,7 @@ const InsertCard = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-insert-card ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'insert-card-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4422,6 +4550,7 @@ const Atm = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4430,7 +4559,7 @@ const Atm = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-atm ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'atm-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4457,6 +4586,7 @@ const Instagram = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4465,7 +4595,7 @@ const Instagram = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-instagram ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'instagram-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4492,6 +4622,7 @@ const Insurance = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4500,7 +4631,7 @@ const Insurance = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-insurance ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'insurance-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4527,6 +4658,7 @@ const Interac = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4535,7 +4667,7 @@ const Interac = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-interac ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'interac-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4562,6 +4694,7 @@ const Jar = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4570,7 +4703,7 @@ const Jar = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-jar ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'jar-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4597,6 +4730,7 @@ const Keep = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4605,7 +4739,7 @@ const Keep = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-keep ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'keep-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4630,6 +4764,7 @@ const Klarna = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4638,7 +4773,7 @@ const Klarna = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-klarna ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'klarna-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4665,6 +4800,7 @@ const Laptop = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4673,7 +4809,7 @@ const Laptop = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-laptop ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'laptop-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4700,6 +4836,7 @@ const Leaf = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4708,7 +4845,7 @@ const Leaf = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-leaf ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'leaf-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4733,6 +4870,7 @@ const LightningBolt = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4741,7 +4879,7 @@ const LightningBolt = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-lightning-bolt ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'lightning-bolt-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4766,6 +4904,7 @@ const Lightning = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4774,7 +4913,7 @@ const Lightning = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-lightning ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'lightning-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4799,6 +4938,7 @@ const Limit = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4807,7 +4947,7 @@ const Limit = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-limit ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'limit-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4832,6 +4972,7 @@ const Link = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4840,7 +4981,7 @@ const Link = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-link ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'link-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4867,6 +5008,7 @@ const Linkedin = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4875,7 +5017,7 @@ const Linkedin = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-linkedin ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'linkedin-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4900,6 +5042,7 @@ const List = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4908,7 +5051,7 @@ const List = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-list ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'list-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4935,6 +5078,7 @@ const Activity = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4943,7 +5087,7 @@ const Activity = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-activity ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'activity-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -4970,6 +5114,7 @@ const LocationMarker = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4978,7 +5123,7 @@ const LocationMarker = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-location-marker ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'location-marker-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5005,6 +5150,7 @@ const LogIn = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5013,7 +5159,7 @@ const LogIn = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-log-in ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'log-in-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5040,6 +5186,7 @@ const LogOut = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5048,7 +5195,7 @@ const LogOut = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-log-out ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'log-out-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5075,6 +5222,7 @@ const MassPayout = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5083,7 +5231,7 @@ const MassPayout = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-mass-payout ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'mass-payout-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5110,6 +5258,7 @@ const Menu = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5118,7 +5267,7 @@ const Menu = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-menu ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'menu-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5145,6 +5294,7 @@ const Messenger = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5153,7 +5303,7 @@ const Messenger = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-messenger ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'messenger-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5178,6 +5328,7 @@ const MinusCircleFill = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5186,7 +5337,7 @@ const MinusCircleFill = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-minus-circle-fill ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'minus-circle-fill-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5213,6 +5364,7 @@ const MinusCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5221,7 +5373,7 @@ const MinusCircle = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-minus-circle ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'minus-circle-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5248,6 +5400,7 @@ const Minus = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5256,7 +5409,7 @@ const Minus = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-minus ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'minus-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5281,6 +5434,7 @@ const MobileLock = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5289,7 +5443,7 @@ const MobileLock = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-mobile-lock ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'mobile-lock-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5316,6 +5470,7 @@ const TwoStep = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5324,7 +5479,7 @@ const TwoStep = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-two-step ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'two-step-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5351,6 +5506,7 @@ const Mobile = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5359,7 +5515,7 @@ const Mobile = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-mobile ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'mobile-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5386,6 +5542,7 @@ const MoneyBag = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5394,7 +5551,7 @@ const MoneyBag = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-money-bag ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'money-bag-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5421,6 +5578,7 @@ const Money = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5429,7 +5587,7 @@ const Money = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-money ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'money-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5456,6 +5614,7 @@ const More = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5464,7 +5623,7 @@ const More = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-more ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'more-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5491,6 +5650,7 @@ const MultiCurrency = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5499,7 +5659,7 @@ const MultiCurrency = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-multi-currency ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'multi-currency-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5526,6 +5686,7 @@ const NavigateAway = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5534,7 +5695,7 @@ const NavigateAway = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-navigate-away ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'navigate-away-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5561,6 +5722,7 @@ const Nearby = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5569,7 +5731,7 @@ const Nearby = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-nearby ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'nearby-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5596,6 +5758,7 @@ const New = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5604,7 +5767,7 @@ const New = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-new ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'new-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5629,6 +5792,7 @@ const NotificationActive = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5637,7 +5801,7 @@ const NotificationActive = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-notification-active ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'notification-active-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5664,6 +5828,7 @@ const Notification = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5672,7 +5837,7 @@ const Notification = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-notification ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'notification-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5697,6 +5862,7 @@ const PadlockUnlocked = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5705,7 +5871,7 @@ const PadlockUnlocked = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-padlock-unlocked ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'padlock-unlocked-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5732,6 +5898,7 @@ const Unlock = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5740,7 +5907,7 @@ const Unlock = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-unlock ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'unlock-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5767,6 +5934,7 @@ const Padlock = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5775,7 +5943,7 @@ const Padlock = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-padlock ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'padlock-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5802,6 +5970,7 @@ const Lock = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5810,7 +5979,7 @@ const Lock = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-lock ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'lock-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5837,6 +6006,7 @@ const Paperclip = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5845,7 +6015,7 @@ const Paperclip = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-paperclip ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'paperclip-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5872,6 +6042,7 @@ const Passport = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5880,7 +6051,7 @@ const Passport = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-passport ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'passport-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5907,6 +6078,7 @@ const Pause = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5915,7 +6087,7 @@ const Pause = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-pause ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'pause-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5942,6 +6114,7 @@ const PayIn = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5950,7 +6123,7 @@ const PayIn = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-pay-in ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'pay-in-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -5975,6 +6148,7 @@ const Salary = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5983,7 +6157,7 @@ const Salary = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-salary ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'salary-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6008,6 +6182,7 @@ const Payments = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6016,7 +6191,7 @@ const Payments = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-payments ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'payments-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6043,6 +6218,7 @@ const Paypal = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6051,7 +6227,7 @@ const Paypal = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-paypal ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'paypal-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6080,6 +6256,7 @@ const People = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6088,7 +6265,7 @@ const People = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-people ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'people-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6113,6 +6290,7 @@ const Recipients = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6121,7 +6299,7 @@ const Recipients = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-recipients ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'recipients-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6146,6 +6324,7 @@ const PercentageCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6154,7 +6333,7 @@ const PercentageCircle = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-percentage-circle ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'percentage-circle-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6181,6 +6360,7 @@ const Tax = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6189,7 +6369,7 @@ const Tax = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-tax ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'tax-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6216,6 +6396,7 @@ const Person = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6224,7 +6405,7 @@ const Person = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-person ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'person-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6249,6 +6430,7 @@ const Profile = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6257,7 +6439,7 @@ const Profile = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-profile ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'profile-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6282,6 +6464,7 @@ const PersonalCare = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6290,7 +6473,7 @@ const PersonalCare = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-personal-care ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'personal-care-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6321,6 +6504,7 @@ const Pets = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6329,7 +6513,7 @@ const Pets = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-pets ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'pets-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6356,6 +6540,7 @@ const Phone = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6364,7 +6549,7 @@ const Phone = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-phone ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'phone-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6389,6 +6574,7 @@ const PieChart = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6397,7 +6583,7 @@ const PieChart = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-pie-chart ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'pie-chart-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6422,6 +6608,7 @@ const Expenses = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6430,7 +6617,7 @@ const Expenses = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-expenses ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'expenses-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6455,6 +6642,7 @@ const PiggyBank = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6463,7 +6651,7 @@ const PiggyBank = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-piggy-bank ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'piggy-bank-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6490,6 +6678,7 @@ const Savings = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6498,7 +6687,7 @@ const Savings = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-savings ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'savings-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6525,6 +6714,7 @@ const Pix = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6533,7 +6723,7 @@ const Pix = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-pix ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'pix-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6560,6 +6750,7 @@ const Plane = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6568,7 +6759,7 @@ const Plane = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-plane ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'plane-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6595,6 +6786,7 @@ const Play = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6603,7 +6795,7 @@ const Play = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-play ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'play-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6630,6 +6822,7 @@ const PlusCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6638,7 +6831,7 @@ const PlusCircle = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-plus-circle ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'plus-circle-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6665,6 +6858,7 @@ const Plus = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6673,7 +6867,7 @@ const Plus = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-plus ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'plus-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6698,6 +6892,7 @@ const QrCode = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6706,7 +6901,7 @@ const QrCode = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-qr-code ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'qr-code-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6733,6 +6928,7 @@ const QuestionMarkCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6741,7 +6937,7 @@ const QuestionMarkCircle = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-question-mark-circle ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'question-mark-circle-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6768,6 +6964,7 @@ const HelpCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6776,7 +6973,7 @@ const HelpCircle = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-help-circle ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'help-circle-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6803,6 +7000,7 @@ const QuestionMark = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6811,7 +7009,7 @@ const QuestionMark = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-question-mark ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'question-mark-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6838,6 +7036,7 @@ const Help = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6846,7 +7045,7 @@ const Help = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-help ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'help-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6873,6 +7072,7 @@ const Rain = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6881,7 +7081,7 @@ const Rain = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-rain ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'rain-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6908,6 +7108,7 @@ const Rainbow = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6916,7 +7117,7 @@ const Rainbow = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-rainbow ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'rainbow-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6943,6 +7144,7 @@ const Receipt = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6951,7 +7153,7 @@ const Receipt = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-receipt ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'receipt-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -6978,6 +7180,7 @@ const Receive = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6986,7 +7189,7 @@ const Receive = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-receive ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'receive-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7011,6 +7214,7 @@ const RefundReceive = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7019,7 +7223,7 @@ const RefundReceive = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-refund-receive ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'refund-receive-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7046,6 +7250,7 @@ const RefundSent = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7054,7 +7259,7 @@ const RefundSent = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-refund-sent ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'refund-sent-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7081,6 +7286,7 @@ const Reload = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7089,7 +7295,7 @@ const Reload = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-reload ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'reload-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7114,6 +7320,7 @@ const Refresh = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7122,7 +7329,7 @@ const Refresh = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-refresh ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'refresh-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7147,6 +7354,7 @@ const RequestReceive = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7155,7 +7363,7 @@ const RequestReceive = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-request-receive ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'request-receive-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7182,6 +7390,7 @@ const RequestSend = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7190,7 +7399,7 @@ const RequestSend = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-request-send ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'request-send-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7217,6 +7426,7 @@ const Rewards = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7225,7 +7435,7 @@ const Rewards = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-rewards ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'rewards-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7258,6 +7468,7 @@ const SadEmoji = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7266,7 +7477,7 @@ const SadEmoji = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-sad-emoji ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'sad-emoji-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7293,6 +7504,7 @@ const Dont = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7301,7 +7513,7 @@ const Dont = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-dont ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'dont-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7328,6 +7540,7 @@ const ScanQrCode = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7336,7 +7549,7 @@ const ScanQrCode = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-scan-qr-code ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'scan-qr-code-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7363,6 +7576,7 @@ const Search = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7371,7 +7585,7 @@ const Search = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-search ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'search-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7396,6 +7610,7 @@ const Send = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7404,7 +7619,7 @@ const Send = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-send ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'send-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7429,6 +7644,7 @@ const ShareAndroid = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7437,7 +7653,7 @@ const ShareAndroid = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-share-android ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'share-android-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7462,6 +7678,7 @@ const ShareIos = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7470,7 +7687,7 @@ const ShareIos = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-share-ios ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'share-ios-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7497,6 +7714,7 @@ const Shield = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7505,7 +7723,7 @@ const Shield = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-shield ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'shield-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7530,6 +7748,7 @@ const ShoppingBag = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7538,7 +7757,7 @@ const ShoppingBag = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-shopping-bag ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'shopping-bag-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7565,6 +7784,7 @@ const ECommerce = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7573,7 +7793,7 @@ const ECommerce = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-e-commerce ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'e-commerce-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7600,6 +7820,7 @@ const Slider = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7608,7 +7829,7 @@ const Slider = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-slider ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'slider-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7635,6 +7856,7 @@ const Sofort = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7643,7 +7865,7 @@ const Sofort = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-sofort ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'sofort-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7670,6 +7892,7 @@ const SoftwareAndHosting = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7678,7 +7901,7 @@ const SoftwareAndHosting = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-software-and-hosting ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'software-and-hosting-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7705,6 +7928,7 @@ const SoftwareAndWebHosting = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7713,7 +7937,7 @@ const SoftwareAndWebHosting = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-software-and-web-hosting ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'software-and-web-hosting-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7740,6 +7964,7 @@ const SpeechBubbleExclamation = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7748,7 +7973,7 @@ const SpeechBubbleExclamation = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-speech-bubble-exclamation ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'speech-bubble-exclamation-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7776,6 +8001,7 @@ const SpeechBubbleMessage = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7784,7 +8010,7 @@ const SpeechBubbleMessage = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-speech-bubble-message ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'speech-bubble-message-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7811,6 +8037,7 @@ const Feedback = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7819,7 +8046,7 @@ const Feedback = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-feedback ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'feedback-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7846,6 +8073,7 @@ const SpeechBubblePending = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7854,7 +8082,7 @@ const SpeechBubblePending = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-speech-bubble-pending ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'speech-bubble-pending-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7881,6 +8109,7 @@ const Pending = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7889,7 +8118,7 @@ const Pending = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-pending ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'pending-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7916,6 +8145,7 @@ const SpeechBubble = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7924,7 +8154,7 @@ const SpeechBubble = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-speech-bubble ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'speech-bubble-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7949,6 +8179,7 @@ const Chat = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7957,7 +8188,7 @@ const Chat = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-chat ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'chat-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -7982,6 +8213,7 @@ const SpeechBubbles = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7990,7 +8222,7 @@ const SpeechBubbles = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-speech-bubbles ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'speech-bubbles-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8015,6 +8247,7 @@ const Comments = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8023,7 +8256,7 @@ const Comments = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-comments ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'comments-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8048,6 +8281,7 @@ const SpendDirham = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8056,7 +8290,7 @@ const SpendDirham = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-dirham ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-dirham-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8083,6 +8317,7 @@ const SpendDollar = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8091,7 +8326,7 @@ const SpendDollar = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-dollar ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-dollar-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8118,6 +8353,7 @@ const SpendEuro = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8126,7 +8362,7 @@ const SpendEuro = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-euro ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-euro-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8153,6 +8389,7 @@ const SpendForint = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8161,7 +8398,7 @@ const SpendForint = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-forint ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-forint-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8188,6 +8425,7 @@ const SpendFranc = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8196,7 +8434,7 @@ const SpendFranc = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-franc ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-franc-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8223,6 +8461,7 @@ const SpendHryvnia = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8231,7 +8470,7 @@ const SpendHryvnia = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-hryvnia ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-hryvnia-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8258,6 +8497,7 @@ const SpendKoruna = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8266,7 +8506,7 @@ const SpendKoruna = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-koruna ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-koruna-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8293,6 +8533,7 @@ const SpendKrone = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8301,7 +8542,7 @@ const SpendKrone = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-krone ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-krone-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8328,6 +8569,7 @@ const SpendKuna = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8336,7 +8578,7 @@ const SpendKuna = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-kuna ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-kuna-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8363,6 +8605,7 @@ const SpendLeuLei = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8371,7 +8614,7 @@ const SpendLeuLei = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-leu-lei ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-leu-lei-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8398,6 +8641,7 @@ const SpendLev = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8406,7 +8650,7 @@ const SpendLev = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-lev ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-lev-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8433,6 +8677,7 @@ const SpendLira = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8441,7 +8686,7 @@ const SpendLira = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-lira ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-lira-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8468,6 +8713,7 @@ const SpendPound = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8476,7 +8722,7 @@ const SpendPound = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-pound ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-pound-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8503,6 +8749,7 @@ const SpendReal = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8511,7 +8758,7 @@ const SpendReal = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-real ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-real-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8538,6 +8785,7 @@ const SpendRinggit = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8546,7 +8794,7 @@ const SpendRinggit = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-ringgit ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-ringgit-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8573,6 +8821,7 @@ const SpendRupee = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8581,7 +8830,7 @@ const SpendRupee = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-rupee ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-rupee-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8608,6 +8857,7 @@ const SpendRupiah = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8616,7 +8866,7 @@ const SpendRupiah = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-rupiah ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-rupiah-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8643,6 +8893,7 @@ const SpendYen = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8651,7 +8902,7 @@ const SpendYen = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-yen ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-yen-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8678,6 +8929,7 @@ const SpendZloty = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8686,7 +8938,7 @@ const SpendZloty = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-spend-zloty ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-zloty-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8713,6 +8965,7 @@ const SplitMoney = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8721,7 +8974,7 @@ const SplitMoney = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-split-money ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'split-money-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8748,6 +9001,7 @@ const StarFill = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8756,7 +9010,7 @@ const StarFill = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-star-fill ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'star-fill-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8781,6 +9035,7 @@ const Star = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8789,7 +9044,7 @@ const Star = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-star ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'star-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8814,6 +9069,7 @@ const Stationery = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8822,7 +9078,7 @@ const Stationery = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-stationery ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'stationery-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8847,6 +9103,7 @@ const OfficeExpenses = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8855,7 +9112,7 @@ const OfficeExpenses = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-office-expenses ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'office-expenses-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8880,6 +9137,7 @@ const Stop = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8888,7 +9146,7 @@ const Stop = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-stop ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'stop-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8915,6 +9173,7 @@ const Suitcase = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8923,7 +9182,7 @@ const Suitcase = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-suitcase ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'suitcase-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8950,6 +9209,7 @@ const Travel = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8958,7 +9218,7 @@ const Travel = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-travel ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'travel-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -8985,6 +9245,7 @@ const Sunglasses = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8993,7 +9254,7 @@ const Sunglasses = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-sunglasses ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'sunglasses-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9020,6 +9281,7 @@ const Switch = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9028,7 +9290,7 @@ const Switch = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-switch ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'switch-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9055,6 +9317,7 @@ const Takeaway = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9063,7 +9326,7 @@ const Takeaway = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-takeaway ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'takeaway-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9090,6 +9353,7 @@ const Target = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9098,7 +9362,7 @@ const Target = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-target ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'target-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9123,6 +9387,7 @@ const Marketing = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9131,7 +9396,7 @@ const Marketing = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-marketing ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'marketing-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9156,6 +9421,7 @@ const Taxi = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9164,7 +9430,7 @@ const Taxi = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-taxi ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'taxi-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9191,6 +9457,7 @@ const Team = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9199,7 +9466,7 @@ const Team = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-team ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'team-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9226,6 +9493,7 @@ const Theme = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9234,7 +9502,7 @@ const Theme = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-theme ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'theme-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9261,6 +9529,7 @@ const Transfer = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9269,7 +9538,7 @@ const Transfer = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-transfer ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'transfer-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9296,6 +9565,7 @@ const Transport = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9304,7 +9574,7 @@ const Transport = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-transport ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'transport-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9331,6 +9601,7 @@ const Trustly = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9339,7 +9610,7 @@ const Trustly = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-trustly ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'trustly-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9364,6 +9635,7 @@ const Twitter = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9372,7 +9644,7 @@ const Twitter = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-twitter ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'twitter-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9397,6 +9669,7 @@ const Upload = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9405,7 +9678,7 @@ const Upload = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-upload ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'upload-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9432,6 +9705,7 @@ const UpwardGraph = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9440,7 +9714,7 @@ const UpwardGraph = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-upward-graph ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'upward-graph-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9467,6 +9741,7 @@ const ExchangeRate = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9475,7 +9750,7 @@ const ExchangeRate = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-exchange-rate ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'exchange-rate-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9502,6 +9777,7 @@ const Venmo = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9510,7 +9786,7 @@ const Venmo = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-venmo ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'venmo-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9537,6 +9813,7 @@ const Wallet = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9545,7 +9822,7 @@ const Wallet = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-wallet ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'wallet-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9572,6 +9849,7 @@ const Warning = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9580,7 +9858,7 @@ const Warning = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-warning ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'warning-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9607,6 +9885,7 @@ const Whatsapp = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9615,7 +9894,7 @@ const Whatsapp = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-whatsapp ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'whatsapp-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9642,6 +9921,7 @@ const Withdrawal = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9650,7 +9930,7 @@ const Withdrawal = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-withdrawal ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'withdrawal-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),
@@ -9677,6 +9957,7 @@ const OwnersWithdrawal = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9685,7 +9966,7 @@ const OwnersWithdrawal = ({
   return /*#__PURE__*/jsxs("span", {
     className: `tw-icon tw-icon-owners-withdrawal ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
-    role: !title ? 'presentation' : undefined,
+    role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'owners-withdrawal-icon',
     children: [/*#__PURE__*/jsx("svg", {
       width: String(size),