@transferwise/icons 3.9.2 → 3.10.0

package/lib/index.js

@@ -7,6 +7,7 @@ const AlertCircleFill = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -15,7 +16,7 @@ const AlertCircleFill = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -42,6 +43,7 @@ const AlertCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -50,7 +52,7 @@ const AlertCircle = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -77,6 +79,7 @@ const Alert = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -85,7 +88,7 @@ const Alert = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -114,6 +117,7 @@ const ArrowDiagonalDown = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -122,7 +126,7 @@ const ArrowDiagonalDown = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -148,6 +152,7 @@ const ArrowDiagonalUp = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -156,7 +161,7 @@ const ArrowDiagonalUp = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -182,6 +187,7 @@ const ArrowDown = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -190,7 +196,7 @@ const ArrowDown = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -215,6 +221,7 @@ const ArrowLeft = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -223,7 +230,7 @@ const ArrowLeft = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -248,6 +255,7 @@ const ArrowRight = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -256,7 +264,7 @@ const ArrowRight = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -281,6 +289,7 @@ const ArrowUp = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -289,7 +298,7 @@ const ArrowUp = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -314,6 +323,7 @@ const AutoConvert = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -322,7 +332,7 @@ const AutoConvert = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -349,6 +359,7 @@ const BankStrikethrough = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -357,7 +368,7 @@ const BankStrikethrough = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -385,6 +396,7 @@ const BankTransfer = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -393,7 +405,7 @@ const BankTransfer = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -420,6 +432,7 @@ const Ach = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -428,7 +441,7 @@ const Ach = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -455,6 +468,7 @@ const Bank = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -463,7 +477,7 @@ const Bank = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -490,6 +504,7 @@ const BarChart = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -498,7 +513,7 @@ const BarChart = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -523,6 +538,7 @@ const Balance = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -531,7 +547,7 @@ const Balance = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -556,6 +572,7 @@ const Investments = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -564,7 +581,7 @@ const Investments = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -589,6 +606,7 @@ const Barcode = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -597,7 +615,7 @@ const Barcode = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -624,6 +642,7 @@ const Batch = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -632,7 +651,7 @@ const Batch = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -657,6 +676,7 @@ const Beach = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -665,7 +685,7 @@ const Beach = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -690,6 +710,7 @@ const Holidays = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -698,7 +719,7 @@ const Holidays = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -723,6 +744,7 @@ const BillSplit = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -731,7 +753,7 @@ const BillSplit = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -758,6 +780,7 @@ const Bills = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -766,7 +789,7 @@ const Bills = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -793,6 +816,7 @@ const Bin = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -801,7 +825,7 @@ const Bin = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -826,6 +850,7 @@ const Book = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -834,7 +859,7 @@ const Book = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -859,6 +884,7 @@ const Boxes = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -867,7 +893,7 @@ const Boxes = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -894,6 +920,7 @@ const CostOfGoodsSold = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -902,7 +929,7 @@ const CostOfGoodsSold = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -929,6 +956,7 @@ const Briefcase = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -937,7 +965,7 @@ const Briefcase = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -962,6 +990,7 @@ const Building = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -970,7 +999,7 @@ const Building = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -997,6 +1026,7 @@ const Rent = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1005,7 +1035,7 @@ const Rent = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1032,6 +1062,7 @@ const Bulb = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1040,7 +1071,7 @@ const Bulb = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1067,6 +1098,7 @@ const Insights = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1075,7 +1107,7 @@ const Insights = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1102,6 +1134,7 @@ const CalendarCheck = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1110,7 +1143,7 @@ const CalendarCheck = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1137,6 +1170,7 @@ const CalendarSuccess = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1145,7 +1179,7 @@ const CalendarSuccess = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1172,6 +1206,7 @@ const Calendar = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1180,7 +1215,7 @@ const Calendar = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1207,6 +1242,7 @@ const Camera = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1215,7 +1251,7 @@ const Camera = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1242,6 +1278,7 @@ const Car = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1250,7 +1287,7 @@ const Car = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1285,6 +1322,7 @@ const DriversLicense = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1293,7 +1331,7 @@ const DriversLicense = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1328,6 +1366,7 @@ const CardCvc = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1336,7 +1375,7 @@ const CardCvc = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1363,6 +1402,7 @@ const CardDetail = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1371,7 +1411,7 @@ const CardDetail = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1398,6 +1438,7 @@ const CardNumber = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1406,7 +1447,7 @@ const CardNumber = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1433,6 +1474,7 @@ const CardWise = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1441,7 +1483,7 @@ const CardWise = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1468,6 +1510,7 @@ const CardTransferwise = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1476,7 +1519,7 @@ const CardTransferwise = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1503,6 +1546,7 @@ const Card = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1511,7 +1555,7 @@ const Card = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1538,6 +1582,7 @@ const CashApp = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1546,7 +1591,7 @@ const CashApp = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1571,6 +1616,7 @@ const CashRegister = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1579,7 +1625,7 @@ const CashRegister = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1606,6 +1652,7 @@ const SalesAndRoyalties = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1614,7 +1661,7 @@ const SalesAndRoyalties = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1641,6 +1688,7 @@ const Charity = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1649,7 +1697,7 @@ const Charity = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1676,6 +1724,7 @@ const CheckCircleFill = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1684,7 +1733,7 @@ const CheckCircleFill = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1711,6 +1760,7 @@ const CheckCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1719,7 +1769,7 @@ const CheckCircle = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1746,6 +1796,7 @@ const Check = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1754,7 +1805,7 @@ const Check = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1779,6 +1830,7 @@ const Verified = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1787,7 +1839,7 @@ const Verified = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1812,6 +1864,7 @@ const ChevronDown = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1820,7 +1873,7 @@ const ChevronDown = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1845,6 +1898,7 @@ const ChevronLeft = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1853,7 +1907,7 @@ const ChevronLeft = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1878,6 +1932,7 @@ const ChevronRight = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1886,7 +1941,7 @@ const ChevronRight = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1911,6 +1966,7 @@ const ChevronUp = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1919,7 +1975,7 @@ const ChevronUp = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1944,6 +2000,7 @@ const Chip = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1952,7 +2009,7 @@ const Chip = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -1979,6 +2036,7 @@ const ChipPin = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -1987,7 +2045,7 @@ const ChipPin = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2014,6 +2072,7 @@ const ClickToPay = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2022,7 +2081,7 @@ const ClickToPay = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2047,6 +2106,7 @@ const ClockBorderless = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2055,7 +2115,7 @@ const ClockBorderless = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2082,6 +2142,7 @@ const ClockFill = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2090,7 +2151,7 @@ const ClockFill = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2117,6 +2178,7 @@ const Clock = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2125,7 +2187,7 @@ const Clock = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2152,6 +2214,7 @@ const PendingCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2160,7 +2223,7 @@ const PendingCircle = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2187,6 +2250,7 @@ const Cog = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2195,7 +2259,7 @@ const Cog = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2222,6 +2286,7 @@ const Settings = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2230,7 +2295,7 @@ const Settings = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2257,6 +2322,7 @@ const Coins = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2265,7 +2331,7 @@ const Coins = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2292,6 +2358,7 @@ const Collapse = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2300,7 +2367,7 @@ const Collapse = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2325,6 +2392,7 @@ const Confetti = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2333,7 +2401,7 @@ const Confetti = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2360,6 +2428,7 @@ const Contactless = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2368,7 +2437,7 @@ const Contactless = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2395,6 +2464,7 @@ const Convert = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2403,7 +2473,7 @@ const Convert = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2428,6 +2498,7 @@ const CrossCircleFill = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2436,7 +2507,7 @@ const CrossCircleFill = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2463,6 +2534,7 @@ const CrossCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2471,7 +2543,7 @@ const CrossCircle = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2498,6 +2570,7 @@ const Cross = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2506,7 +2579,7 @@ const Cross = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2531,6 +2604,7 @@ const CrystalBall = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2539,7 +2613,7 @@ const CrystalBall = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2566,6 +2640,7 @@ const Defrost = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2574,7 +2649,7 @@ const Defrost = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2601,6 +2676,7 @@ const Delivery = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2609,7 +2685,7 @@ const Delivery = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2634,6 +2710,7 @@ const Dial = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2642,7 +2719,7 @@ const Dial = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2669,6 +2746,7 @@ const PinCode = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2677,7 +2755,7 @@ const PinCode = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2704,6 +2782,7 @@ const DirectDebits = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2712,7 +2791,7 @@ const DirectDebits = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2739,6 +2818,7 @@ const DiscoBall = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2747,7 +2827,7 @@ const DiscoBall = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2778,6 +2858,7 @@ const Document = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2786,7 +2867,7 @@ const Document = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2811,6 +2892,7 @@ const Documents = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2819,7 +2901,7 @@ const Documents = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2846,6 +2928,7 @@ const Download = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2854,7 +2937,7 @@ const Download = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2881,6 +2964,7 @@ const EatingOut = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2889,7 +2973,7 @@ const EatingOut = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2916,6 +3000,7 @@ const Edit = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2924,7 +3009,7 @@ const Edit = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2951,6 +3036,7 @@ const EmailAndMobile = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2959,7 +3045,7 @@ const EmailAndMobile = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -2986,6 +3072,7 @@ const EmailAndPhone = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -2994,7 +3081,7 @@ const EmailAndPhone = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3021,6 +3108,7 @@ const Email = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3029,7 +3117,7 @@ const Email = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3054,6 +3142,7 @@ const Entertainment = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3062,7 +3151,7 @@ const Entertainment = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3089,6 +3178,7 @@ const Expand = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3097,7 +3187,7 @@ const Expand = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3124,6 +3214,7 @@ const EyeShut = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3132,7 +3223,7 @@ const EyeShut = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3157,6 +3248,7 @@ const Eye = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3165,7 +3257,7 @@ const Eye = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3192,6 +3284,7 @@ const FaceId = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3200,7 +3293,7 @@ const FaceId = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3227,6 +3320,7 @@ const Facebook = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3235,7 +3329,7 @@ const Facebook = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3260,6 +3354,7 @@ const FacebookSquare = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3268,7 +3363,7 @@ const FacebookSquare = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3293,6 +3388,7 @@ const FastFlag = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3301,7 +3397,7 @@ const FastFlag = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3326,6 +3422,7 @@ const Fingerprint = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3334,7 +3431,7 @@ const Fingerprint = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3361,6 +3458,7 @@ const Fpx = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3369,7 +3467,7 @@ const Fpx = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3396,6 +3494,7 @@ const Freeze = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3404,7 +3503,7 @@ const Freeze = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3429,6 +3528,7 @@ const Gambling = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3437,7 +3537,7 @@ const Gambling = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3464,6 +3564,7 @@ const GeneralFill = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3472,7 +3573,7 @@ const GeneralFill = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3499,6 +3600,7 @@ const GeneralFilled = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3507,7 +3609,7 @@ const GeneralFilled = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3534,6 +3636,7 @@ const General = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3542,7 +3645,7 @@ const General = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3569,6 +3672,7 @@ const GiftBox = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3577,7 +3681,7 @@ const GiftBox = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3604,6 +3708,7 @@ const Invite = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3612,7 +3717,7 @@ const Invite = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3639,6 +3744,7 @@ const Globe = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3647,7 +3753,7 @@ const Globe = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3672,6 +3778,7 @@ const GraduationCap = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3680,7 +3787,7 @@ const GraduationCap = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3707,6 +3814,7 @@ const Graph = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3715,7 +3823,7 @@ const Graph = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3742,6 +3850,7 @@ const Groceries = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3750,7 +3859,7 @@ const Groceries = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3775,6 +3884,7 @@ const Handshake = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3783,7 +3893,7 @@ const Handshake = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3808,6 +3918,7 @@ const ContractServices = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3816,7 +3927,7 @@ const ContractServices = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3841,6 +3952,7 @@ const HappyEmoji = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3849,7 +3961,7 @@ const HappyEmoji = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3876,6 +3988,7 @@ const Do = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3884,7 +3997,7 @@ const Do = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3911,6 +4024,7 @@ const Emoji = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3919,7 +4033,7 @@ const Emoji = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3946,6 +4060,7 @@ const Headset = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3954,7 +4069,7 @@ const Headset = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -3979,6 +4094,7 @@ const Cs = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -3987,7 +4103,7 @@ const Cs = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4012,6 +4128,7 @@ const Heart = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4020,7 +4137,7 @@ const Heart = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4045,6 +4162,7 @@ const Family = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4053,7 +4171,7 @@ const Family = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4078,6 +4196,7 @@ const House = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4086,7 +4205,7 @@ const House = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4111,6 +4230,7 @@ const Home = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4119,7 +4239,7 @@ const Home = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4144,6 +4264,7 @@ const Id = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4152,7 +4273,7 @@ const Id = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4179,6 +4300,7 @@ const Ideal = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4187,7 +4309,7 @@ const Ideal = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4212,6 +4334,7 @@ const Image = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4220,7 +4343,7 @@ const Image = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4247,6 +4370,7 @@ const Picture = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4255,7 +4379,7 @@ const Picture = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4282,6 +4406,7 @@ const InfoCircleFill = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4290,7 +4415,7 @@ const InfoCircleFill = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4317,6 +4442,7 @@ const InfoCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4325,7 +4451,7 @@ const InfoCircle = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4352,6 +4478,7 @@ const Info = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4360,7 +4487,7 @@ const Info = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4389,6 +4516,7 @@ const InsertCard = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4397,7 +4525,7 @@ const InsertCard = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4424,6 +4552,7 @@ const Atm = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4432,7 +4561,7 @@ const Atm = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4459,6 +4588,7 @@ const Instagram = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4467,7 +4597,7 @@ const Instagram = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4494,6 +4624,7 @@ const Insurance = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4502,7 +4633,7 @@ const Insurance = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4529,6 +4660,7 @@ const Interac = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4537,7 +4669,7 @@ const Interac = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4564,6 +4696,7 @@ const Jar = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4572,7 +4705,7 @@ const Jar = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4599,6 +4732,7 @@ const Keep = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4607,7 +4741,7 @@ const Keep = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4632,6 +4766,7 @@ const Klarna = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4640,7 +4775,7 @@ const Klarna = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4667,6 +4802,7 @@ const Laptop = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4675,7 +4811,7 @@ const Laptop = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4702,6 +4838,7 @@ const Leaf = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4710,7 +4847,7 @@ const Leaf = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4735,6 +4872,7 @@ const LightningBolt = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4743,7 +4881,7 @@ const LightningBolt = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4768,6 +4906,7 @@ const Lightning = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4776,7 +4915,7 @@ const Lightning = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4801,6 +4940,7 @@ const Limit = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4809,7 +4949,7 @@ const Limit = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4834,6 +4974,7 @@ const Link = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4842,7 +4983,7 @@ const Link = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4869,6 +5010,7 @@ const Linkedin = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4877,7 +5019,7 @@ const Linkedin = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4902,6 +5044,7 @@ const List = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4910,7 +5053,7 @@ const List = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4937,6 +5080,7 @@ const Activity = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4945,7 +5089,7 @@ const Activity = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -4972,6 +5116,7 @@ const LocationMarker = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -4980,7 +5125,7 @@ const LocationMarker = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5007,6 +5152,7 @@ const LogIn = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5015,7 +5161,7 @@ const LogIn = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5042,6 +5188,7 @@ const LogOut = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5050,7 +5197,7 @@ const LogOut = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5077,6 +5224,7 @@ const MassPayout = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5085,7 +5233,7 @@ const MassPayout = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5112,6 +5260,7 @@ const Menu = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5120,7 +5269,7 @@ const Menu = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5147,6 +5296,7 @@ const Messenger = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5155,7 +5305,7 @@ const Messenger = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5180,6 +5330,7 @@ const MinusCircleFill = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5188,7 +5339,7 @@ const MinusCircleFill = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5215,6 +5366,7 @@ const MinusCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5223,7 +5375,7 @@ const MinusCircle = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5250,6 +5402,7 @@ const Minus = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5258,7 +5411,7 @@ const Minus = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5283,6 +5436,7 @@ const MobileLock = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5291,7 +5445,7 @@ const MobileLock = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5318,6 +5472,7 @@ const TwoStep = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5326,7 +5481,7 @@ const TwoStep = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5353,6 +5508,7 @@ const Mobile = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5361,7 +5517,7 @@ const Mobile = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5388,6 +5544,7 @@ const MoneyBag = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5396,7 +5553,7 @@ const MoneyBag = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5423,6 +5580,7 @@ const Money = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5431,7 +5589,7 @@ const Money = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5458,6 +5616,7 @@ const More = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5466,7 +5625,7 @@ const More = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5493,6 +5652,7 @@ const MultiCurrency = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5501,7 +5661,7 @@ const MultiCurrency = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5528,6 +5688,7 @@ const NavigateAway = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5536,7 +5697,7 @@ const NavigateAway = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5563,6 +5724,7 @@ const Nearby = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5571,7 +5733,7 @@ const Nearby = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5598,6 +5760,7 @@ const New = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5606,7 +5769,7 @@ const New = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5631,6 +5794,7 @@ const NotificationActive = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5639,7 +5803,7 @@ const NotificationActive = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5666,6 +5830,7 @@ const Notification = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5674,7 +5839,7 @@ const Notification = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5699,6 +5864,7 @@ const PadlockUnlocked = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5707,7 +5873,7 @@ const PadlockUnlocked = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5734,6 +5900,7 @@ const Unlock = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5742,7 +5909,7 @@ const Unlock = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5769,6 +5936,7 @@ const Padlock = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5777,7 +5945,7 @@ const Padlock = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5804,6 +5972,7 @@ const Lock = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5812,7 +5981,7 @@ const Lock = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5839,6 +6008,7 @@ const Paperclip = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5847,7 +6017,7 @@ const Paperclip = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5874,6 +6044,7 @@ const Passport = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5882,7 +6053,7 @@ const Passport = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5909,6 +6080,7 @@ const Pause = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5917,7 +6089,7 @@ const Pause = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5944,6 +6116,7 @@ const PayIn = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5952,7 +6125,7 @@ const PayIn = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -5977,6 +6150,7 @@ const Salary = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -5985,7 +6159,7 @@ const Salary = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6010,6 +6184,7 @@ const Payments = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6018,7 +6193,7 @@ const Payments = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6045,6 +6220,7 @@ const Paypal = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6053,7 +6229,7 @@ const Paypal = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6082,6 +6258,7 @@ const People = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6090,7 +6267,7 @@ const People = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6115,6 +6292,7 @@ const Recipients = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6123,7 +6301,7 @@ const Recipients = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6148,6 +6326,7 @@ const PercentageCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6156,7 +6335,7 @@ const PercentageCircle = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6183,6 +6362,7 @@ const Tax = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6191,7 +6371,7 @@ const Tax = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6218,6 +6398,7 @@ const Person = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6226,7 +6407,7 @@ const Person = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6251,6 +6432,7 @@ const Profile = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6259,7 +6441,7 @@ const Profile = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6284,6 +6466,7 @@ const PersonalCare = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6292,7 +6475,7 @@ const PersonalCare = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6323,6 +6506,7 @@ const Pets = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6331,7 +6515,7 @@ const Pets = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6358,6 +6542,7 @@ const Phone = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6366,7 +6551,7 @@ const Phone = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6391,6 +6576,7 @@ const PieChart = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6399,7 +6585,7 @@ const PieChart = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6424,6 +6610,7 @@ const Expenses = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6432,7 +6619,7 @@ const Expenses = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6457,6 +6644,7 @@ const PiggyBank = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6465,7 +6653,7 @@ const PiggyBank = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6492,6 +6680,7 @@ const Savings = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6500,7 +6689,7 @@ const Savings = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6527,6 +6716,7 @@ const Pix = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6535,7 +6725,7 @@ const Pix = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6562,6 +6752,7 @@ const Plane = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6570,7 +6761,7 @@ const Plane = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6597,6 +6788,7 @@ const Play = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6605,7 +6797,7 @@ const Play = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6632,6 +6824,7 @@ const PlusCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6640,7 +6833,7 @@ const PlusCircle = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6667,6 +6860,7 @@ const Plus = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6675,7 +6869,7 @@ const Plus = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6700,6 +6894,7 @@ const QrCode = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6708,7 +6903,7 @@ const QrCode = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6735,6 +6930,7 @@ const QuestionMarkCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6743,7 +6939,7 @@ const QuestionMarkCircle = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6770,6 +6966,7 @@ const HelpCircle = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6778,7 +6975,7 @@ const HelpCircle = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6805,6 +7002,7 @@ const QuestionMark = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6813,7 +7011,7 @@ const QuestionMark = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6840,6 +7038,7 @@ const Help = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6848,7 +7047,7 @@ const Help = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6875,6 +7074,7 @@ const Rain = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6883,7 +7083,7 @@ const Rain = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6910,6 +7110,7 @@ const Rainbow = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6918,7 +7119,7 @@ const Rainbow = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6945,6 +7146,7 @@ const Receipt = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6953,7 +7155,7 @@ const Receipt = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -6980,6 +7182,7 @@ const Receive = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -6988,7 +7191,7 @@ const Receive = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7013,6 +7216,7 @@ const RefundReceive = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7021,7 +7225,7 @@ const RefundReceive = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7048,6 +7252,7 @@ const RefundSent = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7056,7 +7261,7 @@ const RefundSent = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7083,6 +7288,7 @@ const Reload = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7091,7 +7297,7 @@ const Reload = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7116,6 +7322,7 @@ const Refresh = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7124,7 +7331,7 @@ const Refresh = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7149,6 +7356,7 @@ const RequestReceive = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7157,7 +7365,7 @@ const RequestReceive = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7184,6 +7392,7 @@ const RequestSend = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7192,7 +7401,7 @@ const RequestSend = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7219,6 +7428,7 @@ const Rewards = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7227,7 +7437,7 @@ const Rewards = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7260,6 +7470,7 @@ const SadEmoji = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7268,7 +7479,7 @@ const SadEmoji = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7295,6 +7506,7 @@ const Dont = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7303,7 +7515,7 @@ const Dont = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7330,6 +7542,7 @@ const ScanQrCode = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7338,7 +7551,7 @@ const ScanQrCode = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7365,6 +7578,7 @@ const Search = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7373,7 +7587,7 @@ const Search = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7398,6 +7612,7 @@ const Send = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7406,7 +7621,7 @@ const Send = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7431,6 +7646,7 @@ const ShareAndroid = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7439,7 +7655,7 @@ const ShareAndroid = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7464,6 +7680,7 @@ const ShareIos = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7472,7 +7689,7 @@ const ShareIos = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7499,6 +7716,7 @@ const Shield = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7507,7 +7725,7 @@ const Shield = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7532,6 +7750,7 @@ const ShoppingBag = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7540,7 +7759,7 @@ const ShoppingBag = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7567,6 +7786,7 @@ const ECommerce = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7575,7 +7795,7 @@ const ECommerce = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7602,6 +7822,7 @@ const Slider = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7610,7 +7831,7 @@ const Slider = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7637,6 +7858,7 @@ const Sofort = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7645,7 +7867,7 @@ const Sofort = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7672,6 +7894,7 @@ const SoftwareAndHosting = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7680,7 +7903,7 @@ const SoftwareAndHosting = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7707,6 +7930,7 @@ const SoftwareAndWebHosting = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7715,7 +7939,7 @@ const SoftwareAndWebHosting = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7742,6 +7966,7 @@ const SpeechBubbleExclamation = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7750,7 +7975,7 @@ const SpeechBubbleExclamation = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7778,6 +8003,7 @@ const SpeechBubbleMessage = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7786,7 +8012,7 @@ const SpeechBubbleMessage = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7813,6 +8039,7 @@ const Feedback = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7821,7 +8048,7 @@ const Feedback = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7848,6 +8075,7 @@ const SpeechBubblePending = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7856,7 +8084,7 @@ const SpeechBubblePending = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7883,6 +8111,7 @@ const Pending = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7891,7 +8120,7 @@ const Pending = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7918,6 +8147,7 @@ const SpeechBubble = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7926,7 +8156,7 @@ const SpeechBubble = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7951,6 +8181,7 @@ const Chat = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7959,7 +8190,7 @@ const Chat = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -7984,6 +8215,7 @@ const SpeechBubbles = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -7992,7 +8224,7 @@ const SpeechBubbles = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8017,6 +8249,7 @@ const Comments = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8025,7 +8258,7 @@ const Comments = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8050,6 +8283,7 @@ const SpendDirham = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8058,7 +8292,7 @@ const SpendDirham = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8085,6 +8319,7 @@ const SpendDollar = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8093,7 +8328,7 @@ const SpendDollar = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8120,6 +8355,7 @@ const SpendEuro = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8128,7 +8364,7 @@ const SpendEuro = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8155,6 +8391,7 @@ const SpendForint = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8163,7 +8400,7 @@ const SpendForint = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8190,6 +8427,7 @@ const SpendFranc = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8198,7 +8436,7 @@ const SpendFranc = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8225,6 +8463,7 @@ const SpendHryvnia = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8233,7 +8472,7 @@ const SpendHryvnia = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8260,6 +8499,7 @@ const SpendKoruna = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8268,7 +8508,7 @@ const SpendKoruna = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8295,6 +8535,7 @@ const SpendKrone = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8303,7 +8544,7 @@ const SpendKrone = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8330,6 +8571,7 @@ const SpendKuna = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8338,7 +8580,7 @@ const SpendKuna = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8365,6 +8607,7 @@ const SpendLeuLei = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8373,7 +8616,7 @@ const SpendLeuLei = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8400,6 +8643,7 @@ const SpendLev = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8408,7 +8652,7 @@ const SpendLev = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8435,6 +8679,7 @@ const SpendLira = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8443,7 +8688,7 @@ const SpendLira = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8470,6 +8715,7 @@ const SpendPound = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8478,7 +8724,7 @@ const SpendPound = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8505,6 +8751,7 @@ const SpendReal = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8513,7 +8760,7 @@ const SpendReal = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8540,6 +8787,7 @@ const SpendRinggit = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8548,7 +8796,7 @@ const SpendRinggit = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8575,6 +8823,7 @@ const SpendRupee = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8583,7 +8832,7 @@ const SpendRupee = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8610,6 +8859,7 @@ const SpendRupiah = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8618,7 +8868,7 @@ const SpendRupiah = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8645,6 +8895,7 @@ const SpendYen = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8653,7 +8904,7 @@ const SpendYen = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8680,6 +8931,7 @@ const SpendZloty = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8688,7 +8940,7 @@ const SpendZloty = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8715,6 +8967,7 @@ const SplitMoney = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8723,7 +8976,7 @@ const SplitMoney = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8750,6 +9003,7 @@ const StarFill = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8758,7 +9012,7 @@ const StarFill = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8783,6 +9037,7 @@ const Star = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8791,7 +9046,7 @@ const Star = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8816,6 +9071,7 @@ const Stationery = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8824,7 +9080,7 @@ const Stationery = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8849,6 +9105,7 @@ const OfficeExpenses = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8857,7 +9114,7 @@ const OfficeExpenses = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8882,6 +9139,7 @@ const Stop = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8890,7 +9148,7 @@ const Stop = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8917,6 +9175,7 @@ const Suitcase = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8925,7 +9184,7 @@ const Suitcase = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8952,6 +9211,7 @@ const Travel = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8960,7 +9220,7 @@ const Travel = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -8987,6 +9247,7 @@ const Sunglasses = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -8995,7 +9256,7 @@ const Sunglasses = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9022,6 +9283,7 @@ const Switch = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9030,7 +9292,7 @@ const Switch = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9057,6 +9319,7 @@ const Takeaway = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9065,7 +9328,7 @@ const Takeaway = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9092,6 +9355,7 @@ const Target = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9100,7 +9364,7 @@ const Target = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9125,6 +9389,7 @@ const Marketing = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9133,7 +9398,7 @@ const Marketing = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9158,6 +9423,7 @@ const Taxi = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9166,7 +9432,7 @@ const Taxi = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9193,6 +9459,7 @@ const Team = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9201,7 +9468,7 @@ const Team = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9228,6 +9495,7 @@ const Theme = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9236,7 +9504,7 @@ const Theme = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9263,6 +9531,7 @@ const Transfer = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9271,7 +9540,7 @@ const Transfer = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9298,6 +9567,7 @@ const Transport = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9306,7 +9576,7 @@ const Transport = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9333,6 +9603,7 @@ const Trustly = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9341,7 +9612,7 @@ const Trustly = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9366,6 +9637,7 @@ const Twitter = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9374,7 +9646,7 @@ const Twitter = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9399,6 +9671,7 @@ const Upload = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9407,7 +9680,7 @@ const Upload = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9434,6 +9707,7 @@ const UpwardGraph = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9442,7 +9716,7 @@ const UpwardGraph = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9469,6 +9743,7 @@ const ExchangeRate = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9477,7 +9752,7 @@ const ExchangeRate = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9504,6 +9779,7 @@ const Venmo = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9512,7 +9788,7 @@ const Venmo = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9539,6 +9815,7 @@ const Wallet = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9547,7 +9824,7 @@ const Wallet = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9574,6 +9851,7 @@ const Warning = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9582,7 +9860,7 @@ const Warning = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9609,6 +9887,7 @@ const Whatsapp = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9617,7 +9896,7 @@ const Whatsapp = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9644,6 +9923,7 @@ const Withdrawal = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9652,7 +9932,7 @@ const Withdrawal = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),
@@ -9679,6 +9959,7 @@ const OwnersWithdrawal = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -9687,7 +9968,7 @@ const OwnersWithdrawal = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
       width: String(size),