@transferwise/icons 3.12.0 → 3.13.1

package/build/angular/components/bank-strikethrough-icon.component.ts

@@ -3,13 +3,13 @@ export const BankStrikethroughIconComponent = {
   template: `
   <span ng-switch="$ctrl.size" class="tw-icon tw-icon-bank-strikethrough">
     <svg ng-switch-when="32" width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
-      <path fill-rule="evenodd" d="m1.965 20.608 2.32-2.32V9.857H3.019a.857.857 0 0 1-.462-1.59l8.983-5.434a1.286 1.286 0 0 1 1.354.014l4.183 2.65 3.532-3.532 1.072 1.072L3.037 21.68l-1.072-1.072Zm3.747.82H21.43v-1.714h-1.715V9.857h1.27a.857.857 0 0 0 .475-1.581L19.871 7.27l-2.587 2.587H18v9.857h-5.143v-5.43l-1.714 1.714v3.716H7.427l-1.715 1.714ZM6 16.573l5.143-5.142V9.857H6v6.716Zm8.43-8.43 1.403-1.403L12.2 4.437 6.073 8.143h8.358Z" clip-rule="evenodd"/>
+      <path fill-rule="evenodd" d="M22.212 20.963 21 19.751v-.037h-.037l-1.249-1.249V9.857H21a.856.856 0 0 0 .459-1.581l-8.566-5.43a1.286 1.286 0 0 0-1.354-.014L6.892 5.643 2.926 1.677 1.855 2.75l19.286 19.285 1.071-1.071Zm-4.102.465-1.714-1.714h-3.539v-3.539l-1.714-1.714v5.253H6V9.857h.539L4.047 7.365l-1.49.901A.857.857 0 0 0 3 9.856h1.286v9.858H3v1.714h15.11ZM18 9.857v6.894l-5.143-5.143V9.857H18Zm-6.857 0v.037l-.037-.037h.037Zm6.904-1.714H9.392L8.14 6.892l4.058-2.456 5.848 3.707Z" clip-rule="evenodd"/>
     </svg>
     <svg ng-switch-when="24" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-      <path fill-rule="evenodd" d="m1.965 20.608 2.32-2.32V9.857H3.019a.857.857 0 0 1-.462-1.59l8.983-5.434a1.286 1.286 0 0 1 1.354.014l4.183 2.65 3.532-3.532 1.072 1.072L3.037 21.68l-1.072-1.072Zm3.747.82H21.43v-1.714h-1.715V9.857h1.27a.857.857 0 0 0 .475-1.581L19.871 7.27l-2.587 2.587H18v9.857h-5.143v-5.43l-1.714 1.714v3.716H7.427l-1.715 1.714ZM6 16.573l5.143-5.142V9.857H6v6.716Zm8.43-8.43 1.403-1.403L12.2 4.437 6.073 8.143h8.358Z" clip-rule="evenodd"/>
+      <path fill-rule="evenodd" d="M22.212 20.963 21 19.751v-.037h-.037l-1.249-1.249V9.857H21a.856.856 0 0 0 .459-1.581l-8.566-5.43a1.286 1.286 0 0 0-1.354-.014L6.892 5.643 2.926 1.677 1.855 2.75l19.286 19.285 1.071-1.071Zm-4.102.465-1.714-1.714h-3.539v-3.539l-1.714-1.714v5.253H6V9.857h.539L4.047 7.365l-1.49.901A.857.857 0 0 0 3 9.856h1.286v9.858H3v1.714h15.11ZM18 9.857v6.894l-5.143-5.143V9.857H18Zm-6.857 0v.037l-.037-.037h.037Zm6.904-1.714H9.392L8.14 6.892l4.058-2.456 5.848 3.707Z" clip-rule="evenodd"/>
     </svg>
     <svg ng-switch-default width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-      <path fill-rule="evenodd" d="m1.965 20.608 2.32-2.32V9.857H3.019a.857.857 0 0 1-.462-1.59l8.983-5.434a1.286 1.286 0 0 1 1.354.014l4.183 2.65 3.532-3.532 1.072 1.072L3.037 21.68l-1.072-1.072Zm3.747.82H21.43v-1.714h-1.715V9.857h1.27a.857.857 0 0 0 .475-1.581L19.871 7.27l-2.587 2.587H18v9.857h-5.143v-5.43l-1.714 1.714v3.716H7.427l-1.715 1.714ZM6 16.573l5.143-5.142V9.857H6v6.716Zm8.43-8.43 1.403-1.403L12.2 4.437 6.073 8.143h8.358Z" clip-rule="evenodd"/>
+      <path fill-rule="evenodd" d="M22.212 20.963 21 19.751v-.037h-.037l-1.249-1.249V9.857H21a.856.856 0 0 0 .459-1.581l-8.566-5.43a1.286 1.286 0 0 0-1.354-.014L6.892 5.643 2.926 1.677 1.855 2.75l19.286 19.285 1.071-1.071Zm-4.102.465-1.714-1.714h-3.539v-3.539l-1.714-1.714v5.253H6V9.857h.539L4.047 7.365l-1.49.901A.857.857 0 0 0 3 9.856h1.286v9.858H3v1.714h15.11ZM18 9.857v6.894l-5.143-5.143V9.857H18Zm-6.857 0v.037l-.037-.037h.037Zm6.904-1.714H9.392L8.14 6.892l4.058-2.456 5.848 3.707Z" clip-rule="evenodd"/>
     </svg>
   </span>
   `,

package/build/angular/components/card-strikethrough-icon.component.ts

@@ -0,0 +1,19 @@
+// This is an automatically generated file, please don't edit it
+export const CardStrikethroughIconComponent = {
+  template: `
+  <span ng-switch="$ctrl.size" class="tw-icon tw-icon-card-strikethrough">
+    <svg ng-switch-when="32" width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="m22.212 20.749-1.034-1.035h.246a.861.861 0 0 0 .862-.861V16.247h-.002c-.02-.218-.21-.39-.413-.486a1.294 1.294 0 0 1-.416-.322 1.785 1.785 0 0 1-.33-.568 2.143 2.143 0 0 1-.125-.728c0-.255.044-.503.126-.728.082-.225.197-.416.329-.567.131-.151.275-.257.416-.323.215-.102.415-.288.415-.525V5.576a.861.861 0 0 0-.862-.862H6.178l-3-3-1.072 1.072L21.141 21.82l1.071-1.072Zm-5.602-1.035L14.896 18H3.429V6.533L1.917 5.02a.858.858 0 0 0-.203.555v13.277c0 .476.386.861.862.861H16.61ZM6.325 9.43h-.753v1.714h2.467L6.325 9.429ZM20.572 18h-1.108L7.892 6.43h12.68v4.9a3.135 3.135 0 0 0-.407.39c-.279.318-.5.696-.65 1.112a3.86 3.86 0 0 0-.23 1.312c0 .45.078.896.23 1.312.15.416.371.794.65 1.112.125.144.261.274.407.39V18Z" clip-rule="evenodd"/>
+    </svg>
+    <svg ng-switch-when="24" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="m22.212 20.749-1.034-1.035h.246a.861.861 0 0 0 .862-.861V16.247h-.002c-.02-.218-.21-.39-.413-.486a1.294 1.294 0 0 1-.416-.322 1.785 1.785 0 0 1-.33-.568 2.143 2.143 0 0 1-.125-.728c0-.255.044-.503.126-.728.082-.225.197-.416.329-.567.131-.151.275-.257.416-.323.215-.102.415-.288.415-.525V5.576a.861.861 0 0 0-.862-.862H6.178l-3-3-1.072 1.072L21.141 21.82l1.071-1.072Zm-5.602-1.035L14.896 18H3.429V6.533L1.917 5.02a.858.858 0 0 0-.203.555v13.277c0 .476.386.861.862.861H16.61ZM6.325 9.43h-.753v1.714h2.467L6.325 9.429ZM20.572 18h-1.108L7.892 6.43h12.68v4.9a3.135 3.135 0 0 0-.407.39c-.279.318-.5.696-.65 1.112a3.86 3.86 0 0 0-.23 1.312c0 .45.078.896.23 1.312.15.416.371.794.65 1.112.125.144.261.274.407.39V18Z" clip-rule="evenodd"/>
+    </svg>
+    <svg ng-switch-default width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="m22.212 20.749-1.034-1.035h.246a.861.861 0 0 0 .862-.861V16.247h-.002c-.02-.218-.21-.39-.413-.486a1.294 1.294 0 0 1-.416-.322 1.785 1.785 0 0 1-.33-.568 2.143 2.143 0 0 1-.125-.728c0-.255.044-.503.126-.728.082-.225.197-.416.329-.567.131-.151.275-.257.416-.323.215-.102.415-.288.415-.525V5.576a.861.861 0 0 0-.862-.862H6.178l-3-3-1.072 1.072L21.141 21.82l1.071-1.072Zm-5.602-1.035L14.896 18H3.429V6.533L1.917 5.02a.858.858 0 0 0-.203.555v13.277c0 .476.386.861.862.861H16.61ZM6.325 9.43h-.753v1.714h2.467L6.325 9.429ZM20.572 18h-1.108L7.892 6.43h12.68v4.9a3.135 3.135 0 0 0-.407.39c-.279.318-.5.696-.65 1.112a3.86 3.86 0 0 0-.23 1.312c0 .45.078.896.23 1.312.15.416.371.794.65 1.112.125.144.261.274.407.39V18Z" clip-rule="evenodd"/>
+    </svg>
+  </span>
+  `,
+  bindings: {
+    size: '<',
+  },
+};

package/build/angular/components/equals-icon.component.ts

@@ -0,0 +1,19 @@
+// This is an automatically generated file, please don't edit it
+export const EqualsIconComponent = {
+  template: `
+  <span ng-switch="$ctrl.size" class="tw-icon tw-icon-equals">
+    <svg ng-switch-when="32" width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="M22.286 8.143H1.714v1.714h20.572V8.143Zm0 6H1.714v1.714h20.572v-1.714Z" clip-rule="evenodd"/>
+    </svg>
+    <svg ng-switch-when="24" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="M22.286 8.143H1.714v1.714h20.572V8.143Zm0 6H1.714v1.714h20.572v-1.714Z" clip-rule="evenodd"/>
+    </svg>
+    <svg ng-switch-default width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="M22.286 8.143H1.714v1.714h20.572V8.143Zm0 6H1.714v1.714h20.572v-1.714Z" clip-rule="evenodd"/>
+    </svg>
+  </span>
+  `,
+  bindings: {
+    size: '<',
+  },
+};

package/build/angular/components/icon.component.ts

@@ -47,6 +47,7 @@ export const IconComponent = {
 <tw-card-cvc-icon ng-switch-when="card-cvc" size="$ctrl.size"></tw-card-cvc-icon>
 <tw-card-detail-icon ng-switch-when="card-detail" size="$ctrl.size"></tw-card-detail-icon>
 <tw-card-number-icon ng-switch-when="card-number" size="$ctrl.size"></tw-card-number-icon>
+<tw-card-strikethrough-icon ng-switch-when="card-strikethrough" size="$ctrl.size"></tw-card-strikethrough-icon>
 <tw-card-wise-icon ng-switch-when="card-wise" size="$ctrl.size"></tw-card-wise-icon>
 <tw-card-transferwise-icon ng-switch-when="card-transferwise" size="$ctrl.size"></tw-card-transferwise-icon>
 <tw-card-icon ng-switch-when="card" size="$ctrl.size"></tw-card-icon>
@@ -96,6 +97,7 @@ export const IconComponent = {
 <tw-email-and-phone-icon ng-switch-when="email-and-phone" size="$ctrl.size"></tw-email-and-phone-icon>
 <tw-email-icon ng-switch-when="email" size="$ctrl.size"></tw-email-icon>
 <tw-entertainment-icon ng-switch-when="entertainment" size="$ctrl.size"></tw-entertainment-icon>
+<tw-equals-icon ng-switch-when="equals" size="$ctrl.size"></tw-equals-icon>
 <tw-expand-icon ng-switch-when="expand" size="$ctrl.size"></tw-expand-icon>
 <tw-eye-shut-icon ng-switch-when="eye-shut" size="$ctrl.size"></tw-eye-shut-icon>
 <tw-eye-icon ng-switch-when="eye" size="$ctrl.size"></tw-eye-icon>
@@ -145,6 +147,7 @@ export const IconComponent = {
 <tw-klarna-icon ng-switch-when="klarna" size="$ctrl.size"></tw-klarna-icon>
 <tw-laptop-icon ng-switch-when="laptop" size="$ctrl.size"></tw-laptop-icon>
 <tw-leaf-icon ng-switch-when="leaf" size="$ctrl.size"></tw-leaf-icon>
+<tw-lightning-bolt-strikethrough-icon ng-switch-when="lightning-bolt-strikethrough" size="$ctrl.size"></tw-lightning-bolt-strikethrough-icon>
 <tw-lightning-bolt-icon ng-switch-when="lightning-bolt" size="$ctrl.size"></tw-lightning-bolt-icon>
 <tw-lightning-icon ng-switch-when="lightning" size="$ctrl.size"></tw-lightning-icon>
 <tw-limit-icon ng-switch-when="limit" size="$ctrl.size"></tw-limit-icon>

package/build/angular/components/lightning-bolt-strikethrough-icon.component.ts

@@ -0,0 +1,19 @@
+// This is an automatically generated file, please don't edit it
+export const LightningBoltStrikethroughIconComponent = {
+  template: `
+  <span ng-switch="$ctrl.size" class="tw-icon tw-icon-lightning-bolt-strikethrough">
+    <svg ng-switch-when="32" width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="m22.212 20.749-5.986-5.986 4.13-4.82a.862.862 0 0 0-.642-1.414H14.4l3.471-5.528a.875.875 0 0 0 .043-.857c-.171-.258-.429-.429-.729-.429h-6.042c-.3 0-.558.171-.729.429L7.821 6.358 3.177 1.714 2.106 2.786 21.141 21.82l1.07-1.071ZM6.08 9.185l-2.524 4.101a.778.778 0 0 0 0 .857c.171.258.429.43.728.43h5.786l-1.5 6.642a.813.813 0 0 0 .472.943c.128.043.257.085.385.085a.771.771 0 0 0 .643-.3l4.047-4.72L12.897 16l-1.883 2.214.754-3.343-2.057-2.057H5.828l1.477-2.406L6.08 9.185ZM17.828 10.2l-2.833 3.332-5.953-5.954 2.572-4.193H15.6l-3.472 5.529a.875.875 0 0 0-.043.857c.172.257.43.429.73.429h5.013Z" clip-rule="evenodd"/>
+    </svg>
+    <svg ng-switch-when="24" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="m22.212 20.749-5.986-5.986 4.13-4.82a.862.862 0 0 0-.642-1.414H14.4l3.471-5.528a.875.875 0 0 0 .043-.857c-.171-.258-.429-.429-.729-.429h-6.042c-.3 0-.558.171-.729.429L7.821 6.358 3.177 1.714 2.106 2.786 21.141 21.82l1.07-1.071ZM6.08 9.185l-2.524 4.101a.778.778 0 0 0 0 .857c.171.258.429.43.728.43h5.786l-1.5 6.642a.813.813 0 0 0 .472.943c.128.043.257.085.385.085a.771.771 0 0 0 .643-.3l4.047-4.72L12.897 16l-1.883 2.214.754-3.343-2.057-2.057H5.828l1.477-2.406L6.08 9.185ZM17.828 10.2l-2.833 3.332-5.953-5.954 2.572-4.193H15.6l-3.472 5.529a.875.875 0 0 0-.043.857c.172.257.43.429.73.429h5.013Z" clip-rule="evenodd"/>
+    </svg>
+    <svg ng-switch-default width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="m22.212 20.749-5.986-5.986 4.13-4.82a.862.862 0 0 0-.642-1.414H14.4l3.471-5.528a.875.875 0 0 0 .043-.857c-.171-.258-.429-.429-.729-.429h-6.042c-.3 0-.558.171-.729.429L7.821 6.358 3.177 1.714 2.106 2.786 21.141 21.82l1.07-1.071ZM6.08 9.185l-2.524 4.101a.778.778 0 0 0 0 .857c.171.258.429.43.728.43h5.786l-1.5 6.642a.813.813 0 0 0 .472.943c.128.043.257.085.385.085a.771.771 0 0 0 .643-.3l4.047-4.72L12.897 16l-1.883 2.214.754-3.343-2.057-2.057H5.828l1.477-2.406L6.08 9.185ZM17.828 10.2l-2.833 3.332-5.953-5.954 2.572-4.193H15.6l-3.472 5.529a.875.875 0 0 0-.043.857c.172.257.43.429.73.429h5.013Z" clip-rule="evenodd"/>
+    </svg>
+  </span>
+  `,
+  bindings: {
+    size: '<',
+  },
+};

package/build/angular/index.ts

@@ -42,6 +42,7 @@ import { DriversLicenseIconComponent } from './components/drivers-license-icon.c
 import { CardCvcIconComponent } from './components/card-cvc-icon.component';
 import { CardDetailIconComponent } from './components/card-detail-icon.component';
 import { CardNumberIconComponent } from './components/card-number-icon.component';
+import { CardStrikethroughIconComponent } from './components/card-strikethrough-icon.component';
 import { CardWiseIconComponent } from './components/card-wise-icon.component';
 import { CardTransferwiseIconComponent } from './components/card-transferwise-icon.component';
 import { CardIconComponent } from './components/card-icon.component';
@@ -91,6 +92,7 @@ import { EmailAndMobileIconComponent } from './components/email-and-mobile-icon.
 import { EmailAndPhoneIconComponent } from './components/email-and-phone-icon.component';
 import { EmailIconComponent } from './components/email-icon.component';
 import { EntertainmentIconComponent } from './components/entertainment-icon.component';
+import { EqualsIconComponent } from './components/equals-icon.component';
 import { ExpandIconComponent } from './components/expand-icon.component';
 import { EyeShutIconComponent } from './components/eye-shut-icon.component';
 import { EyeIconComponent } from './components/eye-icon.component';
@@ -140,6 +142,7 @@ import { KeepIconComponent } from './components/keep-icon.component';
 import { KlarnaIconComponent } from './components/klarna-icon.component';
 import { LaptopIconComponent } from './components/laptop-icon.component';
 import { LeafIconComponent } from './components/leaf-icon.component';
+import { LightningBoltStrikethroughIconComponent } from './components/lightning-bolt-strikethrough-icon.component';
 import { LightningBoltIconComponent } from './components/lightning-bolt-icon.component';
 import { LightningIconComponent } from './components/lightning-icon.component';
 import { LimitIconComponent } from './components/limit-icon.component';
@@ -333,6 +336,7 @@ export const TwIconsModule = angular
   .component('twCardCvcIcon', CardCvcIconComponent)
   .component('twCardDetailIcon', CardDetailIconComponent)
   .component('twCardNumberIcon', CardNumberIconComponent)
+  .component('twCardStrikethroughIcon', CardStrikethroughIconComponent)
   .component('twCardWiseIcon', CardWiseIconComponent)
   .component('twCardTransferwiseIcon', CardTransferwiseIconComponent)
   .component('twCardIcon', CardIconComponent)
@@ -382,6 +386,7 @@ export const TwIconsModule = angular
   .component('twEmailAndPhoneIcon', EmailAndPhoneIconComponent)
   .component('twEmailIcon', EmailIconComponent)
   .component('twEntertainmentIcon', EntertainmentIconComponent)
+  .component('twEqualsIcon', EqualsIconComponent)
   .component('twExpandIcon', ExpandIconComponent)
   .component('twEyeShutIcon', EyeShutIconComponent)
   .component('twEyeIcon', EyeIconComponent)
@@ -431,6 +436,7 @@ export const TwIconsModule = angular
   .component('twKlarnaIcon', KlarnaIconComponent)
   .component('twLaptopIcon', LaptopIconComponent)
   .component('twLeafIcon', LeafIconComponent)
+  .component('twLightningBoltStrikethroughIcon', LightningBoltStrikethroughIconComponent)
   .component('twLightningBoltIcon', LightningBoltIconComponent)
   .component('twLightningIcon', LightningIconComponent)
   .component('twLimitIcon', LimitIconComponent)

package/build/components/ach.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface AchIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface AchIconProps {
 }
 
 export const Ach: React.FunctionComponent<AchIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const Ach: React.FunctionComponent<AchIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-ach ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'ach-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -48,7 +52,6 @@ export const Ach: React.FunctionComponent<AchIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/activity.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface ActivityIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface ActivityIconProps {
 }
 
 export const Activity: React.FunctionComponent<ActivityIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const Activity: React.FunctionComponent<ActivityIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-activity ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'activity-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -48,7 +52,6 @@ export const Activity: React.FunctionComponent<ActivityIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/alert-circle-fill.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface AlertCircleFillIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface AlertCircleFillIconProps {
 }
 
 export const AlertCircleFill: React.FunctionComponent<AlertCircleFillIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const AlertCircleFill: React.FunctionComponent<AlertCircleFillIconProps>
   return (
     <span
       className={`tw-icon tw-icon-alert-circle-fill ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'alert-circle-fill-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -48,7 +52,6 @@ export const AlertCircleFill: React.FunctionComponent<AlertCircleFillIconProps>
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/alert-circle.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface AlertCircleIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface AlertCircleIconProps {
 }
 
 export const AlertCircle: React.FunctionComponent<AlertCircleIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const AlertCircle: React.FunctionComponent<AlertCircleIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-alert-circle ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'alert-circle-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -48,7 +52,6 @@ export const AlertCircle: React.FunctionComponent<AlertCircleIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/alert.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface AlertIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface AlertIconProps {
 }
 
 export const Alert: React.FunctionComponent<AlertIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const Alert: React.FunctionComponent<AlertIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-alert ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'alert-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -45,7 +49,6 @@ export const Alert: React.FunctionComponent<AlertIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/alipay.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface AlipayIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface AlipayIconProps {
 }
 
 export const Alipay: React.FunctionComponent<AlipayIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const Alipay: React.FunctionComponent<AlipayIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-alipay ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'alipay-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -48,7 +52,6 @@ export const Alipay: React.FunctionComponent<AlipayIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/arrow-diagonal-down.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface ArrowDiagonalDownIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface ArrowDiagonalDownIconProps {
 }
 
 export const ArrowDiagonalDown: React.FunctionComponent<ArrowDiagonalDownIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const ArrowDiagonalDown: React.FunctionComponent<ArrowDiagonalDownIconPro
   return (
     <span
       className={`tw-icon tw-icon-arrow-diagonal-down ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'arrow-diagonal-down-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -44,7 +48,6 @@ export const ArrowDiagonalDown: React.FunctionComponent<ArrowDiagonalDownIconPro
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/arrow-diagonal-up.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface ArrowDiagonalUpIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface ArrowDiagonalUpIconProps {
 }
 
 export const ArrowDiagonalUp: React.FunctionComponent<ArrowDiagonalUpIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const ArrowDiagonalUp: React.FunctionComponent<ArrowDiagonalUpIconProps>
   return (
     <span
       className={`tw-icon tw-icon-arrow-diagonal-up ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'arrow-diagonal-up-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -44,7 +48,6 @@ export const ArrowDiagonalUp: React.FunctionComponent<ArrowDiagonalUpIconProps>
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/arrow-down.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface ArrowDownIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface ArrowDownIconProps {
 }
 
 export const ArrowDown: React.FunctionComponent<ArrowDownIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const ArrowDown: React.FunctionComponent<ArrowDownIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-arrow-down ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'arrow-down-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -44,7 +48,6 @@ export const ArrowDown: React.FunctionComponent<ArrowDownIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };