@winplaybox/icons 0.0.0-stage → 0.2.0

package/src/generated/outlined/av.tsx

@@ -0,0 +1,1010 @@
+import React from 'react';
+import { IconProps } from '../../types';
+
+export const OutlinedIcon10kIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 6v10H5v-8.5h1V15h1.5V9H5V5h14v4z"/><path fill={color || 'currentColor'} d="M15.5 11.25V9H14v6h1.5v-2.25L17.25 15H19l-2.25-3L19 9h-1.75zM9.5 15H12c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H9.5c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm.5-4.5h1.5v3H10v-3z"/>
+  </svg>
+);
+OutlinedIcon10kIcon.displayName = 'OutlinedIcon10kIcon';
+export const Icon10kOutlinedIcon = OutlinedIcon10kIcon;
+
+export const OutlinedIcon1kIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/><path fill={color || 'currentColor'} d="M8.5 15H10V9H7v1.5h1.5zm5-2.25L15.25 15H17l-2.25-3L17 9h-1.75l-1.75 2.25V9H12v6h1.5z"/>
+  </svg>
+);
+OutlinedIcon1kIcon.displayName = 'OutlinedIcon1kIcon';
+export const Icon1kOutlinedIcon = OutlinedIcon1kIcon;
+
+export const OutlinedIcon1kPlusIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 8.5h-1.5V10h-1v1.5H15v1h1.5V14h1v-1.5H19V19H5V5h14v6.5z"/><path fill={color || 'currentColor'} d="M7.5 15H9V9H6v1.5h1.5zm4.5-2.25L13.75 15h1.75l-2.25-3l2.25-3h-1.75L12 11.25V9h-1.5v6H12z"/>
+  </svg>
+);
+OutlinedIcon1kPlusIcon.displayName = 'OutlinedIcon1kPlusIcon';
+export const Icon1kPlusOutlinedIcon = OutlinedIcon1kPlusIcon;
+
+export const OutlinedIcon2kIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/><path fill={color || 'currentColor'} d="M11 13.5H8v-1h2c.55 0 1-.45 1-1V10c0-.55-.45-1-1-1H6.5v1.5h3v1h-2c-.55 0-1 .45-1 1V15H11v-1.5zm3.5-.75L16.25 15H18l-2.25-3L18 9h-1.75l-1.75 2.25V9H13v6h1.5z"/>
+  </svg>
+);
+OutlinedIcon2kIcon.displayName = 'OutlinedIcon2kIcon';
+export const Icon2kOutlinedIcon = OutlinedIcon2kIcon;
+
+export const OutlinedIcon2kPlusIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 8.5h-1.5V10h-1v1.5H15v1h1.5V14h1v-1.5H19V19H5V5h14v6.5z"/><path fill={color || 'currentColor'} d="M10 13.5H7.5v-1H9c.55 0 1-.45 1-1V10c0-.55-.45-1-1-1H6v1.5h2.5v1H7c-.55 0-1 .45-1 1V15h4v-1.5zm2.5-.75L14.25 15H16l-2.25-3L16 9h-1.75l-1.75 2.25V9H11v6h1.5z"/>
+  </svg>
+);
+OutlinedIcon2kPlusIcon.displayName = 'OutlinedIcon2kPlusIcon';
+export const Icon2kPlusOutlinedIcon = OutlinedIcon2kPlusIcon;
+
+export const OutlinedIcon3kIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/><path fill={color || 'currentColor'} d="M11 14v-4c0-.55-.45-1-1-1H6.5v1.5h3v1h-2v1h2v1h-3V15H10c.55 0 1-.45 1-1zm3.5-1.25L16.25 15H18l-2.25-3L18 9h-1.75l-1.75 2.25V9H13v6h1.5z"/>
+  </svg>
+);
+OutlinedIcon3kIcon.displayName = 'OutlinedIcon3kIcon';
+export const Icon3kOutlinedIcon = OutlinedIcon3kIcon;
+
+export const OutlinedIcon3kPlusIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 8.5h-1.5V10h-1v1.5H15v1h1.5V14h1v-1.5H19V19H5V5h14v6.5z"/><path fill={color || 'currentColor'} d="M10 14v-4c0-.55-.45-1-1-1H5.5v1.5h3v1h-2v1h2v1h-3V15H9c.55 0 1-.45 1-1zm2.5-1.25L14.25 15H16l-2.25-3L16 9h-1.75l-1.75 2.25V9H11v6h1.5z"/>
+  </svg>
+);
+OutlinedIcon3kPlusIcon.displayName = 'OutlinedIcon3kPlusIcon';
+export const Icon3kPlusOutlinedIcon = OutlinedIcon3kPlusIcon;
+
+export const OutlinedIcon4kIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5a2 2 0 0 0-2-2zm0 16H5V5h14v14zm-9.5-4H11v-1.49h1V12h-1V9H9.5v3H8V9H6.5v4.5h3zm8.7 0l-2-3l2-3h-1.7l-2 3l2 3zm-3.7-3V9H13v6h1.5z"/>
+  </svg>
+);
+OutlinedIcon4kIcon.displayName = 'OutlinedIcon4kIcon';
+export const Icon4kOutlinedIcon = OutlinedIcon4kIcon;
+
+export const OutlinedIcon4kPlusIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 8.5h-1.5V10h-1v1.5H15v1h1.5V14h1v-1.5H19V19H5V5h14v6.5z"/><path fill={color || 'currentColor'} d="M8.5 15H10v-1.5h1V12h-1V9H8.5v3H7V9H5.5v4.5h3zm4.5-2.25L14.75 15h1.75l-2.25-3l2.25-3h-1.75L13 11.25V9h-1.5v6H13z"/>
+  </svg>
+);
+OutlinedIcon4kPlusIcon.displayName = 'OutlinedIcon4kPlusIcon';
+export const Icon4kPlusOutlinedIcon = OutlinedIcon4kPlusIcon;
+
+export const OutlinedIcon5gIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M16.5 13H19v2h-5V9h7c0-1.1-.9-2-2-2h-5c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h5c1.1 0 2-.9 2-2v-4h-4.5v2zM3 13h5v2H3v2h5c1.1 0 2-.9 2-2v-2c0-1.1-.9-2-2-2H5V9h5V7H3v6z"/>
+  </svg>
+);
+OutlinedIcon5gIcon.displayName = 'OutlinedIcon5gIcon';
+export const Icon5gOutlinedIcon = OutlinedIcon5gIcon;
+
+export const OutlinedIcon5kIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/><path fill={color || 'currentColor'} d="M11 14v-1.5c0-.55-.45-1-1-1H8v-1h3V9H6.5v3.5h3v1h-3V15H10c.55 0 1-.45 1-1zm3.5-1.25L16.25 15H18l-2.25-3L18 9h-1.75l-1.75 2.25V9H13v6h1.5z"/>
+  </svg>
+);
+OutlinedIcon5kIcon.displayName = 'OutlinedIcon5kIcon';
+export const Icon5kOutlinedIcon = OutlinedIcon5kIcon;
+
+export const OutlinedIcon5kPlusIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 8.5h-1.5V10h-1v1.5H15v1h1.5V14h1v-1.5H19V19H5V5h14v6.5z"/><path fill={color || 'currentColor'} d="M10 14v-1.5c0-.55-.45-1-1-1H7.5v-1H10V9H6v3.5h2.5v1H6V15h3c.55 0 1-.45 1-1zm2.5-1.25L14.25 15H16l-2.25-3L16 9h-1.75l-1.75 2.25V9H11v6h1.5z"/>
+  </svg>
+);
+OutlinedIcon5kPlusIcon.displayName = 'OutlinedIcon5kPlusIcon';
+export const Icon5kPlusOutlinedIcon = OutlinedIcon5kPlusIcon;
+
+export const OutlinedIcon6kIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/><path fill={color || 'currentColor'} d="M14.5 12.75L16.25 15H18l-2.25-3L18 9h-1.75l-1.75 2.25V9H13v6h1.5zM7.5 15H10c.55 0 1-.45 1-1v-1.5c0-.55-.45-1-1-1H8v-1h3V9H7.5c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm.5-2.5h1.5V14H8v-1.5z"/>
+  </svg>
+);
+OutlinedIcon6kIcon.displayName = 'OutlinedIcon6kIcon';
+export const Icon6kOutlinedIcon = OutlinedIcon6kIcon;
+
+export const OutlinedIcon6kPlusIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 8.5h-1.5V10h-1v1.5H15v1h1.5V14h1v-1.5H19V19H5V5h14v6.5z"/><path fill={color || 'currentColor'} d="M12.5 12.75L14.25 15H16l-2.25-3L16 9h-1.75l-1.75 2.25V9H11v6h1.5zM7 15h2c.55 0 1-.45 1-1v-1.5c0-.55-.45-1-1-1H7.5v-1H10V9H7c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm.5-2.5h1V14h-1v-1.5z"/>
+  </svg>
+);
+OutlinedIcon6kPlusIcon.displayName = 'OutlinedIcon6kPlusIcon';
+export const Icon6kPlusOutlinedIcon = OutlinedIcon6kPlusIcon;
+
+export const OutlinedIcon7kIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/><path fill={color || 'currentColor'} d="M7.75 15H9.5l1.46-4.71C11.15 9.65 10.67 9 10 9H6.5v1.5h2.63L7.75 15zm6.75-2.25L16.25 15H18l-2.25-3L18 9h-1.75l-1.75 2.25V9H13v6h1.5z"/>
+  </svg>
+);
+OutlinedIcon7kIcon.displayName = 'OutlinedIcon7kIcon';
+export const Icon7kOutlinedIcon = OutlinedIcon7kIcon;
+
+export const OutlinedIcon7kPlusIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 8.5h-1.5V10h-1v1.5H15v1h1.5V14h1v-1.5H19V19H5V5h14v6.5z"/><path fill={color || 'currentColor'} d="M6.75 15H8.5l1.46-4.71C10.15 9.65 9.67 9 9 9H5.5v1.5h2.63L6.75 15zm5.75-2.25L14.25 15H16l-2.25-3L16 9h-1.75l-1.75 2.25V9H11v6h1.5z"/>
+  </svg>
+);
+OutlinedIcon7kPlusIcon.displayName = 'OutlinedIcon7kPlusIcon';
+export const Icon7kPlusOutlinedIcon = OutlinedIcon7kPlusIcon;
+
+export const OutlinedIcon8kIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M7.5 15H10c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H7.5c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm.5-5h1.5v1.5H8V10zm0 2.5h1.5V14H8v-1.5z"/><path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/><path fill={color || 'currentColor'} d="M14.5 12.75L16.25 15H18l-2.25-3L18 9h-1.75l-1.75 2.25V9H13v6h1.5z"/>
+  </svg>
+);
+OutlinedIcon8kIcon.displayName = 'OutlinedIcon8kIcon';
+export const Icon8kOutlinedIcon = OutlinedIcon8kIcon;
+
+export const OutlinedIcon8kPlusIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M7 15h2c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm.5-5h1v1.5h-1V10zm0 2.5h1V14h-1v-1.5z"/><path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 8.5h-1.5V10h-1v1.5H15v1h1.5V14h1v-1.5H19V19H5V5h14v6.5z"/><path fill={color || 'currentColor'} d="M12.5 12.75L14.25 15H16l-2.25-3L16 9h-1.75l-1.75 2.25V9H11v6h1.5z"/>
+  </svg>
+);
+OutlinedIcon8kPlusIcon.displayName = 'OutlinedIcon8kPlusIcon';
+export const Icon8kPlusOutlinedIcon = OutlinedIcon8kPlusIcon;
+
+export const OutlinedIcon9kIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M11 14v-4c0-.55-.45-1-1-1H7.5c-.55 0-1 .45-1 1v1.5c0 .55.45 1 1 1h2v1h-3V15H10c.55 0 1-.45 1-1zm-1.5-2.5H8V10h1.5v1.5z"/><path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/><path fill={color || 'currentColor'} d="M14.5 12.75L16.25 15H18l-2.25-3L18 9h-1.75l-1.75 2.25V9H13v6h1.5z"/>
+  </svg>
+);
+OutlinedIcon9kIcon.displayName = 'OutlinedIcon9kIcon';
+export const Icon9kOutlinedIcon = OutlinedIcon9kIcon;
+
+export const OutlinedIcon9kPlusIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M10 14v-4c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v1.5c0 .55.45 1 1 1h1.5v1H6V15h3c.55 0 1-.45 1-1zm-1.5-2.5h-1V10h1v1.5z"/><path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 8.5h-1.5V10h-1v1.5H15v1h1.5V14h1v-1.5H19V19H5V5h14v6.5z"/><path fill={color || 'currentColor'} d="M12.5 12.75L14.25 15H16l-2.25-3L16 9h-1.75l-1.75 2.25V9H11v6h1.5z"/>
+  </svg>
+);
+OutlinedIcon9kPlusIcon.displayName = 'OutlinedIcon9kPlusIcon';
+export const Icon9kPlusOutlinedIcon = OutlinedIcon9kPlusIcon;
+
+export const OutlinedAddToQueueIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M11 15h2v-3h3v-2h-3V7h-2v3H8v2h3zM21 3H3c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h5v2h8v-2h5c1.1 0 2-.9 2-2V5a2 2 0 0 0-2-2zm0 14H3V5h18v12z"/>
+  </svg>
+);
+OutlinedAddToQueueIcon.displayName = 'OutlinedAddToQueueIcon';
+export const AddToQueueOutlinedIcon = OutlinedAddToQueueIcon;
+
+export const OutlinedAirplayIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M6 22h12l-6-6z"/><path fill={color || 'currentColor'} d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V5h18v12h-4v2h4c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
+  </svg>
+);
+OutlinedAirplayIcon.displayName = 'OutlinedAirplayIcon';
+export const AirplayOutlinedIcon = OutlinedAirplayIcon;
+
+export const OutlinedAlbumIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8zm0-12.5c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5s4.5-2.01 4.5-4.5s-2.01-4.5-4.5-4.5zm0 5.5c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1z"/>
+  </svg>
+);
+OutlinedAlbumIcon.displayName = 'OutlinedAlbumIcon';
+export const AlbumOutlinedIcon = OutlinedAlbumIcon;
+
+export const OutlinedArtTrackIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M22 13h-8v-2h8v2zm0-6h-8v2h8V7zm-8 10h8v-2h-8v2zm-2-8v6c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V9c0-1.1.9-2 2-2h6c1.1 0 2 .9 2 2zm-1.5 6l-2.25-3l-1.75 2.26l-1.25-1.51L3.5 15h7z"/>
+  </svg>
+);
+OutlinedArtTrackIcon.displayName = 'OutlinedArtTrackIcon';
+export const ArtTrackOutlinedIcon = OutlinedArtTrackIcon;
+
+export const OutlinedAudioFileIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6zm10-9h-4v3.88a2.247 2.247 0 0 0-3.5 1.87c0 1.24 1.01 2.25 2.25 2.25S13 17.99 13 16.75V13h3v-2z"/>
+  </svg>
+);
+OutlinedAudioFileIcon.displayName = 'OutlinedAudioFileIcon';
+export const AudioFileOutlinedIcon = OutlinedAudioFileIcon;
+
+export const OutlinedAvTimerIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M11 17c0 .55.45 1 1 1s1-.45 1-1s-.45-1-1-1s-1 .45-1 1zm0-14v4h2V5.08c3.39.49 6 3.39 6 6.92c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-1.68.59-3.22 1.58-4.42L12 13l1.41-1.41l-6.8-6.8v.02C4.42 6.45 3 9.05 3 12c0 4.97 4.02 9 9 9a9 9 0 0 0 0-18h-1zm7 9c0-.55-.45-1-1-1s-1 .45-1 1s.45 1 1 1s1-.45 1-1zM6 12c0 .55.45 1 1 1s1-.45 1-1s-.45-1-1-1s-1 .45-1 1z"/>
+  </svg>
+);
+OutlinedAvTimerIcon.displayName = 'OutlinedAvTimerIcon';
+export const AvTimerOutlinedIcon = OutlinedAvTimerIcon;
+
+export const OutlinedBrandingWatermarkIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zm-10-7h9v6h-9z"/>
+  </svg>
+);
+OutlinedBrandingWatermarkIcon.displayName = 'OutlinedBrandingWatermarkIcon';
+export const BrandingWatermarkOutlinedIcon = OutlinedBrandingWatermarkIcon;
+
+export const OutlinedCallToActionIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM5 15h14v3H5z"/>
+  </svg>
+);
+OutlinedCallToActionIcon.displayName = 'OutlinedCallToActionIcon';
+export const CallToActionOutlinedIcon = OutlinedCallToActionIcon;
+
+export const OutlinedClosedCaptionIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H5V6h14v12zM7 15h3c.55 0 1-.45 1-1v-1H9.5v.5h-2v-3h2v.5H11v-1c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm7 0h3c.55 0 1-.45 1-1v-1h-1.5v.5h-2v-3h2v.5H18v-1c0-.55-.45-1-1-1h-3c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1z"/>
+  </svg>
+);
+OutlinedClosedCaptionIcon.displayName = 'OutlinedClosedCaptionIcon';
+export const ClosedCaptionOutlinedIcon = OutlinedClosedCaptionIcon;
+
+export const OutlinedClosedCaptionDisabledIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M13 10c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1h-1.5v-.5h-2v1L13 10zm3.5 3.5l1.21 1.21c.18-.19.29-.44.29-.71v-1h-1.5v.5zM8.83 6H19v10.17l1.98 1.98c0-.05.02-.1.02-.16V6c0-1.1-.9-2-2-2H6.83l2 2zm10.95 16.61L17.17 20H5a2 2 0 0 1-2-2V6c0-.05.02-.1.02-.15L1.39 4.22L2.8 2.81l18.38 18.38l-1.4 1.42zM7.5 13.5h2V13h.67l-2.5-2.5H7.5v3zm7.67 4.5L11 13.83V14c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.32.16-.59.4-.78L5 7.83V18h10.17z"/>
+  </svg>
+);
+OutlinedClosedCaptionDisabledIcon.displayName = 'OutlinedClosedCaptionDisabledIcon';
+export const ClosedCaptionDisabledOutlinedIcon = OutlinedClosedCaptionDisabledIcon;
+
+export const OutlinedClosedCaptionOffIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H5V6h14v12z"/><path fill={color || 'currentColor'} d="M7 15h3c.55 0 1-.45 1-1v-1H9.5v.5h-2v-3h2v.5H11v-1c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm7 0h3c.55 0 1-.45 1-1v-1h-1.5v.5h-2v-3h2v.5H18v-1c0-.55-.45-1-1-1h-3c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1z"/>
+  </svg>
+);
+OutlinedClosedCaptionOffIcon.displayName = 'OutlinedClosedCaptionOffIcon';
+export const ClosedCaptionOffOutlinedIcon = OutlinedClosedCaptionOffIcon;
+
+export const OutlinedControlCameraIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M5.54 8.46L2 12l3.54 3.54l1.76-1.77L5.54 12l1.76-1.77zm6.46 10l-1.77-1.76l-1.77 1.76L12 22l3.54-3.54l-1.77-1.76zm6.46-10l-1.76 1.77L18.46 12l-1.76 1.77l1.76 1.77L22 12zm-10-2.92l1.77 1.76L12 5.54l1.77 1.76l1.77-1.76L12 2z"/><circle cx="12" cy="12" r="3"/>
+  </svg>
+);
+OutlinedControlCameraIcon.displayName = 'OutlinedControlCameraIcon';
+export const ControlCameraOutlinedIcon = OutlinedControlCameraIcon;
+
+export const OutlinedEqualizerIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z"/>
+  </svg>
+);
+OutlinedEqualizerIcon.displayName = 'OutlinedEqualizerIcon';
+export const EqualizerOutlinedIcon = OutlinedEqualizerIcon;
+
+export const OutlinedExplicitIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-4-4h-4v-2h4v-2h-4V9h4V7H9v10h6z"/>
+  </svg>
+);
+OutlinedExplicitIcon.displayName = 'OutlinedExplicitIcon';
+export const ExplicitOutlinedIcon = OutlinedExplicitIcon;
+
+export const OutlinedFastForwardIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M15 9.86L18.03 12L15 14.14V9.86m-9 0L9.03 12L6 14.14V9.86M13 6v12l8.5-6L13 6zM4 6v12l8.5-6L4 6z"/>
+  </svg>
+);
+OutlinedFastForwardIcon.displayName = 'OutlinedFastForwardIcon';
+export const FastForwardOutlinedIcon = OutlinedFastForwardIcon;
+
+export const OutlinedFastRewindIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M18 9.86v4.28L14.97 12L18 9.86m-9 0v4.28L5.97 12L9 9.86M20 6l-8.5 6l8.5 6V6zm-9 0l-8.5 6l8.5 6V6z"/>
+  </svg>
+);
+OutlinedFastRewindIcon.displayName = 'OutlinedFastRewindIcon';
+export const FastRewindOutlinedIcon = OutlinedFastRewindIcon;
+
+export const OutlinedFeaturedPlayListIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM5 10h9v2H5zm0-3h9v2H5z"/>
+  </svg>
+);
+OutlinedFeaturedPlayListIcon.displayName = 'OutlinedFeaturedPlayListIcon';
+export const FeaturedPlayListOutlinedIcon = OutlinedFeaturedPlayListIcon;
+
+export const OutlinedFeaturedVideoIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM4 6h9v7H4z"/>
+  </svg>
+);
+OutlinedFeaturedVideoIcon.displayName = 'OutlinedFeaturedVideoIcon';
+export const FeaturedVideoOutlinedIcon = OutlinedFeaturedVideoIcon;
+
+export const OutlinedFiberDvrIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M11.87 12.43l-1-3.43h-1.5l1.75 6h1.5l1.75-6h-1.5zM21 11.5v-1c0-.85-.65-1.5-1.5-1.5H16v6h1.5v-2h1.15l.85 2H21l-.9-2.1c.5-.25.9-.8.9-1.4zm-1.5 0h-2v-1h2v1zM6.5 9H3v6h3.5c.85 0 1.5-.65 1.5-1.5v-3C8 9.65 7.35 9 6.5 9zm0 4.5h-2v-3h2v3z"/>
+  </svg>
+);
+OutlinedFiberDvrIcon.displayName = 'OutlinedFiberDvrIcon';
+export const FiberDvrOutlinedIcon = OutlinedFiberDvrIcon;
+
+export const OutlinedFiberManualRecordIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M12 6c3.31 0 6 2.69 6 6s-2.69 6-6 6s-6-2.69-6-6s2.69-6 6-6m0-2c-4.42 0-8 3.58-8 8s3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8z"/>
+  </svg>
+);
+OutlinedFiberManualRecordIcon.displayName = 'OutlinedFiberManualRecordIcon';
+export const FiberManualRecordOutlinedIcon = OutlinedFiberManualRecordIcon;
+
+export const OutlinedFiberNewIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M7.25 12.5L4.75 9H3.5v6h1.25v-3.5L7.3 15h1.2V9H7.25zM9.5 15h4v-1.25H11v-1.11h2.5v-1.26H11v-1.12h2.5V9h-4zm9.75-6v4.5h-1.12V9.99h-1.25v3.52h-1.13V9H14.5v5c0 .55.45 1 1 1h4c.55 0 1-.45 1-1V9h-1.25z"/>
+  </svg>
+);
+OutlinedFiberNewIcon.displayName = 'OutlinedFiberNewIcon';
+export const FiberNewOutlinedIcon = OutlinedFiberNewIcon;
+
+export const OutlinedFiberPinIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M11 15h1.5V9H11v6zm7.75-6v3.5L16.25 9H15v6h1.25v-3.5L18.8 15H20V9h-1.25zM7.5 9H4v6h1.5v-2h2c.85 0 1.5-.65 1.5-1.5v-1C9 9.65 8.35 9 7.5 9zm0 2.5h-2v-1h2v1z"/>
+  </svg>
+);
+OutlinedFiberPinIcon.displayName = 'OutlinedFiberPinIcon';
+export const FiberPinOutlinedIcon = OutlinedFiberPinIcon;
+
+export const OutlinedFiberSmartRecordIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M9 4c-4.42 0-8 3.58-8 8s3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6s6 2.69 6 6s-2.69 6-6 6zm8-13.74v2.09a5.99 5.99 0 0 1 0 11.3v2.09c3.45-.89 6-4.01 6-7.74c0-3.73-2.55-6.85-6-7.74z"/>
+  </svg>
+);
+OutlinedFiberSmartRecordIcon.displayName = 'OutlinedFiberSmartRecordIcon';
+export const FiberSmartRecordOutlinedIcon = OutlinedFiberSmartRecordIcon;
+
+export const OutlinedForward10Icon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M18 13c0 3.31-2.69 6-6 6s-6-2.69-6-6s2.69-6 6-6v4l5-5l-5-5v4c-4.42 0-8 3.58-8 8s3.58 8 8 8s8-3.58 8-8h-2z"/><path fill={color || 'currentColor'} d="M10.9 16v-4.27h-.09l-1.77.63v.69l1.01-.31V16zm3.42-4.22c-.18-.07-.37-.1-.59-.1s-.41.03-.59.1s-.33.18-.45.33s-.23.34-.29.57s-.1.5-.1.82v.74c0 .32.04.6.11.82s.17.42.3.57s.28.26.46.33s.37.1.59.1s.41-.03.59-.1s.33-.18.45-.33s.22-.34.29-.57s.1-.5.1-.82v-.74c0-.32-.04-.6-.11-.82s-.17-.42-.3-.57s-.29-.26-.46-.33zm.01 2.57c0 .19-.01.35-.04.48s-.06.24-.11.32s-.11.14-.19.17s-.16.05-.25.05s-.18-.02-.25-.05s-.14-.09-.19-.17s-.09-.19-.12-.32s-.04-.29-.04-.48v-.97c0-.19.01-.35.04-.48s.06-.23.12-.31s.11-.14.19-.17s.16-.05.25-.05s.18.02.25.05s.14.09.19.17s.09.18.12.31s.04.29.04.48v.97z"/>
+  </svg>
+);
+OutlinedForward10Icon.displayName = 'OutlinedForward10Icon';
+export const Forward10OutlinedIcon = OutlinedForward10Icon;
+
+export const OutlinedForward30Icon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M18 13c0 3.31-2.69 6-6 6s-6-2.69-6-6s2.69-6 6-6v4l5-5l-5-5v4c-4.42 0-8 3.58-8 8s3.58 8 8 8s8-3.58 8-8h-2zm-7.46 2.22c-.06.05-.12.09-.2.12s-.17.04-.27.04a.69.69 0 0 1-.45-.15c-.06-.05-.1-.1-.13-.17s-.05-.14-.05-.22h-.85c0 .21.04.39.12.55s.19.28.33.38s.29.18.46.23s.35.07.53.07c.21 0 .41-.03.6-.08s.34-.14.48-.24s.24-.24.32-.39s.12-.33.12-.53c0-.23-.06-.44-.18-.61s-.3-.3-.54-.39c.1-.05.2-.1.28-.17s.15-.14.2-.22s.1-.16.13-.25s.04-.18.04-.27c0-.2-.04-.37-.11-.53s-.17-.28-.3-.38s-.28-.18-.46-.23s-.37-.08-.59-.08c-.19 0-.38.03-.54.08s-.32.13-.44.23s-.23.22-.3.37s-.11.3-.11.48h.85a.455.455 0 0 1 .17-.35c.05-.04.11-.07.18-.1s.14-.03.22-.03c.1 0 .18.01.25.04s.13.06.18.11s.08.11.11.17s.04.14.04.22c0 .18-.05.32-.16.43s-.26.16-.48.16h-.43v.66h.45c.11 0 .2.01.29.04s.16.06.22.11s.11.12.14.2s.05.18.05.29c0 .09-.01.17-.04.24s-.08.11-.13.17zm3.9-3.44c-.18-.07-.37-.1-.59-.1s-.41.03-.59.1s-.33.18-.45.33s-.23.34-.29.57s-.1.5-.1.82v.74c0 .32.04.6.11.82s.17.42.3.57s.28.26.46.33s.37.1.59.1s.41-.03.59-.1s.33-.18.45-.33s.22-.34.29-.57s.1-.5.1-.82v-.74c0-.32-.04-.6-.11-.82s-.17-.42-.3-.57s-.28-.26-.46-.33zm.01 2.57c0 .19-.01.35-.04.48s-.06.24-.11.32s-.11.14-.19.17s-.16.05-.25.05s-.18-.02-.25-.05s-.14-.09-.19-.17s-.09-.19-.12-.32s-.04-.29-.04-.48v-.97c0-.19.01-.35.04-.48s.06-.23.12-.31s.11-.14.19-.17s.16-.05.25-.05s.18.02.25.05s.14.09.19.17s.09.18.12.31s.04.29.04.48v.97z"/>
+  </svg>
+);
+OutlinedForward30Icon.displayName = 'OutlinedForward30Icon';
+export const Forward30OutlinedIcon = OutlinedForward30Icon;
+
+export const OutlinedForward5Icon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M17.95 13c0 3.31-2.69 6-6 6s-6-2.69-6-6s2.69-6 6-6v4l5-5l-5-5v4c-4.42 0-8 3.58-8 8s3.58 8 8 8s8-3.58 8-8h-2zm-5.52 2.15c-.05.07-.11.13-.18.17s-.17.06-.27.06c-.17 0-.31-.05-.42-.15s-.17-.24-.19-.41h-.84c.01.2.05.37.13.53s.19.28.32.39s.29.19.46.24s.35.08.53.08c.24 0 .46-.04.64-.12s.33-.18.45-.31s.21-.28.27-.45s.09-.35.09-.54c0-.22-.03-.43-.09-.6s-.14-.33-.25-.45s-.25-.22-.41-.28s-.34-.1-.55-.1c-.07 0-.14.01-.2.02s-.13.02-.18.04s-.1.03-.15.05s-.08.04-.11.05l.11-.92h1.7v-.71H10.9l-.25 2.17l.67.17c.03-.03.06-.06.1-.09s.07-.05.12-.07s.1-.04.15-.05s.13-.02.2-.02c.12 0 .22.02.3.05s.16.09.21.15s.1.14.13.24s.04.19.04.31s-.01.22-.03.31s-.06.17-.11.24z"/>
+  </svg>
+);
+OutlinedForward5Icon.displayName = 'OutlinedForward5Icon';
+export const Forward5OutlinedIcon = OutlinedForward5Icon;
+
+export const OutlinedGamesIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M13 4v2.67l-1 1l-1-1V4h2m7 7v2h-2.67l-1-1l1-1H20M6.67 11l1 1l-1 1H4v-2h2.67M12 16.33l1 1V20h-2v-2.67l1-1M15 2H9v5.5l3 3l3-3V2zm7 7h-5.5l-3 3l3 3H22V9zM7.5 9H2v6h5.5l3-3l-3-3zm4.5 4.5l-3 3V22h6v-5.5l-3-3z"/>
+  </svg>
+);
+OutlinedGamesIcon.displayName = 'OutlinedGamesIcon';
+export const GamesOutlinedIcon = OutlinedGamesIcon;
+
+export const OutlinedHdIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7.5 13h2v2H11V9H9.5v2.5h-2V9H6v6h1.5zM18 14v-4c0-.55-.45-1-1-1h-4v6h4c.55 0 1-.45 1-1zm-1.5-.5h-2v-3h2v3z"/>
+  </svg>
+);
+OutlinedHdIcon.displayName = 'OutlinedHdIcon';
+export const HdOutlinedIcon = OutlinedHdIcon;
+
+export const OutlinedHearingIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M17 20c-.29 0-.56-.06-.76-.15c-.71-.37-1.21-.88-1.71-2.38c-.51-1.56-1.47-2.29-2.39-3c-.79-.61-1.61-1.24-2.32-2.53C9.29 10.98 9 9.93 9 9c0-2.8 2.2-5 5-5s5 2.2 5 5h2c0-3.93-3.07-7-7-7S7 5.07 7 9c0 1.26.38 2.65 1.07 3.9c.91 1.65 1.98 2.48 2.85 3.15c.81.62 1.39 1.07 1.71 2.05c.6 1.82 1.37 2.84 2.73 3.55A3.999 3.999 0 0 0 21 18h-2c0 1.1-.9 2-2 2zM7.64 2.64L6.22 1.22C4.23 3.21 3 5.96 3 9s1.23 5.79 3.22 7.78l1.41-1.41C6.01 13.74 5 11.49 5 9s1.01-4.74 2.64-6.36zM11.5 9a2.5 2.5 0 0 0 5 0a2.5 2.5 0 0 0-5 0z"/>
+  </svg>
+);
+OutlinedHearingIcon.displayName = 'OutlinedHearingIcon';
+export const HearingOutlinedIcon = OutlinedHearingIcon;
+
+export const OutlinedHearingDisabledIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M6.03 3.2C7.15 2.44 8.51 2 10 2c3.93 0 7 3.07 7 7c0 1.26-.38 2.65-1.07 3.9c-.02.04-.05.08-.08.13l-1.48-1.48c.4-.86.63-1.75.63-2.55c0-2.8-2.2-5-5-5c-.92 0-1.76.26-2.5.67L6.03 3.2zm11.18 11.18l1.43 1.43C20.11 13.93 21 11.57 21 9c0-3.04-1.23-5.79-3.22-7.78l-1.42 1.42A8.937 8.937 0 0 1 19 9c0 2.02-.67 3.88-1.79 5.38zM10 6.5c-.21 0-.4.03-.59.08l3.01 3.01c.05-.19.08-.38.08-.59A2.5 2.5 0 0 0 10 6.5zm11.19 14.69L2.81 2.81L1.39 4.22l2.13 2.13C3.19 7.16 3 8.05 3 9h2c0-.36.05-.71.12-1.05l6.61 6.61c-.88.68-1.78 1.41-2.27 2.9c-.5 1.5-1 2.01-1.71 2.38c-.19.1-.46.16-.75.16c-1.1 0-2-.9-2-2H3a3.999 3.999 0 0 0 5.64 3.65c1.36-.71 2.13-1.73 2.73-3.55c.32-.98.9-1.43 1.71-2.05c.03-.02.05-.04.08-.06l6.62 6.62l1.41-1.42z"/>
+  </svg>
+);
+OutlinedHearingDisabledIcon.displayName = 'OutlinedHearingDisabledIcon';
+export const HearingDisabledOutlinedIcon = OutlinedHearingDisabledIcon;
+
+export const OutlinedHighQualityIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H5V6h14v12zM7.5 13h2v2H11V9H9.5v2.5h-2V9H6v6h1.5zm6.5 2h.75v1.5h1.5V15H17c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1h-3c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm.5-4.5h2v3h-2v-3z"/>
+  </svg>
+);
+OutlinedHighQualityIcon.displayName = 'OutlinedHighQualityIcon';
+export const HighQualityOutlinedIcon = OutlinedHighQualityIcon;
+
+export const OutlinedInterpreterModeIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M20.5 16.5c-.83 0-1.5-.67-1.5-1.5v-2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V15c0 .83-.67 1.5-1.5 1.5zM20 20h1v-1.54c1.69-.24 3-1.7 3-3.46h-1a2.5 2.5 0 0 1-5 0h-1c0 1.76 1.31 3.22 3 3.46V20zM9 12c-2.21 0-4-1.79-4-4a3.999 3.999 0 0 1 5.34-3.77A5.938 5.938 0 0 0 9 8c0 1.43.5 2.74 1.34 3.77c-.42.15-.87.23-1.34.23zm-1.89 1.13A4.965 4.965 0 0 0 5 17.22V20H1v-2.78c0-1.12.61-2.15 1.61-2.66c1.24-.64 2.76-1.19 4.5-1.43zM11 8c0-2.21 1.79-4 4-4s4 1.79 4 4s-1.79 4-4 4s-4-1.79-4-4zm2 0c0 1.1.9 2 2 2s2-.9 2-2s-.9-2-2-2s-2 .9-2 2zm2 7c-2.37 0-4.29.73-5.48 1.34c-.32.16-.52.5-.52.88V18h7.17c.5.86 1.25 1.56 2.15 2H7v-2.78c0-1.12.61-2.15 1.61-2.66C10.29 13.7 12.47 13 15 13c.39 0 .77.02 1.14.05c-.33.59-.55 1.26-.62 1.96c-.17-.01-.34-.01-.52-.01z"/>
+  </svg>
+);
+OutlinedInterpreterModeIcon.displayName = 'OutlinedInterpreterModeIcon';
+export const InterpreterModeOutlinedIcon = OutlinedInterpreterModeIcon;
+
+export const OutlinedLibraryAddIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H8V4h12v12zm-7-2h2v-3h3V9h-3V6h-2v3h-3v2h3z"/>
+  </svg>
+);
+OutlinedLibraryAddIcon.displayName = 'OutlinedLibraryAddIcon';
+export const LibraryAddOutlinedIcon = OutlinedLibraryAddIcon;
+
+export const OutlinedLibraryAddCheckIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M20 4v12H8V4h12m0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7.53 12L9 10.5l1.4-1.41l2.07 2.08L17.6 6L19 7.41L12.47 14zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6z"/>
+  </svg>
+);
+OutlinedLibraryAddCheckIcon.displayName = 'OutlinedLibraryAddCheckIcon';
+export const LibraryAddCheckOutlinedIcon = OutlinedLibraryAddCheckIcon;
+
+export const OutlinedLibraryBooksIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H8V4h12v12zM10 9h8v2h-8zm0 3h4v2h-4zm0-6h8v2h-8z"/>
+  </svg>
+);
+OutlinedLibraryBooksIcon.displayName = 'OutlinedLibraryBooksIcon';
+export const LibraryBooksOutlinedIcon = OutlinedLibraryBooksIcon;
+
+export const OutlinedLibraryMusicIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H8V4h12v12zm-7.5-1a2.5 2.5 0 0 0 2.5-2.5V7h3V5h-4v5.51c-.42-.32-.93-.51-1.5-.51a2.5 2.5 0 0 0 0 5zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6z"/>
+  </svg>
+);
+OutlinedLibraryMusicIcon.displayName = 'OutlinedLibraryMusicIcon';
+export const LibraryMusicOutlinedIcon = OutlinedLibraryMusicIcon;
+
+export const OutlinedLoopIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6c0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6c0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4l-4-4v3z"/>
+  </svg>
+);
+OutlinedLoopIcon.displayName = 'OutlinedLoopIcon';
+export const LoopOutlinedIcon = OutlinedLoopIcon;
+
+export const OutlinedLyricsIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M6 6h7v2H6zm0 6h4v2H6z"/><path fill={color || 'currentColor'} d="M15 11.97V16H6l-2 2V4h11v2.03c.52-.69 1.2-1.25 2-1.6V4c0-1.1-.9-2-2-2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h9c1.1 0 2-.9 2-2v-2.42a5.16 5.16 0 0 1-2-1.61z"/><path fill={color || 'currentColor'} d="M6 9h7v2H6zm14-2.82c-.31-.11-.65-.18-1-.18c-1.66 0-3 1.34-3 3s1.34 3 3 3s3-1.34 3-3V3h2V1h-4v5.18z"/>
+  </svg>
+);
+OutlinedLyricsIcon.displayName = 'OutlinedLyricsIcon';
+export const LyricsOutlinedIcon = OutlinedLyricsIcon;
+
+export const OutlinedMicIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/><path fill={color || 'currentColor'} d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
+  </svg>
+);
+OutlinedMicIcon.displayName = 'OutlinedMicIcon';
+export const MicOutlinedIcon = OutlinedMicIcon;
+
+export const OutlinedMicNoneIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5zm6 6c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
+  </svg>
+);
+OutlinedMicNoneIcon.displayName = 'OutlinedMicNoneIcon';
+export const MicNoneOutlinedIcon = OutlinedMicNoneIcon;
+
+export const OutlinedMicOffIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M10.8 4.9c0-.66.54-1.2 1.2-1.2s1.2.54 1.2 1.2l-.01 3.91L15 10.6V5c0-1.66-1.34-3-3-3c-1.54 0-2.79 1.16-2.96 2.65l1.76 1.76V4.9zM19 11h-1.7c0 .58-.1 1.13-.27 1.64l1.27 1.27c.44-.88.7-1.87.7-2.91zM4.41 2.86L3 4.27l6 6V11c0 1.66 1.34 3 3 3c.23 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52c-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28a7.13 7.13 0 0 0 2.55-.9l4.2 4.2l1.41-1.41L4.41 2.86z"/>
+  </svg>
+);
+OutlinedMicOffIcon.displayName = 'OutlinedMicOffIcon';
+export const MicOffOutlinedIcon = OutlinedMicOffIcon;
+
+export const OutlinedMissedVideoCallIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4zm-2-1.83V16H5V8h10v.67zm-7.89 2.44L11 15l3.77-3.79l-.78-.79L11 13.43l-3.11-3.1h2.55V9.22H6v4.44h1.11z"/>
+  </svg>
+);
+OutlinedMissedVideoCallIcon.displayName = 'OutlinedMissedVideoCallIcon';
+export const MissedVideoCallOutlinedIcon = OutlinedMissedVideoCallIcon;
+
+export const OutlinedMovieIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M4 6.47L5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4z"/>
+  </svg>
+);
+OutlinedMovieIcon.displayName = 'OutlinedMovieIcon';
+export const MovieOutlinedIcon = OutlinedMovieIcon;
+
+export const OutlinedMusicVideoIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3c.35 0 .69.07 1 .18V6h5v2h-3v7.03A3.003 3.003 0 0 1 11 18c-1.66 0-3-1.34-3-3z"/>
+  </svg>
+);
+OutlinedMusicVideoIcon.displayName = 'OutlinedMusicVideoIcon';
+export const MusicVideoOutlinedIcon = OutlinedMusicVideoIcon;
+
+export const OutlinedNewReleasesIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M23 12l-2.44-2.78l.34-3.68l-3.61-.82l-1.89-3.18L12 3L8.6 1.54L6.71 4.72l-3.61.81l.34 3.68L1 12l2.44 2.78l-.34 3.69l3.61.82l1.89 3.18L12 21l3.4 1.46l1.89-3.18l3.61-.82l-.34-3.68L23 12zm-4.51 2.11l.26 2.79l-2.74.62l-1.43 2.41L12 18.82l-2.58 1.11l-1.43-2.41l-2.74-.62l.26-2.8L3.66 12l1.85-2.12l-.26-2.78l2.74-.61l1.43-2.41L12 5.18l2.58-1.11l1.43 2.41l2.74.62l-.26 2.79L20.34 12l-1.85 2.11zM11 15h2v2h-2zm0-8h2v6h-2z"/>
+  </svg>
+);
+OutlinedNewReleasesIcon.displayName = 'OutlinedNewReleasesIcon';
+export const NewReleasesOutlinedIcon = OutlinedNewReleasesIcon;
+
+export const OutlinedNotInterestedIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8c0-1.85.63-3.55 1.69-4.9L16.9 18.31A7.902 7.902 0 0 1 12 20zm6.31-3.1L7.1 5.69A7.902 7.902 0 0 1 12 4c4.42 0 8 3.58 8 8c0 1.85-.63 3.55-1.69 4.9z"/>
+  </svg>
+);
+OutlinedNotInterestedIcon.displayName = 'OutlinedNotInterestedIcon';
+export const NotInterestedOutlinedIcon = OutlinedNotInterestedIcon;
+
+export const OutlinedNoteIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M16 4H4c-1.1 0-2 .9-2 2v12.01c0 1.1.9 1.99 2 1.99h16c1.1 0 2-.9 2-2v-8l-6-6zM4 18.01V6h11v5h5v7.01H4z"/>
+  </svg>
+);
+OutlinedNoteIcon.displayName = 'OutlinedNoteIcon';
+export const NoteOutlinedIcon = OutlinedNoteIcon;
+
+export const OutlinedPauseIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
+  </svg>
+);
+OutlinedPauseIcon.displayName = 'OutlinedPauseIcon';
+export const PauseOutlinedIcon = OutlinedPauseIcon;
+
+export const OutlinedPauseCircleIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M9 16h2V8H9v8zm3-14C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8zm1-4h2V8h-2v8z"/>
+  </svg>
+);
+OutlinedPauseCircleIcon.displayName = 'OutlinedPauseCircleIcon';
+export const PauseCircleOutlinedIcon = OutlinedPauseCircleIcon;
+
+export const OutlinedPauseCircleFilledIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"/>
+  </svg>
+);
+OutlinedPauseCircleFilledIcon.displayName = 'OutlinedPauseCircleFilledIcon';
+export const PauseCircleFilledOutlinedIcon = OutlinedPauseCircleFilledIcon;
+
+export const OutlinedPauseCircleOutlineIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M9 16h2V8H9v8zm3-14C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8zm1-4h2V8h-2v8z"/>
+  </svg>
+);
+OutlinedPauseCircleOutlineIcon.displayName = 'OutlinedPauseCircleOutlineIcon';
+export const PauseCircleOutlineOutlinedIcon = OutlinedPauseCircleOutlineIcon;
+
+export const OutlinedPlayArrowIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M10 8.64L15.27 12L10 15.36V8.64M8 5v14l11-7L8 5z"/>
+  </svg>
+);
+OutlinedPlayArrowIcon.displayName = 'OutlinedPlayArrowIcon';
+export const PlayArrowOutlinedIcon = OutlinedPlayArrowIcon;
+
+export const OutlinedPlayCircleIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8zm-2.5-3.5l7-4.5l-7-4.5v9z"/>
+  </svg>
+);
+OutlinedPlayCircleIcon.displayName = 'OutlinedPlayCircleIcon';
+export const PlayCircleOutlinedIcon = OutlinedPlayCircleIcon;
+
+export const OutlinedPlayCircleFilledIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5l-6 4.5z"/>
+  </svg>
+);
+OutlinedPlayCircleFilledIcon.displayName = 'OutlinedPlayCircleFilledIcon';
+export const PlayCircleFilledOutlinedIcon = OutlinedPlayCircleFilledIcon;
+
+export const OutlinedPlayCircleFilledWhiteIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8zm-2-3.5l6-4.5l-6-4.5z"/>
+  </svg>
+);
+OutlinedPlayCircleFilledWhiteIcon.displayName = 'OutlinedPlayCircleFilledWhiteIcon';
+export const PlayCircleFilledWhiteOutlinedIcon = OutlinedPlayCircleFilledWhiteIcon;
+
+export const OutlinedPlayCircleOutlineIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M10 16.5l6-4.5l-6-4.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8z"/>
+  </svg>
+);
+OutlinedPlayCircleOutlineIcon.displayName = 'OutlinedPlayCircleOutlineIcon';
+export const PlayCircleOutlineOutlinedIcon = OutlinedPlayCircleOutlineIcon;
+
+export const OutlinedPlayDisabledIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M16.45 13.62L19 12L8 5v.17zM2.81 2.81L1.39 4.22L8 10.83V19l4.99-3.18l6.78 6.78l1.41-1.41L2.81 2.81zM10 15.36v-2.53l1.55 1.55l-1.55.98z"/>
+  </svg>
+);
+OutlinedPlayDisabledIcon.displayName = 'OutlinedPlayDisabledIcon';
+export const PlayDisabledOutlinedIcon = OutlinedPlayDisabledIcon;
+
+export const OutlinedPlaylistAddIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M14 10H3v2h11v-2zm0-4H3v2h11V6zm4 8v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM3 16h7v-2H3v2z"/>
+  </svg>
+);
+OutlinedPlaylistAddIcon.displayName = 'OutlinedPlaylistAddIcon';
+export const PlaylistAddOutlinedIcon = OutlinedPlaylistAddIcon;
+
+export const OutlinedPlaylistAddCheckIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M3 10h11v2H3zm0-4h11v2H3zm0 8h7v2H3zm17.59-2.07l-4.25 4.24l-2.12-2.12l-1.41 1.41L16.34 19L22 13.34z"/>
+  </svg>
+);
+OutlinedPlaylistAddCheckIcon.displayName = 'OutlinedPlaylistAddCheckIcon';
+export const PlaylistAddCheckOutlinedIcon = OutlinedPlaylistAddCheckIcon;
+
+export const OutlinedPlaylistAddCheckCircleIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8s-8-3.59-8-8s3.59-8 8-8zm0-2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm2 8H7v2h7v-2zm0-3H7v2h7V7zm-7 8h3v-2H7v2zm12-1.59L17.59 12l-3.54 3.54l-1.41-1.41l-1.41 1.41l2.83 2.83L19 13.41z"/>
+  </svg>
+);
+OutlinedPlaylistAddCheckCircleIcon.displayName = 'OutlinedPlaylistAddCheckCircleIcon';
+export const PlaylistAddCheckCircleOutlinedIcon = OutlinedPlaylistAddCheckCircleIcon;
+
+export const OutlinedPlaylistAddCircleIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8zm2-10H7v2h7v-2zm0-3H7v2h7V7zm-7 8h3v-2H7v2zm12-2v2h-2v2h-2v-2h-2v-2h2v-2h2v2h2z"/>
+  </svg>
+);
+OutlinedPlaylistAddCircleIcon.displayName = 'OutlinedPlaylistAddCircleIcon';
+export const PlaylistAddCircleOutlinedIcon = OutlinedPlaylistAddCircleIcon;
+
+export const OutlinedPlaylistPlayIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M3 10h11v2H3zm0-4h11v2H3zm0 8h7v2H3zm13-1v8l6-4z"/>
+  </svg>
+);
+OutlinedPlaylistPlayIcon.displayName = 'OutlinedPlaylistPlayIcon';
+export const PlaylistPlayOutlinedIcon = OutlinedPlaylistPlayIcon;
+
+export const OutlinedPlaylistRemoveIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M14 10H3v2h11v-2zm0-4H3v2h11V6zM3 16h7v-2H3v2zm11.41 6L17 19.41L19.59 22L21 20.59L18.41 18L21 15.41L19.59 14L17 16.59L14.41 14L13 15.41L15.59 18L13 20.59L14.41 22z"/>
+  </svg>
+);
+OutlinedPlaylistRemoveIcon.displayName = 'OutlinedPlaylistRemoveIcon';
+export const PlaylistRemoveOutlinedIcon = OutlinedPlaylistRemoveIcon;
+
+export const OutlinedQueueIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H8V4h12v12zm-7-1h2v-4h4V9h-4V5h-2v4H9v2h4z"/>
+  </svg>
+);
+OutlinedQueueIcon.displayName = 'OutlinedQueueIcon';
+export const QueueOutlinedIcon = OutlinedQueueIcon;
+
+export const OutlinedQueueMusicIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M22 6h-5v8.18c-.31-.11-.65-.18-1-.18c-1.66 0-3 1.34-3 3s1.34 3 3 3s3-1.34 3-3V8h3V6zm-7 0H3v2h12V6zm0 4H3v2h12v-2zm-4 4H3v2h8v-2z"/>
+  </svg>
+);
+OutlinedQueueMusicIcon.displayName = 'OutlinedQueueMusicIcon';
+export const QueueMusicOutlinedIcon = OutlinedQueueMusicIcon;
+
+export const OutlinedQueuePlayNextIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M21 3H3c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h5v2h8v-2h2v-2H3V5h18v8h2V5a2 2 0 0 0-2-2zm-8 7V7h-2v3H8v2h3v3h2v-3h3v-2h-3zm11 8l-4.5 4.5L18 21l3-3l-3-3l1.5-1.5L24 18z"/>
+  </svg>
+);
+OutlinedQueuePlayNextIcon.displayName = 'OutlinedQueuePlayNextIcon';
+export const QueuePlayNextOutlinedIcon = OutlinedQueuePlayNextIcon;
+
+export const OutlinedRadioIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M20 6H8.3l8.26-3.34L15.88 1L3.24 6.15C2.51 6.43 2 7.17 2 8v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8c0-1.11-.89-2-2-2zm0 2v3h-2V9h-2v2H4V8h16zM4 20v-7h16v7H4z"/><circle cx="8" cy="16.48" r="2.5"/>
+  </svg>
+);
+OutlinedRadioIcon.displayName = 'OutlinedRadioIcon';
+export const RadioOutlinedIcon = OutlinedRadioIcon;
+
+export const OutlinedRecentActorsIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M21 5h2v14h-2zm-4 0h2v14h-2zm-3 0H2c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm-1 12H3V7h10v10z"/><circle cx="8" cy="9.94" r="1.95"/><path fill={color || 'currentColor'} d="M11.89 15.35c0-1.3-2.59-1.95-3.89-1.95s-3.89.65-3.89 1.95V16h7.78v-.65z"/>
+  </svg>
+);
+OutlinedRecentActorsIcon.displayName = 'OutlinedRecentActorsIcon';
+export const RecentActorsOutlinedIcon = OutlinedRecentActorsIcon;
+
+export const OutlinedRemoveFromQueueIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M21 3H3c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h5v2h8v-2h5c1.1 0 2-.9 2-2V5a2 2 0 0 0-2-2zm0 14H3V5h18v12zm-5-7v2H8v-2h8z"/>
+  </svg>
+);
+OutlinedRemoveFromQueueIcon.displayName = 'OutlinedRemoveFromQueueIcon';
+export const RemoveFromQueueOutlinedIcon = OutlinedRemoveFromQueueIcon;
+
+export const OutlinedRepeatIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M7 7h10v3l4-4l-4-4v3H5v6h2V7zm10 10H7v-3l-4 4l4 4v-3h12v-6h-2v4z"/>
+  </svg>
+);
+OutlinedRepeatIcon.displayName = 'OutlinedRepeatIcon';
+export const RepeatOutlinedIcon = OutlinedRepeatIcon;
+
+export const OutlinedRepeatOnIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M21 1H3c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm-2 18H6.83l1.58 1.58L7 22l-4-4l4-4l1.41 1.42L6.83 17H17v-4h2v6zm-2-9l-1.41-1.42L17.17 7H7v4H5V5h12.17l-1.58-1.58L17 2l4 4l-4 4z"/>
+  </svg>
+);
+OutlinedRepeatOnIcon.displayName = 'OutlinedRepeatOnIcon';
+export const RepeatOnOutlinedIcon = OutlinedRepeatOnIcon;
+
+export const OutlinedRepeatOneIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M7 7h10v3l4-4l-4-4v3H5v6h2V7zm10 10H7v-3l-4 4l4 4v-3h12v-6h-2v4zm-4-2V9h-1l-2 1v1h1.5v4H13z"/>
+  </svg>
+);
+OutlinedRepeatOneIcon.displayName = 'OutlinedRepeatOneIcon';
+export const RepeatOneOutlinedIcon = OutlinedRepeatOneIcon;
+
+export const OutlinedRepeatOneOnIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M21 1H3c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm-2 18H6.83l1.58 1.58L7 22l-4-4l4-4l1.41 1.42L6.83 17H17v-4h2v6zm-9-8.5V9h3v6h-1.5v-4.5H10zm7-.5l-1.41-1.42L17.17 7H7v4H5V5h12.17l-1.58-1.58L17 2l4 4l-4 4z"/>
+  </svg>
+);
+OutlinedRepeatOneOnIcon.displayName = 'OutlinedRepeatOneOnIcon';
+export const RepeatOneOnOutlinedIcon = OutlinedRepeatOneOnIcon;
+
+export const OutlinedReplayIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6s-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8z"/>
+  </svg>
+);
+OutlinedReplayIcon.displayName = 'OutlinedReplayIcon';
+export const ReplayOutlinedIcon = OutlinedReplayIcon;
+
+export const OutlinedReplay10Icon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M11.99 5V1l-5 5l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6s-6-2.69-6-6h-2c0 4.42 3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8zm-1.1 11h-.85v-3.26l-1.01.31v-.69l1.77-.63h.09V16zm4.28-1.76c0 .32-.03.6-.1.82s-.17.42-.29.57s-.28.26-.45.33s-.37.1-.59.1s-.41-.03-.59-.1s-.33-.18-.46-.33s-.23-.34-.3-.57s-.11-.5-.11-.82v-.74c0-.32.03-.6.1-.82s.17-.42.29-.57s.28-.26.45-.33s.37-.1.59-.1s.41.03.59.1s.33.18.46.33s.23.34.3.57s.11.5.11.82v.74zm-.85-.86c0-.19-.01-.35-.04-.48s-.07-.23-.12-.31s-.11-.14-.19-.17s-.16-.05-.25-.05s-.18.02-.25.05s-.14.09-.19.17s-.09.18-.12.31s-.04.29-.04.48v.97c0 .19.01.35.04.48s.07.24.12.32s.11.14.19.17s.16.05.25.05s.18-.02.25-.05s.14-.09.19-.17s.09-.19.11-.32s.04-.29.04-.48v-.97z"/>
+  </svg>
+);
+OutlinedReplay10Icon.displayName = 'OutlinedReplay10Icon';
+export const Replay10OutlinedIcon = OutlinedReplay10Icon;
+
+export const OutlinedReplay30Icon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6s-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8zm-2.44 8.49h.45c.21 0 .37-.05.48-.16s.16-.25.16-.43a.538.538 0 0 0-.15-.39c-.05-.05-.11-.09-.18-.11s-.16-.04-.25-.04c-.08 0-.15.01-.22.03s-.13.05-.18.1s-.09.09-.12.15s-.05.13-.05.2h-.85a1.06 1.06 0 0 1 .41-.85c.13-.1.27-.18.44-.23s.35-.08.54-.08c.21 0 .41.03.59.08s.33.13.46.23s.23.23.3.38s.11.33.11.53a.842.842 0 0 1-.17.52a1.1 1.1 0 0 1-.48.39c.24.09.42.21.54.39s.18.38.18.61c0 .2-.04.38-.12.53s-.18.29-.32.39s-.29.19-.48.24s-.38.08-.6.08c-.18 0-.36-.02-.53-.07s-.33-.12-.46-.23s-.25-.23-.33-.38s-.12-.34-.12-.55h.85c0 .08.02.15.05.22s.07.12.13.17s.12.09.2.11s.16.04.25.04c.1 0 .19-.01.27-.04s.15-.07.2-.12s.1-.11.13-.18s.04-.15.04-.24c0-.11-.02-.21-.05-.29s-.08-.15-.14-.2s-.13-.09-.22-.11s-.18-.04-.29-.04h-.47v-.65zm5.74.75c0 .32-.03.6-.1.82s-.17.42-.29.57s-.28.26-.45.33s-.37.1-.59.1s-.41-.03-.59-.1s-.33-.18-.46-.33s-.23-.34-.3-.57s-.11-.5-.11-.82v-.74c0-.32.03-.6.1-.82s.17-.42.29-.57s.28-.26.45-.33s.37-.1.59-.1s.41.03.59.1s.33.18.46.33s.23.34.3.57s.11.5.11.82v.74zm-.85-.86c0-.19-.01-.35-.04-.48s-.07-.23-.12-.31s-.11-.14-.19-.17s-.16-.05-.25-.05s-.18.02-.25.05s-.14.09-.19.17s-.09.18-.12.31s-.04.29-.04.48v.97c0 .19.01.35.04.48s.07.24.12.32s.11.14.19.17s.16.05.25.05s.18-.02.25-.05s.14-.09.19-.17s.09-.19.11-.32c.03-.13.04-.29.04-.48v-.97z"/>
+  </svg>
+);
+OutlinedReplay30Icon.displayName = 'OutlinedReplay30Icon';
+export const Replay30OutlinedIcon = OutlinedReplay30Icon;
+
+export const OutlinedReplay5Icon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6s-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8zm-1.31 8.9l.25-2.17h2.39v.71h-1.7l-.11.92c.03-.02.07-.03.11-.05s.09-.04.15-.05s.12-.03.18-.04s.13-.02.2-.02c.21 0 .39.03.55.1s.3.16.41.28s.2.27.25.45s.09.38.09.6c0 .19-.03.37-.09.54s-.15.32-.27.45s-.27.24-.45.31s-.39.12-.64.12c-.18 0-.36-.03-.53-.08s-.32-.14-.46-.24s-.24-.24-.32-.39s-.13-.33-.13-.53h.84c.02.18.08.32.19.41s.25.15.42.15a.49.49 0 0 0 .45-.23c.04-.07.08-.15.11-.25s.03-.2.03-.31s-.01-.21-.04-.31s-.07-.17-.13-.24s-.13-.12-.21-.15s-.19-.05-.3-.05c-.08 0-.15.01-.2.02s-.11.03-.15.05s-.08.05-.12.07s-.07.06-.1.09l-.67-.16z"/>
+  </svg>
+);
+OutlinedReplay5Icon.displayName = 'OutlinedReplay5Icon';
+export const Replay5OutlinedIcon = OutlinedReplay5Icon;
+
+export const OutlinedReplayCircleFilledIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 16.5c-3.31 0-6-2.69-6-6h2c0 2.21 1.79 4 4 4s4-1.79 4-4c0-2.24-1.85-4.09-4.16-3.99l1.57 1.57L12 11.5l-4-4l4-4l1.41 1.41l-1.6 1.6C15.28 6.4 18 9.18 18 12.5c0 3.31-2.69 6-6 6z"/>
+  </svg>
+);
+OutlinedReplayCircleFilledIcon.displayName = 'OutlinedReplayCircleFilledIcon';
+export const ReplayCircleFilledOutlinedIcon = OutlinedReplayCircleFilledIcon;
+
+export const OutlinedSdIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M7 15h3c.55 0 1-.45 1-1v-1.5c0-.55-.45-1-1-1H7.5v-1h2v.5H11v-1c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v1.5c0 .55.45 1 1 1h2.5v1h-2V13H6v1c0 .55.45 1 1 1zm11-1v-4c0-.55-.45-1-1-1h-4v6h4c.55 0 1-.45 1-1zm-1.5-.5h-2v-3h2v3z"/><path fill={color || 'currentColor'} d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V6h16v12z"/>
+  </svg>
+);
+OutlinedSdIcon.displayName = 'OutlinedSdIcon';
+export const SdOutlinedIcon = OutlinedSdIcon;
+
+export const OutlinedShuffleIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M10.59 9.17L5.41 4L4 5.41l5.17 5.17l1.42-1.41zM14.5 4l2.04 2.04L4 18.59L5.41 20L17.96 7.46L20 9.5V4h-5.5zm.33 9.41l-1.41 1.41l3.13 3.13L14.5 20H20v-5.5l-2.04 2.04l-3.13-3.13z"/>
+  </svg>
+);
+OutlinedShuffleIcon.displayName = 'OutlinedShuffleIcon';
+export const ShuffleOutlinedIcon = OutlinedShuffleIcon;
+
+export const OutlinedShuffleOnIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M21 1H3c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zM5.41 4l5.18 5.17l-1.41 1.42L4 5.42L5.41 4zM20 20h-6v-2h2.61l-3.2-3.2l1.42-1.42l3.13 3.13l.04.04V14h2v6zm0-10h-2V7.42L5.41 20L4 18.59L16.58 6H14V4h6v6z"/>
+  </svg>
+);
+OutlinedShuffleOnIcon.displayName = 'OutlinedShuffleOnIcon';
+export const ShuffleOnOutlinedIcon = OutlinedShuffleOnIcon;
+
+export const OutlinedSkipNextIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M6 18l8.5-6L6 6v12zm2-8.14L11.03 12L8 14.14V9.86zM16 6h2v12h-2z"/>
+  </svg>
+);
+OutlinedSkipNextIcon.displayName = 'OutlinedSkipNextIcon';
+export const SkipNextOutlinedIcon = OutlinedSkipNextIcon;
+
+export const OutlinedSkipPreviousIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M6 6h2v12H6zm3.5 6l8.5 6V6l-8.5 6zm6.5 2.14L12.97 12L16 9.86v4.28z"/>
+  </svg>
+);
+OutlinedSkipPreviousIcon.displayName = 'OutlinedSkipPreviousIcon';
+export const SkipPreviousOutlinedIcon = OutlinedSkipPreviousIcon;
+
+export const OutlinedSlowMotionVideoIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M13.05 9.79L10 7.5v9l3.05-2.29L16 12l-2.95-2.21zm0 0L10 7.5v9l3.05-2.29L16 12l-2.95-2.21zm0 0L10 7.5v9l3.05-2.29L16 12l-2.95-2.21zM11 4.07V2.05c-2.01.2-3.84 1-5.32 2.21L7.1 5.69A7.941 7.941 0 0 1 11 4.07zM5.69 7.1L4.26 5.68A9.949 9.949 0 0 0 2.05 11h2.02c.18-1.46.76-2.79 1.62-3.9zM4.07 13H2.05c.2 2.01 1 3.84 2.21 5.32l1.43-1.43A7.868 7.868 0 0 1 4.07 13zm1.61 6.74A9.981 9.981 0 0 0 11 21.95v-2.02a7.941 7.941 0 0 1-3.9-1.62l-1.42 1.43zM22 12c0 5.16-3.92 9.42-8.95 9.95v-2.02C16.97 19.41 20 16.05 20 12s-3.03-7.41-6.95-7.93V2.05C18.08 2.58 22 6.84 22 12z"/>
+  </svg>
+);
+OutlinedSlowMotionVideoIcon.displayName = 'OutlinedSlowMotionVideoIcon';
+export const SlowMotionVideoOutlinedIcon = OutlinedSlowMotionVideoIcon;
+
+export const OutlinedSnoozeIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M9 11h3.63L9 15.2V17h6v-2h-3.63L15 10.8V9H9v2zm7.056-7.654l1.282-1.535l4.607 3.85l-1.28 1.54zM3.336 7.19l-1.28-1.536L6.662 1.81l1.28 1.536zM12 6c3.86 0 7 3.14 7 7s-3.14 7-7 7s-7-3.14-7-7s3.14-7 7-7m0-2a9 9 0 1 0 .001 18.001A9 9 0 0 0 12 4z"/>
+  </svg>
+);
+OutlinedSnoozeIcon.displayName = 'OutlinedSnoozeIcon';
+export const SnoozeOutlinedIcon = OutlinedSnoozeIcon;
+
+export const OutlinedSortByAlphaIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M14.94 4.66h-4.72l2.36-2.36l2.36 2.36zm-4.69 14.71h4.66l-2.33 2.33l-2.33-2.33zM6.1 6.27L1.6 17.73h1.84l.92-2.45h5.11l.92 2.45h1.84L7.74 6.27H6.1zm-1.13 7.37l1.94-5.18l1.94 5.18H4.97zm10.76 2.5h6.12v1.59h-8.53v-1.29l5.92-8.56h-5.88v-1.6h8.3v1.26l-5.93 8.6z"/>
+  </svg>
+);
+OutlinedSortByAlphaIcon.displayName = 'OutlinedSortByAlphaIcon';
+export const SortByAlphaOutlinedIcon = OutlinedSortByAlphaIcon;
+
+export const OutlinedSpeedIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M20.38 8.57l-1.23 1.85a8 8 0 0 1-.22 7.58H5.07A8 8 0 0 1 15.58 6.85l1.85-1.23A10 10 0 0 0 3.35 19a2 2 0 0 0 1.72 1h13.85a2 2 0 0 0 1.74-1a10 10 0 0 0-.27-10.44z"/><path fill={color || 'currentColor'} d="M10.59 15.41a2 2 0 0 0 2.83 0l5.66-8.49l-8.49 5.66a2 2 0 0 0 0 2.83z"/>
+  </svg>
+);
+OutlinedSpeedIcon.displayName = 'OutlinedSpeedIcon';
+export const SpeedOutlinedIcon = OutlinedSpeedIcon;
+
+export const OutlinedStopIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M16 8v8H8V8h8m2-2H6v12h12V6z"/>
+  </svg>
+);
+OutlinedStopIcon.displayName = 'OutlinedStopIcon';
+export const StopOutlinedIcon = OutlinedStopIcon;
+
+export const OutlinedStopCircleIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8zm4-4H8V8h8v8z"/>
+  </svg>
+);
+OutlinedStopCircleIcon.displayName = 'OutlinedStopCircleIcon';
+export const StopCircleOutlinedIcon = OutlinedStopCircleIcon;
+
+export const OutlinedSubscriptionsIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M4 6h16v2H4zm2-4h12v2H6zm14 8H4c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2zm0 10H4v-8h16v8zm-10-7.27v6.53L16 16z"/>
+  </svg>
+);
+OutlinedSubscriptionsIcon.displayName = 'OutlinedSubscriptionsIcon';
+export const SubscriptionsOutlinedIcon = OutlinedSubscriptionsIcon;
+
+export const OutlinedSubtitlesIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V6h16v12zM6 10h2v2H6zm0 4h8v2H6zm10 0h2v2h-2zm-6-4h8v2h-8z"/>
+  </svg>
+);
+OutlinedSubtitlesIcon.displayName = 'OutlinedSubtitlesIcon';
+export const SubtitlesOutlinedIcon = OutlinedSubtitlesIcon;
+
+export const OutlinedSurroundSoundIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V6h16v12z"/><path fill={color || 'currentColor'} d="M8.29 15.71A5.233 5.233 0 0 1 6.75 12c0-1.35.52-2.69 1.53-3.72L7.05 7.05C5.68 8.41 5 10.21 5 12s.68 3.59 2.06 4.94l1.23-1.23zM12 15.5c1.93 0 3.5-1.57 3.5-3.5S13.93 8.5 12 8.5S8.5 10.07 8.5 12s1.57 3.5 3.5 3.5zm0-5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5zm3.72 5.22l1.23 1.23C18.32 15.59 19 13.79 19 12s-.68-3.59-2.06-4.94l-1.23 1.23A5.233 5.233 0 0 1 17.25 12c0 1.35-.52 2.69-1.53 3.72z"/>
+  </svg>
+);
+OutlinedSurroundSoundIcon.displayName = 'OutlinedSurroundSoundIcon';
+export const SurroundSoundOutlinedIcon = OutlinedSurroundSoundIcon;
+
+export const OutlinedVideoCallIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4zM15 16H5V8h10v8zm-6-1h2v-2h2v-2h-2V9H9v2H7v2h2z"/>
+  </svg>
+);
+OutlinedVideoCallIcon.displayName = 'OutlinedVideoCallIcon';
+export const VideoCallOutlinedIcon = OutlinedVideoCallIcon;
+
+export const OutlinedVideoFileIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6zm8-6l2-1.06v4.12L14 16v1c0 .55-.45 1-1 1H9c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h4c.55 0 1 .45 1 1v1z"/>
+  </svg>
+);
+OutlinedVideoFileIcon.displayName = 'OutlinedVideoFileIcon';
+export const VideoFileOutlinedIcon = OutlinedVideoFileIcon;
+
+export const OutlinedVideoLabelIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 13H3V5h18v11z"/>
+  </svg>
+);
+OutlinedVideoLabelIcon.displayName = 'OutlinedVideoLabelIcon';
+export const VideoLabelOutlinedIcon = OutlinedVideoLabelIcon;
+
+export const OutlinedVideoLibraryIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H8V4h12v12zM12 5.5v9l6-4.5z"/>
+  </svg>
+);
+OutlinedVideoLibraryIcon.displayName = 'OutlinedVideoLibraryIcon';
+export const VideoLibraryOutlinedIcon = OutlinedVideoLibraryIcon;
+
+export const OutlinedVideoSettingsIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M3 6h18v5h2V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h9v-2H3V6z"/><path fill={color || 'currentColor'} d="M15 12L9 8v8zm7.71 6.43c.03-.29.04-.58.01-.86l1.07-.85c.1-.08.12-.21.06-.32l-1.03-1.79c-.06-.11-.19-.15-.31-.11l-1.28.5a3.44 3.44 0 0 0-.75-.42l-.2-1.36a.249.249 0 0 0-.25-.22h-2.07c-.12 0-.23.09-.25.21l-.2 1.36c-.26.11-.51.26-.74.42l-1.28-.5c-.12-.05-.25 0-.31.11l-1.03 1.79c-.06.11-.04.24.06.32l1.07.86c-.03.29-.04.58-.01.86l-1.07.85c-.1.08-.12.21-.06.32l1.03 1.79c.06.11.19.15.31.11l1.27-.5c.23.17.48.31.75.42l.2 1.36c.02.12.12.21.25.21h2.07c.12 0 .23-.09.25-.21l.2-1.36c.26-.11.51-.26.74-.42l1.28.5c.12.05.25 0 .31-.11l1.03-1.79c.06-.11.04-.24-.06-.32l-1.06-.85zM19 19.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5s1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/>
+  </svg>
+);
+OutlinedVideoSettingsIcon.displayName = 'OutlinedVideoSettingsIcon';
+export const VideoSettingsOutlinedIcon = OutlinedVideoSettingsIcon;
+
+export const OutlinedVideocamIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M15 8v8H5V8h10m1-2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4V7c0-.55-.45-1-1-1z"/>
+  </svg>
+);
+OutlinedVideocamIcon.displayName = 'OutlinedVideocamIcon';
+export const VideocamOutlinedIcon = OutlinedVideocamIcon;
+
+export const OutlinedVideocamOffIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M9.56 8l-2-2l-4.15-4.14L2 3.27L4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.55-.18L19.73 21l1.41-1.41l-8.86-8.86L9.56 8zM5 16V8h1.73l8 8H5zm10-8v2.61l6 6V6.5l-4 4V7c0-.55-.45-1-1-1h-5.61l2 2H15z"/>
+  </svg>
+);
+OutlinedVideocamOffIcon.displayName = 'OutlinedVideocamOffIcon';
+export const VideocamOffOutlinedIcon = OutlinedVideocamOffIcon;
+
+export const OutlinedVolumeDownIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M16 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02A4.5 4.5 0 0 0 16 7.97zM5 9v6h4l5 5V4L9 9H5zm7-.17v6.34L9.83 13H7v-2h2.83L12 8.83z"/>
+  </svg>
+);
+OutlinedVolumeDownIcon.displayName = 'OutlinedVolumeDownIcon';
+export const VolumeDownOutlinedIcon = OutlinedVolumeDownIcon;
+
+export const OutlinedVolumeMuteIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M14 8.83v6.34L11.83 13H9v-2h2.83L14 8.83M16 4l-5 5H7v6h4l5 5V4z"/>
+  </svg>
+);
+OutlinedVolumeMuteIcon.displayName = 'OutlinedVolumeMuteIcon';
+export const VolumeMuteOutlinedIcon = OutlinedVolumeMuteIcon;
+
+export const OutlinedVolumeOffIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M4.34 2.93L2.93 4.34L7.29 8.7L7 9H3v6h4l5 5v-6.59l4.18 4.18c-.65.49-1.38.88-2.18 1.11v2.06a8.94 8.94 0 0 0 3.61-1.75l2.05 2.05l1.41-1.41L4.34 2.93zM10 15.17L7.83 13H5v-2h2.83l.88-.88L10 11.41v3.76zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zm-7-8l-1.88 1.88L12 7.76zm4.5 8A4.5 4.5 0 0 0 14 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z"/>
+  </svg>
+);
+OutlinedVolumeOffIcon.displayName = 'OutlinedVolumeOffIcon';
+export const VolumeOffOutlinedIcon = OutlinedVolumeOffIcon;
+
+export const OutlinedVolumeUpIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M3 9v6h4l5 5V4L7 9H3zm7-.17v6.34L7.83 13H5v-2h2.83L10 8.83zM16.5 12A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77c0-4.28-2.99-7.86-7-8.77z"/>
+  </svg>
+);
+OutlinedVolumeUpIcon.displayName = 'OutlinedVolumeUpIcon';
+export const VolumeUpOutlinedIcon = OutlinedVolumeUpIcon;
+
+export const OutlinedWebIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 9h10.5v3.5H4V9zm0 5.5h10.5V18H4v-3.5zM20 18h-3.5V9H20v9z"/>
+  </svg>
+);
+OutlinedWebIcon.displayName = 'OutlinedWebIcon';
+export const WebOutlinedIcon = OutlinedWebIcon;
+
+export const OutlinedWebAssetIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M19 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6a2 2 0 0 0-2-2zm0 14H5V8h14v10z"/>
+  </svg>
+);
+OutlinedWebAssetIcon.displayName = 'OutlinedWebAssetIcon';
+export const WebAssetOutlinedIcon = OutlinedWebAssetIcon;
+
+export const OutlinedWebAssetOffIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', fillOpacity, className, ...props }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
+    <path fill={color || 'currentColor'} d="M6.83 4H20a2 2 0 0 1 2 2v12c0 .34-.09.66-.23.94L20 17.17V8h-9.17l-4-4zm13.66 19.31L17.17 20H4a2 2 0 0 1-2-2V6c0-.34.08-.66.23-.94L.69 3.51L2.1 2.1l19.8 19.8l-1.41 1.41zM15.17 18l-10-10H4v10h11.17z"/>
+  </svg>
+);
+OutlinedWebAssetOffIcon.displayName = 'OutlinedWebAssetOffIcon';
+export const WebAssetOffOutlinedIcon = OutlinedWebAssetOffIcon;