@royaloperahouse/chord 0.1.0

package/src/components/atoms/Icons/SvgIcons/Utility/Confirm.svg.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.09961 21L3 12.5L3.8 11.9L9.09961 19.3L21.1996 3L21.9996 3.6L9.09961 21Z" fill={color} />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Utility/Detract.svg.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21 11.5H3V12.5H21V11.5Z" fill={color} />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Utility/Expand.svg.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.5 11.5V3H11.5V11.5H3V12.5H11.5V21H12.5V12.5H21V11.5H12.5Z" fill={color} />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Utility/ExternalLink.svg.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M18 18.5C18 19.3 17.3 20 16.5 20H5.5C4.7 20 4 19.3 4 18.5V7.5C4 6.7 4.7 6 5.5 6H10.6V5H5.5C4.1 5 3 6.1 3 7.5V18.5C3 19.9 4.1 21 5.5 21H16.5C17.9 21 19 19.9 19 18.5V13.4H18V18.5Z"
+      fill={color}
+    />
+    <path d="M20.0008 3H14.0008V4H19.3008L10.3008 12.9L11.1008 13.7L20.0008 4.7V10H21.0008V4V3H20.0008Z" fill={color} />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Utility/GridView.svg.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H14.3H15.3H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 4C19.6 4 20 4.4 20 5V8.9H15.3V4H19ZM9.7 9.9H14.4V14.6H9.7V9.9ZM8.7 14.6H4V9.9H8.7V14.6ZM15.3 9.9H20V14.6H15.3V9.9ZM14.3 8.9H9.7V4H14.4V8.9H14.3ZM5 4H8.7V8.9H4V5C4 4.4 4.4 4 5 4ZM4 19V15.6H8.7V20H5C4.4 20 4 19.6 4 19ZM9.7 20V15.6H14.4V20H9.7ZM19 20H15.3V15.6H20V19C20 19.6 19.6 20 19 20Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Utility/ListView.svg.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 3V7H21V3H3ZM20 6H4V4H20V6Z" fill={color} />
+    <path d="M3 21H21V17H3V21ZM4 18H20V20H4V18Z" fill={color} />
+    <path d="M3 14H21V10H3V14ZM4 11H20V13H4V11Z" fill={color} />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Utility/Refresh.svg.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M18.71 13.9001C18.3138 15.3804 17.4428 16.6898 16.2307 17.6273C15.0186 18.5648 13.5323 19.0787 12 19.0901C10.2633 19.0541 8.59637 18.3999 7.29868 17.2452C6.00098 16.0905 5.15758 14.5108 4.92 12.7901L6.64 14.2901L7.21 13.5701L4.42 11.1001L2 14.0001L2.7 14.5901L4.17 12.8301C4.33413 14.6921 5.15733 16.4345 6.49149 17.7437C7.82566 19.0529 9.58323 19.8431 11.448 19.9721C13.3128 20.1011 15.1624 19.5604 16.6641 18.4473C18.1658 17.3342 19.2211 15.7218 19.64 13.9001H18.71Z"
+      fill={color}
+    />
+    <path
+      d="M21.2994 9.44987L19.8294 11.2099C19.6738 9.34515 18.8572 7.59736 17.5268 6.28151C16.1964 4.96566 14.4397 4.16832 12.5734 4.0332C10.7071 3.89808 8.8539 4.43407 7.34785 5.54457C5.8418 6.65507 4.78196 8.26702 4.35938 10.0899H5.28937C5.68741 8.61145 6.55919 7.30431 7.77114 6.36871C8.98308 5.43311 10.4683 4.92066 11.9994 4.90987C13.7361 4.9459 15.403 5.60004 16.7007 6.75476C17.9984 7.90949 18.8418 9.48913 19.0794 11.2099L17.3594 9.70987L16.7894 10.4299L19.5994 12.8999L21.9994 9.99987L21.2994 9.44987Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Video/AudioDescription.svg.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21 5V19H3V5H21ZM22 4H2V20H22V4Z" fill={color} />
+    <path
+      d="M8.17938 9H9.33938L11.8994 15H10.5894L9.99937 13.64H7.44937L6.88937 15H5.60938L8.17938 9ZM9.57937 12.53L8.73937 10.53L7.89937 12.53H9.57937Z"
+      fill={color}
+    />
+    <path
+      d="M12.9199 8.99994H15.2199C15.628 8.97678 16.0364 9.03723 16.4202 9.17759C16.8041 9.31795 17.1552 9.53526 17.452 9.81618C17.7489 10.0971 17.9852 10.4357 18.1464 10.8112C18.3077 11.1867 18.3906 11.5913 18.3899 11.9999C18.3906 12.4086 18.3077 12.8131 18.1464 13.1887C17.9852 13.5642 17.7489 13.9028 17.452 14.1837C17.1552 14.4646 16.8041 14.6819 16.4202 14.8223C16.0364 14.9626 15.628 15.0231 15.2199 14.9999H12.9199V8.99994ZM14.1799 10.1399V13.8199H15.1799C15.4276 13.8417 15.6771 13.8101 15.9115 13.7273C16.1459 13.6445 16.3599 13.5124 16.539 13.34C16.7181 13.1675 16.8582 12.9587 16.9497 12.7275C17.0413 12.4964 17.0823 12.2483 17.0699 11.9999C17.0814 11.7544 17.0414 11.5092 16.9523 11.28C16.8633 11.0509 16.7273 10.843 16.553 10.6697C16.3787 10.4963 16.17 10.3614 15.9404 10.2736C15.7108 10.1858 15.4654 10.1471 15.2199 10.1599L14.1799 10.1399Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Video/Back10.svg.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M18.1992 6.1C14.9992 2.9 9.89922 2.7 6.49922 5.5L6.69922 3H5.69922L5.39922 7.1L9.49922 7.4L9.59922 6.4L7.09922 6.2C10.0992 3.7 14.5992 3.9 17.3992 6.7C20.3992 9.7 20.3992 14.6 17.3992 17.6C14.3992 20.6 9.49922 20.6 6.49922 17.6C4.99922 16.1 4.19922 14.2 4.19922 12.1H3.19922C3.19922 14.4 4.09922 16.6 5.79922 18.3C7.49922 20.1 9.79922 21 11.9992 21C14.1992 21 16.4992 20.1 18.1992 18.4C21.5992 15 21.5992 9.5 18.1992 6.1Z"
+      fill={color}
+    />
+    <path d="M8.8 10.3L7.8 10.6L7.5 9.5L9.2 9H10.1V14.9H8.8V10.3Z" fill={color} />
+    <path
+      d="M11.3008 12C11.3008 10.3 12.4008 9 13.9008 9C15.4008 9 16.5008 10.3 16.5008 12C16.5008 13.7 15.5008 15 13.9008 15C12.3008 15 11.3008 13.7 11.3008 12ZM15.2008 12C15.2008 10.9 14.7008 10.1 13.9008 10.1C13.1008 10.1 12.6008 10.9 12.6008 12C12.6008 13.1 13.1008 13.9 13.9008 13.9C14.7008 13.9 15.2008 13.1 15.2008 12Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Video/Clips.svg.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15 11V19H3V11H15ZM16 10H2V20H16V10Z" fill={color} />
+    <path d="M22 4H6V5H7H21V15V16H22V4Z" fill={color} />
+    <path d="M19 7H4V8H5H18V17V18H19V7Z" fill={color} />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Video/Forward10.svg.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M5.8 6.0999C9 2.8999 14.1 2.6999 17.5 5.4999L17.3 2.9999L18.3 2.8999L18.6 6.9999L14.5 7.2999L14.4 6.2999L16.9 6.0999C13.8 3.7999 9.4 3.9999 6.5 6.7999C3.5 9.7999 3.5 14.6999 6.5 17.6999C9.5 20.6999 14.4 20.6999 17.4 17.6999C18.9 16.1999 19.7 14.2999 19.7 12.1999H20.7C20.7 14.4999 19.8 16.6999 18.1 18.3999C16.5 20.0999 14.2 20.9999 12 20.9999C9.8 20.9999 7.5 20.0999 5.8 18.3999C2.4 14.9999 2.4 9.4999 5.8 6.0999Z"
+      fill={color}
+    />
+    <path d="M8.8 10.3L7.8 10.6L7.5 9.5L9.2 9H10.1V14.9H8.8V10.3Z" fill={color} />
+    <path
+      d="M11.3008 12C11.3008 10.3 12.4008 9 13.9008 9C15.4008 9 16.5008 10.3 16.5008 12C16.5008 13.7 15.5008 15 13.9008 15C12.3008 15 11.3008 13.7 11.3008 12ZM15.2008 12C15.2008 10.9 14.7008 10.1 13.9008 10.1C13.1008 10.1 12.6008 10.9 12.6008 12C12.6008 13.1 13.1008 13.9 13.9008 13.9C14.7008 13.9 15.2008 13.1 15.2008 12Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Video/FullScreen.svg.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 9H4V4H9V3H3V9Z" fill={color} />
+    <path d="M20 20H15V21H21V15H20V20Z" fill={color} />
+    <path d="M15 3V4H20V9H21V3H15Z" fill={color} />
+    <path d="M4 15H3V21H9V20H4V15Z" fill={color} />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Video/Minimise.svg.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 3H8V8H3V9H9V3Z" fill={color} />
+    <path d="M16 16H21V15H15V21H16V16Z" fill={color} />
+    <path d="M21 9V8H16V3H15V9H21Z" fill={color} />
+    <path d="M8 21H9V15H3V16H8V21Z" fill={color} />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Video/Muted.svg.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M22.0008 9.9001L21.3008 9.1001L19.2008 11.3001L17.0008 9.1001L16.3008 9.9001L18.4008 12.0001L16.3008 14.1001L17.0008 14.9001L19.2008 12.7001L21.3008 14.9001L22.0008 14.1001L19.9008 12.0001L22.0008 9.9001Z"
+      fill={color}
+    />
+    <path
+      d="M4.5 9.5C3.7 9.5 3 10.2 3 11V14C3 14.8 3.7 15.5 4.5 15.5H6.8L14 21V4L6.8 9.5H4.5ZM13 6V19L7.2 14.5H4.5C4.2 14.5 4 14.3 4 14V11C4 10.7 4.2 10.5 4.5 10.5H7.2L13 6Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Video/Pause.svg.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 2H4V22H10V2Z" fill={color} />
+    <path d="M20 2H14V22H20V2Z" fill={color} />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Video/Play.svg.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.5 3.8999L20 11.9999L5.5 20.0999V3.8999Z" fill={color} />
+    <path d="M6 4.7L19 12L6 19.3V4.7ZM5 3V21L21 12L5 3Z" fill={color} />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Video/Restart.svg.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M12.6 7.4H5.9L9.6 3.7L8.9 3L4 7.9L8.9 12.8L9.6 12.1L5.9 8.4H12.6C16.1 8.4 18.9 11.2 18.9 14.7C18.9 18.2 16 21 12.6 21C9.1 21 6.3 18.2 6.3 14.7H5.3C5.3 18.7 8.6 22 12.6 22C16.6 22 19.9 18.7 19.9 14.7C19.8 10.7 16.6 7.4 12.6 7.4Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Video/Subtitles.svg.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 7H7V8H9V7Z" fill={color} />
+    <path d="M17 7H11V8H17V7Z" fill={color} />
+    <path d="M9 12H7V13H9V12Z" fill={color} />
+    <path d="M17 12H11V13H17V12Z" fill={color} />
+    <path d="M17 9.5H15V10.5H17V9.5Z" fill={color} />
+    <path d="M13 9.5H7V10.5H13V9.5Z" fill={color} />
+    <path
+      d="M19 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5V15C3 15.5304 3.21071 16.0391 3.58579 16.4142C3.96086 16.7893 4.46957 17 5 17H11.3L17 21V17H19C19.5304 17 20.0391 16.7893 20.4142 16.4142C20.7893 16.0391 21 15.5304 21 15V5C21 4.46957 20.7893 3.96086 20.4142 3.58579C20.0391 3.21071 19.5304 3 19 3ZM20 15C20.0088 15.1336 19.989 15.2676 19.9419 15.3929C19.8948 15.5182 19.8214 15.632 19.7267 15.7267C19.632 15.8214 19.5182 15.8948 19.3929 15.9419C19.2676 15.989 19.1336 16.0088 19 16H16V19L13.1 17L12.9 16.8L11.7 16H5C4.86639 16.0088 4.73244 15.989 4.6071 15.9419C4.48177 15.8948 4.36795 15.8214 4.27327 15.7267C4.17859 15.632 4.10523 15.5182 4.0581 15.3929C4.01097 15.2676 3.99116 15.1336 4 15V5C3.99116 4.86639 4.01097 4.73244 4.0581 4.6071C4.10523 4.48177 4.17859 4.36795 4.27327 4.27327C4.36795 4.17859 4.48177 4.10523 4.6071 4.0581C4.73244 4.01097 4.86639 3.99116 5 4H19C19.1336 3.99116 19.2676 4.01097 19.3929 4.0581C19.5182 4.10523 19.632 4.17859 19.7267 4.27327C19.8214 4.36795 19.8948 4.48177 19.9419 4.6071C19.989 4.73244 20.0088 4.86639 20 5V15Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Video/Trailer.svg.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M16.8 3H15.8H12.5H11.5H8.2H7.2H3V7.5V8.3V15.7V16.5V21H7.2H8.2H11.4H12.4H15.6H16.6H21V17V15.7V8.3V8V3H16.8ZM16.8 4H20V7.3H16.8V4ZM12.5 4H15.7V7.3H12.5V4ZM8.2 4H11.4V7.3H8.2V4ZM4 4H7.2V7.3H4V4ZM7.2 20H4V16.7H7.2V20ZM11.5 20H8.2V16.7H11.4V20H11.5ZM15.8 20H12.5V16.7H15.7V20H15.8ZM20 20H16.8V16.7H20V17V20ZM20 15.7H16.8H15.8H12.5H11.5H8.2H7.2H4V8.3H7.2H8.2H11.4H12.4H15.6H16.6H20V15.7Z"
+      fill={color}
+    />
+    <path d="M10 14.5999L15 11.9999L10 9.3999V14.5999Z" fill={color} />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Video/Volume.svg.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M19 12C19 10.3 17.7 9 16 9V10C17.1 10 18 10.9 18 12C18 13.1 17.1 14 16 14V15C17.7 15 19 13.7 19 12Z"
+      fill={color}
+    />
+    <path
+      d="M16 6V7C18.8 7 21 9.2 21 12C21 14.8 18.8 17 16 17V18C19.3 18 22 15.3 22 12C22 8.7 19.3 6 16 6Z"
+      fill={color}
+    />
+    <path
+      d="M4.5 9.5C3.7 9.5 3 10.2 3 11V14C3 14.8 3.7 15.5 4.5 15.5H6.8L14 21V4L6.8 9.5H4.5ZM13 6V19L7.2 14.5H4.5C4.2 14.5 4 14.3 4 14V11C4 10.7 4.2 10.5 4.5 10.5H7.2L13 6Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/index.tsx

