@winplaybox/icons 0.0.0-stage → 0.2.0

package/src/generated/outlined/image.tsx

@@ -0,0 +1,1970 @@
+import React from 'react';
+import { IconProps } from '../../types';
+
+export const OutlinedIcon10mpIcon: 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 11.5h2.5c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H13c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm.5-4.5H15v3h-1.5V7zm-6 7h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm1-2.5H10v-6H7V7h1.5zm5 7H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5v6zM15 14h1.5v1.5H15V14z"/><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"/>
+  </svg>
+);
+OutlinedIcon10mpIcon.displayName = 'OutlinedIcon10mpIcon';
+export const Icon10mpOutlinedIcon = OutlinedIcon10mpIcon;
+
+export const OutlinedIcon11mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5v6zM15 14h1.5v1.5H15V14z"/><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="M9.5 11.5H11v-6H8V7h1.5zm5 0H16v-6h-3V7h1.5z"/>
+  </svg>
+);
+OutlinedIcon11mpIcon.displayName = 'OutlinedIcon11mpIcon';
+export const Icon11mpOutlinedIcon = OutlinedIcon11mpIcon;
+
+export const OutlinedIcon12mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5v6zM15 14h1.5v1.5H15V14z"/><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 11.5H10v-6H7V7h1.5zm8-1.5h-3V9h2c.55 0 1-.45 1-1V6.5c0-.55-.45-1-1-1H12V7h3v1h-2c-.55 0-1 .45-1 1v2.5h4.5V10z"/>
+  </svg>
+);
+OutlinedIcon12mpIcon.displayName = 'OutlinedIcon12mpIcon';
+export const Icon12mpOutlinedIcon = OutlinedIcon12mpIcon;
+
+export const OutlinedIcon13mpIcon: 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="M8.5 11.5H10v-6H7V7h1.5zm8-1v-4c0-.55-.45-1-1-1H12V7h3v1h-2v1h2v1h-3v1.5h3.5c.55 0 1-.45 1-1zm-9 3.5h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5v6zM15 14h1.5v1.5H15V14z"/><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"/>
+  </svg>
+);
+OutlinedIcon13mpIcon.displayName = 'OutlinedIcon13mpIcon';
+export const Icon13mpOutlinedIcon = OutlinedIcon13mpIcon;
+
+export const OutlinedIcon14mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6-1.5v6H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5zm3 3H15V14h1.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="M8.5 11.5H10v-6H7V7h1.5zm6.5 0h1.5V10h1V8.5h-1v-3H15v3h-1.5v-3H12V10h3z"/>
+  </svg>
+);
+OutlinedIcon14mpIcon.displayName = 'OutlinedIcon14mpIcon';
+export const Icon14mpOutlinedIcon = OutlinedIcon14mpIcon;
+
+export const OutlinedIcon15mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5v6zM15 14h1.5v1.5H15V14z"/><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 11.5H10v-6H7V7h1.5zm8-1V9c0-.55-.45-1-1-1h-2V7h3V5.5H12V9h3v1h-3v1.5h3.5c.55 0 1-.45 1-1z"/>
+  </svg>
+);
+OutlinedIcon15mpIcon.displayName = 'OutlinedIcon15mpIcon';
+export const Icon15mpOutlinedIcon = OutlinedIcon15mpIcon;
+
+export const OutlinedIcon16mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5v6zM15 14h1.5v1.5H15V14z"/><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="M13 11.5h2.5c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1h-2V7h3V5.5H13c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm.5-2.5H15v1.5h-1.5V9zm-5 2.5H10v-6H7V7h1.5z"/>
+  </svg>
+);
+OutlinedIcon16mpIcon.displayName = 'OutlinedIcon16mpIcon';
+export const Icon16mpOutlinedIcon = OutlinedIcon16mpIcon;
+
+export const OutlinedIcon17mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5v6zM15 14h1.5v1.5H15V14z"/><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 11.5H10v-6H7V7h1.5zm4.75 0H15l1.46-4.71c.19-.64-.29-1.29-.96-1.29H12V7h2.62l-1.37 4.5z"/>
+  </svg>
+);
+OutlinedIcon17mpIcon.displayName = 'OutlinedIcon17mpIcon';
+export const Icon17mpOutlinedIcon = OutlinedIcon17mpIcon;
+
+export const OutlinedIcon18mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5v6zM15 14h1.5v1.5H15V14z"/><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 11.5H10v-6H7V7h1.5zm4.5 0h2.5c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H13c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm.5-5H15V8h-1.5V6.5zm0 2.5H15v1.5h-1.5V9z"/>
+  </svg>
+);
+OutlinedIcon18mpIcon.displayName = 'OutlinedIcon18mpIcon';
+export const Icon18mpOutlinedIcon = OutlinedIcon18mpIcon;
+
+export const OutlinedIcon19mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5v6zM15 14h1.5v1.5H15V14z"/><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 11.5H10v-6H7V7h1.5zm8-1v-4c0-.55-.45-1-1-1H13c-.55 0-1 .45-1 1V8c0 .55.45 1 1 1h2v1h-3v1.5h3.5c.55 0 1-.45 1-1zM15 8h-1.5V6.5H15V8z"/>
+  </svg>
+);
+OutlinedIcon19mpIcon.displayName = 'OutlinedIcon19mpIcon';
+export const Icon19mpOutlinedIcon = OutlinedIcon19mpIcon;
+
+export const OutlinedIcon20mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6-1.5v6H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5zm3 3H15V14h1.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 11.5h2.5c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H14c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm.5-4.5H16v3h-1.5V7zM11 10H8V9h2c.55 0 1-.45 1-1V6.5c0-.55-.45-1-1-1H6.5V7h3v1h-2c-.55 0-1 .45-1 1v2.5H11V10z"/>
+  </svg>
+);
+OutlinedIcon20mpIcon.displayName = 'OutlinedIcon20mpIcon';
+export const Icon20mpOutlinedIcon = OutlinedIcon20mpIcon;
+
+export const OutlinedIcon21mpIcon: 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 11.5H16v-6h-3V7h1.5zM12 10H9V9h2c.55 0 1-.45 1-1V6.5c0-.55-.45-1-1-1H7.5V7h3v1h-2c-.55 0-1 .45-1 1v2.5H12V10zm-4.5 4h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm7.5 3h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5v6H15V17zm0-3h1.5v1.5H15V14z"/>
+  </svg>
+);
+OutlinedIcon21mpIcon.displayName = 'OutlinedIcon21mpIcon';
+export const Icon21mpOutlinedIcon = OutlinedIcon21mpIcon;
+
+export const OutlinedIcon22mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6-1.5v6H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5zm3 3H15V14h1.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="M11 10H8V9h2c.55 0 1-.45 1-1V6.5c0-.55-.45-1-1-1H6.5V7h3v1h-2c-.55 0-1 .45-1 1v2.5H11V10zm6.5 0h-3V9h2c.55 0 1-.45 1-1V6.5c0-.55-.45-1-1-1H13V7h3v1h-2c-.55 0-1 .45-1 1v2.5h4.5V10z"/>
+  </svg>
+);
+OutlinedIcon22mpIcon.displayName = 'OutlinedIcon22mpIcon';
+export const Icon22mpOutlinedIcon = OutlinedIcon22mpIcon;
+
+export const OutlinedIcon23mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6-1.5v6H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5zm3 3H15V14h1.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="M11 10H8V9h2c.55 0 1-.45 1-1V6.5c0-.55-.45-1-1-1H6.5V7h3v1h-2c-.55 0-1 .45-1 1v2.5H11V10zm6.5.5v-4c0-.55-.45-1-1-1H13V7h3v1h-2v1h2v1h-3v1.5h3.5c.55 0 1-.45 1-1z"/>
+  </svg>
+);
+OutlinedIcon23mpIcon.displayName = 'OutlinedIcon23mpIcon';
+export const Icon23mpOutlinedIcon = OutlinedIcon23mpIcon;
+
+export const OutlinedIcon24mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm9.5-1.5h-3.5v6H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1zm-.5 3H15V14h1.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="M11 10H8V9h2c.55 0 1-.45 1-1V6.5c0-.55-.45-1-1-1H6.5V7h3v1h-2c-.55 0-1 .45-1 1v2.5H11V10zm5 1.5h1.5V10h1V8.5h-1v-3H16v3h-1.5v-3H13V10h3z"/>
+  </svg>
+);
+OutlinedIcon24mpIcon.displayName = 'OutlinedIcon24mpIcon';
+export const Icon24mpOutlinedIcon = OutlinedIcon24mpIcon;
+
+export const OutlinedIcon2mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5v6zM15 14h1.5v1.5H15V14z"/><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 10h-3V9h2c.55 0 1-.45 1-1V6.5c0-.55-.45-1-1-1H10V7h3v1h-2c-.55 0-1 .45-1 1v2.5h4.5V10z"/>
+  </svg>
+);
+OutlinedIcon2mpIcon.displayName = 'OutlinedIcon2mpIcon';
+export const Icon2mpOutlinedIcon = OutlinedIcon2mpIcon;
+
+export const OutlinedIcon30fpsSelectIcon: 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 4v2h5v2H5v2h4v2H4v2h5c1.1 0 2-.9 2-2v-1.5c0-.83-.17-1.5-1-1.5c.83 0 1-.67 1-1.5V6c0-1.1-.9-2-2-2H4zm14 0c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2h-3c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h3zm0 2h-3v6h3V6zM5 22H3v-5h2v5zm4 0H7v-5h2v5zm4 0h-2v-5h2v5zm8 0h-6v-5h6v5z"/>
+  </svg>
+);
+OutlinedIcon30fpsSelectIcon.displayName = 'OutlinedIcon30fpsSelectIcon';
+export const Icon30fpsSelectOutlinedIcon = OutlinedIcon30fpsSelectIcon;
+
+export const OutlinedIcon3mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6-1.5v6H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5zm3 3H15V14h1.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 10.5v-4c0-.55-.45-1-1-1H10V7h3v1h-2v1h2v1h-3v1.5h3.5c.55 0 1-.45 1-1z"/>
+  </svg>
+);
+OutlinedIcon3mpIcon.displayName = 'OutlinedIcon3mpIcon';
+export const Icon3mpOutlinedIcon = OutlinedIcon3mpIcon;
+
+export const OutlinedIcon4mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5v6zM15 14h1.5v1.5H15V14z"/><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="M12.5 11.5H14V10h1V8.5h-1v-3h-1.5v3H11v-3H9.5V10h3z"/>
+  </svg>
+);
+OutlinedIcon4mpIcon.displayName = 'OutlinedIcon4mpIcon';
+export const Icon4mpOutlinedIcon = OutlinedIcon4mpIcon;
+
+export const OutlinedIcon5mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5v6zM15 14h1.5v1.5H15V14z"/><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 10.5V9c0-.55-.45-1-1-1h-2V7h3V5.5H10V9h3v1h-3v1.5h3.5c.55 0 1-.45 1-1z"/>
+  </svg>
+);
+OutlinedIcon5mpIcon.displayName = 'OutlinedIcon5mpIcon';
+export const Icon5mpOutlinedIcon = OutlinedIcon5mpIcon;
+
+export const OutlinedIcon60fpsSelectIcon: 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 6v6h-3V6h3zm0-2h-3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h3c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-7 2V4H6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h3c1.1 0 2-.9 2-2v-2c0-1.1-.9-2-2-2H6V6h5zm-2 4v2H6v-2h3zM5 22H3v-5h2v5zm4 0H7v-5h2v5zm4 0h-2v-5h2v5zm8 0h-6v-5h6v5z"/>
+  </svg>
+);
+OutlinedIcon60fpsSelectIcon.displayName = 'OutlinedIcon60fpsSelectIcon';
+export const Icon60fpsSelectOutlinedIcon = OutlinedIcon60fpsSelectIcon;
+
+export const OutlinedIcon6mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5v6zM15 14h1.5v1.5H15V14z"/><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 11.5h2.5c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1h-2V7h3V5.5H11c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm.5-2.5H13v1.5h-1.5V9z"/>
+  </svg>
+);
+OutlinedIcon6mpIcon.displayName = 'OutlinedIcon6mpIcon';
+export const Icon6mpOutlinedIcon = OutlinedIcon6mpIcon;
+
+export const OutlinedIcon7mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5v6zM15 14h1.5v1.5H15V14z"/><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.25 11.5H13l1.46-4.71c.19-.64-.29-1.29-.96-1.29H10V7h2.62l-1.37 4.5z"/>
+  </svg>
+);
+OutlinedIcon7mpIcon.displayName = 'OutlinedIcon7mpIcon';
+export const Icon7mpOutlinedIcon = OutlinedIcon7mpIcon;
+
+export const OutlinedIcon8mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5v6zM15 14h1.5v1.5H15V14z"/><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 11.5h2.5c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H11c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm.5-5H13V8h-1.5V6.5zm0 2.5H13v1.5h-1.5V9z"/>
+  </svg>
+);
+OutlinedIcon8mpIcon.displayName = 'OutlinedIcon8mpIcon';
+export const Icon8mpOutlinedIcon = OutlinedIcon8mpIcon;
+
+export const OutlinedIcon9mpIcon: 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 14h1v3H10v-3h1v4.5h1.5v-5c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5h1.5V14zm6 4.5H15V17h2c.55 0 1-.45 1-1v-2.5c0-.55-.45-1-1-1h-3.5v6zM15 14h1.5v1.5H15V14z"/><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 10.5v-4c0-.55-.45-1-1-1H11c-.55 0-1 .45-1 1V8c0 .55.45 1 1 1h2v1h-3v1.5h3.5c.55 0 1-.45 1-1zM13 8h-1.5V6.5H13V8z"/>
+  </svg>
+);
+OutlinedIcon9mpIcon.displayName = 'OutlinedIcon9mpIcon';
+export const Icon9mpOutlinedIcon = OutlinedIcon9mpIcon;
+
+export const OutlinedAddAPhotoIcon: 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 6h-3.17L16 4h-6v2h5.12l1.83 2H21v12H5v-9H3v9c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM8 14c0 2.76 2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5s-5 2.24-5 5zm5-3c1.65 0 3 1.35 3 3s-1.35 3-3 3s-3-1.35-3-3s1.35-3 3-3zM5 6h3V4H5V1H3v3H0v2h3v3h2z"/>
+  </svg>
+);
+OutlinedAddAPhotoIcon.displayName = 'OutlinedAddAPhotoIcon';
+export const AddAPhotoOutlinedIcon = OutlinedAddAPhotoIcon;
+
+export const OutlinedAddPhotoAlternateIcon: 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 20H4V6h9V4H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2v9zm-7.79-3.17l-1.96-2.36L5.5 18h11l-3.54-4.71zM20 4V1h-2v3h-3c.01.01 0 2 0 2h3v2.99c.01.01 2 0 2 0V6h3V4h-3z"/>
+  </svg>
+);
+OutlinedAddPhotoAlternateIcon.displayName = 'OutlinedAddPhotoAlternateIcon';
+export const AddPhotoAlternateOutlinedIcon = OutlinedAddPhotoAlternateIcon;
+
+export const OutlinedAddToPhotosIcon: 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>
+);
+OutlinedAddToPhotosIcon.displayName = 'OutlinedAddToPhotosIcon';
+export const AddToPhotosOutlinedIcon = OutlinedAddToPhotosIcon;
+
+export const OutlinedAdjustIcon: 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.49 2 2 6.49 2 12s4.49 10 10 10s10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8zm3-8c0 1.66-1.34 3-3 3s-3-1.34-3-3s1.34-3 3-3s3 1.34 3 3z"/>
+  </svg>
+);
+OutlinedAdjustIcon.displayName = 'OutlinedAdjustIcon';
+export const AdjustOutlinedIcon = OutlinedAdjustIcon;
+
+export const OutlinedAnimationIcon: 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 2c-2.71 0-5.05 1.54-6.22 3.78a7.062 7.062 0 0 0-3 3A7.014 7.014 0 0 0 2 15c0 3.87 3.13 7 7 7c2.71 0 5.05-1.54 6.22-3.78a7.062 7.062 0 0 0 3-3A7.014 7.014 0 0 0 22 9c0-3.87-3.13-7-7-7zM9 20a5.002 5.002 0 0 1-4-8c0 3.87 3.13 7 7 7c-.84.63-1.88 1-3 1zm3-3a5.002 5.002 0 0 1-4-8c0 3.86 3.13 6.99 7 7c-.84.63-1.88 1-3 1zm4.7-3.3c-.53.19-1.1.3-1.7.3c-2.76 0-5-2.24-5-5c0-.6.11-1.17.3-1.7c.53-.19 1.1-.3 1.7-.3c2.76 0 5 2.24 5 5c0 .6-.11 1.17-.3 1.7zM19 12c0-3.86-3.13-6.99-7-7a5.002 5.002 0 0 1 7 7z"/>
+  </svg>
+);
+OutlinedAnimationIcon.displayName = 'OutlinedAnimationIcon';
+export const AnimationOutlinedIcon = OutlinedAnimationIcon;
+
+export const OutlinedAssistantIcon: 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 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h4l3 3l3-3h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 16h-4.83l-.59.59L12 20.17l-1.59-1.59l-.58-.58H5V4h14v14zm-7-1l1.88-4.12L18 11l-4.12-1.88L12 5l-1.88 4.12L6 11l4.12 1.88z"/>
+  </svg>
+);
+OutlinedAssistantIcon.displayName = 'OutlinedAssistantIcon';
+export const AssistantOutlinedIcon = OutlinedAssistantIcon;
+
+export const OutlinedAssistantPhotoIcon: 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.36 6l.08.39l.32 1.61H18v6h-3.36l-.08-.39l-.32-1.61H7V6h5.36M14 4H5v17h2v-7h5.6l.4 2h7V6h-5.6L14 4z"/>
+  </svg>
+);
+OutlinedAssistantPhotoIcon.displayName = 'OutlinedAssistantPhotoIcon';
+export const AssistantPhotoOutlinedIcon = OutlinedAssistantPhotoIcon;
+
+export const OutlinedAudiotrackIcon: 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 3v10.55c-.59-.34-1.27-.55-2-.55c-2.21 0-4 1.79-4 4s1.79 4 4 4s4-1.79 4-4V7h4V3h-6zm-2 16c-1.1 0-2-.9-2-2s.9-2 2-2s2 .9 2 2s-.9 2-2 2z"/>
+  </svg>
+);
+OutlinedAudiotrackIcon.displayName = 'OutlinedAudiotrackIcon';
+export const AudiotrackOutlinedIcon = OutlinedAudiotrackIcon;
+
+export const OutlinedAutoAwesomeIcon: 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 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25zm0 6l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25zm-7.5-5.5L9 4L6.5 9.5L1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zm-1.51 3.49L9 15.17l-.99-2.18L5.83 12l2.18-.99L9 8.83l.99 2.18l2.18.99l-2.18.99z"/>
+  </svg>
+);
+OutlinedAutoAwesomeIcon.displayName = 'OutlinedAutoAwesomeIcon';
+export const AutoAwesomeOutlinedIcon = OutlinedAutoAwesomeIcon;
+
+export const OutlinedAutoAwesomeMosaicIcon: 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 5v14a2 2 0 0 0 2 2h6V3H5a2 2 0 0 0-2 2zm6 14H5V5h4v14zM19 3h-6v8h8V5c0-1.1-.9-2-2-2zm0 6h-4V5h4v4zm-6 12h6c1.1 0 2-.9 2-2v-6h-8v8zm2-6h4v4h-4v-4z"/>
+  </svg>
+);
+OutlinedAutoAwesomeMosaicIcon.displayName = 'OutlinedAutoAwesomeMosaicIcon';
+export const AutoAwesomeMosaicOutlinedIcon = OutlinedAutoAwesomeMosaicIcon;
+
+export const OutlinedAutoAwesomeMotionIcon: 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 2H4c-1.1 0-2 .9-2 2v10h2V4h10V2zm4 4H8c-1.1 0-2 .9-2 2v10h2V8h10V6zm2 4h-8c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2zm0 10h-8v-8h8v8z"/>
+  </svg>
+);
+OutlinedAutoAwesomeMotionIcon.displayName = 'OutlinedAutoAwesomeMotionIcon';
+export const AutoAwesomeMotionOutlinedIcon = OutlinedAutoAwesomeMotionIcon;
+
+export const OutlinedAutoFixHighIcon: 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 7l.94-2.06L23 4l-2.06-.94L20 1l-.94 2.06L17 4l2.06.94zM8.5 7l.94-2.06L11.5 4l-2.06-.94L8.5 1l-.94 2.06L5.5 4l2.06.94zM20 12.5l-.94 2.06l-2.06.94l2.06.94l.94 2.06l.94-2.06L23 15.5l-2.06-.94zm-2.29-3.38l-2.83-2.83c-.2-.19-.45-.29-.71-.29c-.26 0-.51.1-.71.29L2.29 17.46a.996.996 0 0 0 0 1.41l2.83 2.83c.2.2.45.3.71.3s.51-.1.71-.29l11.17-11.17c.39-.39.39-1.03 0-1.42zm-3.54-.7l1.41 1.41L14.41 11L13 9.59l1.17-1.17zM5.83 19.59l-1.41-1.41L11.59 11L13 12.41l-7.17 7.18z"/>
+  </svg>
+);
+OutlinedAutoFixHighIcon.displayName = 'OutlinedAutoFixHighIcon';
+export const AutoFixHighOutlinedIcon = OutlinedAutoFixHighIcon;
+
+export const OutlinedAutoFixNormalIcon: 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 7l.94-2.06L23 4l-2.06-.94L20 1l-.94 2.06L17 4l2.06.94zm-2.29 2.12l-2.83-2.83c-.2-.19-.45-.29-.71-.29c-.26 0-.51.1-.71.29L2.29 17.46a.996.996 0 0 0 0 1.41l2.83 2.83c.2.2.45.3.71.3s.51-.1.71-.29l11.17-11.17c.39-.39.39-1.03 0-1.42zm-3.54-.7l1.41 1.41L14.41 11L13 9.59l1.17-1.17zM5.83 19.59l-1.41-1.41L11.59 11L13 12.41l-7.17 7.18z"/>
+  </svg>
+);
+OutlinedAutoFixNormalIcon.displayName = 'OutlinedAutoFixNormalIcon';
+export const AutoFixNormalOutlinedIcon = OutlinedAutoFixNormalIcon;
+
+export const OutlinedAutoFixOffIcon: 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 7l.94-2.06L23 4l-2.06-.94L20 1l-.94 2.06L17 4l2.06.94zm-5.83 1.42l1.41 1.41l-1.46 1.46l1.41 1.41l2.17-2.17a.996.996 0 0 0 0-1.41l-2.83-2.83a.984.984 0 0 0-.7-.29c-.26 0-.51.1-.71.29l-2.17 2.17l1.41 1.41l1.47-1.45zM1.39 4.22l7.07 7.07l-6.17 6.17a.996.996 0 0 0 0 1.41l2.83 2.83c.2.2.45.3.71.3s.51-.1.71-.29l6.17-6.17l7.07 7.07l1.41-1.41L2.81 2.81L1.39 4.22zm9.9 9.9l-5.46 5.46l-1.41-1.41l5.46-5.46l1.41 1.41z"/>
+  </svg>
+);
+OutlinedAutoFixOffIcon.displayName = 'OutlinedAutoFixOffIcon';
+export const AutoFixOffOutlinedIcon = OutlinedAutoFixOffIcon;
+
+export const OutlinedAutoStoriesIcon: 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.47 5.2c-.47-.24-.96-.44-1.47-.61v12.03c-1.14-.41-2.31-.62-3.5-.62c-1.9 0-3.78.54-5.5 1.58V5.48C10.38 4.55 8.51 4 6.5 4c-1.79 0-3.48.44-4.97 1.2c-.33.16-.53.51-.53.88v12.08c0 .58.47.99 1 .99c.16 0 .32-.04.48-.12C3.69 18.4 5.05 18 6.5 18c2.07 0 3.98.82 5.5 2c1.52-1.18 3.43-2 5.5-2c1.45 0 2.81.4 4.02 1.04c.16.08.32.12.48.12c.52 0 1-.41 1-.99V6.08c0-.37-.2-.72-.53-.88zM10 16.62C8.86 16.21 7.69 16 6.5 16s-2.36.21-3.5.62V6.71C4.11 6.24 5.28 6 6.5 6c1.2 0 2.39.25 3.5.72v9.9zM19 .5l-5 5V15l5-4.5V.5z"/>
+  </svg>
+);
+OutlinedAutoStoriesIcon.displayName = 'OutlinedAutoStoriesIcon';
+export const AutoStoriesOutlinedIcon = OutlinedAutoStoriesIcon;
+
+export const OutlinedAutofpsSelectIcon: 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.03 6.3h-.06l-1.02 2.89h2.1zM3 17h2v5H3z"/><path fill={color || 'currentColor'} d="M12 15c3.31 0 6-2.69 6-6s-2.69-6-6-6s-6 2.69-6 6s2.69 6 6 6zm-.63-10h1.25l2.63 7h-1.21l-.63-1.79h-2.83L9.96 12H8.74l2.63-7zM7 17h2v5H7zm4 0h2v5h-2zm4 0h6v5h-6z"/>
+  </svg>
+);
+OutlinedAutofpsSelectIcon.displayName = 'OutlinedAutofpsSelectIcon';
+export const AutofpsSelectOutlinedIcon = OutlinedAutofpsSelectIcon;
+
+export const OutlinedBedtimeIcon: 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.27 4.49c-1.63 7.54 3.75 12.41 7.66 13.8A7.993 7.993 0 0 1 12 20c-4.41 0-8-3.59-8-8c0-3.45 2.2-6.4 5.27-7.51m2.72-2.48C6.4 2.01 2 6.54 2 12c0 5.52 4.48 10 10 10c3.71 0 6.93-2.02 8.66-5.02c-7.51-.25-12.09-8.43-8.32-14.97h-.35z"/>
+  </svg>
+);
+OutlinedBedtimeIcon.displayName = 'OutlinedBedtimeIcon';
+export const BedtimeOutlinedIcon = OutlinedBedtimeIcon;
+
+export const OutlinedBedtimeOffIcon: 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.27 4.49c-.13.59-.2 1.15-.24 1.71l2.05 2.05c-.27-2.05.1-4.22 1.26-6.23c-.12 0-.23-.01-.35-.01a9.9 9.9 0 0 0-5.5 1.65l1.46 1.46c.42-.24.86-.46 1.32-.63zm-7.88-.27l2.27 2.27A9.934 9.934 0 0 0 2 12c0 5.52 4.48 10 10 10c2.04 0 3.92-.63 5.5-1.67l2.28 2.28l1.41-1.41L2.81 2.81L1.39 4.22zm3.74 3.74l10.92 10.92C14.84 19.6 13.45 20 12 20c-4.41 0-8-3.59-8-8c0-1.48.42-2.85 1.13-4.04z"/>
+  </svg>
+);
+OutlinedBedtimeOffIcon.displayName = 'OutlinedBedtimeOffIcon';
+export const BedtimeOffOutlinedIcon = OutlinedBedtimeOffIcon;
+
+export const OutlinedBlurCircularIcon: 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 9c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1zm0 4c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1zM7 9.5c-.28 0-.5.22-.5.5s.22.5.5.5s.5-.22.5-.5s-.22-.5-.5-.5zm3 7c-.28 0-.5.22-.5.5s.22.5.5.5s.5-.22.5-.5s-.22-.5-.5-.5zm-3-3c-.28 0-.5.22-.5.5s.22.5.5.5s.5-.22.5-.5s-.22-.5-.5-.5zm3-6c.28 0 .5-.22.5-.5s-.22-.5-.5-.5s-.5.22-.5.5s.22.5.5.5zM14 9c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1zm0-1.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5s-.5.22-.5.5s.22.5.5.5zm3 6c-.28 0-.5.22-.5.5s.22.5.5.5s.5-.22.5-.5s-.22-.5-.5-.5zm0-4c-.28 0-.5.22-.5.5s.22.5.5.5s.5-.22.5-.5s-.22-.5-.5-.5zM12 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 8zm2-3.5c-.28 0-.5.22-.5.5s.22.5.5.5s.5-.22.5-.5s-.22-.5-.5-.5zm0-3.5c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1z"/>
+  </svg>
+);
+OutlinedBlurCircularIcon.displayName = 'OutlinedBlurCircularIcon';
+export const BlurCircularOutlinedIcon = OutlinedBlurCircularIcon;
+
+export const OutlinedBlurLinearIcon: 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 17.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.5zM9 13c.55 0 1-.45 1-1s-.45-1-1-1s-1 .45-1 1s.45 1 1 1zm0-4c.55 0 1-.45 1-1s-.45-1-1-1s-1 .45-1 1s.45 1 1 1zM3 21h18v-2H3v2zM5 9.5c.83 0 1.5-.67 1.5-1.5S5.83 6.5 5 6.5S3.5 7.17 3.5 8S4.17 9.5 5 9.5zm0 4c.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.5zM9 17c.55 0 1-.45 1-1s-.45-1-1-1s-1 .45-1 1s.45 1 1 1zm8-.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5s-.5.22-.5.5s.22.5.5.5zM3 3v2h18V3H3zm14 5.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5s-.5.22-.5.5s.22.5.5.5zm0 4c.28 0 .5-.22.5-.5s-.22-.5-.5-.5s-.5.22-.5.5s.22.5.5.5zM13 9c.55 0 1-.45 1-1s-.45-1-1-1s-1 .45-1 1s.45 1 1 1zm0 4c.55 0 1-.45 1-1s-.45-1-1-1s-1 .45-1 1s.45 1 1 1zm0 4c.55 0 1-.45 1-1s-.45-1-1-1s-1 .45-1 1s.45 1 1 1z"/>
+  </svg>
+);
+OutlinedBlurLinearIcon.displayName = 'OutlinedBlurLinearIcon';
+export const BlurLinearOutlinedIcon = OutlinedBlurLinearIcon;
+
+export const OutlinedBlurOffIcon: 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}>
+    <circle cx="14" cy="6" r="1"/><path fill={color || 'currentColor'} d="M13.8 11.48l.2.02c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5l.02.2c.09.67.61 1.19 1.28 1.28zM14 3.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5s-.5.22-.5.5s.22.5.5.5zm-4 0c.28 0 .5-.22.5-.5s-.22-.5-.5-.5s-.5.22-.5.5s.22.5.5.5z"/><circle cx="18" cy="10" r="1"/><circle cx="18" cy="6" r="1"/><path fill={color || 'currentColor'} d="M21 10.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5s-.5.22-.5.5s.22.5.5.5z"/><circle cx="10" cy="6" r="1"/><circle cx="18" cy="14" r="1"/><circle cx="6" cy="18" r="1"/><path fill={color || 'currentColor'} d="M14 20.5c-.28 0-.5.22-.5.5s.22.5.5.5s.5-.22.5-.5s-.22-.5-.5-.5zm7-7c-.28 0-.5.22-.5.5s.22.5.5.5s.5-.22.5-.5s-.22-.5-.5-.5zm-18 0c-.28 0-.5.22-.5.5s.22.5.5.5s.5-.22.5-.5s-.22-.5-.5-.5z"/><circle cx="10" cy="18" r="1"/><path fill={color || 'currentColor'} d="M3 9.5c-.28 0-.5.22-.5.5s.22.5.5.5s.5-.22.5-.5s-.22-.5-.5-.5zm7 11c-.28 0-.5.22-.5.5s.22.5.5.5s.5-.22.5-.5s-.22-.5-.5-.5z"/><circle cx="6" cy="14" r="1"/><path fill={color || 'currentColor'} d="M2.5 5.27L6 8.77l.28.28L6 9c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1c0-.1-.03-.19-.06-.28l2.81 2.81c-.71.11-1.25.73-1.25 1.47c0 .83.67 1.5 1.5 1.5c.74 0 1.36-.54 1.47-1.25l2.81 2.81A.875.875 0 0 0 14 17c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1c0-.1-.03-.19-.06-.28l3.78 3.78h.01l1.41-1.41L3.91 3.86L2.5 5.27z"/>
+  </svg>
+);
+OutlinedBlurOffIcon.displayName = 'OutlinedBlurOffIcon';
+export const BlurOffOutlinedIcon = OutlinedBlurOffIcon;
+
+export const OutlinedBlurOnIcon: 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 13c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1zm0 4c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1zm0-8c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1zm-3 .5c-.28 0-.5.22-.5.5s.22.5.5.5s.5-.22.5-.5s-.22-.5-.5-.5zM6 5c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1zm15 5.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5s-.5.22-.5.5s.22.5.5.5zM14 7c.55 0 1-.45 1-1s-.45-1-1-1s-1 .45-1 1s.45 1 1 1zm0-3.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5s-.5.22-.5.5s.22.5.5.5zm-11 10c-.28 0-.5.22-.5.5s.22.5.5.5s.5-.22.5-.5s-.22-.5-.5-.5zm7 7c-.28 0-.5.22-.5.5s.22.5.5.5s.5-.22.5-.5s-.22-.5-.5-.5zm0-17c.28 0 .5-.22.5-.5s-.22-.5-.5-.5s-.5.22-.5.5s.22.5.5.5zM10 7c.55 0 1-.45 1-1s-.45-1-1-1s-1 .45-1 1s.45 1 1 1zm0 5.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.5zm8 .5c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1zm0 4c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1zm0-8c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1zm0-4c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1zm3 8.5c-.28 0-.5.22-.5.5s.22.5.5.5s.5-.22.5-.5s-.22-.5-.5-.5zM14 17c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1zm0 3.5c-.28 0-.5.22-.5.5s.22.5.5.5s.5-.22.5-.5s-.22-.5-.5-.5zm-4-12c-.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.5zm0 8.5c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1zm4-4.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.5zm0-4c-.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>
+);
+OutlinedBlurOnIcon.displayName = 'OutlinedBlurOnIcon';
+export const BlurOnOutlinedIcon = OutlinedBlurOnIcon;
+
+export const OutlinedBrightness1Icon: 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-8m0-2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2z"/>
+  </svg>
+);
+OutlinedBrightness1Icon.displayName = 'OutlinedBrightness1Icon';
+export const Brightness1OutlinedIcon = OutlinedBrightness1Icon;
+
+export const OutlinedBrightness2Icon: 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 4c4.41 0 8 3.59 8 8s-3.59 8-8 8c-.34 0-.68-.02-1.01-.07C10.9 17.77 12 14.95 12 12s-1.1-5.77-3.01-7.93C9.32 4.02 9.66 4 10 4m0-2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"/>
+  </svg>
+);
+OutlinedBrightness2Icon.displayName = 'OutlinedBrightness2Icon';
+export const Brightness2OutlinedIcon = OutlinedBrightness2Icon;
+
+export const OutlinedBrightness3Icon: 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.7 4.91A8 8 0 0 1 17 12a8 8 0 0 1-4.3 7.09c1.46-2 2.3-4.46 2.3-7.09s-.84-5.09-2.3-7.09M9 2c-1.05 0-2.05.16-3 .46c4.06 1.27 7 5.06 7 9.54s-2.94 8.27-7 9.54c.95.3 1.95.46 3 .46c5.52 0 10-4.48 10-10S14.52 2 9 2z"/>
+  </svg>
+);
+OutlinedBrightness3Icon.displayName = 'OutlinedBrightness3Icon';
+export const Brightness3OutlinedIcon = OutlinedBrightness3Icon;
+
+export const OutlinedBrightness4Icon: 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 8.69V4h-4.69L12 .69L8.69 4H4v4.69L.69 12L4 15.31V20h4.69L12 23.31L15.31 20H20v-4.69L23.31 12L20 8.69zm-2 5.79V18h-3.52L12 20.48L9.52 18H6v-3.52L3.52 12L6 9.52V6h3.52L12 3.52L14.48 6H18v3.52L20.48 12L18 14.48zM12.29 7c-.74 0-1.45.17-2.08.46c1.72.79 2.92 2.53 2.92 4.54s-1.2 3.75-2.92 4.54c.63.29 1.34.46 2.08.46c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
+  </svg>
+);
+OutlinedBrightness4Icon.displayName = 'OutlinedBrightness4Icon';
+export const Brightness4OutlinedIcon = OutlinedBrightness4Icon;
+
+export const OutlinedBrightness5Icon: 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 8.69V4h-4.69L12 .69L8.69 4H4v4.69L.69 12L4 15.31V20h4.69L12 23.31L15.31 20H20v-4.69L23.31 12L20 8.69zm-2 5.79V18h-3.52L12 20.48L9.52 18H6v-3.52L3.52 12L6 9.52V6h3.52L12 3.52L14.48 6H18v3.52L20.48 12L18 14.48zM12 6.5c-3.03 0-5.5 2.47-5.5 5.5s2.47 5.5 5.5 5.5s5.5-2.47 5.5-5.5s-2.47-5.5-5.5-5.5zm0 9c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5s3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5z"/>
+  </svg>
+);
+OutlinedBrightness5Icon.displayName = 'OutlinedBrightness5Icon';
+export const Brightness5OutlinedIcon = OutlinedBrightness5Icon;
+
+export const OutlinedBrightness6Icon: 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 8.69V4h-4.69L12 .69L8.69 4H4v4.69L.69 12L4 15.31V20h4.69L12 23.31L15.31 20H20v-4.69L23.31 12L20 8.69zm-2 5.79V18h-3.52L12 20.48L9.52 18H6v-3.52L3.52 12L6 9.52V6h3.52L12 3.52L14.48 6H18v3.52L20.48 12L18 14.48zM12 6.5v11c3.03 0 5.5-2.47 5.5-5.5S15.03 6.5 12 6.5z"/>
+  </svg>
+);
+OutlinedBrightness6Icon.displayName = 'OutlinedBrightness6Icon';
+export const Brightness6OutlinedIcon = OutlinedBrightness6Icon;
+
+export const OutlinedBrightness7Icon: 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 8.69V4h-4.69L12 .69L8.69 4H4v4.69L.69 12L4 15.31V20h4.69L12 23.31L15.31 20H20v-4.69L23.31 12L20 8.69zm-2 5.79V18h-3.52L12 20.48L9.52 18H6v-3.52L3.52 12L6 9.52V6h3.52L12 3.52L14.48 6H18v3.52L20.48 12L18 14.48zM12 6.5c-3.03 0-5.5 2.47-5.5 5.5s2.47 5.5 5.5 5.5s5.5-2.47 5.5-5.5s-2.47-5.5-5.5-5.5zm0 9c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5s3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5z"/><circle cx="12" cy="12" r="2"/>
+  </svg>
+);
+OutlinedBrightness7Icon.displayName = 'OutlinedBrightness7Icon';
+export const Brightness7OutlinedIcon = OutlinedBrightness7Icon;
+
+export const OutlinedBrokenImageIcon: 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 16H5v-4.58l.99.99l4-4l4 4l4-3.99L19 12.43V19zm0-9.41l-1.01-1.01l-4 4.01l-4-4l-4 4l-.99-1V5h14v4.59z"/>
+  </svg>
+);
+OutlinedBrokenImageIcon.displayName = 'OutlinedBrokenImageIcon';
+export const BrokenImageOutlinedIcon = OutlinedBrokenImageIcon;
+
+export const OutlinedBrushIcon: 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 16c.55 0 1 .45 1 1c0 1.1-.9 2-2 2c-.17 0-.33-.02-.5-.05c.31-.55.5-1.21.5-1.95c0-.55.45-1 1-1M18.67 3c-.26 0-.51.1-.71.29L9 12.25L11.75 15l8.96-8.96a.996.996 0 0 0 0-1.41l-1.34-1.34c-.2-.2-.45-.29-.7-.29zM7 14c-1.66 0-3 1.34-3 3c0 1.31-1.16 2-2 2c.92 1.22 2.49 2 4 2c2.21 0 4-1.79 4-4c0-1.66-1.34-3-3-3z"/>
+  </svg>
+);
+OutlinedBrushIcon.displayName = 'OutlinedBrushIcon';
+export const BrushOutlinedIcon = OutlinedBrushIcon;
+
+export const OutlinedBurstModeIcon: 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="M1 5h2v14H1zm4 0h2v14H5zm17 0H10c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm-1 12H11V7h10v10zm-3.57-4.38l-2 2.57L14 13.47l-2 2.52h8z"/>
+  </svg>
+);
+OutlinedBurstModeIcon.displayName = 'OutlinedBurstModeIcon';
+export const BurstModeOutlinedIcon = OutlinedBurstModeIcon;
+
+export const OutlinedCameraIcon: 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.25 2.26l-.08-.04l-.01.02C13.46 2.09 12.74 2 12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10c0-4.75-3.31-8.72-7.75-9.74zM19.41 9h-7.99l2.71-4.7c2.4.66 4.35 2.42 5.28 4.7zM13.1 4.08L10.27 9l-1.15 2L6.4 6.3A7.958 7.958 0 0 1 12 4c.37 0 .74.03 1.1.08zM5.7 7.09L8.54 12l1.15 2H4.26C4.1 13.36 4 12.69 4 12c0-1.85.64-3.55 1.7-4.91zM4.59 15h7.98l-2.71 4.7A8.033 8.033 0 0 1 4.59 15zm6.31 4.91L14.89 13l2.72 4.7A8 8 0 0 1 12 20c-.38 0-.74-.04-1.1-.09zm7.4-3l-4-6.91h5.43c.17.64.27 1.31.27 2c0 1.85-.64 3.55-1.7 4.91z"/>
+  </svg>
+);
+OutlinedCameraIcon.displayName = 'OutlinedCameraIcon';
+export const CameraOutlinedIcon = OutlinedCameraIcon;
+
+export const OutlinedCameraAltIcon: 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 4h-3.17L15 2H9L7.17 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 14H4V6h4.05l1.83-2h4.24l1.83 2H20v12zM12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5zm0 8c-1.65 0-3-1.35-3-3s1.35-3 3-3s3 1.35 3 3s-1.35 3-3 3z"/>
+  </svg>
+);
+OutlinedCameraAltIcon.displayName = 'OutlinedCameraAltIcon';
+export const CameraAltOutlinedIcon = OutlinedCameraAltIcon;
+
+export const OutlinedCameraFrontIcon: 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 20v2h5v2l3-3l-3-3v2zm9 0h5v2h-5zM11.99 8C13.1 8 14 7.1 14 6s-.9-2-2.01-2S10 4.9 10 6s.89 2 1.99 2zM17 0H7C5.9 0 5 .9 5 2v14c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zm0 16H7v-2h10v2zm0-3.5c0-1.67-3.33-2.5-5-2.5s-5 .83-5 2.5V2h10v10.5z"/>
+  </svg>
+);
+OutlinedCameraFrontIcon.displayName = 'OutlinedCameraFrontIcon';
+export const CameraFrontOutlinedIcon = OutlinedCameraFrontIcon;
+
+export const OutlinedCameraRearIcon: 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 20v2h5v2l3-3l-3-3v2zm9 0h5v2h-5zm3-20H7C5.9 0 5 .9 5 2v14c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zm0 16H7V2h10v14zm-5-9c1.1 0 2-.9 1.99-2c0-1.1-.9-2-2-2S10 3.9 10 5s.89 2 2 2z"/>
+  </svg>
+);
+OutlinedCameraRearIcon.displayName = 'OutlinedCameraRearIcon';
+export const CameraRearOutlinedIcon = OutlinedCameraRearIcon;
+
+export const OutlinedCameraRollIcon: 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 5c0-1.1-.9-2-2-2h-1V2c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H4c-1.1 0-2 .9-2 2v15c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2h8V5h-8zm6 13h-8v2H4V5h3V3h2v2h3v2h8v11zM9 15h2v2H9zm0-7h2v2H9zm4 7h2v2h-2zm0-7h2v2h-2zm4 7h2v2h-2zm0-7h2v2h-2z"/>
+  </svg>
+);
+OutlinedCameraRollIcon.displayName = 'OutlinedCameraRollIcon';
+export const CameraRollOutlinedIcon = OutlinedCameraRollIcon;
+
+export const OutlinedCasesIcon: 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 9H1v11c0 1.11.89 2 2 2h17v-2H3V9z"/><path fill={color || 'currentColor'} d="M18 5V3c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v2H5v11c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5h-5zm-6-2h4v2h-4V3zm9 13H7V7h14v9z"/>
+  </svg>
+);
+OutlinedCasesIcon.displayName = 'OutlinedCasesIcon';
+export const CasesOutlinedIcon = OutlinedCasesIcon;
+
+export const OutlinedCenterFocusStrongIcon: 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 12c0-2.76-2.24-5-5-5s-5 2.24-5 5s2.24 5 5 5s5-2.24 5-5zm-5 3c-1.65 0-3-1.35-3-3s1.35-3 3-3s3 1.35 3 3s-1.35 3-3 3zm-7 0H3v4c0 1.1.9 2 2 2h4v-2H5v-4zM5 5h4V3H5c-1.1 0-2 .9-2 2v4h2V5zm14-2h-4v2h4v4h2V5c0-1.1-.9-2-2-2zm0 16h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4z"/>
+  </svg>
+);
+OutlinedCenterFocusStrongIcon.displayName = 'OutlinedCenterFocusStrongIcon';
+export const CenterFocusStrongOutlinedIcon = OutlinedCenterFocusStrongIcon;
+
+export const OutlinedCenterFocusWeakIcon: 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 15H3v4c0 1.1.9 2 2 2h4v-2H5v-4zM5 5h4V3H5c-1.1 0-2 .9-2 2v4h2V5zm7 3c-2.21 0-4 1.79-4 4s1.79 4 4 4s4-1.79 4-4s-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2s2 .9 2 2s-.9 2-2 2zm7-11h-4v2h4v4h2V5c0-1.1-.9-2-2-2zm0 16h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4z"/>
+  </svg>
+);
+OutlinedCenterFocusWeakIcon.displayName = 'OutlinedCenterFocusWeakIcon';
+export const CenterFocusWeakOutlinedIcon = OutlinedCenterFocusWeakIcon;
+
+export const OutlinedCircleIcon: 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.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8z"/>
+  </svg>
+);
+OutlinedCircleIcon.displayName = 'OutlinedCircleIcon';
+export const CircleOutlinedIcon = OutlinedCircleIcon;
+
+export const OutlinedCollectionsIcon: 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-8.5 9.67l1.69 2.26l2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z"/>
+  </svg>
+);
+OutlinedCollectionsIcon.displayName = 'OutlinedCollectionsIcon';
+export const CollectionsOutlinedIcon = OutlinedCollectionsIcon;
+
+export const OutlinedCollectionsBookmarkIcon: 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-2zm-3 2v5l-1-.75L15 9V4h2zm3 12H8V4h5v9l3-2.25L19 13V4h1v12z"/>
+  </svg>
+);
+OutlinedCollectionsBookmarkIcon.displayName = 'OutlinedCollectionsBookmarkIcon';
+export const CollectionsBookmarkOutlinedIcon = OutlinedCollectionsBookmarkIcon;
+
+export const OutlinedColorLensIcon: 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 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.04 10 9c0 3.31-2.69 6-6 6h-1.77c-.28 0-.5.22-.5.5c0 .12.05.23.13.33c.41.47.64 1.06.64 1.67A2.5 2.5 0 0 1 12 22zm0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8c.28 0 .5-.22.5-.5a.54.54 0 0 0-.14-.35c-.41-.46-.63-1.05-.63-1.65a2.5 2.5 0 0 1 2.5-2.5H16c2.21 0 4-1.79 4-4c0-3.86-3.59-7-8-7z"/><circle cx="6.5" cy="11.5" r="1.5"/><circle cx="9.5" cy="7.5" r="1.5"/><circle cx="14.5" cy="7.5" r="1.5"/><circle cx="17.5" cy="11.5" r="1.5"/>
+  </svg>
+);
+OutlinedColorLensIcon.displayName = 'OutlinedColorLensIcon';
+export const ColorLensOutlinedIcon = OutlinedColorLensIcon;
+
+export const OutlinedColorizeIcon: 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.66 5.41l.92.92l-2.69 2.69l-.92-.92l2.69-2.69M17.67 3c-.26 0-.51.1-.71.29l-3.12 3.12l-1.93-1.91l-1.41 1.41l1.42 1.42L3 16.25V21h4.75l8.92-8.92l1.42 1.42l1.41-1.41l-1.92-1.92l3.12-3.12c.4-.4.4-1.03.01-1.42l-2.34-2.34c-.2-.19-.45-.29-.7-.29zM6.92 19L5 17.08l8.06-8.06l1.92 1.92L6.92 19z"/>
+  </svg>
+);
+OutlinedColorizeIcon.displayName = 'OutlinedColorizeIcon';
+export const ColorizeOutlinedIcon = OutlinedColorizeIcon;
+
+export const OutlinedCompareIcon: 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 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h5v2h2V1h-2v2zm0 15H5l5-6v6zm9-15h-5v2h5v13l-5-6v9h5c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
+  </svg>
+);
+OutlinedCompareIcon.displayName = 'OutlinedCompareIcon';
+export const CompareOutlinedIcon = OutlinedCompareIcon;
+
+export const OutlinedContrastIcon: 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 22c5.52 0 10-4.48 10-10S17.52 2 12 2S2 6.48 2 12s4.48 10 10 10zm1-17.93c3.94.49 7 3.85 7 7.93s-3.05 7.44-7 7.93V4.07z"/>
+  </svg>
+);
+OutlinedContrastIcon.displayName = 'OutlinedContrastIcon';
+export const ContrastOutlinedIcon = OutlinedContrastIcon;
+
+export const OutlinedControlPointIcon: 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 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.49 2 2 6.49 2 12s4.49 10 10 10s10-4.49 10-10S17.51 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>
+);
+OutlinedControlPointIcon.displayName = 'OutlinedControlPointIcon';
+export const ControlPointOutlinedIcon = OutlinedControlPointIcon;
+
+export const OutlinedControlPointDuplicateIcon: 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 8h-2v3h-3v2h3v3h2v-3h3v-2h-3V8zM2 12c0-2.79 1.64-5.2 4.01-6.32V3.52C2.52 4.76 0 8.09 0 12s2.52 7.24 6.01 8.48v-2.16A6.99 6.99 0 0 1 2 12zm13-9c-4.96 0-9 4.04-9 9s4.04 9 9 9s9-4.04 9-9s-4.04-9-9-9zm0 16c-3.86 0-7-3.14-7-7s3.14-7 7-7s7 3.14 7 7s-3.14 7-7 7z"/>
+  </svg>
+);
+OutlinedControlPointDuplicateIcon.displayName = 'OutlinedControlPointDuplicateIcon';
+export const ControlPointDuplicateOutlinedIcon = OutlinedControlPointDuplicateIcon;
+
+export const OutlinedCropIcon: 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 15h2V7c0-1.1-.9-2-2-2H9v2h8v8zM7 17V1H5v4H1v2h4v10c0 1.1.9 2 2 2h10v4h2v-4h4v-2H7z"/>
+  </svg>
+);
+OutlinedCropIcon.displayName = 'OutlinedCropIcon';
+export const CropOutlinedIcon = OutlinedCropIcon;
+
+export const OutlinedCrop169Icon: 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 7H5c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm0 8H5V9h14v6z"/>
+  </svg>
+);
+OutlinedCrop169Icon.displayName = 'OutlinedCrop169Icon';
+export const Crop169OutlinedIcon = OutlinedCrop169Icon;
+
+export const OutlinedCrop32Icon: 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 6H5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H5V8h14v8z"/>
+  </svg>
+);
+OutlinedCrop32Icon.displayName = 'OutlinedCrop32Icon';
+export const Crop32OutlinedIcon = OutlinedCrop32Icon;
+
+export const OutlinedCrop54Icon: 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 4H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H5V6h14v12z"/>
+  </svg>
+);
+OutlinedCrop54Icon.displayName = 'OutlinedCrop54Icon';
+export const Crop54OutlinedIcon = OutlinedCrop54Icon;
+
+export const OutlinedCrop75Icon: 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 5H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H5V7h14v10z"/>
+  </svg>
+);
+OutlinedCrop75Icon.displayName = 'OutlinedCrop75Icon';
+export const Crop75OutlinedIcon = OutlinedCrop75Icon;
+
+export const OutlinedCropDinIcon: 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"/>
+  </svg>
+);
+OutlinedCropDinIcon.displayName = 'OutlinedCropDinIcon';
+export const CropDinOutlinedIcon = OutlinedCropDinIcon;
+
+export const OutlinedCropFreeIcon: 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 5v4h2V5h4V3H5c-1.1 0-2 .9-2 2zm2 10H3v4c0 1.1.9 2 2 2h4v-2H5v-4zm14 4h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4zm0-16h-4v2h4v4h2V5c0-1.1-.9-2-2-2z"/>
+  </svg>
+);
+OutlinedCropFreeIcon.displayName = 'OutlinedCropFreeIcon';
+export const CropFreeOutlinedIcon = OutlinedCropFreeIcon;
+
+export const OutlinedCropLandscapeIcon: 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 5H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H5V7h14v10z"/>
+  </svg>
+);
+OutlinedCropLandscapeIcon.displayName = 'OutlinedCropLandscapeIcon';
+export const CropLandscapeOutlinedIcon = OutlinedCropLandscapeIcon;
+
+export const OutlinedCropOriginalIcon: 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-5.04-6.71l-2.75 3.54l-1.96-2.36L6.5 17h11l-3.54-4.71z"/>
+  </svg>
+);
+OutlinedCropOriginalIcon.displayName = 'OutlinedCropOriginalIcon';
+export const CropOriginalOutlinedIcon = OutlinedCropOriginalIcon;
+
+export const OutlinedCropPortraitIcon: 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 3H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H7V5h10v14z"/>
+  </svg>
+);
+OutlinedCropPortraitIcon.displayName = 'OutlinedCropPortraitIcon';
+export const CropPortraitOutlinedIcon = OutlinedCropPortraitIcon;
+
+export const OutlinedCropRotateIcon: 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.47 21.49C4.2 19.93 1.86 16.76 1.5 13H0c.51 6.16 5.66 11 11.95 11c.23 0 .44-.02.66-.03L8.8 20.15l-1.33 1.34zM12.05 0c-.23 0-.44.02-.66.04l3.81 3.81l1.33-1.33C19.8 4.07 22.14 7.24 22.5 11H24c-.51-6.16-5.66-11-11.95-11zM16 14h2V8a2 2 0 0 0-2-2h-6v2h6v6zm-8 2V4H6v2H4v2h2v8a2 2 0 0 0 2 2h8v2h2v-2h2v-2H8z"/>
+  </svg>
+);
+OutlinedCropRotateIcon.displayName = 'OutlinedCropRotateIcon';
+export const CropRotateOutlinedIcon = OutlinedCropRotateIcon;
+
+export const OutlinedCropSquareIcon: 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 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H6V6h12v12z"/>
+  </svg>
+);
+OutlinedCropSquareIcon.displayName = 'OutlinedCropSquareIcon';
+export const CropSquareOutlinedIcon = OutlinedCropSquareIcon;
+
+export const OutlinedCurrencyBitcoinIcon: 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.06 11.57c.59-.69.94-1.59.94-2.57c0-1.86-1.27-3.43-3-3.87V3h-2v2h-2V3H9v2H6v2h2v10H6v2h3v2h2v-2h2v2h2v-2c2.21 0 4-1.79 4-4c0-1.45-.78-2.73-1.94-3.43zM10 7h4c1.1 0 2 .9 2 2s-.9 2-2 2h-4V7zm5 10h-5v-4h5c1.1 0 2 .9 2 2s-.9 2-2 2z"/>
+  </svg>
+);
+OutlinedCurrencyBitcoinIcon.displayName = 'OutlinedCurrencyBitcoinIcon';
+export const CurrencyBitcoinOutlinedIcon = OutlinedCurrencyBitcoinIcon;
+
+export const OutlinedCurrencyFrancIcon: 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 5V3H7v13H5v2h2v3h2v-3h4v-2H9v-3h8v-2H9V5z"/>
+  </svg>
+);
+OutlinedCurrencyFrancIcon.displayName = 'OutlinedCurrencyFrancIcon';
+export const CurrencyFrancOutlinedIcon = OutlinedCurrencyFrancIcon;
+
+export const OutlinedCurrencyLiraIcon: 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 8.76V3h2v4.51L15 5v2.36l-4 2.51l.01 2.35L15 9.72v2.36l-4 2.51V19c2.76 0 5-2.24 5-5h2c0 3.87-3.13 7-7 7H9v-5.16l-3 1.88v-2.36l3-1.88v-2.36L6 13v-2.36l3-1.88z"/>
+  </svg>
+);
+OutlinedCurrencyLiraIcon.displayName = 'OutlinedCurrencyLiraIcon';
+export const CurrencyLiraOutlinedIcon = OutlinedCurrencyLiraIcon;
+
+export const OutlinedCurrencyPoundIcon: 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 21c1.93 0 3.62-1.17 4-3l-1.75-.88C16 18.21 15.33 19 14 19H9.1c.83-1 1.5-2.34 1.5-4c0-.35-.03-.69-.08-1H14v-2H9.82C9 10.42 8 9.6 8 8a3.5 3.5 0 0 1 6.78-1.22L16.63 6c-.8-2.05-2.79-3.5-5.13-3.5C8.46 2.5 6 4.96 6 8c0 1.78.79 2.9 1.49 4H6v2h2.47c.08.31.13.64.13 1c0 2.7-2.6 4-2.6 4v2h8z"/>
+  </svg>
+);
+OutlinedCurrencyPoundIcon.displayName = 'OutlinedCurrencyPoundIcon';
+export const CurrencyPoundOutlinedIcon = OutlinedCurrencyPoundIcon;
+
+export const OutlinedCurrencyRubleIcon: 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.5 3H7v9H5v2h2v2H5v2h2v3h2v-3h4v-2H9v-2h4.5c3.04 0 5.5-2.46 5.5-5.5S16.54 3 13.5 3zm0 9H9V5h4.5C15.43 5 17 6.57 17 8.5S15.43 12 13.5 12z"/>
+  </svg>
+);
+OutlinedCurrencyRubleIcon.displayName = 'OutlinedCurrencyRubleIcon';
+export const CurrencyRubleOutlinedIcon = OutlinedCurrencyRubleIcon;
+
+export const OutlinedCurrencyRupeeIcon: 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.66 7c-.56-1.18-1.76-2-3.16-2H6V3h12v2h-3.26c.48.58.84 1.26 1.05 2H18v2h-2.02c-.25 2.8-2.61 5-5.48 5h-.73l6.73 7h-2.77L7 14v-2h3.5c1.76 0 3.22-1.3 3.46-3H6V7h7.66z"/>
+  </svg>
+);
+OutlinedCurrencyRupeeIcon.displayName = 'OutlinedCurrencyRupeeIcon';
+export const CurrencyRupeeOutlinedIcon = OutlinedCurrencyRupeeIcon;
+
+export const OutlinedCurrencyYenIcon: 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.92 11H18v2h-5v2h5v2h-5v4h-2v-4H6v-2h5v-2H6v-2h4.08L5 3h2.37L12 10.29L16.63 3H19z"/>
+  </svg>
+);
+OutlinedCurrencyYenIcon.displayName = 'OutlinedCurrencyYenIcon';
+export const CurrencyYenOutlinedIcon = OutlinedCurrencyYenIcon;
+
+export const OutlinedCurrencyYuanIcon: 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.28 12H18v2h-5v7h-2v-7H6v-2h4.72L5 3h2.37L12 10.29L16.63 3H19z"/>
+  </svg>
+);
+OutlinedCurrencyYuanIcon.displayName = 'OutlinedCurrencyYuanIcon';
+export const CurrencyYuanOutlinedIcon = OutlinedCurrencyYuanIcon;
+
+export const OutlinedDeblurIcon: 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}>
+    <circle cx="6" cy="14" r="1"/><circle cx="6" cy="18" r="1"/><circle cx="6" cy="10" r="1"/><circle cx="3" cy="10" r=".5"/><circle cx="6" cy="6" r="1"/><circle cx="3" cy="14" r=".5"/><circle cx="10" cy="21" r=".5"/><circle cx="10" cy="3" r=".5"/><circle cx="10" cy="6" r="1"/><circle cx="10" cy="14" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="10" cy="18" r="1"/><path fill={color || 'currentColor'} d="M12 3v2c3.86 0 7 3.14 7 7s-3.14 7-7 7v2c4.96 0 9-4.04 9-9s-4.04-9-9-9z"/>
+  </svg>
+);
+OutlinedDeblurIcon.displayName = 'OutlinedDeblurIcon';
+export const DeblurOutlinedIcon = OutlinedDeblurIcon;
+
+export const OutlinedDehazeIcon: 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="M2 16v2h20v-2H2zm0-5v2h20v-2H2zm0-5v2h20V6H2z"/>
+  </svg>
+);
+OutlinedDehazeIcon.displayName = 'OutlinedDehazeIcon';
+export const DehazeOutlinedIcon = OutlinedDehazeIcon;
+
+export const OutlinedDetailsIcon: 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 3L2 21h20L12 3zm1 5.92L18.6 19H13V8.92zm-2 0V19H5.4L11 8.92z"/>
+  </svg>
+);
+OutlinedDetailsIcon.displayName = 'OutlinedDetailsIcon';
+export const DetailsOutlinedIcon = OutlinedDetailsIcon;
+
+export const OutlinedDirtyLensIcon: 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 5h-3.17L15 3H9L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 14h-7.02c-.22-.84-.52-1.76-.13-2.33c.81-1.12 2.67 1.77 3.81-.09c.77-1.57-1.58-1.29-1.64-2.12c-.05-.84 3.68.17 3.04-1.66c-.61-1.73-2.42.48-2.76-.53c-.58-1.74 4.7-1.68 2.85-4.01c-1.76-2.22-2.47 2.85-4.41 2.33c-1.34-.36-1.01-2.88-2.65-2.44c-1.88.51 1.03 2.2 0 2.86c-.96.63-1.72-.92-2.51-1.19c-.2-.07-.69-.05-.91.19c-.78.86.28 1.16.25 1.91c-.02.75-1.59.49-1.51 1.49c.12 1.6 2.18.45 2.4 1.24c.55 1.98-1.89 2.15-.5 3.27c1.53.71 1.91-1.94 2.8-1.35c.58.38.3 1.45.16 2.43H4V7h4.05l1.83-2h4.24l1.83 2H20v12z"/><path fill={color || 'currentColor'} d="M17.28 17.15c0 .48.39.86.86.86c.48 0 .86-.38.86-.86s-.39-.86-.86-.86c-.48 0-.86.38-.86.86z"/>
+  </svg>
+);
+OutlinedDirtyLensIcon.displayName = 'OutlinedDirtyLensIcon';
+export const DirtyLensOutlinedIcon = OutlinedDirtyLensIcon;
+
+export const OutlinedEditIcon: 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.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/>
+  </svg>
+);
+OutlinedEditIcon.displayName = 'OutlinedEditIcon';
+export const EditOutlinedIcon = OutlinedEditIcon;
+
+export const OutlinedEuroIcon: 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 18.5A6.48 6.48 0 0 1 9.24 15H15l1-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15l1-2H9.24A6.491 6.491 0 0 1 15 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0 0 15 3c-3.92 0-7.24 2.51-8.48 6H3l-1 2h4.06a8.262 8.262 0 0 0 0 2H3l-1 2h4.52c1.24 3.49 4.56 6 8.48 6c2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z"/>
+  </svg>
+);
+OutlinedEuroIcon.displayName = 'OutlinedEuroIcon';
+export const EuroOutlinedIcon = OutlinedEuroIcon;
+
+export const OutlinedExposureIcon: 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-2zm-1.41 2L5 17.59V5h12.59zM6.41 19L19 6.41V19H6.41zM6 7h5v1.5H6zm10 5.5h-1.5v2h-2V16h2v2H16v-2h2v-1.5h-2z"/>
+  </svg>
+);
+OutlinedExposureIcon.displayName = 'OutlinedExposureIcon';
+export const ExposureOutlinedIcon = OutlinedExposureIcon;
+
+export const OutlinedExposureNeg1Icon: 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 11v2h8v-2H4zm15 7h-2V7.38L14 8.4V6.7L18.7 5h.3v13z"/>
+  </svg>
+);
+OutlinedExposureNeg1Icon.displayName = 'OutlinedExposureNeg1Icon';
+export const ExposureNeg1OutlinedIcon = OutlinedExposureNeg1Icon;
+
+export const OutlinedExposureNeg2Icon: 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.05 16.29l2.86-3.07c.38-.39.72-.79 1.04-1.18c.32-.39.59-.78.82-1.17s.41-.78.54-1.17s.19-.79.19-1.18c0-.53-.09-1.02-.27-1.46s-.44-.81-.78-1.11c-.34-.31-.77-.54-1.26-.71A5.72 5.72 0 0 0 16.47 5c-.69 0-1.31.11-1.85.32c-.54.21-1 .51-1.36.88c-.37.37-.65.8-.84 1.3c-.18.47-.27.97-.28 1.5h2.14c.01-.31.05-.6.13-.87c.09-.29.23-.54.4-.75c.18-.21.41-.37.68-.49s.6-.18.96-.18c.31 0 .58.05.81.15s.43.25.59.43s.28.4.37.65c.08.25.13.52.13.81c0 .22-.03.43-.08.65c-.06.22-.15.45-.29.7c-.14.25-.32.53-.56.83c-.23.3-.52.65-.88 1.03l-4.17 4.55V18H21v-1.71h-5.95zM2 11v2h8v-2H2z"/>
+  </svg>
+);
+OutlinedExposureNeg2Icon.displayName = 'OutlinedExposureNeg2Icon';
+export const ExposureNeg2OutlinedIcon = OutlinedExposureNeg2Icon;
+
+export const OutlinedExposurePlus1Icon: 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 7H8v4H4v2h4v4h2v-4h4v-2h-4V7zm10 11h-2V7.38L15 8.4V6.7L19.7 5h.3v13z"/>
+  </svg>
+);
+OutlinedExposurePlus1Icon.displayName = 'OutlinedExposurePlus1Icon';
+export const ExposurePlus1OutlinedIcon = OutlinedExposurePlus1Icon;
+
+export const OutlinedExposurePlus2Icon: 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.05 16.29l2.86-3.07c.38-.39.72-.79 1.04-1.18c.32-.39.59-.78.82-1.17s.41-.78.54-1.17c.13-.39.19-.79.19-1.18c0-.53-.09-1.02-.27-1.46s-.44-.81-.78-1.11c-.34-.31-.77-.54-1.26-.71A5.72 5.72 0 0 0 17.47 5c-.69 0-1.31.11-1.85.32c-.54.21-1 .51-1.36.88c-.37.37-.65.8-.84 1.3c-.18.47-.27.97-.28 1.5h2.14c.01-.31.05-.6.13-.87c.09-.29.23-.54.4-.75c.18-.21.41-.37.68-.49s.6-.18.96-.18c.31 0 .58.05.81.15s.43.25.59.43s.28.4.37.65c.08.25.13.52.13.81c0 .22-.03.43-.08.65c-.06.22-.15.45-.29.7c-.14.25-.32.53-.56.83c-.23.3-.52.65-.88 1.03l-4.17 4.55V18H22v-1.71h-5.95zM8 7H6v4H2v2h4v4h2v-4h4v-2H8V7z"/>
+  </svg>
+);
+OutlinedExposurePlus2Icon.displayName = 'OutlinedExposurePlus2Icon';
+export const ExposurePlus2OutlinedIcon = OutlinedExposurePlus2Icon;
+
+export const OutlinedExposureZeroIcon: 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.14 12.5c0 1-.1 1.85-.3 2.55s-.48 1.27-.83 1.7c-.36.44-.79.75-1.3.95s-1.07.3-1.7.3c-.62 0-1.18-.1-1.69-.3c-.51-.2-.95-.51-1.31-.95s-.65-1.01-.85-1.7c-.2-.7-.3-1.55-.3-2.55v-2.04c0-1 .1-1.85.3-2.55c.2-.7.48-1.26.84-1.69c.36-.43.8-.74 1.31-.93C10.81 5.1 11.38 5 12 5c.63 0 1.19.1 1.7.29c.51.19.95.5 1.31.93c.36.43.64.99.84 1.69c.2.7.3 1.54.3 2.55v2.04h-.01zm-2.11-2.36c0-.64-.05-1.18-.13-1.62c-.09-.44-.22-.79-.4-1.06c-.17-.27-.39-.46-.64-.58c-.25-.13-.54-.19-.86-.19s-.61.06-.86.18s-.47.31-.64.58s-.31.62-.4 1.06s-.13.98-.13 1.62v2.67c0 .64.05 1.18.14 1.62c.09.45.23.81.4 1.09s.39.48.64.61s.54.19.87.19s.62-.06.87-.19s.46-.33.63-.61s.3-.64.39-1.09s.13-.99.13-1.62v-2.66h-.01z"/>
+  </svg>
+);
+OutlinedExposureZeroIcon.displayName = 'OutlinedExposureZeroIcon';
+export const ExposureZeroOutlinedIcon = OutlinedExposureZeroIcon;
+
+export const OutlinedFaceRetouchingNaturalIcon: 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.89 10.75c.07.41.11.82.11 1.25c0 4.41-3.59 8-8 8s-8-3.59-8-8c0-.05.01-.1 0-.14c2.6-.98 4.69-2.99 5.74-5.55c3.38 4.14 7.97 3.73 8.99 3.61l-.89-1.93c-.13.01-4.62.38-7.18-3.86c1.01-.16 1.71-.15 2.59-.01c2.52-1.15 1.93-.89 2.76-1.26A9.62 9.62 0 0 0 12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10c0-1.43-.3-2.78-.84-4.01l-1.27 2.76zM8.08 5.03a8.046 8.046 0 0 1-3.66 4.44a8.046 8.046 0 0 1 3.66-4.44z"/><circle cx="15" cy="13" r="1.25"/><circle cx="9" cy="13" r="1.25"/><path fill={color || 'currentColor'} d="M23 4.5l-2.4-1.1L19.5 1l-1.1 2.4L16 4.5l2.4 1.1L19.5 8l1.1-2.4z"/>
+  </svg>
+);
+OutlinedFaceRetouchingNaturalIcon.displayName = 'OutlinedFaceRetouchingNaturalIcon';
+export const FaceRetouchingNaturalOutlinedIcon = OutlinedFaceRetouchingNaturalIcon;
+
+export const OutlinedFaceRetouchingOffIcon: 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}>
+    <circle cx="9" cy="13" r="1.25"/><path fill={color || 'currentColor'} d="M17.5 10c.75 0 1.47-.09 2.17-.24c.21.71.33 1.46.33 2.24c0 1.22-.28 2.37-.77 3.4l1.49 1.49A9.981 9.981 0 0 0 22 12c0-5.52-4.48-10-10-10c-1.78 0-3.44.47-4.89 1.28l5.33 5.33c1.49.88 3.21 1.39 5.06 1.39zm-6.84-5.88c.43-.07.88-.12 1.34-.12c2.9 0 5.44 1.56 6.84 3.88c-.43.07-.88.12-1.34.12c-2.9 0-5.44-1.56-6.84-3.88zm-8.77-.4l2.19 2.19A9.958 9.958 0 0 0 2 12c0 5.52 4.48 10 10 10c2.29 0 4.4-.78 6.09-2.08l2.19 2.19l1.41-1.41L3.31 2.31L1.89 3.72zm14.77 14.77A7.91 7.91 0 0 1 12 20c-4.41 0-8-3.59-8-8c0-.05.01-.1 0-.14a9.946 9.946 0 0 0 3.64-2.39l9.02 9.02zM6.23 8.06c-.53.55-1.14 1.03-1.81 1.41c.26-.77.63-1.48 1.09-2.13l.72.72z"/>
+  </svg>
+);
+OutlinedFaceRetouchingOffIcon.displayName = 'OutlinedFaceRetouchingOffIcon';
+export const FaceRetouchingOffOutlinedIcon = OutlinedFaceRetouchingOffIcon;
+
+export const OutlinedFilterIcon: 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.96 10.29l-2.75 3.54l-1.96-2.36L8.5 15h11l-3.54-4.71zM3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm18-4H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14z"/>
+  </svg>
+);
+OutlinedFilterIcon.displayName = 'OutlinedFilterIcon';
+export const FilterOutlinedIcon = OutlinedFilterIcon;
+
+export const OutlinedFilter1Icon: 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 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm11 10h2V5h-4v2h2v8zm7-14H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14z"/>
+  </svg>
+);
+OutlinedFilter1Icon.displayName = 'OutlinedFilter1Icon';
+export const Filter1OutlinedIcon = OutlinedFilter1Icon;
+
+export const OutlinedFilter2Icon: 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 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm18-4H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14zm-4-4h-4v-2h2a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4v2h4v2h-2a2 2 0 0 0-2 2v4h6v-2z"/>
+  </svg>
+);
+OutlinedFilter2Icon.displayName = 'OutlinedFilter2Icon';
+export const Filter2OutlinedIcon = OutlinedFilter2Icon;
+
+export const OutlinedFilter3Icon: 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 1H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14zM3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm14 8v-1.5c0-.83-.67-1.5-1.5-1.5c.83 0 1.5-.67 1.5-1.5V7a2 2 0 0 0-2-2h-4v2h4v2h-2v2h2v2h-4v2h4a2 2 0 0 0 2-2z"/>
+  </svg>
+);
+OutlinedFilter3Icon.displayName = 'OutlinedFilter3Icon';
+export const Filter3OutlinedIcon = OutlinedFilter3Icon;
+
+export const OutlinedFilter4Icon: 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 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm12 10h2V5h-2v4h-2V5h-2v6h4v4zm6-14H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14z"/>
+  </svg>
+);
+OutlinedFilter4Icon.displayName = 'OutlinedFilter4Icon';
+export const Filter4OutlinedIcon = OutlinedFilter4Icon;
+
+export const OutlinedFilter5Icon: 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 1H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14zM3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm14 8v-2a2 2 0 0 0-2-2h-2V7h4V5h-6v6h4v2h-4v2h4a2 2 0 0 0 2-2z"/>
+  </svg>
+);
+OutlinedFilter5Icon.displayName = 'OutlinedFilter5Icon';
+export const Filter5OutlinedIcon = OutlinedFilter5Icon;
+
+export const OutlinedFilter6Icon: 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 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm18-4H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14zm-8-2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-2V7h4V5h-4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2zm0-4h2v2h-2v-2z"/>
+  </svg>
+);
+OutlinedFilter6Icon.displayName = 'OutlinedFilter6Icon';
+export const Filter6OutlinedIcon = OutlinedFilter6Icon;
+
+export const OutlinedFilter7Icon: 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 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm18-4H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14zm-8-2l4-8V5h-6v2h4l-4 8h2z"/>
+  </svg>
+);
+OutlinedFilter7Icon.displayName = 'OutlinedFilter7Icon';
+export const Filter7OutlinedIcon = OutlinedFilter7Icon;
+
+export const OutlinedFilter8Icon: 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 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm18-4H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14zm-8-2h2a2 2 0 0 0 2-2v-1.5c0-.83-.67-1.5-1.5-1.5c.83 0 1.5-.67 1.5-1.5V7a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v1.5c0 .83.67 1.5 1.5 1.5c-.83 0-1.5.67-1.5 1.5V13a2 2 0 0 0 2 2zm0-8h2v2h-2V7zm0 4h2v2h-2v-2z"/>
+  </svg>
+);
+OutlinedFilter8Icon.displayName = 'OutlinedFilter8Icon';
+export const Filter8OutlinedIcon = OutlinedFilter8Icon;
+
+export const OutlinedFilter9Icon: 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 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm18-4H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14zM15 5h-2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2v2h-4v2h4a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 4h-2V7h2v2z"/>
+  </svg>
+);
+OutlinedFilter9Icon.displayName = 'OutlinedFilter9Icon';
+export const Filter9OutlinedIcon = OutlinedFilter9Icon;
+
+export const OutlinedFilter9PlusIcon: 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 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm11 7V8a2 2 0 0 0-2-2h-1a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h1v1H9v2h3a2 2 0 0 0 2-2zm-3-3V8h1v1h-1zm10-8H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 8h-2V7h-2v2h-2v2h2v2h2v-2h2v6H7V3h14v6z"/>
+  </svg>
+);
+OutlinedFilter9PlusIcon.displayName = 'OutlinedFilter9PlusIcon';
+export const Filter9PlusOutlinedIcon = OutlinedFilter9PlusIcon;
+
+export const OutlinedFilterBAndWIcon: 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 16l-7-8v8H5l7-8V5h7v14z"/>
+  </svg>
+);
+OutlinedFilterBAndWIcon.displayName = 'OutlinedFilterBAndWIcon';
+export const FilterBAndWOutlinedIcon = OutlinedFilterBAndWIcon;
+
+export const OutlinedFilterCenterFocusIcon: 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 15H3v4c0 1.1.9 2 2 2h4v-2H5v-4zM5 5h4V3H5c-1.1 0-2 .9-2 2v4h2V5zm14-2h-4v2h4v4h2V5c0-1.1-.9-2-2-2zm0 16h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4zM12 9c-1.66 0-3 1.34-3 3s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3z"/>
+  </svg>
+);
+OutlinedFilterCenterFocusIcon.displayName = 'OutlinedFilterCenterFocusIcon';
+export const FilterCenterFocusOutlinedIcon = OutlinedFilterCenterFocusIcon;
+
+export const OutlinedFilterDramaIcon: 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.35 10.04A7.49 7.49 0 0 0 12 4a7.48 7.48 0 0 0-6.64 4.04A5.996 5.996 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5c0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4s1.79-4 4-4s4 1.79 4 4h2c0-2.76-1.86-5.08-4.4-5.78C8.61 6.88 10.2 6 12 6c3.03 0 5.5 2.47 5.5 5.5v.5H19c1.65 0 3 1.35 3 3s-1.35 3-3 3z"/>
+  </svg>
+);
+OutlinedFilterDramaIcon.displayName = 'OutlinedFilterDramaIcon';
+export const FilterDramaOutlinedIcon = OutlinedFilterDramaIcon;
+
+export const OutlinedFilterFramesIcon: 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 4h-4l-4-4l-4 4H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H4V6h4.52l3.52-3.5L15.52 6H20v14zM6 18h12V8H6v10zm2-8h8v6H8v-6z"/>
+  </svg>
+);
+OutlinedFilterFramesIcon.displayName = 'OutlinedFilterFramesIcon';
+export const FilterFramesOutlinedIcon = OutlinedFilterFramesIcon;
+
+export const OutlinedFilterHdrIcon: 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 6l-4.22 5.63l1.25 1.67L14 9.33L19 16h-8.46l-4.01-5.37L1 18h22L14 6zM5 16l1.52-2.03L8.04 16H5z"/>
+  </svg>
+);
+OutlinedFilterHdrIcon.displayName = 'OutlinedFilterHdrIcon';
+export const FilterHdrOutlinedIcon = OutlinedFilterHdrIcon;
+
+export const OutlinedFilterNoneIcon: 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 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm18-4H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14z"/>
+  </svg>
+);
+OutlinedFilterNoneIcon.displayName = 'OutlinedFilterNoneIcon';
+export const FilterNoneOutlinedIcon = OutlinedFilterNoneIcon;
+
+export const OutlinedFilterTiltShiftIcon: 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 4.07V2.05c-2.01.2-3.84 1-5.32 2.21L7.1 5.69A7.941 7.941 0 0 1 11 4.07zm7.32.19A9.949 9.949 0 0 0 13 2.05v2.02c1.46.18 2.79.76 3.9 1.62l1.42-1.43zM19.93 11h2.02c-.2-2.01-1-3.84-2.21-5.32L18.31 7.1a7.941 7.941 0 0 1 1.62 3.9zM5.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 13zM15 12c0-1.66-1.34-3-3-3s-3 1.34-3 3s1.34 3 3 3s3-1.34 3-3zm3.31 4.9l1.43 1.43a9.981 9.981 0 0 0 2.21-5.32h-2.02a7.945 7.945 0 0 1-1.62 3.89zM13 19.93v2.02c2.01-.2 3.84-1 5.32-2.21l-1.43-1.43c-1.1.86-2.43 1.44-3.89 1.62zm-7.32-.19A9.981 9.981 0 0 0 11 21.95v-2.02a7.941 7.941 0 0 1-3.9-1.62l-1.42 1.43z"/>
+  </svg>
+);
+OutlinedFilterTiltShiftIcon.displayName = 'OutlinedFilterTiltShiftIcon';
+export const FilterTiltShiftOutlinedIcon = OutlinedFilterTiltShiftIcon;
+
+export const OutlinedFilterVintageIcon: 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.7 12.4a6.06 6.06 0 0 0-.86-.4c.29-.11.58-.24.86-.4a6.012 6.012 0 0 0 3-5.19c-.91-.52-1.95-.8-3.01-.8c-1.02 0-2.05.26-2.99.8c-.28.16-.54.35-.78.54c.05-.31.08-.63.08-.95c0-2.22-1.21-4.15-3-5.19C10.21 1.85 9 3.78 9 6c0 .32.03.64.08.95c-.24-.2-.5-.39-.78-.55c-.94-.54-1.97-.8-2.99-.8c-1.05 0-2.1.28-3.01.8a5.97 5.97 0 0 0 3 5.19c.28.16.57.29.86.4c-.29.11-.58.24-.86.4a6.012 6.012 0 0 0-3 5.19c.91.52 1.95.8 3.01.8c1.02 0 2.05-.26 2.99-.8c.28-.16.54-.35.78-.54c-.05.32-.08.64-.08.96c0 2.22 1.21 4.15 3 5.19c1.79-1.04 3-2.97 3-5.19c0-.32-.03-.64-.08-.95c.24.2.5.38.78.54c.94.54 1.97.8 2.99.8c1.05 0 2.1-.28 3.01-.8a6.012 6.012 0 0 0-3-5.19zm-2.54-3.88c.21-.17.38-.29.54-.37c.61-.35 1.3-.54 2-.54c.27 0 .53.03.79.08c-.31.91-.94 1.69-1.78 2.18c-.17.1-.36.18-.58.27l-1.38.52c-.17-.46-.41-.87-.72-1.24l1.13-.9zM12 3.37c.63.72 1 1.66 1 2.63c0 .19-.02.41-.05.63l-.23 1.44C12.48 8.03 12.24 8 12 8s-.48.03-.71.07l-.23-1.44C11.02 6.41 11 6.19 11 6c0-.98.37-1.91 1-2.63zM4.51 7.68c.26-.06.53-.08.8-.08c.69 0 1.38.18 1.99.54c.15.09.32.2.49.35l1.15.96c-.3.36-.53.76-.7 1.2l-1.38-.52c-.21-.09-.4-.18-.56-.27c-.87-.5-1.49-1.27-1.79-2.18zm3.33 7.79c-.21.17-.38.29-.54.37c-.61.35-1.3.54-2 .54c-.27 0-.53-.03-.79-.08c.31-.91.94-1.69 1.78-2.18c.17-.1.36-.18.58-.27l1.38-.52c.16.46.41.88.72 1.24l-1.13.9zM12 20.63c-.63-.72-1-1.66-1-2.63c0-.2.02-.41.06-.65l.22-1.42c.23.04.47.07.72.07c.24 0 .48-.03.71-.07l.23 1.44c.04.22.06.44.06.63c0 .98-.37 1.91-1 2.63zm6.69-4.24a3.916 3.916 0 0 1-2.48-.88l-1.15-.96c.3-.36.54-.76.7-1.21l1.38.52c.22.08.41.17.57.26c.85.49 1.47 1.27 1.78 2.18c-.27.07-.54.09-.8.09z"/>
+  </svg>
+);
+OutlinedFilterVintageIcon.displayName = 'OutlinedFilterVintageIcon';
+export const FilterVintageOutlinedIcon = OutlinedFilterVintageIcon;
+
+export const OutlinedFlareIcon: 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 11H1v2h6v-2zm2.17-3.24L7.05 5.64L5.64 7.05l2.12 2.12l1.41-1.41zM13 1h-2v6h2V1zm5.36 6.05l-1.41-1.41l-2.12 2.12l1.41 1.41l2.12-2.12zM17 11v2h6v-2h-6zm-5-2c-1.66 0-3 1.34-3 3s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3zm2.83 7.24l2.12 2.12l1.41-1.41l-2.12-2.12l-1.41 1.41zm-9.19.71l1.41 1.41l2.12-2.12l-1.41-1.41l-2.12 2.12zM11 23h2v-6h-2v6z"/>
+  </svg>
+);
+OutlinedFlareIcon.displayName = 'OutlinedFlareIcon';
+export const FlareOutlinedIcon = OutlinedFlareIcon;
+
+export const OutlinedFlashAutoIcon: 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 2v12h3v9l7-12H9l4-9H3zm16 0h-2l-3.2 9h1.9l.7-2h3.2l.7 2h1.9L19 2zm-2.15 5.65L18 4l1.15 3.65h-2.3z"/>
+  </svg>
+);
+OutlinedFlashAutoIcon.displayName = 'OutlinedFlashAutoIcon';
+export const FlashAutoOutlinedIcon = OutlinedFlashAutoIcon;
+
+export const OutlinedFlashOffIcon: 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 10h-3.61l2.28 2.28zm0-8H7v1.61l6.13 6.13zm-13.59.86L2 4.27l5 5V13h3v9l3.58-6.15L17.73 20l1.41-1.41z"/>
+  </svg>
+);
+OutlinedFlashOffIcon.displayName = 'OutlinedFlashOffIcon';
+export const FlashOffOutlinedIcon = OutlinedFlashOffIcon;
+
+export const OutlinedFlashOnIcon: 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 2v11h3v9l7-12h-4l3-8z"/>
+  </svg>
+);
+OutlinedFlashOnIcon.displayName = 'OutlinedFlashOnIcon';
+export const FlashOnOutlinedIcon = OutlinedFlashOnIcon;
+
+export const OutlinedFlipIcon: 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 21h2v-2h-2v2zm4-12h2V7h-2v2zM3 5v14c0 1.1.9 2 2 2h4v-2H5V5h4V3H5c-1.1 0-2 .9-2 2zm16-2v2h2c0-1.1-.9-2-2-2zm-8 20h2V1h-2v22zm8-6h2v-2h-2v2zM15 5h2V3h-2v2zm4 8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2z"/>
+  </svg>
+);
+OutlinedFlipIcon.displayName = 'OutlinedFlipIcon';
+export const FlipOutlinedIcon = OutlinedFlipIcon;
+
+export const OutlinedFlipCameraAndroidIcon: 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 12c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3zm4 0c0 .55-.45 1-1 1s-1-.45-1-1s.45-1 1-1s1 .45 1 1z"/><path fill={color || 'currentColor'} d="M8 10V8H5.09C6.47 5.61 9.05 4 12 4c3.72 0 6.85 2.56 7.74 6h2.06c-.93-4.56-4.96-8-9.8-8c-3.27 0-6.18 1.58-8 4.01V4H2v6h6zm8 4v2h2.91c-1.38 2.39-3.96 4-6.91 4c-3.72 0-6.85-2.56-7.74-6H2.2c.93 4.56 4.96 8 9.8 8c3.27 0 6.18-1.58 8-4.01V20h2v-6h-6z"/>
+  </svg>
+);
+OutlinedFlipCameraAndroidIcon.displayName = 'OutlinedFlipCameraAndroidIcon';
+export const FlipCameraAndroidOutlinedIcon = OutlinedFlipCameraAndroidIcon;
+
+export const OutlinedFlipCameraIosIcon: 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 5h-3.17L15 3H9L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 14H4V7h4.05l.59-.65L9.88 5h4.24l1.24 1.35l.59.65H20v12z"/><path fill={color || 'currentColor'} d="M12 17c-2.21 0-4-1.79-4-4h2l-2.5-2.5L5 13h2c0 2.76 2.24 5 5 5c.86 0 1.65-.24 2.36-.62l-.74-.74c-.49.23-1.04.36-1.62.36zm0-9c-.86 0-1.65.24-2.36.62l.74.73C10.87 9.13 11.42 9 12 9c2.21 0 4 1.79 4 4h-2l2.5 2.5L19 13h-2c0-2.76-2.24-5-5-5z"/>
+  </svg>
+);
+OutlinedFlipCameraIosIcon.displayName = 'OutlinedFlipCameraIosIcon';
+export const FlipCameraIosOutlinedIcon = OutlinedFlipCameraIosIcon;
+
+export const OutlinedGradientIcon: 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 9h2v2h-2V9zm-2 2h2v2H9v-2zm4 0h2v2h-2v-2zm2-2h2v2h-2V9zM7 9h2v2H7V9zm12-6H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 18H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2zm2-7h-2v2h2v2h-2v-2h-2v2h-2v-2h-2v2H9v-2H7v2H5v-2h2v-2H5V5h14v6z"/>
+  </svg>
+);
+OutlinedGradientIcon.displayName = 'OutlinedGradientIcon';
+export const GradientOutlinedIcon = OutlinedGradientIcon;
+
+export const OutlinedGrainIcon: 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 12c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zM6 8c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm0 8c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm12-8c1.1 0 2-.9 2-2s-.9-2-2-2s-2 .9-2 2s.9 2 2 2zm-4 8c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm4-4c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm-4-4c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm-4-4c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2z"/>
+  </svg>
+);
+OutlinedGrainIcon.displayName = 'OutlinedGrainIcon';
+export const GrainOutlinedIcon = OutlinedGrainIcon;
+
+export const OutlinedGridOffIcon: 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="M8 4v.89l2 2V4h4v4h-2.89l2 2H14v.89l2 2V10h4v4h-2.89l2 2H20v.89l2 2V4c0-1.1-.9-2-2-2H5.11l2 2H8zm8 0h4v4h-4V4zM1.41 1.14L0 2.55l2 2V20c0 1.1.9 2 2 2h15.45l2.01 2.01l1.41-1.41L1.41 1.14zM10 12.55L11.45 14H10v-1.45zm-6-6L5.45 8H4V6.55zM8 20H4v-4h4v4zm0-6H4v-4h3.45l.55.55V14zm6 6h-4v-4h3.45l.55.55V20zm2 0v-1.45L17.45 20H16z"/>
+  </svg>
+);
+OutlinedGridOffIcon.displayName = 'OutlinedGridOffIcon';
+export const GridOffOutlinedIcon = OutlinedGridOffIcon;
+
+export const OutlinedGridOnIcon: 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 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z"/>
+  </svg>
+);
+OutlinedGridOnIcon.displayName = 'OutlinedGridOnIcon';
+export const GridOnOutlinedIcon = OutlinedGridOnIcon;
+
+export const OutlinedHdrEnhancedSelectIcon: 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 2c3.31 0 6 2.69 6 6s-2.69 6-6 6s-6-2.69-6-6s2.69-6 6-6zm0 2C9.79 4 8 5.79 8 8s1.79 4 4 4s4-1.79 4-4s-1.79-4-4-4zm1 7h-2V9H9V7h2V5h2v2h2v2h-2v2zm11 9h-2v2h-1.5v-2h-2v-1.5h2v-2H22v2h2V20zm-6-1.5c0 .6-.4 1.1-.9 1.4L18 22h-1.5l-.9-2h-1.1v2H13v-6h3.5c.8 0 1.5.7 1.5 1.5v1zm-1.5 0v-1h-2v1h2zm-13-.5v-2H5v6H3.5v-2.5h-2V22H0v-6h1.5v2h2zm6.5-2c.8 0 1.5.7 1.5 1.5v3c0 .8-.7 1.5-1.5 1.5H6.5v-6H10zm0 4.5v-3H8v3h2z"/>
+  </svg>
+);
+OutlinedHdrEnhancedSelectIcon.displayName = 'OutlinedHdrEnhancedSelectIcon';
+export const HdrEnhancedSelectOutlinedIcon = OutlinedHdrEnhancedSelectIcon;
+
+export const OutlinedHdrOffIcon: 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.5 15v-2h1.1l.9 2H21l-.9-2.1c.5-.3.9-.8.9-1.4v-1c0-.8-.7-1.5-1.5-1.5H16v4.86L17.14 15h.36zm0-4.5h2v1h-2v-1zm-4.5 0v.36l1.5 1.5V10.5c0-.8-.7-1.5-1.5-1.5h-1.86l1.5 1.5H13zM2.51 2.49L1.45 3.55L6.9 9h-.4v2h-2V9H3v6h1.5v-2.5h2V15H8v-4.9l1.5 1.5V15h3.4l7.6 7.6l1.06-1.06z"/>
+  </svg>
+);
+OutlinedHdrOffIcon.displayName = 'OutlinedHdrOffIcon';
+export const HdrOffOutlinedIcon = OutlinedHdrOffIcon;
+
+export const OutlinedHdrOnIcon: 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 11.5v-1c0-.8-.7-1.5-1.5-1.5H16v6h1.5v-2h1.1l.9 2H21l-.9-2.1c.5-.3.9-.8.9-1.4zm-1.5 0h-2v-1h2v1zm-13-.5h-2V9H3v6h1.5v-2.5h2V15H8V9H6.5v2zM13 9H9.5v6H13c.8 0 1.5-.7 1.5-1.5v-3c0-.8-.7-1.5-1.5-1.5zm0 4.5h-2v-3h2v3z"/>
+  </svg>
+);
+OutlinedHdrOnIcon.displayName = 'OutlinedHdrOnIcon';
+export const HdrOnOutlinedIcon = OutlinedHdrOnIcon;
+
+export const OutlinedHdrPlusIcon: 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="M8.13 19c1.15.64 2.47 1 3.87 1c4.41 0 8-3.59 8-8s-3.59-8-8-8s-8 3.59-8 8c0 2.52 1.17 4.77 3 6.24V13h3.5c.8 0 1.5.7 1.5 1.5v1c0 .6-.4 1.1-.9 1.4L12 19h-1.5l-.9-2H8.5v2h-.37zM12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12S6.48 2 12 2zm5.5 14H16v1.5h-1.5V16H13v-1.5h1.5V13H16v1.49h1.5V16zm-7-.5v-1h-2v1h2zm0-7.5V6H12v6h-1.5V9.5h-2V12H7V6h1.5v2h2zM16 6c.8 0 1.5.7 1.5 1.5v3c0 .8-.7 1.5-1.5 1.5h-3V6h3zm0 4.5v-3h-1.5v3H16z"/>
+  </svg>
+);
+OutlinedHdrPlusIcon.displayName = 'OutlinedHdrPlusIcon';
+export const HdrPlusOutlinedIcon = OutlinedHdrPlusIcon;
+
+export const OutlinedHdrStrongIcon: 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 6c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zM5 8c-2.21 0-4 1.79-4 4s1.79 4 4 4s4-1.79 4-4s-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2s2 .9 2 2s-.9 2-2 2z"/>
+  </svg>
+);
+OutlinedHdrStrongIcon.displayName = 'OutlinedHdrStrongIcon';
+export const HdrStrongOutlinedIcon = OutlinedHdrStrongIcon;
+
+export const OutlinedHdrWeakIcon: 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 8c-2.21 0-4 1.79-4 4s1.79 4 4 4s4-1.79 4-4s-1.79-4-4-4zm12-2c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4s4 1.79 4 4s-1.79 4-4 4z"/>
+  </svg>
+);
+OutlinedHdrWeakIcon.displayName = 'OutlinedHdrWeakIcon';
+export const HdrWeakOutlinedIcon = OutlinedHdrWeakIcon;
+
+export const OutlinedHealingIcon: 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.73 12.02l3.98-3.98a.996.996 0 0 0 0-1.41l-4.34-4.34a.996.996 0 0 0-1.41 0l-3.98 3.98L8 2.29a1.001 1.001 0 0 0-1.41 0L2.25 6.63a.996.996 0 0 0 0 1.41l3.98 3.98L2.25 16a.996.996 0 0 0 0 1.41l4.34 4.34c.39.39 1.02.39 1.41 0l3.98-3.98l3.98 3.98c.2.2.45.29.71.29c.26 0 .51-.1.71-.29l4.34-4.34a.996.996 0 0 0 0-1.41l-3.99-3.98zM12 9c.55 0 1 .45 1 1s-.45 1-1 1s-1-.45-1-1s.45-1 1-1zm-4.71 1.96L3.66 7.34l3.63-3.63l3.62 3.62l-3.62 3.63zM10 13c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1zm2 2c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1zm2-4c.55 0 1 .45 1 1s-.45 1-1 1s-1-.45-1-1s.45-1 1-1zm2.66 9.34l-3.63-3.62l3.63-3.63l3.62 3.62l-3.62 3.63z"/>
+  </svg>
+);
+OutlinedHealingIcon.displayName = 'OutlinedHealingIcon';
+export const HealingOutlinedIcon = OutlinedHealingIcon;
+
+export const OutlinedHevcIcon: 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.5 11h-1V9H3v6h1.5v-2.5h1V15H7V9H5.5zM21 11v-1c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1h-1.5v.5h-1v-3h1v.5H21zm-6.75 2.5L13.5 9H12l1 6h2.5l1-6H15zM8 9v6h3.5v-1.5h-2v-1h2V11h-2v-.5h2V9z"/>
+  </svg>
+);
+OutlinedHevcIcon.displayName = 'OutlinedHevcIcon';
+export const HevcOutlinedIcon = OutlinedHevcIcon;
+
+export const OutlinedHideImageIcon: 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 5v11.17l2 2V5c0-1.1-.9-2-2-2H5.83l2 2H19zM2.81 2.81L1.39 4.22L3 5.83V19c0 1.1.9 2 2 2h13.17l1.61 1.61l1.41-1.41L2.81 2.81zM5 19V7.83l7.07 7.07l-.82 1.1L9 13l-3 4h8.17l2 2H5z"/>
+  </svg>
+);
+OutlinedHideImageIcon.displayName = 'OutlinedHideImageIcon';
+export const HideImageOutlinedIcon = OutlinedHideImageIcon;
+
+export const OutlinedImageIcon: 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 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z"/>
+  </svg>
+);
+OutlinedImageIcon.displayName = 'OutlinedImageIcon';
+export const ImageOutlinedIcon = OutlinedImageIcon;
+
+export const OutlinedImageAspectRatioIcon: 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 10h-2v2h2v-2zm0 4h-2v2h2v-2zm-8-4H6v2h2v-2zm4 0h-2v2h2v-2zm8-6H4c-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"/>
+  </svg>
+);
+OutlinedImageAspectRatioIcon.displayName = 'OutlinedImageAspectRatioIcon';
+export const ImageAspectRatioOutlinedIcon = OutlinedImageAspectRatioIcon;
+
+export const OutlinedImageNotSupportedIcon: 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.9 21.9l-6.1-6.1l-2.69-2.69L5 5L3.59 3.59L2.1 2.1L.69 3.51L3 5.83V19c0 1.1.9 2 2 2h13.17l2.31 2.31l1.42-1.41zM5 19V7.83l6.84 6.84l-.84 1.05L9 13l-3 4h8.17l2 2H5zM7.83 5l-2-2H19c1.1 0 2 .9 2 2v13.17l-2-2V5H7.83z"/>
+  </svg>
+);
+OutlinedImageNotSupportedIcon.displayName = 'OutlinedImageNotSupportedIcon';
+export const ImageNotSupportedOutlinedIcon = OutlinedImageNotSupportedIcon;
+
+export const OutlinedImageSearchIcon: 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 13v7H4V6h5.02c.05-.71.22-1.38.48-2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5l-2-2zm-1.5 5h-11l2.75-3.53l1.96 2.36l2.75-3.54L16.5 18zm2.8-9.11c.44-.7.7-1.51.7-2.39C20 4.01 17.99 2 15.5 2S11 4.01 11 6.5s2.01 4.5 4.49 4.5c.88 0 1.7-.26 2.39-.7L21 13.42L22.42 12L19.3 8.89zM15.5 9a2.5 2.5 0 0 1 0-5a2.5 2.5 0 0 1 0 5z"/>
+  </svg>
+);
+OutlinedImageSearchIcon.displayName = 'OutlinedImageSearchIcon';
+export const ImageSearchOutlinedIcon = OutlinedImageSearchIcon;
+
+export const OutlinedIncompleteCircleIcon: 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 12c0 5.52-4.48 10-10 10S2 17.52 2 12c0-2.76 1.12-5.26 2.93-7.07L12 12V2c5.52 0 10 4.48 10 10z"/>
+  </svg>
+);
+OutlinedIncompleteCircleIcon.displayName = 'OutlinedIncompleteCircleIcon';
+export const IncompleteCircleOutlinedIcon = OutlinedIncompleteCircleIcon;
+
+export const OutlinedIsoIcon: 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-2zM5.5 7.5h2v-2H9v2h2V9H9v2H7.5V9h-2V7.5zM19 19H5L19 5v14zm-2-2v-1.5h-5V17h5z"/>
+  </svg>
+);
+OutlinedIsoIcon.displayName = 'OutlinedIsoIcon';
+export const IsoOutlinedIcon = OutlinedIsoIcon;
+
+export const OutlinedLandscapeIcon: 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 6l-4.22 5.63l1.25 1.67L14 9.33L19 16h-8.46l-4.01-5.37L1 18h22L14 6zM5 16l1.52-2.03L8.04 16H5z"/>
+  </svg>
+);
+OutlinedLandscapeIcon.displayName = 'OutlinedLandscapeIcon';
+export const LandscapeOutlinedIcon = OutlinedLandscapeIcon;
+
+export const OutlinedLeakAddIcon: 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 3H3v3c1.66 0 3-1.34 3-3zm8 0h-2a9 9 0 0 1-9 9v2c6.08 0 11-4.93 11-11zm-4 0H8c0 2.76-2.24 5-5 5v2c3.87 0 7-3.13 7-7zm0 18h2a9 9 0 0 1 9-9v-2c-6.07 0-11 4.93-11 11zm8 0h3v-3c-1.66 0-3 1.34-3 3zm-4 0h2c0-2.76 2.24-5 5-5v-2c-3.87 0-7 3.13-7 7z"/>
+  </svg>
+);
+OutlinedLeakAddIcon.displayName = 'OutlinedLeakAddIcon';
+export const LeakAddOutlinedIcon = OutlinedLeakAddIcon;
+
+export const OutlinedLeakRemoveIcon: 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 3h-2c0 1.35-.31 2.63-.84 3.77l1.49 1.49C13.51 6.7 14 4.91 14 3zm7 9v-2c-1.91 0-3.7.49-5.27 1.35l1.49 1.49c1.15-.53 2.43-.84 3.78-.84zm0 4v-2c-.79 0-1.54.13-2.24.37l1.68 1.68c.19-.01.37-.05.56-.05zM10 3H8c0 .19-.04.37-.06.56l1.68 1.68c.25-.7.38-1.46.38-2.24zm-5.59-.14L3 4.27l2.84 2.84C5.03 7.67 4.06 8 3 8v2c1.61 0 3.09-.55 4.27-1.46L8.7 9.97A8.99 8.99 0 0 1 3 12v2c2.72 0 5.2-.99 7.11-2.62l2.51 2.51C10.99 15.81 10 18.29 10 21h2c0-2.16.76-4.14 2.03-5.7l1.43 1.43A6.972 6.972 0 0 0 14 21h2c0-1.06.33-2.03.89-2.84L19.73 21l1.41-1.41L4.41 2.86z"/>
+  </svg>
+);
+OutlinedLeakRemoveIcon.displayName = 'OutlinedLeakRemoveIcon';
+export const LeakRemoveOutlinedIcon = OutlinedLeakRemoveIcon;
+
+export const OutlinedLensIcon: 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-8m0-2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2z"/>
+  </svg>
+);
+OutlinedLensIcon.displayName = 'OutlinedLensIcon';
+export const LensOutlinedIcon = OutlinedLensIcon;
+
+export const OutlinedLinkedCameraIcon: 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 9v11H4V8h4.05l1.83-2H15V4H9L7.17 6H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9h-2zm.67-1.01H22A6.003 6.003 0 0 0 16 2v1.33c2.58 0 4.66 2.08 4.67 4.66zm-2.67 0h1.33A3.327 3.327 0 0 0 16 4.67V6c1.11 0 1.99.89 2 1.99zM7 14c0 2.76 2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5s-5 2.24-5 5zm8 0c0 1.65-1.35 3-3 3s-3-1.35-3-3s1.35-3 3-3s3 1.34 3 3z"/>
+  </svg>
+);
+OutlinedLinkedCameraIcon.displayName = 'OutlinedLinkedCameraIcon';
+export const LinkedCameraOutlinedIcon = OutlinedLinkedCameraIcon;
+
+export const OutlinedLogoDevIcon: 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-2zM7.68 14.98H6V9h1.71c1.28 0 1.71 1.03 1.71 1.71v2.56c0 .68-.42 1.71-1.74 1.71zm4.7-3.52v1.07H11.2v1.39h1.93v1.07h-2.25c-.4.01-.74-.31-.75-.71V9.75c-.01-.4.31-.74.71-.75h2.28v1.07H11.2v1.39h1.18zm4.5 2.77c-.48 1.11-1.33.89-1.71 0L13.77 9h1.18l1.07 4.11L17.09 9h1.18l-1.39 5.23z"/><path fill={color || 'currentColor'} d="M7.77 10.12h-.63v3.77h.63c.14 0 .28-.05.42-.16c.14-.1.21-.26.21-.47v-2.52c0-.21-.07-.37-.21-.47a.72.72 0 0 0-.42-.15z"/>
+  </svg>
+);
+OutlinedLogoDevIcon.displayName = 'OutlinedLogoDevIcon';
+export const LogoDevOutlinedIcon = OutlinedLogoDevIcon;
+
+export const OutlinedLooksIcon: 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 10c-3.86 0-7 3.14-7 7h2c0-2.76 2.24-5 5-5s5 2.24 5 5h2c0-3.86-3.14-7-7-7zm0-4C5.93 6 1 10.93 1 17h2c0-4.96 4.04-9 9-9s9 4.04 9 9h2c0-6.07-4.93-11-11-11z"/>
+  </svg>
+);
+OutlinedLooksIcon.displayName = 'OutlinedLooksIcon';
+export const LooksOutlinedIcon = OutlinedLooksIcon;
+
+export const OutlinedLooks3Icon: 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-4v-1.5c0-.83-.67-1.5-1.5-1.5c.83 0 1.5-.67 1.5-1.5V9a2 2 0 0 0-2-2H9v2h4v2h-2v2h2v2H9v2h4a2 2 0 0 0 2-2z"/>
+  </svg>
+);
+OutlinedLooks3Icon.displayName = 'OutlinedLooks3Icon';
+export const Looks3OutlinedIcon = OutlinedLooks3Icon;
+
+export const OutlinedLooks4Icon: 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.04 3h-14c-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 16h-14V5h14v14zm-6-2h2V7h-2v4h-2V7h-2v6h4z"/>
+  </svg>
+);
+OutlinedLooks4Icon.displayName = 'OutlinedLooks4Icon';
+export const Looks4OutlinedIcon = OutlinedLooks4Icon;
+
+export const OutlinedLooks5Icon: 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-4v-2a2 2 0 0 0-2-2h-2V9h4V7H9v6h4v2H9v2h4a2 2 0 0 0 2-2z"/>
+  </svg>
+);
+OutlinedLooks5Icon.displayName = 'OutlinedLooks5Icon';
+export const Looks5OutlinedIcon = OutlinedLooks5Icon;
+
+export const OutlinedLooks6Icon: 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 17h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-2V9h4V7h-4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2zm0-4h2v2h-2v-2zm8-10H5c-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"/>
+  </svg>
+);
+OutlinedLooks6Icon.displayName = 'OutlinedLooks6Icon';
+export const Looks6OutlinedIcon = OutlinedLooks6Icon;
+
+export const OutlinedLooksOneIcon: 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-7-2h2V7h-4v2h2z"/>
+  </svg>
+);
+OutlinedLooksOneIcon.displayName = 'OutlinedLooksOneIcon';
+export const LooksOneOutlinedIcon = OutlinedLooksOneIcon;
+
+export const OutlinedLooksTwoIcon: 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-2h2a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H9v2h4v2h-2a2 2 0 0 0-2 2v4h6v-2z"/>
+  </svg>
+);
+OutlinedLooksTwoIcon.displayName = 'OutlinedLooksTwoIcon';
+export const LooksTwoOutlinedIcon = OutlinedLooksTwoIcon;
+
+export const OutlinedLoupeIcon: 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 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.49 2 2 6.49 2 12s4.49 10 10 10h8c1.1 0 2-.9 2-2v-8c0-5.51-4.49-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8z"/>
+  </svg>
+);
+OutlinedLoupeIcon.displayName = 'OutlinedLoupeIcon';
+export const LoupeOutlinedIcon = OutlinedLoupeIcon;
+
+export const OutlinedMicExternalOffIcon: 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 5c0-1.66-1.34-3-3-3c-.62 0-1.19.19-1.67.5l4.15 4.15C9.8 6.18 10 5.61 10 5zm4 1c0-1.1.9-2 2-2s2 .9 2 2v9.17l2 2V6c0-2.21-1.79-4-4-4s-4 1.79-4 4v3.17l2 2V6zM2.1 2.1L.69 3.51L5.17 8H4l1 10h1c0 2.21 1.79 4 4 4s4-1.79 4-4v-1.17l6.49 6.49l1.41-1.41L2.1 2.1zM7.19 16h-.38l-.6-6h.96l.56.56L7.19 16zM12 18c0 1.1-.9 2-2 2s-2-.9-2-2h1l.56-5.61L12 14.83V18z"/>
+  </svg>
+);
+OutlinedMicExternalOffIcon.displayName = 'OutlinedMicExternalOffIcon';
+export const MicExternalOffOutlinedIcon = OutlinedMicExternalOffIcon;
+
+export const OutlinedMicExternalOnIcon: 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.22 7c.48-.53.78-1.23.78-2c0-1.66-1.34-3-3-3S4 3.34 4 5c0 .77.3 1.47.78 2h4.44z"/><path fill={color || 'currentColor'} d="M16 2c-2.21 0-4 1.79-4 4v12c0 1.1-.9 2-2 2s-2-.9-2-2h1l1-10H4l1 10h1c0 2.21 1.79 4 4 4s4-1.79 4-4V6c0-1.1.9-2 2-2s2 .9 2 2v16h2V6c0-2.21-1.79-4-4-4zM7.19 16h-.38l-.6-6h1.58l-.6 6z"/>
+  </svg>
+);
+OutlinedMicExternalOnIcon.displayName = 'OutlinedMicExternalOnIcon';
+export const MicExternalOnOutlinedIcon = OutlinedMicExternalOnIcon;
+
+export const OutlinedMonochromePhotosIcon: 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 5h-3.2L15 3H9L7.2 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 14h-8v-1c-2.8 0-5-2.2-5-5s2.2-5 5-5V7h8v12zm-3-6c0-2.8-2.2-5-5-5v1.8c1.8 0 3.2 1.4 3.2 3.2s-1.4 3.2-3.2 3.2V18c2.8 0 5-2.2 5-5zm-8.2 0c0 1.8 1.4 3.2 3.2 3.2V9.8c-1.8 0-3.2 1.4-3.2 3.2z"/>
+  </svg>
+);
+OutlinedMonochromePhotosIcon.displayName = 'OutlinedMonochromePhotosIcon';
+export const MonochromePhotosOutlinedIcon = OutlinedMonochromePhotosIcon;
+
+export const OutlinedMotionPhotosAutoIcon: 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="M2.88 7.88l1.54 1.54C4.15 10.23 4 11.1 4 12c0 4.41 3.59 8 8 8s8-3.59 8-8s-3.59-8-8-8c-.9 0-1.77.15-2.58.42L7.89 2.89C9.15 2.32 10.54 2 12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12c0-1.47.32-2.86.88-4.12zM7 5.5C7 6.33 6.33 7 5.5 7S4 6.33 4 5.5S4.67 4 5.5 4S7 4.67 7 5.5zm5.03 3.49h-.07L10.8 12.3h2.39l-1.16-3.31zm-.74-1.49h1.43l3.01 8h-1.39l-.72-2.04h-3.23l-.73 2.04H8.28l3.01-8z"/>
+  </svg>
+);
+OutlinedMotionPhotosAutoIcon.displayName = 'OutlinedMotionPhotosAutoIcon';
+export const MotionPhotosAutoOutlinedIcon = OutlinedMotionPhotosAutoIcon;
+
+export const OutlinedMotionPhotosOffIcon: 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="M2.81 2.81L1.39 4.22l2.27 2.27A9.91 9.91 0 0 0 2 12c0 5.52 4.48 10 10 10c2.04 0 3.93-.61 5.51-1.66l2.27 2.27l1.41-1.42L2.81 2.81zM12 20c-4.41 0-8-3.59-8-8c0-1.48.41-2.86 1.12-4.06l10.93 10.94A7.869 7.869 0 0 1 12 20zm0-16c4.41 0 8 3.59 8 8c0 1.48-.41 2.86-1.12 4.05l1.45 1.45A9.782 9.782 0 0 0 22 12c0-5.52-4.48-10-10-10c-2.04 0-3.93.61-5.51 1.66l1.45 1.45C9.14 4.41 10.52 4 12 4z"/>
+  </svg>
+);
+OutlinedMotionPhotosOffIcon.displayName = 'OutlinedMotionPhotosOffIcon';
+export const MotionPhotosOffOutlinedIcon = OutlinedMotionPhotosOffIcon;
+
+export const OutlinedMotionPhotosOnIcon: 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="M2.88 7.88l1.54 1.54C4.15 10.23 4 11.1 4 12c0 4.41 3.59 8 8 8s8-3.59 8-8s-3.59-8-8-8c-.9 0-1.77.15-2.58.42L7.89 2.89C9.15 2.32 10.54 2 12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12c0-1.47.32-2.86.88-4.12zM7 5.5C7 6.33 6.33 7 5.5 7S4 6.33 4 5.5S4.67 4 5.5 4S7 4.67 7 5.5z"/>
+  </svg>
+);
+OutlinedMotionPhotosOnIcon.displayName = 'OutlinedMotionPhotosOnIcon';
+export const MotionPhotosOnOutlinedIcon = OutlinedMotionPhotosOnIcon;
+
+export const OutlinedMotionPhotosPauseIcon: 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="M2.88 7.88l1.54 1.54C4.15 10.23 4 11.1 4 12c0 4.41 3.59 8 8 8s8-3.59 8-8s-3.59-8-8-8c-.9 0-1.77.15-2.58.42L7.89 2.89C9.15 2.32 10.54 2 12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12c0-1.47.32-2.86.88-4.12zM7 5.5C7 6.33 6.33 7 5.5 7S4 6.33 4 5.5S4.67 4 5.5 4S7 4.67 7 5.5zm4 9.5H9V9h2v6zm4 0h-2V9h2v6z"/>
+  </svg>
+);
+OutlinedMotionPhotosPauseIcon.displayName = 'OutlinedMotionPhotosPauseIcon';
+export const MotionPhotosPauseOutlinedIcon = OutlinedMotionPhotosPauseIcon;
+
+export const OutlinedMotionPhotosPausedIcon: 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 12c0 5.52-4.48 10-10 10S2 17.52 2 12c0-1.19.22-2.32.6-3.38l1.88.68C4.17 10.14 4 11.05 4 12c0 4.41 3.59 8 8 8s8-3.59 8-8s-3.59-8-8-8c-.95 0-1.85.17-2.69.48l-.68-1.89C9.69 2.22 10.82 2 12 2c5.52 0 10 4.48 10 10zM5.5 4C4.67 4 4 4.67 4 5.5S4.67 7 5.5 7S7 6.33 7 5.5S6.33 4 5.5 4zM11 16V8H9v8h2zm4 0V8h-2v8h2z"/>
+  </svg>
+);
+OutlinedMotionPhotosPausedIcon.displayName = 'OutlinedMotionPhotosPausedIcon';
+export const MotionPhotosPausedOutlinedIcon = OutlinedMotionPhotosPausedIcon;
+
+export const OutlinedMovieCreationIcon: 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.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4z"/>
+  </svg>
+);
+OutlinedMovieCreationIcon.displayName = 'OutlinedMovieCreationIcon';
+export const MovieCreationOutlinedIcon = OutlinedMovieCreationIcon;
+
+export const OutlinedMovieFilterIcon: 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 11l-.94 2.06L7 14l2.06.94L10 17l.94-2.06L13 14l-2.06-.94zm8.01-7l2 4h-3l-2-4h-2l2 4h-3l-2-4h-2l2 4h-3l-2-4h-1c-1.1 0-1.99.9-1.99 2l-.01 12c0 1.1.9 2 2 2h16c1.1 0 1.99-.9 1.99-2V4h-3.99zm2 14h-16V6.47L5.77 10H16l-.63 1.37L14 12l1.37.63L16 14l.63-1.37L18 12l-1.37-.63L16 10h4.01v8z"/>
+  </svg>
+);
+OutlinedMovieFilterIcon.displayName = 'OutlinedMovieFilterIcon';
+export const MovieFilterOutlinedIcon = OutlinedMovieFilterIcon;
+
+export const OutlinedMpIcon: 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 9h-3.5v6H15v-1.5h2c.55 0 1-.45 1-1V10c0-.55-.45-1-1-1zm-.5 3H15v-1.5h1.5V12zm-5-3H7c-.55 0-1 .45-1 1v5h1.5v-4.5h1v3H10v-3h1V15h1.5v-5c0-.55-.45-1-1-1z"/><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-2zM5 19V5h14v14H5z"/>
+  </svg>
+);
+OutlinedMpIcon.displayName = 'OutlinedMpIcon';
+export const MpOutlinedIcon = OutlinedMpIcon;
+
+export const OutlinedMusicNoteIcon: 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 3l.01 10.55c-.59-.34-1.27-.55-2-.55a4.001 4.001 0 1 0 0 8c2.22 0 3.99-1.79 3.99-4V7h4V3h-6zm-1.99 16c-1.1 0-2-.9-2-2s.9-2 2-2s2 .9 2 2s-.9 2-2 2z"/>
+  </svg>
+);
+OutlinedMusicNoteIcon.displayName = 'OutlinedMusicNoteIcon';
+export const MusicNoteOutlinedIcon = OutlinedMusicNoteIcon;
+
+export const OutlinedMusicOffIcon: 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 7h4V3h-6v4.61l2 2zm-2 3.44L4.41 2.86L3 4.27l9 9v.28c-.94-.54-2.1-.75-3.33-.32c-1.34.48-2.37 1.67-2.61 3.07a4.007 4.007 0 0 0 4.59 4.65c1.96-.31 3.35-2.11 3.35-4.1v-1.58L19.73 21l1.41-1.41L12 10.44zM10 19c-1.1 0-2-.9-2-2s.9-2 2-2s2 .9 2 2s-.9 2-2 2z"/>
+  </svg>
+);
+OutlinedMusicOffIcon.displayName = 'OutlinedMusicOffIcon';
+export const MusicOffOutlinedIcon = OutlinedMusicOffIcon;
+
+export const OutlinedNatureIcon: 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 16.12h-.03c3.49-.4 6.2-3.36 6.2-6.95c0-3.87-3.13-7-7-7s-7 3.13-7 7A6.98 6.98 0 0 0 11 16.06V20H5v2h14v-2h-6v-3.88zM7.17 9.17c0-2.76 2.24-5 5-5s5 2.24 5 5s-2.24 5-5 5s-5-2.24-5-5z"/>
+  </svg>
+);
+OutlinedNatureIcon.displayName = 'OutlinedNatureIcon';
+export const NatureOutlinedIcon = OutlinedNatureIcon;
+
+export const OutlinedNaturePeopleIcon: 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}>
+    <circle cx="4.5" cy="9.5" r="1.5"/><path fill={color || 'currentColor'} d="M22.17 9.17c0-3.87-3.13-7-7-7s-7 3.13-7 7A6.98 6.98 0 0 0 14 16.06V20H6v-3h1v-4c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v4h1v5h16v-2h-3v-3.88a7 7 0 0 0 6.17-6.95zm-7 5c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5s-2.24 5-5 5z"/>
+  </svg>
+);
+OutlinedNaturePeopleIcon.displayName = 'OutlinedNaturePeopleIcon';
+export const NaturePeopleOutlinedIcon = OutlinedNaturePeopleIcon;
+
+export const OutlinedNavigateBeforeIcon: 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.61 7.41L14.2 6l-6 6l6 6l1.41-1.41L11.03 12l4.58-4.59z"/>
+  </svg>
+);
+OutlinedNavigateBeforeIcon.displayName = 'OutlinedNavigateBeforeIcon';
+export const NavigateBeforeOutlinedIcon = OutlinedNavigateBeforeIcon;
+
+export const OutlinedNavigateNextIcon: 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.02 6L8.61 7.41L13.19 12l-4.58 4.59L10.02 18l6-6l-6-6z"/>
+  </svg>
+);
+OutlinedNavigateNextIcon.displayName = 'OutlinedNavigateNextIcon';
+export const NavigateNextOutlinedIcon = OutlinedNavigateNextIcon;
+
+export const OutlinedPaletteIcon: 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 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.04 10 9c0 3.31-2.69 6-6 6h-1.77c-.28 0-.5.22-.5.5c0 .12.05.23.13.33c.41.47.64 1.06.64 1.67A2.5 2.5 0 0 1 12 22zm0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8c.28 0 .5-.22.5-.5a.54.54 0 0 0-.14-.35c-.41-.46-.63-1.05-.63-1.65a2.5 2.5 0 0 1 2.5-2.5H16c2.21 0 4-1.79 4-4c0-3.86-3.59-7-8-7z"/><circle cx="6.5" cy="11.5" r="1.5"/><circle cx="9.5" cy="7.5" r="1.5"/><circle cx="14.5" cy="7.5" r="1.5"/><circle cx="17.5" cy="11.5" r="1.5"/>
+  </svg>
+);
+OutlinedPaletteIcon.displayName = 'OutlinedPaletteIcon';
+export const PaletteOutlinedIcon = OutlinedPaletteIcon;
+
+export const OutlinedPanoramaIcon: 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 4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H3V6h18v12zm-6.5-7L11 15.51L8.5 12.5L5 17h14z"/>
+  </svg>
+);
+OutlinedPanoramaIcon.displayName = 'OutlinedPanoramaIcon';
+export const PanoramaOutlinedIcon = OutlinedPanoramaIcon;
+
+export const OutlinedPanoramaFishEyeIcon: 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.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 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>
+);
+OutlinedPanoramaFishEyeIcon.displayName = 'OutlinedPanoramaFishEyeIcon';
+export const PanoramaFishEyeOutlinedIcon = OutlinedPanoramaFishEyeIcon;
+
+export const OutlinedPanoramaHorizontalIcon: 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 6.54v10.91c-2.6-.77-5.28-1.16-8-1.16s-5.4.39-8 1.16V6.54c2.6.77 5.28 1.16 8 1.16c2.72.01 5.4-.38 8-1.16M21.43 4c-.1 0-.2.02-.31.06C18.18 5.16 15.09 5.7 12 5.7s-6.18-.55-9.12-1.64A.94.94 0 0 0 2.57 4c-.34 0-.57.23-.57.63v14.75c0 .39.23.62.57.62c.1 0 .2-.02.31-.06c2.94-1.1 6.03-1.64 9.12-1.64s6.18.55 9.12 1.64c.11.04.21.06.31.06c.33 0 .57-.23.57-.63V4.63c0-.4-.24-.63-.57-.63z"/>
+  </svg>
+);
+OutlinedPanoramaHorizontalIcon.displayName = 'OutlinedPanoramaHorizontalIcon';
+export const PanoramaHorizontalOutlinedIcon = OutlinedPanoramaHorizontalIcon;
+
+export const OutlinedPanoramaHorizontalSelectIcon: 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 5.5c-3.89 0-6.95-.84-8.69-1.43A.993.993 0 0 0 2 5.02V19c0 .68.66 1.17 1.31.95C5.36 19.26 8.1 18.5 12 18.5c3.87 0 6.66.76 8.69 1.45A.999.999 0 0 0 22 19V5c0-.68-.66-1.17-1.31-.95c-2.03.68-4.83 1.45-8.69 1.45z"/>
+  </svg>
+);
+OutlinedPanoramaHorizontalSelectIcon.displayName = 'OutlinedPanoramaHorizontalSelectIcon';
+export const PanoramaHorizontalSelectOutlinedIcon = OutlinedPanoramaHorizontalSelectIcon;
+
+export const OutlinedPanoramaPhotosphereIcon: 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.95 8.15c-.29-.16-.61-.31-.93-.46C19.4 4.33 15.98 2 12 2C8.02 2 4.6 4.33 2.99 7.68c-.33.15-.64.3-.93.46C1.41 8.5 1 9.17 1 9.91v4.18c0 .74.41 1.41 1.05 1.77c.29.16.61.31.93.46C4.6 19.67 8.02 22 12 22c3.98 0 7.4-2.33 9.01-5.68c.33-.15.64-.3.93-.46c.65-.36 1.06-1.03 1.06-1.77V9.91c0-.74-.41-1.41-1.05-1.76zM21 9.91v4.19c-2.19 1.21-5.47 1.9-9 1.9c-3.53 0-6.81-.7-9-1.91V9.91C5.2 8.69 8.47 8 12 8c3.53 0 6.81.7 9 1.91zM12 4c2.37 0 4.49 1.04 5.95 2.68C16.17 6.25 14.15 6 12 6c-2.15 0-4.17.25-5.95.68A7.943 7.943 0 0 1 12 4zm0 16c-2.37 0-4.49-1.04-5.95-2.68c1.78.43 3.8.68 5.95.68s4.17-.25 5.95-.68A7.943 7.943 0 0 1 12 20z"/>
+  </svg>
+);
+OutlinedPanoramaPhotosphereIcon.displayName = 'OutlinedPanoramaPhotosphereIcon';
+export const PanoramaPhotosphereOutlinedIcon = OutlinedPanoramaPhotosphereIcon;
+
+export const OutlinedPanoramaPhotosphereSelectIcon: 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.95 8.15c-.29-.16-.61-.31-.93-.46C19.4 4.33 15.98 2 12 2C8.02 2 4.6 4.33 2.99 7.68c-.33.15-.64.3-.93.46C1.41 8.5 1 9.17 1 9.91v4.18c0 .74.41 1.41 1.05 1.77c.29.16.61.31.93.46C4.6 19.67 8.02 22 12 22c3.98 0 7.4-2.33 9.01-5.68c.33-.15.64-.3.93-.46c.65-.36 1.06-1.03 1.06-1.77V9.91c0-.74-.41-1.41-1.05-1.76zM12 4c2.37 0 4.49 1.04 5.95 2.68C16.17 6.25 14.15 6 12 6c-2.15 0-4.17.25-5.95.68A7.943 7.943 0 0 1 12 4zm0 16c-2.37 0-4.49-1.04-5.95-2.68c1.78.43 3.8.68 5.95.68s4.17-.25 5.95-.68A7.943 7.943 0 0 1 12 20z"/>
+  </svg>
+);
+OutlinedPanoramaPhotosphereSelectIcon.displayName = 'OutlinedPanoramaPhotosphereSelectIcon';
+export const PanoramaPhotosphereSelectOutlinedIcon = OutlinedPanoramaPhotosphereSelectIcon;
+
+export const OutlinedPanoramaVerticalIcon: 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.94 21.12c-1.1-2.94-1.64-6.03-1.64-9.12s.55-6.18 1.64-9.12a.94.94 0 0 0 .06-.31c0-.34-.23-.57-.63-.57H4.63c-.4 0-.63.23-.63.57c0 .1.02.2.06.31C5.16 5.82 5.71 8.91 5.71 12s-.55 6.18-1.64 9.12c-.05.11-.07.22-.07.31c0 .33.23.57.63.57h14.75c.39 0 .63-.24.63-.57c-.01-.1-.03-.2-.07-.31zM6.54 20c.77-2.6 1.16-5.28 1.16-8s-.39-5.4-1.16-8h10.91c-.77 2.6-1.16 5.28-1.16 8s.39 5.4 1.16 8H6.54z"/>
+  </svg>
+);
+OutlinedPanoramaVerticalIcon.displayName = 'OutlinedPanoramaVerticalIcon';
+export const PanoramaVerticalOutlinedIcon = OutlinedPanoramaVerticalIcon;
+
+export const OutlinedPanoramaVerticalSelectIcon: 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.5 12c0-3.89.84-6.95 1.43-8.69A.993.993 0 0 0 18.98 2H5c-.68 0-1.16.66-.95 1.31C4.74 5.36 5.5 8.1 5.5 12c0 3.87-.76 6.66-1.45 8.69c-.21.65.27 1.31.95 1.31h14c.68 0 1.17-.66.95-1.31c-.68-2.03-1.45-4.83-1.45-8.69z"/>
+  </svg>
+);
+OutlinedPanoramaVerticalSelectIcon.displayName = 'OutlinedPanoramaVerticalSelectIcon';
+export const PanoramaVerticalSelectOutlinedIcon = OutlinedPanoramaVerticalSelectIcon;
+
+export const OutlinedPanoramaWideAngleIcon: 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 6c2.45 0 4.71.2 7.29.64c.47 1.78.71 3.58.71 5.36s-.24 3.58-.71 5.36c-2.58.44-4.84.64-7.29.64s-4.71-.2-7.29-.64C4.24 15.58 4 13.78 4 12s.24-3.58.71-5.36C7.29 6.2 9.55 6 12 6m0-2c-2.73 0-5.22.24-7.95.72l-.93.16l-.25.9C2.29 7.85 2 9.93 2 12s.29 4.15.87 6.22l.25.89l.93.16c2.73.49 5.22.73 7.95.73s5.22-.24 7.95-.72l.93-.16l.25-.89c.58-2.08.87-4.16.87-6.23s-.29-4.15-.87-6.22l-.25-.89l-.93-.16C17.22 4.24 14.73 4 12 4z"/>
+  </svg>
+);
+OutlinedPanoramaWideAngleIcon.displayName = 'OutlinedPanoramaWideAngleIcon';
+export const PanoramaWideAngleOutlinedIcon = OutlinedPanoramaWideAngleIcon;
+
+export const OutlinedPanoramaWideAngleSelectIcon: 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 4c-3.97 0-6.85.63-9 1c-.55 1.97-1 3.92-1 7c0 3.03.45 5.05 1 7c2.15.37 4.98 1 9 1c3.97 0 6.85-.63 9-1c.57-2.02 1-3.99 1-7c0-3.03-.45-5.05-1-7c-2.15-.37-4.98-1-9-1z"/>
+  </svg>
+);
+OutlinedPanoramaWideAngleSelectIcon.displayName = 'OutlinedPanoramaWideAngleSelectIcon';
+export const PanoramaWideAngleSelectOutlinedIcon = OutlinedPanoramaWideAngleSelectIcon;
+
+export const OutlinedPhotoIcon: 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 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z"/>
+  </svg>
+);
+OutlinedPhotoIcon.displayName = 'OutlinedPhotoIcon';
+export const PhotoOutlinedIcon = OutlinedPhotoIcon;
+
+export const OutlinedPhotoAlbumIcon: 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 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 18H6V4h5v7l2.5-1.5L16 11V4h2v16zm-4.38-6.5L17 18H7l2.38-3.17L11 17l2.62-3.5z"/>
+  </svg>
+);
+OutlinedPhotoAlbumIcon.displayName = 'OutlinedPhotoAlbumIcon';
+export const PhotoAlbumOutlinedIcon = OutlinedPhotoAlbumIcon;
+
+export const OutlinedPhotoCameraIcon: 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.12 4l1.83 2H20v12H4V6h4.05l1.83-2h4.24M15 2H9L7.17 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-2h-3.17L15 2zm-3 7c1.65 0 3 1.35 3 3s-1.35 3-3 3s-3-1.35-3-3s1.35-3 3-3m0-2c-2.76 0-5 2.24-5 5s2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5z"/>
+  </svg>
+);
+OutlinedPhotoCameraIcon.displayName = 'OutlinedPhotoCameraIcon';
+export const PhotoCameraOutlinedIcon = OutlinedPhotoCameraIcon;
+
+export const OutlinedPhotoCameraBackIcon: 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 5h-3.17L15 3H9L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 14H4V7h4.05l1.83-2h4.24l1.83 2H20v12z"/><path fill={color || 'currentColor'} d="M11.25 16L9 13l-3 4h12l-3.75-5z"/>
+  </svg>
+);
+OutlinedPhotoCameraBackIcon.displayName = 'OutlinedPhotoCameraBackIcon';
+export const PhotoCameraBackOutlinedIcon = OutlinedPhotoCameraBackIcon;
+
+export const OutlinedPhotoCameraFrontIcon: 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 5h-3.17L15 3H9L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 14H4V7h4.05l1.83-2h4.24l1.83 2H20v12z"/><circle cx="12" cy="11" r="2"/><path fill={color || 'currentColor'} d="M14.78 14.58a6.95 6.95 0 0 0-5.56 0A2.01 2.01 0 0 0 8 16.43V17h8v-.57c0-.81-.48-1.53-1.22-1.85z"/>
+  </svg>
+);
+OutlinedPhotoCameraFrontIcon.displayName = 'OutlinedPhotoCameraFrontIcon';
+export const PhotoCameraFrontOutlinedIcon = OutlinedPhotoCameraFrontIcon;
+
+export const OutlinedPhotoFilterIcon: 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 10v9H4.98V5h9V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2zm-2.94-2.06L17 10l.94-2.06L20 7l-2.06-.94L17 4l-.94 2.06L14 7zM12 8l-1.25 2.75L8 12l2.75 1.25L12 16l1.25-2.75L16 12l-2.75-1.25z"/>
+  </svg>
+);
+OutlinedPhotoFilterIcon.displayName = 'OutlinedPhotoFilterIcon';
+export const PhotoFilterOutlinedIcon = OutlinedPhotoFilterIcon;
+
+export const OutlinedPhotoLibraryIcon: 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-8.5 9.67l1.69 2.26l2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z"/>
+  </svg>
+);
+OutlinedPhotoLibraryIcon.displayName = 'OutlinedPhotoLibraryIcon';
+export const PhotoLibraryOutlinedIcon = OutlinedPhotoLibraryIcon;
+
+export const OutlinedPhotoSizeSelectActualIcon: 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 3H3C2 3 1 4 1 5v14c0 1.1.9 2 2 2h18c1 0 2-1 2-2V5c0-1-1-2-2-2zm0 15.92c-.02.03-.06.06-.08.08H3V5.08L3.08 5h17.83c.03.02.06.06.08.08v13.84zm-10-3.41L8.5 12.5L5 17h14l-4.5-6z"/>
+  </svg>
+);
+OutlinedPhotoSizeSelectActualIcon.displayName = 'OutlinedPhotoSizeSelectActualIcon';
+export const PhotoSizeSelectActualOutlinedIcon = OutlinedPhotoSizeSelectActualIcon;
+
+export const OutlinedPhotoSizeSelectLargeIcon: 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 15h2v2h-2v-2zm0-4h2v2h-2v-2zm2 8h-2v2c1 0 2-1 2-2zM13 3h2v2h-2V3zm8 4h2v2h-2V7zm0-4v2h2c0-1-1-2-2-2zM1 7h2v2H1V7zm16-4h2v2h-2V3zm0 16h2v2h-2v-2zM3 3C2 3 1 4 1 5h2V3zm6 0h2v2H9V3zM5 3h2v2H5V3zm-4 8v8c0 1.1.9 2 2 2h12V11H1zm2 8l2.5-3.21l1.79 2.15l2.5-3.22L13 19H3z"/>
+  </svg>
+);
+OutlinedPhotoSizeSelectLargeIcon.displayName = 'OutlinedPhotoSizeSelectLargeIcon';
+export const PhotoSizeSelectLargeOutlinedIcon = OutlinedPhotoSizeSelectLargeIcon;
+
+export const OutlinedPhotoSizeSelectSmallIcon: 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 15h-2v2h2v-2zm0-4h-2v2h2v-2zm0 8h-2v2c1 0 2-1 2-2zM15 3h-2v2h2V3zm8 4h-2v2h2V7zm-2-4v2h2c0-1-1-2-2-2zM3 21h8v-6H1v4c0 1.1.9 2 2 2zM3 7H1v2h2V7zm12 12h-2v2h2v-2zm4-16h-2v2h2V3zm0 16h-2v2h2v-2zM3 3C2 3 1 4 1 5h2V3zm0 8H1v2h2v-2zm8-8H9v2h2V3zM7 3H5v2h2V3z"/>
+  </svg>
+);
+OutlinedPhotoSizeSelectSmallIcon.displayName = 'OutlinedPhotoSizeSelectSmallIcon';
+export const PhotoSizeSelectSmallOutlinedIcon = OutlinedPhotoSizeSelectSmallIcon;
+
+export const OutlinedPictureAsPdfIcon: 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 14H8V4h12v12zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm12 6V9c0-.55-.45-1-1-1h-2v5h2c.55 0 1-.45 1-1zm-2-3h1v3h-1V9zm4 2h1v-1h-1V9h1V8h-2v5h1zm-8 0h1c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1H9v5h1v-2zm0-2h1v1h-1V9z"/>
+  </svg>
+);
+OutlinedPictureAsPdfIcon.displayName = 'OutlinedPictureAsPdfIcon';
+export const PictureAsPdfOutlinedIcon = OutlinedPictureAsPdfIcon;
+
+export const OutlinedPortraitIcon: 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 12c1.65 0 3-1.35 3-3s-1.35-3-3-3s-3 1.35-3 3s1.35 3 3 3zm0-4c.55 0 1 .45 1 1s-.45 1-1 1s-1-.45-1-1s.45-1 1-1zm6 8.58c0-2.5-3.97-3.58-6-3.58s-6 1.08-6 3.58V18h12v-1.42zM8.48 16c.74-.51 2.23-1 3.52-1s2.78.49 3.52 1H8.48zM19 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 16H5V5h14v14z"/>
+  </svg>
+);
+OutlinedPortraitIcon.displayName = 'OutlinedPortraitIcon';
+export const PortraitOutlinedIcon = OutlinedPortraitIcon;
+
+export const OutlinedRawOffIcon: 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.15 14.32l.59-2.36l.76 3.04h1.48l1.5-6h-1.5l-.74 3l-.74-3h-1.52l-.74 3l-.74-3H14l.72 2.9zM1.39 4.22L6.17 9H3v6h1.5v-2h1.1l.9 2H8l-.9-2.1c.5-.3.9-.8.9-1.4v-.67l1.43 1.43L8.75 15h1.5l.38-1.5h.04l9.11 9.11l1.41-1.41L2.81 2.81L1.39 4.22zM6.5 11.5h-2v-1h2v1z"/>
+  </svg>
+);
+OutlinedRawOffIcon.displayName = 'OutlinedRawOffIcon';
+export const RawOffOutlinedIcon = OutlinedRawOffIcon;
+
+export const OutlinedRawOnIcon: 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.5 9H3v6h1.5v-2h1.1l.9 2H8l-.9-2.1c.5-.3.9-.8.9-1.4v-1C8 9.7 7.3 9 6.5 9zm0 2.5h-2v-1h2v1zM10.25 9l-1.5 6h1.5l.38-1.5h1.75l.37 1.5h1.5l-1.5-6h-2.5zm.75 3l.25-1h.5l.25 1h-1zm8.98-3l-.74 3l-.74-3h-1.52l-.74 3l-.74-3H14l1.5 6h1.48l.76-3.04l.76 3.04h1.48l1.5-6z"/>
+  </svg>
+);
+OutlinedRawOnIcon.displayName = 'OutlinedRawOnIcon';
+export const RawOnOutlinedIcon = OutlinedRawOnIcon;
+
+export const OutlinedReceiptLongIcon: 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.5 3.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2L7.5 3.5L6 2v14H3v3c0 1.66 1.34 3 3 3h12c1.66 0 3-1.34 3-3V2l-1.5 1.5zM15 20H6c-.55 0-1-.45-1-1v-1h10v2zm4-1c0 .55-.45 1-1 1s-1-.45-1-1v-3H8V5h11v14z"/><path fill={color || 'currentColor'} d="M9 7h6v2H9zm7 0h2v2h-2zm-7 3h6v2H9zm7 0h2v2h-2z"/>
+  </svg>
+);
+OutlinedReceiptLongIcon.displayName = 'OutlinedReceiptLongIcon';
+export const ReceiptLongOutlinedIcon = OutlinedReceiptLongIcon;
+
+export const OutlinedRemoveRedEyeIcon: 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 6.5a9.77 9.77 0 0 1 8.82 5.5c-1.65 3.37-5.02 5.5-8.82 5.5S4.83 15.37 3.18 12A9.77 9.77 0 0 1 12 6.5m0-2C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zm0 5a2.5 2.5 0 0 1 0 5a2.5 2.5 0 0 1 0-5m0-2c-2.48 0-4.5 2.02-4.5 4.5s2.02 4.5 4.5 4.5s4.5-2.02 4.5-4.5s-2.02-4.5-4.5-4.5z"/>
+  </svg>
+);
+OutlinedRemoveRedEyeIcon.displayName = 'OutlinedRemoveRedEyeIcon';
+export const RemoveRedEyeOutlinedIcon = OutlinedRemoveRedEyeIcon;
+
+export const OutlinedRotate90DegreesCcwIcon: 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.34 6.41L.86 12.9l6.49 6.48l6.49-6.48l-6.5-6.49zM3.69 12.9l3.66-3.66L11 12.9l-3.66 3.66l-3.65-3.66zm15.67-6.26A8.95 8.95 0 0 0 13 4V.76L8.76 5L13 9.24V6c1.79 0 3.58.68 4.95 2.05a7.007 7.007 0 0 1 0 9.9a6.973 6.973 0 0 1-7.79 1.44l-1.49 1.49C10.02 21.62 11.51 22 13 22c2.3 0 4.61-.88 6.36-2.64a8.98 8.98 0 0 0 0-12.72z"/>
+  </svg>
+);
+OutlinedRotate90DegreesCcwIcon.displayName = 'OutlinedRotate90DegreesCcwIcon';
+export const Rotate90DegreesCcwOutlinedIcon = OutlinedRotate90DegreesCcwIcon;
+
+export const OutlinedRotate90DegreesCwIcon: 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="M2 13a9 9 0 0 0 13.79 7.62l-1.46-1.46c-.99.53-2.13.84-3.33.84c-3.86 0-7-3.14-7-7s3.14-7 7-7h.17L9.59 7.59L11 9l4-4l-4-4l-1.42 1.41L11.17 4H11a9 9 0 0 0-9 9zm9 0l6 6l6-6l-6-6l-6 6zm6 3.17L13.83 13L17 9.83L20.17 13L17 16.17z"/>
+  </svg>
+);
+OutlinedRotate90DegreesCwIcon.displayName = 'OutlinedRotate90DegreesCwIcon';
+export const Rotate90DegreesCwOutlinedIcon = OutlinedRotate90DegreesCwIcon;
+
+export const OutlinedRotateLeftIcon: 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.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55L13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"/>
+  </svg>
+);
+OutlinedRotateLeftIcon.displayName = 'OutlinedRotateLeftIcon';
+export const RotateLeftOutlinedIcon = OutlinedRotateLeftIcon;
+
+export const OutlinedRotateRightIcon: 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.55 5.55L11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45zM19.93 11a7.906 7.906 0 0 0-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42l1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z"/>
+  </svg>
+);
+OutlinedRotateRightIcon.displayName = 'OutlinedRotateRightIcon';
+export const RotateRightOutlinedIcon = OutlinedRotateRightIcon;
+
+export const OutlinedShutterSpeedIcon: 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 1H9v2h6V1zm4.03 6.39l1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42A8.962 8.962 0 0 0 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9a8.994 8.994 0 0 0 7.03-14.61zM12 20c-3.87 0-7-3.13-7-7s3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7zm-.32-5H6.35a5.992 5.992 0 0 0 3.41 3.56l-.11-.06l2.03-3.5zm5.97-4a6.012 6.012 0 0 0-3.34-3.54L12.26 11h5.39zm-7.04 7.83c.45.11.91.17 1.39.17c1.34 0 2.57-.45 3.57-1.19l-2.11-3.9l-2.85 4.92zM7.55 8.99A5.965 5.965 0 0 0 6 13c0 .34.04.67.09 1h4.72L7.55 8.99zm8.79 8.14A5.94 5.94 0 0 0 18 13c0-.34-.04-.67-.09-1h-4.34l2.77 5.13zm-3.01-9.98C12.9 7.06 12.46 7 12 7c-1.4 0-2.69.49-3.71 1.29l2.32 3.56l2.72-4.7z"/>
+  </svg>
+);
+OutlinedShutterSpeedIcon.displayName = 'OutlinedShutterSpeedIcon';
+export const ShutterSpeedOutlinedIcon = OutlinedShutterSpeedIcon;
+
+export const OutlinedSlideshowIcon: 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 8v8l5-4l-5-4zm9-5H5c-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"/>
+  </svg>
+);
+OutlinedSlideshowIcon.displayName = 'OutlinedSlideshowIcon';
+export const SlideshowOutlinedIcon = OutlinedSlideshowIcon;
+
+export const OutlinedStraightenIcon: 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 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"/>
+  </svg>
+);
+OutlinedStraightenIcon.displayName = 'OutlinedStraightenIcon';
+export const StraightenOutlinedIcon = OutlinedStraightenIcon;
+
+export const OutlinedStyleIcon: 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="M2.53 19.65l1.34.56v-9.03l-2.43 5.86c-.41 1.02.08 2.19 1.09 2.61zm19.5-3.7L17.07 3.98a2.013 2.013 0 0 0-1.81-1.23c-.26 0-.53.04-.79.15L7.1 5.95a1.999 1.999 0 0 0-1.08 2.6l4.96 11.97a1.998 1.998 0 0 0 2.6 1.08l7.36-3.05a1.994 1.994 0 0 0 1.09-2.6zm-9.2 3.8L7.87 7.79l7.35-3.04h.01l4.95 11.95l-7.35 3.05z"/><circle cx="11" cy="9" r="1"/><path fill={color || 'currentColor'} d="M5.88 19.75c0 1.1.9 2 2 2h1.45l-3.45-8.34v6.34z"/>
+  </svg>
+);
+OutlinedStyleIcon.displayName = 'OutlinedStyleIcon';
+export const StyleOutlinedIcon = OutlinedStyleIcon;
+
+export const OutlinedSwitchCameraIcon: 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 4h-3.17L15 2H9L7.17 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-2zM9.88 4h4.24l1.83 2H20v12H4V6h4.05"/><path fill={color || 'currentColor'} d="M15 11H9V8.5L5.5 12L9 15.5V13h6v2.5l3.5-3.5L15 8.5z"/>
+  </svg>
+);
+OutlinedSwitchCameraIcon.displayName = 'OutlinedSwitchCameraIcon';
+export const SwitchCameraOutlinedIcon = OutlinedSwitchCameraIcon;
+
+export const OutlinedSwitchVideoIcon: 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="M8 13h4v2l3-3l-3-3v2H8V9l-3 3l3 3zm10-3.5V6c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-3.5l4 4v-13l-4 4zM16 17H4V7h12v10z"/>
+  </svg>
+);
+OutlinedSwitchVideoIcon.displayName = 'OutlinedSwitchVideoIcon';
+export const SwitchVideoOutlinedIcon = OutlinedSwitchVideoIcon;
+
+export const OutlinedTagFacesIcon: 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 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8S14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8S7 8.67 7 9.5S7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
+  </svg>
+);
+OutlinedTagFacesIcon.displayName = 'OutlinedTagFacesIcon';
+export const TagFacesOutlinedIcon = OutlinedTagFacesIcon;
+
+export const OutlinedTextureIcon: 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.51 3.08L3.08 19.51c.09.34.27.65.51.9c.25.24.56.42.9.51L20.93 4.49c-.19-.69-.73-1.23-1.42-1.41zM11.88 3L3 11.88v2.83L14.71 3h-2.83zM5 3c-1.1 0-2 .9-2 2v2l4-4H5zm14 18c.55 0 1.05-.22 1.41-.59c.37-.36.59-.86.59-1.41v-2l-4 4h2zm-9.71 0h2.83L21 12.12V9.29L9.29 21z"/>
+  </svg>
+);
+OutlinedTextureIcon.displayName = 'OutlinedTextureIcon';
+export const TextureOutlinedIcon = OutlinedTextureIcon;
+
+export const OutlinedThermostatAutoIcon: 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 12V6c0-1.66-1.34-3-3-3S5 4.34 5 6v6c-1.21.91-2 2.37-2 4c0 1.12.38 2.14 1 2.97V19h.02c.91 1.21 2.35 2 3.98 2s3.06-.79 3.98-2H12v-.03c.62-.83 1-1.85 1-2.97c0-1.63-.79-3.09-2-4zm-6 4c0-.94.45-1.84 1.2-2.4L7 13V6c0-.55.45-1 1-1s1 .45 1 1v7l.8.6c.75.57 1.2 1.46 1.2 2.4H5zM18.62 4h-1.61l-3.38 9h1.56l.81-2.3h3.63l.8 2.3H22l-3.38-9zm-2.15 5.39l1.31-3.72h.08l1.31 3.72h-2.7z"/>
+  </svg>
+);
+OutlinedThermostatAutoIcon.displayName = 'OutlinedThermostatAutoIcon';
+export const ThermostatAutoOutlinedIcon = OutlinedThermostatAutoIcon;
+
+export const OutlinedTimelapseIcon: 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.24 7.75A5.974 5.974 0 0 0 12 5.99v6l-4.24 4.24c2.34 2.34 6.14 2.34 8.49 0a5.99 5.99 0 0 0-.01-8.48zM12 1.99c-5.52 0-10 4.48-10 10s4.48 10 10 10s10-4.48 10-10s-4.48-10-10-10zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8z"/>
+  </svg>
+);
+OutlinedTimelapseIcon.displayName = 'OutlinedTimelapseIcon';
+export const TimelapseOutlinedIcon = OutlinedTimelapseIcon;
+
+export const OutlinedTimerIcon: 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 1H9v2h6V1zm-4 13h2V8h-2v6zm8.03-6.61l1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42A8.962 8.962 0 0 0 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9a8.994 8.994 0 0 0 7.03-14.61zM12 20c-3.87 0-7-3.13-7-7s3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7z"/>
+  </svg>
+);
+OutlinedTimerIcon.displayName = 'OutlinedTimerIcon';
+export const TimerOutlinedIcon = OutlinedTimerIcon;
+
+export const OutlinedTimer10Icon: 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="M-.01 7.72V9.4l3-1V18h2V6h-.25L-.01 7.72zm23.78 6.65c-.14-.28-.35-.53-.63-.74c-.28-.21-.61-.39-1.01-.53s-.85-.27-1.35-.38a6.64 6.64 0 0 1-.87-.23c-.23-.08-.41-.16-.55-.25s-.23-.19-.28-.3a.978.978 0 0 1 .01-.8c.06-.13.15-.25.27-.34c.12-.1.27-.18.45-.24s.4-.09.64-.09c.25 0 .47.04.66.11s.35.17.48.29s.22.26.29.42c.06.16.1.32.1.49h1.95A2.517 2.517 0 0 0 23 9.81c-.3-.25-.66-.44-1.09-.59c-.43-.15-.92-.22-1.46-.22c-.51 0-.98.07-1.39.21s-.77.33-1.06.57c-.29.24-.51.52-.67.84c-.16.32-.23.65-.23 1.01s.08.69.23.96c.15.28.36.52.64.73c.27.21.6.38.98.53c.38.14.81.26 1.27.36c.39.08.71.17.95.26s.43.19.57.29c.13.1.22.22.27.34c.05.12.07.25.07.39c0 .32-.13.57-.4.77s-.66.29-1.17.29c-.22 0-.43-.02-.64-.08c-.21-.05-.4-.13-.56-.24a1.333 1.333 0 0 1-.59-1.11h-1.89c0 .36.08.71.24 1.05s.39.65.7.93c.31.27.69.49 1.15.66s.98.25 1.58.25c.53 0 1.01-.06 1.44-.19c.43-.13.8-.31 1.11-.54c.31-.23.54-.51.71-.83c.17-.32.25-.67.25-1.06c-.02-.4-.09-.74-.24-1.02zm-9.96-7.32c-.34-.4-.75-.7-1.23-.88c-.47-.18-1.01-.27-1.59-.27s-1.11.09-1.59.27c-.48.18-.89.47-1.23.88c-.34.41-.6.93-.79 1.59c-.18.65-.28 1.45-.28 2.39v1.92c0 .94.09 1.74.28 2.39c.19.66.45 1.19.8 1.6c.34.41.75.71 1.23.89s1.01.28 1.59.28c.59 0 1.12-.09 1.59-.28c.48-.18.88-.48 1.22-.89s.6-.94.78-1.6c.18-.65.28-1.45.28-2.39v-1.92c0-.94-.09-1.74-.28-2.39c-.18-.66-.44-1.19-.78-1.59zm-.92 6.17c0 .6-.04 1.11-.12 1.53s-.2.76-.36 1.02c-.16.26-.36.45-.59.57c-.23.12-.51.18-.82.18c-.3 0-.58-.06-.82-.18s-.44-.31-.6-.57c-.16-.26-.29-.6-.38-1.02s-.13-.93-.13-1.53v-2.5c0-.6.04-1.11.13-1.52s.21-.74.38-1c.16-.25.36-.43.6-.55c.24-.11.51-.17.81-.17c.31 0 .58.06.81.17c.24.11.44.29.6.55c.16.25.29.58.37.99s.13.92.13 1.52v2.51h-.01z"/>
+  </svg>
+);
+OutlinedTimer10Icon.displayName = 'OutlinedTimer10Icon';
+export const Timer10OutlinedIcon = OutlinedTimer10Icon;
+
+export const OutlinedTimer3Icon: 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.61 12.97c-.16-.24-.36-.46-.62-.65a3.38 3.38 0 0 0-.93-.48c.3-.14.57-.3.8-.5c.23-.2.42-.41.57-.64c.15-.23.27-.46.34-.71c.08-.24.11-.49.11-.73c0-.55-.09-1.04-.28-1.46c-.18-.42-.44-.77-.78-1.06c-.33-.28-.73-.5-1.2-.64c-.45-.13-.97-.2-1.53-.2c-.55 0-1.06.08-1.52.24c-.47.17-.87.4-1.2.69c-.33.29-.6.63-.78 1.03c-.2.39-.29.83-.29 1.29h1.98c0-.26.05-.49.14-.69c.09-.2.22-.38.38-.52c.17-.14.36-.25.58-.33s.46-.12.73-.12c.61 0 1.06.16 1.36.47c.3.31.44.75.44 1.32c0 .27-.04.52-.12.74c-.08.22-.21.41-.38.57s-.38.28-.63.37s-.55.13-.89.13H6.72v1.57H7.9c.34 0 .64.04.91.11c.27.08.5.19.69.35c.19.16.34.36.44.61c.1.24.16.54.16.87c0 .62-.18 1.09-.53 1.42c-.35.33-.84.49-1.45.49c-.29 0-.56-.04-.8-.13c-.24-.08-.44-.2-.61-.36s-.3-.34-.39-.56c-.09-.22-.14-.46-.14-.72H4.19c0 .55.11 1.03.32 1.45c.21.42.5.77.86 1.05s.77.49 1.24.63s.96.21 1.48.21c.57 0 1.09-.08 1.58-.23s.91-.38 1.26-.68c.36-.3.64-.66.84-1.1c.2-.43.3-.93.3-1.48c0-.29-.04-.58-.11-.86c-.08-.25-.19-.51-.35-.76zm9.26 1.4c-.14-.28-.35-.53-.63-.74c-.28-.21-.61-.39-1.01-.53s-.85-.27-1.35-.38a6.64 6.64 0 0 1-.87-.23c-.23-.08-.41-.16-.55-.25s-.23-.19-.28-.3c-.05-.11-.08-.24-.08-.39s.03-.28.09-.41s.15-.25.27-.34c.12-.1.27-.18.45-.24s.4-.09.64-.09c.25 0 .47.04.66.11s.35.17.48.29s.22.26.29.42c.06.16.1.32.1.49h1.95a2.517 2.517 0 0 0-.93-1.97c-.3-.25-.66-.44-1.09-.59c-.43-.15-.92-.22-1.46-.22c-.51 0-.98.07-1.39.21s-.77.33-1.06.57c-.29.24-.51.52-.67.84s-.23.65-.23 1.01s.08.68.23.96s.37.52.64.73c.27.21.6.38.98.53c.38.14.81.26 1.27.36c.39.08.71.17.95.26s.43.19.57.29c.13.1.22.22.27.34c.05.12.07.25.07.39c0 .32-.13.57-.4.77s-.66.29-1.17.29c-.22 0-.43-.02-.64-.08c-.21-.05-.4-.13-.56-.24a1.333 1.333 0 0 1-.59-1.11h-1.89c0 .36.08.71.24 1.05s.39.65.7.93c.31.27.69.49 1.15.66c.46.17.98.25 1.58.25c.53 0 1.01-.06 1.44-.19c.43-.13.8-.31 1.11-.54c.31-.23.54-.51.71-.83c.17-.32.25-.67.25-1.06c-.02-.4-.09-.74-.24-1.02z"/>
+  </svg>
+);
+OutlinedTimer3Icon.displayName = 'OutlinedTimer3Icon';
+export const Timer3OutlinedIcon = OutlinedTimer3Icon;
+
+export const OutlinedTimerOffIcon: 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 1h6v2H9zm3 5c3.87 0 7 3.13 7 7c0 .94-.19 1.83-.52 2.65l1.5 1.5a8.963 8.963 0 0 0-.95-9.76l1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42a8.962 8.962 0 0 0-9.77-.96l1.5 1.5A7.07 7.07 0 0 1 12 6z"/><path fill={color || 'currentColor'} d="M11 8.17l2 2V8h-2zM2.81 2.81L1.39 4.22l3.4 3.4a8.994 8.994 0 0 0 12.59 12.59l2.4 2.4l1.41-1.41L2.81 2.81zM12 20c-3.87 0-7-3.13-7-7c0-1.47.45-2.83 1.22-3.95l9.73 9.73A6.945 6.945 0 0 1 12 20z"/>
+  </svg>
+);
+OutlinedTimerOffIcon.displayName = 'OutlinedTimerOffIcon';
+export const TimerOffOutlinedIcon = OutlinedTimerOffIcon;
+
+export const OutlinedTonalityIcon: 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 17.93c-3.94-.49-7-3.85-7-7.93s3.05-7.44 7-7.93v15.86zm2-15.86c1.03.13 2 .45 2.87.93H13v-.93zM13 7h5.24c.25.31.48.65.68 1H13V7zm0 3h6.74c.08.33.15.66.19 1H13v-1zm0 9.93V19h2.87c-.87.48-1.84.8-2.87.93zM18.24 17H13v-1h5.92c-.2.35-.43.69-.68 1zm1.5-3H13v-1h6.93c-.04.34-.11.67-.19 1z"/>
+  </svg>
+);
+OutlinedTonalityIcon.displayName = 'OutlinedTonalityIcon';
+export const TonalityOutlinedIcon = OutlinedTonalityIcon;
+
+export const OutlinedTransformIcon: 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 18v-2H8V4h2L7 1L4 4h2v2H2v2h4v8c0 1.1.9 2 2 2h8v2h-2l3 3l3-3h-2v-2h4zM10 8h6v6h2V8c0-1.1-.9-2-2-2h-6v2z"/>
+  </svg>
+);
+OutlinedTransformIcon.displayName = 'OutlinedTransformIcon';
+export const TransformOutlinedIcon = OutlinedTransformIcon;
+
+export const OutlinedTuneIcon: 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 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"/>
+  </svg>
+);
+OutlinedTuneIcon.displayName = 'OutlinedTuneIcon';
+export const TuneOutlinedIcon = OutlinedTuneIcon;
+
+export const OutlinedVideoCameraBackIcon: 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 10.48V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-4.48l4 3.98v-11l-4 3.98zM16 18H4V6h12v12zm-4.38-6.5L9 15l-1.62-2.17L5 16h10l-3.38-4.5z"/>
+  </svg>
+);
+OutlinedVideoCameraBackIcon.displayName = 'OutlinedVideoCameraBackIcon';
+export const VideoCameraBackOutlinedIcon = OutlinedVideoCameraBackIcon;
+
+export const OutlinedVideoCameraFrontIcon: 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 10.48V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-4.48l4 3.98v-11l-4 3.98zm-2-.79V18H4V6h12v3.69z"/><circle cx="10" cy="10" r="2"/><path fill={color || 'currentColor'} d="M14 15.43c0-.81-.48-1.53-1.22-1.85a6.95 6.95 0 0 0-5.56 0A2.01 2.01 0 0 0 6 15.43V16h8v-.57z"/>
+  </svg>
+);
+OutlinedVideoCameraFrontIcon.displayName = 'OutlinedVideoCameraFrontIcon';
+export const VideoCameraFrontOutlinedIcon = OutlinedVideoCameraFrontIcon;
+
+export const OutlinedVideoStableIcon: 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-2zM4 18V6h2.95l-2.33 8.73L16.82 18H4zm11.62-2.39l-8.55-2.29L8.38 8.4l8.56 2.29l-1.32 4.92zM20 18h-2.95l2.34-8.73L7.18 6H20v12z"/>
+  </svg>
+);
+OutlinedVideoStableIcon.displayName = 'OutlinedVideoStableIcon';
+export const VideoStableOutlinedIcon = OutlinedVideoStableIcon;
+
+export const OutlinedViewComfyIcon: 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="M2 4v16h20V4H2zm2 2h16v5H4V6zm0 12v-5h4v5H4zm6 0v-5h10v5H10z"/>
+  </svg>
+);
+OutlinedViewComfyIcon.displayName = 'OutlinedViewComfyIcon';
+export const ViewComfyOutlinedIcon = OutlinedViewComfyIcon;
+
+export const OutlinedViewCompactIcon: 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="M2 4v16h20V4H2zm4.5 14H4v-2.5h2.5V18zm0-4.75H4v-2.5h2.5v2.5zm0-4.75H4V6h2.5v2.5zM11 18H8.5v-2.5H11V18zm0-4.75H8.5v-2.5H11v2.5zm0-4.75H8.5V6H11v2.5zm4.5 9.5H13v-2.5h2.5V18zm0-4.75H13v-2.5h2.5v2.5zm0-4.75H13V6h2.5v2.5zM20 18h-2.5v-2.5H20V18zm0-4.75h-2.5v-2.5H20v2.5zm0-4.75h-2.5V6H20v2.5z"/>
+  </svg>
+);
+OutlinedViewCompactIcon.displayName = 'OutlinedViewCompactIcon';
+export const ViewCompactOutlinedIcon = OutlinedViewCompactIcon;
+
+export const OutlinedVignetteIcon: 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 5v14H3V5h18m0-2H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9 5c3.25 0 6 1.83 6 4s-2.75 4-6 4s-6-1.83-6-4s2.75-4 6-4m0-2c-4.42 0-8 2.69-8 6s3.58 6 8 6s8-2.69 8-6s-3.58-6-8-6z"/>
+  </svg>
+);
+OutlinedVignetteIcon.displayName = 'OutlinedVignetteIcon';
+export const VignetteOutlinedIcon = OutlinedVignetteIcon;
+
+export const OutlinedVrpanoIcon: 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.01 4C20.45 4 17.4 5.5 12 5.5c-5.31 0-8.49-1.49-9.01-1.49c-.53 0-.99.44-.99 1.01V19c0 .57.46 1 .99 1c.57 0 3.55-1.5 9.01-1.5c5.42 0 8.44 1.5 9.01 1.5c.53 0 .99-.43.99-1V5c0-.57-.46-1-.99-1zM20 17.63c-2.01-.59-4.62-1.13-8-1.13c-3.39 0-5.99.54-8 1.13V6.38c2.58.73 5.32 1.12 8 1.12c3.38 0 5.99-.54 8-1.13v11.26z"/><path fill={color || 'currentColor'} d="M9.17 10.99l-3.69 4.42c2-.26 4.18-.41 6.52-.41c2.3 0 4.52.15 6.51.4L14 10l-2.83 3.39l-2-2.4z"/>
+  </svg>
+);
+OutlinedVrpanoIcon.displayName = 'OutlinedVrpanoIcon';
+export const VrpanoOutlinedIcon = OutlinedVrpanoIcon;
+
+export const OutlinedWbAutoIcon: 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 7l-3.2 9h1.9l.7-2h3.2l.7 2h1.9L9 7H7zm-.15 5.65L8 9l1.15 3.65h-2.3zM22 7l-1.2 6.29L19.3 7h-1.6l-1.49 6.29L15 7h-.76l-.01.01C12.76 5.18 10.53 4 8 4c-4.42 0-8 3.58-8 8s3.58 8 8 8c2.96 0 5.55-1.61 6.93-4c.03-.06.05-.12.08-.18c.05-.08.09-.17.14-.25l.1.43H17l1.5-6.1L20 16h1.75l2.05-9H22zm-8.63 7.67C12.38 16.64 10.35 18 8 18c-3.31 0-6-2.69-6-6s2.69-6 6-6s6 2.69 6 6c0 .96-.23 1.86-.63 2.67z"/>
+  </svg>
+);
+OutlinedWbAutoIcon.displayName = 'OutlinedWbAutoIcon';
+export const WbAutoOutlinedIcon = OutlinedWbAutoIcon;
+
+export const OutlinedWbCloudyIcon: 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.01 6c2.61 0 4.89 1.86 5.4 4.43l.3 1.5l1.52.11c1.56.11 2.78 1.41 2.78 2.96c0 1.65-1.35 3-3 3h-13c-2.21 0-4-1.79-4-4c0-2.05 1.53-3.76 3.56-3.97l1.07-.11l.5-.95A5.457 5.457 0 0 1 12.01 6m0-2C9.12 4 6.6 5.64 5.35 8.04C2.35 8.36.01 10.91.01 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5c0-2.64-2.05-4.78-4.64-4.96C18.68 6.59 15.65 4 12.01 4z"/>
+  </svg>
+);
+OutlinedWbCloudyIcon.displayName = 'OutlinedWbCloudyIcon';
+export const WbCloudyOutlinedIcon = OutlinedWbCloudyIcon;
+
+export const OutlinedWbIncandescentIcon: 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.55 19.09l1.41 1.41l1.79-1.8l-1.41-1.41zM11 20h2v3h-2zM1 11h3v2H1zm12-6.95v3.96l1 .58c1.24.72 2 2.04 2 3.46c0 2.21-1.79 4-4 4s-4-1.79-4-4c0-1.42.77-2.74 2-3.46l1-.58V4.05h2m2-2H9v4.81C7.21 7.9 6 9.83 6 12.05c0 3.31 2.69 6 6 6s6-2.69 6-6c0-2.22-1.21-4.15-3-5.19V2.05zM20 11h3v2h-3zm-2.76 7.71l1.79 1.8l1.41-1.41l-1.8-1.79z"/>
+  </svg>
+);
+OutlinedWbIncandescentIcon.displayName = 'OutlinedWbIncandescentIcon';
+export const WbIncandescentOutlinedIcon = OutlinedWbIncandescentIcon;
+
+export const OutlinedWbIridescentIcon: 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 15h14V9H5v6zm2-4h10v2H7v-2zm4-10h2v3h-2zm9.46 4.01L19.04 3.6l-1.79 1.79l1.41 1.41zM11 20h2v3h-2zm6.24-1.29l1.79 1.8l1.42-1.42l-1.8-1.79zM4.96 3.595l1.788 1.79L5.34 6.79L3.553 5.003zM3.55 19.08l1.41 1.42l1.79-1.8l-1.41-1.41z"/>
+  </svg>
+);
+OutlinedWbIridescentIcon.displayName = 'OutlinedWbIridescentIcon';
+export const WbIridescentOutlinedIcon = OutlinedWbIridescentIcon;
+
+export const OutlinedWbShadeIcon: 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 12v2.5l5.5 5.5H22l-8-8zm0 8h3l-3-3v3zM8 4l-6 6h2v10h8V10h2L8 4zm1 10H7v-4h2v4z"/>
+  </svg>
+);
+OutlinedWbShadeIcon.displayName = 'OutlinedWbShadeIcon';
+export const WbShadeOutlinedIcon = OutlinedWbShadeIcon;
+
+export const OutlinedWbSunnyIcon: 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.76 4.84l-1.8-1.79l-1.41 1.41l1.79 1.79zM1 10.5h3v2H1zM11 .55h2V3.5h-2zm8.04 2.495l1.408 1.407l-1.79 1.79l-1.407-1.408zm-1.8 15.115l1.79 1.8l1.41-1.41l-1.8-1.79zM20 10.5h3v2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4s4 1.79 4 4s-1.79 4-4 4zm-1 4h2v2.95h-2zm-7.45-.96l1.41 1.41l1.79-1.8l-1.41-1.41z"/>
+  </svg>
+);
+OutlinedWbSunnyIcon.displayName = 'OutlinedWbSunnyIcon';
+export const WbSunnyOutlinedIcon = OutlinedWbSunnyIcon;
+
+export const OutlinedWbTwilightIcon: 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.955 8.662l2.12-2.122l1.416 1.414l-2.121 2.122zM2 18h20v2H2zm9-14h2v3h-2zM3.543 7.925L4.957 6.51l2.121 2.12l-1.414 1.415zM5 16h14c0-3.87-3.13-7-7-7s-7 3.13-7 7z"/>
+  </svg>
+);
+OutlinedWbTwilightIcon.displayName = 'OutlinedWbTwilightIcon';
+export const WbTwilightOutlinedIcon = OutlinedWbTwilightIcon;