@@ -0,0 +1,149 @@
+/* 12px */
+import Remove from './12px/Remove.svg';
+import Tick from './12px/Tick.svg';
+/* Actions */
+import AddToMyList from './Actions/AddToMyList.svg';
+import OnMyList from './Actions/OnMyList.svg';
+import BookTickets from './Actions/BookTickets.svg';
+import ChooseDates from './Actions/ChooseDates.svg';
+import EditMyList from './Actions/EditMyList.svg';
+import Filter from './Actions/Filter.svg';
+import FindAScreening from './Actions/FindAScreening.svg';
+import Reminder from './Actions/Reminder.svg';
+import Subscribe from './Actions/Subscribe.svg';
+import Watch from './Actions/Watch.svg';
+/* Arrows */
+import Arrow from './Arrows/Arrow.svg';
+import CarouselArrow from './Arrows/CarouselArrow.svg';
+import DropdownArrow from './Arrows/DropdownArrow.svg';
+/* Descriptors */
+import Cinema from './Descriptors/Cinema.svg';
+import Clock from './Descriptors/Clock.svg';
+import CreditCard from './Descriptors/CreditCard.svg';
+import Email from './Descriptors/Email.svg';
+import Info from './Descriptors/Info.svg';
+import List from './Descriptors/List.svg';
+import Location from './Descriptors/Location.svg';
+import PDF from './Descriptors/PDF.svg';
+import Phone from './Descriptors/Phone.svg';
+import Print from './Descriptors/Print.svg';
+import Secure from './Descriptors/Secure.svg';
+import Tickets from './Descriptors/Tickets.svg';
+/* Navigation */
+import BalletAndDance from './Navigation/BalletAndDance.svg';
+import Basket from './Navigation/Basket.svg';
+import BasketFull from './Navigation/BasketFull.svg';
+import Home from './Navigation/Home.svg';
+import LiveStream from './Navigation/LiveStream.svg';
+import Menu from './Navigation/Menu.svg';
+import OperaAndMusic from './Navigation/OperaAndMusic.svg';
+import Search from './Navigation/Search.svg';
+import Settings from './Navigation/Settings.svg';
+import User from './Navigation/User.svg';
+import UserSignedIn from './Navigation/UserSignedIn.svg';
+/* Social */
+import Facebook from './Logos/Social/Facebook.svg';
+import Instagram from './Logos/Social/Instagram.svg';
+import Tiktok from './Logos/Social/Tiktok.svg';
+import Twitter from './Logos/Social/Twitter.svg';
+import Youtube from './Logos/Social/Youtube.svg';
+/* Text */
+import Delete from './Text/Delete.svg';
+import Shift from './Text/Shift.svg';
+import Space from './Text/Space.svg';
+/* Utility */
+import Close from './Utility/Close.svg';
+import Confirm from './Utility/Confirm.svg';
+import Detract from './Utility/Detract.svg';
+import Expand from './Utility/Expand.svg';
+import ExternalLink from './Utility/ExternalLink.svg';
+import GridView from './Utility/GridView.svg';
+import ListView from './Utility/ListView.svg';
+import Refresh from './Utility/Refresh.svg';
+/* Video */
+import AudioDescription from './Video/AudioDescription.svg';
+import Back10 from './Video/Back10.svg';
+import Clips from './Video/Clips.svg';
+import Forward10 from './Video/Forward10.svg';
+import FullScreen from './Video/FullScreen.svg';
+import Minimise from './Video/Minimise.svg';
+import Muted from './Video/Muted.svg';
+import Pause from './Video/Pause.svg';
+import Play from './Video/Play.svg';
+import Restart from './Video/Restart.svg';
+import Subtitles from './Video/Subtitles.svg';
+import Trailer from './Video/Trailer.svg';
+import Volume from './Video/Volume.svg';
+
+import Sponsor from './Logos/Sponsors/Sponsor.svg';
+
+export const IconLibrary = {
+  AddToMyList,
+  Arrow,
+  AudioDescription,
+  Back10,
+  BalletAndDance,
+  Basket,
+  BasketFull,
+  BookTickets,
+  CarouselArrow,
+  ChooseDates,
+  Cinema,
+  Clips,
+  Clock,
+  Close,
+  Confirm,
+  CreditCard,
+  Delete,
+  Detract,
+  DropdownArrow,
+  EditMyList,
+  Email,
+  Expand,
+  ExternalLink,
+  Facebook,
+  Filter,
+  FindAScreening,
+  Forward10,
+  FullScreen,
+  GridView,
+  Home,
+  Info,
+  Instagram,
+  List,
+  ListView,
+  LiveStream,
+  Location,
+  Menu,
+  Minimise,
+  Muted,
+  OnMyList,
+  OperaAndMusic,
+  Pause,
+  PDF,
+  Phone,
+  Play,
+  Print,
+  Refresh,
+  Reminder,
+  Remove,
+  Restart,
+  Search,
+  Secure,
+  Settings,
+  Shift,
+  Space,
+  Sponsor,
+  Subscribe,
+  Subtitles,
+  Tick,
+  Tickets,
+  Tiktok,
+  Trailer,
+  Twitter,
+  User,
+  UserSignedIn,
+  Volume,
+  Watch,
+  Youtube,
+};