refactor: Consolidate icon imports across components and streamline import statements for improved readability

src/app/components/AccountDataEditor.tsx

@@ -1,19 +1,6 @@
 import React, { FormEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
+import { Box, Text, IconButton, Input, Button, TextAreaComponent as TextArea, color, Spinner, Chip, Scroll, config } from 'folds';
-  Box,
+import { Icon, Icons } from './icons';
-  Text,
-  Icon,
-  Icons,
-  IconButton,
-  Input,
-  Button,
-  TextArea as TextAreaComponent,
-  color,
-  Spinner,
-  Chip,
-  Scroll,
-  config,
-} from 'folds';
 import { MatrixError } from 'matrix-js-sdk';
 import { Cursor } from '../plugins/text-area';
 import { syntaxErrorPosition } from '../utils/dom';

src/app/components/BackupRestore.tsx

@@ -1,23 +1,8 @@
 import React, { MouseEventHandler, useCallback, useState } from 'react';
 import { useAtom } from 'jotai';
 import { CryptoApi, KeyBackupInfo } from 'matrix-js-sdk/lib/crypto-api';
-import {
+import { Badge, Box, Button, color, config, IconButton, Menu, percent, PopOut, ProgressBar, RectCords, Spinner, Text } from 'folds';
-  Badge,
+import { Icon, Icons } from './icons';
-  Box,
-  Button,
-  color,
-  config,
-  Icon,
-  IconButton,
-  Icons,
-  Menu,
-  percent,
-  PopOut,
-  ProgressBar,
-  RectCords,
-  Spinner,
-  Text,
-} from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { BackupProgressStatus, backupRestoreProgressAtom } from '../state/backupRestore';
 import { InfoCard } from './info-card';

src/app/components/DeviceVerification.tsx

@@ -6,21 +6,8 @@ import {
 } from 'matrix-js-sdk/lib/crypto-api';
 import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
 import { VerificationMethod } from 'matrix-js-sdk/lib/types';
-import {
+import { Box, Button, config, Dialog, Header, IconButton, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text } from 'folds';
-  Box,
+import { Icon, Icons } from './icons';
-  Button,
-  config,
-  Dialog,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Spinner,
-  Text,
-} from 'folds';
 import FocusTrap from 'focus-trap-react';
 import {
   useVerificationRequestPhase,

src/app/components/DeviceVerificationSetup.tsx

@@ -1,18 +1,6 @@
 import React, { FormEventHandler, forwardRef, useCallback, useState } from 'react';
-import {
+import { Dialog, Header, Box, Text, IconButton, config, Button, Chip, color, Spinner } from 'folds';
-  Dialog,
+import { Icon, Icons } from './icons';
-  Header,
-  Box,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  config,
-  Button,
-  Chip,
-  color,
-  Spinner,
-} from 'folds';
 import FileSaver from 'file-saver';
 import to from 'await-to-js';
 import { AuthDict, IAuthData, MatrixError, UIAuthCallback } from 'matrix-js-sdk';

src/app/components/JoinRulesSwitcher.tsx

@@ -1,18 +1,6 @@
 import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
-import {
+import { config, Box, MenuItem, Text, RectCords, PopOut, Menu, Button, Spinner } from 'folds';
-  config,
+import { Icon, Icons, IconSrc } from './icons';
-  Box,
-  MenuItem,
-  Text,
-  Icon,
-  Icons,
-  IconSrc,
-  RectCords,
-  PopOut,
-  Menu,
-  Button,
-  Spinner,
-} from 'folds';
 import { JoinRule } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
 import { stopPropagation } from '../utils/keyboard';

src/app/components/ManualVerification.tsx

@@ -1,17 +1,6 @@
 import React, { MouseEventHandler, ReactNode, useCallback, useState } from 'react';
-import {
+import { Box, Text, Chip, RectCords, PopOut, Menu, config, MenuItem, color } from 'folds';
-  Box,
+import { Icon, Icons } from './icons';
-  Text,
-  Chip,
-  Icon,
-  Icons,
-  RectCords,
-  PopOut,
-  Menu,
-  config,
-  MenuItem,
-  color,
-} from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { stopPropagation } from '../utils/keyboard';
 import { SettingTile } from './setting-tile';

src/app/components/Pdf-viewer/PdfViewer.tsx

@@ -2,24 +2,8 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import React, { FormEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
-import {
+import { Box, Button, Chip, Header, IconButton, Input, Menu, PopOut, RectCords, Scroll, Spinner, Text, as, config } from 'folds';
-  Box,
+import { Icon, Icons } from '../icons';
-  Button,
-  Chip,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Input,
-  Menu,
-  PopOut,
-  RectCords,
-  Scroll,
-  Spinner,
-  Text,
-  as,
-  config,
-} from 'folds';
 import FocusTrap from 'focus-trap-react';
 import FileSaver from 'file-saver';
 import * as css from './PdfViewer.css';

src/app/components/RoomNotificationSwitcher.tsx

@@ -1,4 +1,5 @@
-import { Box, config, Icon, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import { Box, config, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import { Icon } from './icons';
 import React, { MouseEventHandler, ReactNode, useMemo, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { stopPropagation } from '../utils/keyboard';

src/app/components/UIAFlowOverlay.tsx

@@ -1,17 +1,6 @@
 import React, { ReactNode } from 'react';
-import {
+import { Overlay, OverlayBackdrop, Box, config, Text, TooltipProvider, Tooltip, Chip, IconButton } from 'folds';
-  Overlay,
+import { Icons, Icon } from './icons';
-  OverlayBackdrop,
-  Box,
-  config,
-  Text,
-  TooltipProvider,
-  Tooltip,
-  Icons,
-  Icon,
-  Chip,
-  IconButton,
-} from 'folds';
 import FocusTrap from 'focus-trap-react';
 
 export type UIAFlowOverlayProps = {

src/app/components/account-switcher/AccountSwitcher.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Avatar, Box, Icon, Icons, MenuItem, Text, config } from 'folds';
+import { Avatar, Box, MenuItem, Text, config } from 'folds';
+import { Icon, Icons } from '../icons';
 import { useAtomValue } from 'jotai';
 import { sessionsAtom, Session } from '../../state/sessions';
 import { setLocalStorageItem } from '../../state/utils/atomWithLocalStorage';

src/app/components/create-room/AdditionalCreatorInput.tsx

@@ -1,20 +1,5 @@
-import {
+import { Box, Button, Chip, config, Input, Line, Menu, MenuItem, PopOut, RectCords, Scroll, Text, toRem } from 'folds';
-  Box,
+import { Icon, Icons } from '../icons';
-  Button,
-  Chip,
-  config,
-  Icon,
-  Icons,
-  Input,
-  Line,
-  Menu,
-  MenuItem,
-  PopOut,
-  RectCords,
-  Scroll,
-  Text,
-  toRem,
-} from 'folds';
 import { isKeyHotkey } from 'is-hotkey';
 import FocusTrap from 'focus-trap-react';
 import React, {

src/app/components/create-room/CreateRoomAliasInput.tsx

@@ -7,7 +7,8 @@ import React, {
   useState,
 } from 'react';
 import { MatrixError } from 'matrix-js-sdk';
-import { Box, color, Icon, Icons, Input, Spinner, Text, toRem } from 'folds';
+import { Box, color, Input, Spinner, Text, toRem } from 'folds';
+import { Icon, Icons } from '../icons';
 import { isKeyHotkey } from 'is-hotkey';
 import { getMxIdServer } from '../../utils/matrix';
 import { useMatrixClient } from '../../hooks/useMatrixClient';

src/app/components/create-room/CreateRoomKindSelector.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Box, Text, Icon, Icons, config, IconSrc } from 'folds';
+import { Box, Text, config } from 'folds';
+import { Icon, Icons, IconSrc } from '../icons';
 import { SequenceCard } from '../sequence-card';
 import { SettingTile } from '../setting-tile';
 

src/app/components/create-room/RoomVersionSelector.tsx

@@ -1,17 +1,6 @@
 import React, { MouseEventHandler, useState } from 'react';
-import {
+import { Box, Button, Chip, config, Menu, PopOut, RectCords, Text, toRem } from 'folds';
-  Box,
+import { Icon, Icons } from '../icons';
-  Button,
-  Chip,
-  config,
-  Icon,
-  Icons,
-  Menu,
-  PopOut,
-  RectCords,
-  Text,
-  toRem,
-} from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { SettingTile } from '../setting-tile';
 import { SequenceCard } from '../sequence-card';

src/app/components/direct-list/DirectList.tsx

@@ -1,20 +1,7 @@
 import React, { MouseEventHandler, forwardRef, useMemo, useState } from 'react';
 import { useAtom, useAtomValue } from 'jotai';
-import {
+import { Avatar, Box, Button, IconButton, Menu, MenuItem, PopOut, RectCords, Text, config, toRem } from 'folds';
-  Avatar,
+import { Icon, Icons } from '../icons';
-  Box,
-  Button,
-  Icon,
-  IconButton,
-  Icons,
-  Menu,
-  MenuItem,
-  PopOut,
-  RectCords,
-  Text,
-  config,
-  toRem,
-} from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import FocusTrap from 'focus-trap-react';
 import { useNavigate } from 'react-router-dom';

src/app/components/editor/Editor.preview.tsx

@@ -1,17 +1,8 @@
 import React, { useState } from 'react';
 import FocusTrap from 'focus-trap-react';
-import {
+import { config, IconButton, Line, Modal, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
-  config,
-  Icon,
-  IconButton,
-  Icons,
-  Line,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-} from 'folds';
 
+import { Icon, Icons } from '../icons';
 import { CustomEditor, useEditor } from './Editor';
 import { Toolbar } from './Toolbar';
 import { stopPropagation } from '../../utils/keyboard';

src/app/components/editor/Toolbar.tsx

@@ -1,22 +1,6 @@
 import FocusTrap from 'focus-trap-react';
-import {
+import { Badge, Box, config, IconButton, Line, Menu, PopOut, RectCords, Scroll, Text, Tooltip, TooltipProvider, toRem } from 'folds';
-  Badge,
+import { Icon, Icons, IconSrc } from '../icons';
-  Box,
-  config,
-  Icon,
-  IconButton,
-  Icons,
-  IconSrc,
-  Line,
-  Menu,
-  PopOut,
-  RectCords,
-  Scroll,
-  Text,
-  Tooltip,
-  TooltipProvider,
-  toRem,
-} from 'folds';
 import React, { MouseEventHandler, ReactNode, useState } from 'react';
 import { ReactEditor, useSlate } from 'slate-react';
 import {

src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx

@@ -1,6 +1,7 @@
 import React, { KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect } from 'react';
 import { Editor } from 'slate';
-import { Avatar, Icon, Icons, MenuItem, Text } from 'folds';
+import { Avatar, MenuItem, Text } from 'folds';
+import { Icon, Icons } from '../../icons';
 import { JoinRule, MatrixClient } from 'matrix-js-sdk';
 import { useAtomValue } from 'jotai';
 

src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { Editor } from 'slate';
-import { Avatar, Icon, Icons, MenuItem, Text } from 'folds';
+import { Avatar, MenuItem, Text } from 'folds';
+import { Icon, Icons } from '../../icons';
 import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
 
 import { AutocompleteQuery } from './autocompleteQuery';

src/app/components/emoji-board/EmojiBoard.tsx

@@ -9,7 +9,8 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import { Box, config, Icons, Scroll } from 'folds';
+import { Box, config, Scroll } from 'folds';
+import { Icons } from '../icons';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';
 import { Room } from 'matrix-js-sdk';

src/app/components/emoji-board/components/NoStickerPacks.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Box, toRem, config, Icons, Icon, Text } from 'folds';
+import { Box, toRem, config, Text } from 'folds';
 
+import { Icons, Icon } from '../../icons';
 export function NoStickerPacks() {
   return (
     <Box

src/app/components/emoji-board/components/SearchInput.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEventHandler, useRef } from 'react';
-import { Input, Chip, Icon, Icons, Text } from 'folds';
+import { Input, Chip, Text } from 'folds';
+import { Icon, Icons } from '../../icons';
 import { mobileOrTablet } from '../../../utils/user-agent';
 
 type SearchInputProps = {

src/app/components/emoji-board/components/Sidebar.tsx

@@ -1,17 +1,6 @@
 import React, { ReactNode } from 'react';
-import {
+import { Box, Scroll, Line, as, TooltipProvider, Tooltip, Text, IconButton } from 'folds';
-  Box,
+import { Icon, IconSrc, Icons } from '../../icons';
-  Scroll,
-  Line,
-  as,
-  TooltipProvider,
-  Tooltip,
-  Text,
-  IconButton,
-  Icon,
-  IconSrc,
-  Icons,
-} from 'folds';
 import classNames from 'classnames';
 import * as css from './styles.css';
 

src/app/components/emoji-board/useEmojiGroupIcons.ts

@@ -1,5 +1,6 @@
+import { IconSrc, Icons } from '../icons';
 import { useMemo } from 'react';
-import { IconSrc, Icons } from 'folds';
+
 
 import { EmojiGroupId } from '../../plugins/emoji';
 

src/app/components/event-readers/EventReaders.tsx

@@ -1,18 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import {
+import { Avatar, Box, Header, IconButton, MenuItem, Scroll, Text, as, config } from 'folds';
-  Avatar,
+import { Icon, Icons } from '../icons';
-  Box,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  MenuItem,
-  Scroll,
-  Text,
-  as,
-  config,
-} from 'folds';
 import { Room } from 'matrix-js-sdk';
 import { useRoomEventReaders } from '../../hooks/useRoomEventReaders';
 import { getMemberDisplayName } from '../../utils/room';

src/app/components/icons/Icon.tsx

@@ -0,0 +1,41 @@
+import React, { CSSProperties, forwardRef } from 'react';
+import classNames from 'classnames';
+import type { LucideIcon } from 'lucide-react';
+import { ICON_PIXEL_SIZES } from './iconSizes';
+import type { IconSize } from './types';
+import * as iconStyles from './style.css';
+
+export type IconProps = {
+  src: LucideIcon;
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  fill?: string;
+} & Omit<React.SVGAttributes<SVGSVGElement>, 'fill'>;
+
+export const Icon = forwardRef<SVGSVGElement, IconProps>(
+  ({ className, size = '400', filled = false, src: LucideIconComponent, style, fill, ...props }, ref) => {
+    const pixelSize = ICON_PIXEL_SIZES[size];
+
+    return (
+      <LucideIconComponent
+        ref={ref}
+        className={classNames(iconStyles.Icon({ size }), className)}
+        style={
+          size === 'Inherit'
+            ? { width: '1em', height: '1em', ...style }
+            : pixelSize
+              ? { width: pixelSize, height: pixelSize, ...style }
+              : style
+        }
+        strokeWidth={2}
+        fill={fill ?? (filled ? 'currentColor' : 'none')}
+        aria-hidden={props['aria-hidden'] ?? props['aria-label'] ? undefined : true}
+        {...props}
+      />
+    );
+  }
+);
+
+Icon.displayName = 'Icon';

src/app/components/icons/iconSizes.ts

@@ -0,0 +1,12 @@
+import type { IconSize } from './types';
+
+export const ICON_PIXEL_SIZES: Record<IconSize, number | undefined> = {
+  '50': 10,
+  '100': 12,
+  '200': 16,
+  '300': 20,
+  '400': 24,
+  '500': 28,
+  '600': 32,
+  Inherit: undefined,
+};

src/app/components/icons/index.ts

@@ -0,0 +1,4 @@
+export { Icon } from './Icon';
+export type { IconProps } from './Icon';
+export { Icons } from './lucideIcons';
+export type { IconName, IconSrc, IconSize } from './types';

src/app/components/icons/lucideIcons.ts

@@ -0,0 +1,238 @@
+import {
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  ArrowUpDown,
+  AtSign,
+  Ban,
+  Bell,
+  BellDot,
+  BellOff,
+  BellRing,
+  Bold,
+  Bookmark,
+  Boxes,
+  CaseSensitive,
+  Check,
+  CheckCheck,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Circle,
+  CirclePlus,
+  Clock,
+  Code,
+  Code2,
+  Compass,
+  CornerUpLeft,
+  CornerUpRight,
+  Download,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  File,
+  FileText,
+  Filter,
+  Flag,
+  Globe,
+  Hash,
+  Heading1,
+  Heading2,
+  Heading3,
+  Headphones,
+  Heart,
+  History,
+  Home,
+  Image,
+  ImagePlay,
+  Inbox,
+  Info,
+  Italic,
+  Leaf,
+  Lightbulb,
+  Link,
+  List,
+  ListOrdered,
+  Lock,
+  LogOut,
+  Mail,
+  MailPlus,
+  MessageSquare,
+  MessageSquareDot,
+  MessageSquarePlus,
+  MessagesSquare,
+  Mic,
+  MicOff,
+  Minus,
+  Monitor,
+  MoreHorizontal,
+  MoreVertical,
+  Paperclip,
+  Pause,
+  Pencil,
+  Phone,
+  Pin,
+  Play,
+  Plus,
+  Power,
+  Quote,
+  RefreshCw,
+  Reply,
+  Search,
+  Send,
+  Server,
+  Settings,
+  Shield,
+  ShieldUser,
+  Smile,
+  SmilePlus,
+  Sparkles,
+  Star,
+  Strikethrough,
+  Sun,
+  Terminal,
+  Trash2,
+  TriangleAlert,
+  Trophy,
+  Type,
+  Underline,
+  User,
+  UserPlus,
+  Video,
+  VideoOff,
+  Volume2,
+  VolumeX,
+  X,
+} from 'lucide-react';
+
+export const Icons = {
+  Alphabet: CaseSensitive,
+  AlphabetUnderline: Underline,
+  ArrowBottom: ArrowDown,
+  ArrowDropBottom: ChevronDown,
+  ArrowDropLeft: ChevronLeft,
+  ArrowDropRight: ChevronRight,
+  ArrowDropTop: ChevronUp,
+  ArrowGoLeft: CornerUpLeft,
+  ArrowGoRight: CornerUpRight,
+  ArrowGoRightCross: LogOut,
+  ArrowGoRightPlus: ExternalLink,
+  ArrowLeft,
+  ArrowRight,
+  ArrowTop: ArrowUp,
+  ArrowUpDown,
+  Attachment: Paperclip,
+  Ball: Circle,
+  Bell,
+  BellMute: BellOff,
+  BellPing: BellDot,
+  BellRing,
+  BlockCode: Code,
+  BlockQuote: Quote,
+  Bold,
+  Bookmark,
+  Bulb: Lightbulb,
+  Category: Boxes,
+  Check,
+  CheckTwice: CheckCheck,
+  ChevronBottom: ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronTop: ChevronUp,
+  Clock,
+  Code: Code2,
+  Cross: X,
+  Cup: Trophy,
+  Delete: Trash2,
+  Download,
+  Explore: Compass,
+  External: ExternalLink,
+  Eye,
+  EyeBlind: EyeOff,
+  File,
+  Filter,
+  Flag,
+  Funnel: Filter,
+  Hash,
+  HashGlobe: Globe,
+  HashLock: Lock,
+  HashPlus: CirclePlus,
+  HashSearch: Search,
+  Heading1,
+  Heading2,
+  Heading3,
+  Headphone: Headphones,
+  Heart,
+  Home,
+  HorizontalDots: MoreHorizontal,
+  Inbox,
+  Info,
+  Italic,
+  Leaf,
+  Link,
+  Lock,
+  Mail,
+  MailPlus,
+  Markdown: FileText,
+  Mention: AtSign,
+  Message: MessageSquare,
+  MessageUnread: MessageSquareDot,
+  Mic,
+  MicMute: MicOff,
+  Minus,
+  Monitor,
+  NoEntry: Ban,
+  OrderList: ListOrdered,
+  Pause,
+  Peace: Sparkles,
+  Pencil,
+  Phone,
+  Photo: Image,
+  Pin,
+  Play,
+  Plus,
+  PlusCircle: CirclePlus,
+  Power,
+  Prohibited: Ban,
+  RecentClock: History,
+  Reload: RefreshCw,
+  ReplyArrow: Reply,
+  Search,
+  Send,
+  Server,
+  Setting: Settings,
+  Shield,
+  ShieldLock: Lock,
+  ShieldUser,
+  Smile,
+  SmilePlus,
+  Sort: ArrowUpDown,
+  Space: Boxes,
+  SpaceGlobe: Globe,
+  SpaceLock: Lock,
+  SpacePlus: Plus,
+  SpaceSearch: Search,
+  Star,
+  Sticker: Sparkles,
+  Strike: Strikethrough,
+  Sun,
+  Terminal,
+  Text: Type,
+  Thread: MessagesSquare,
+  ThreadPlus: MessageSquarePlus,
+  ThreadUnread: MessageSquareDot,
+  Underline,
+  UnorderList: List,
+  User,
+  UserPlus,
+  VerticalDots: MoreVertical,
+  VideoCamera: Video,
+  VideoCameraMute: VideoOff,
+  Vlc: Play,
+  VolumeHigh: Volume2,
+  VolumeMute: VolumeX,
+  Warning: TriangleAlert,
+  ImagePlay,
+} as const;

src/app/components/icons/style.css.ts

@@ -0,0 +1,25 @@
+import { recipe } from '@vanilla-extract/recipes';
+import { config } from 'folds';
+
+export const Icon = recipe({
+  base: {
+    display: 'inline-block',
+    flexShrink: 0,
+    verticalAlign: 'middle',
+  },
+  variants: {
+    size: {
+      '50': { width: config.size.X50, height: config.size.X50 },
+      '100': { width: config.size.X100, height: config.size.X100 },
+      '200': { width: config.size.X200, height: config.size.X200 },
+      '300': { width: config.size.X300, height: config.size.X300 },
+      '400': { width: config.size.X400, height: config.size.X400 },
+      '500': { width: config.size.X500, height: config.size.X500 },
+      '600': { width: config.size.X600, height: config.size.X600 },
+      Inherit: { width: '1em', height: '1em' },
+    },
+  },
+  defaultVariants: {
+    size: '400',
+  },
+});

src/app/components/icons/types.ts

@@ -0,0 +1,5 @@
+import type { LucideIcon } from 'lucide-react';
+
+export type IconSrc = LucideIcon;
+export type IconSize = '50' | '100' | '200' | '300' | '400' | '500' | '600' | 'Inherit';
+export type IconName = keyof typeof import('./lucideIcons').Icons;

src/app/components/image-editor/ImageEditor.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds';
+import { Box, Chip, Header, IconButton, Text, as } from 'folds';
+import { Icon, Icons } from '../icons';
 import * as css from './ImageEditor.css';
 
 export type ImageEditorProps = {

src/app/components/image-pack-view/ImagePackView.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Box, IconButton, Text, Icon, Icons, Scroll, Chip } from 'folds';
+import { Box, IconButton, Text, Scroll, Chip } from 'folds';
+import { Icon, Icons } from '../icons';
 import { PackAddress } from '../../plugins/custom-emoji';
 import { Page, PageHeader, PageContent } from '../page';
 import { useMatrixClient } from '../../hooks/useMatrixClient';

src/app/components/image-pack-view/ImageTile.tsx

@@ -1,5 +1,6 @@
 import React, { FormEventHandler, ReactNode, useMemo, useState } from 'react';
-import { Badge, Box, Button, Chip, Icon, Icons, Input, Text } from 'folds';
+import { Badge, Box, Button, Chip, Input, Text } from 'folds';
+import { Icon, Icons } from '../icons';
 import { UsageSwitcher, useUsageStr } from './UsageSwitcher';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import * as css from './style.css';

src/app/components/image-pack-view/PackMeta.tsx

@@ -1,16 +1,6 @@
 import React, { FormEventHandler, useCallback, useMemo, useState } from 'react';
-import {
+import { Box, Text, Avatar, AvatarFallback, Button, Input, TextArea, Chip } from 'folds';
-  Box,
+import { Icon, Icons } from '../icons';
-  Text,
-  Avatar,
-  AvatarFallback,
-  Button,
-  Icon,
-  Icons,
-  Input,
-  TextArea,
-  Chip,
-} from 'folds';
 import Linkify from 'linkify-react';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMatrixClient } from '../../hooks/useMatrixClient';

src/app/components/image-pack-view/UsageSwitcher.tsx

@@ -1,5 +1,6 @@
 import React, { MouseEventHandler, useMemo, useState } from 'react';
-import { Box, Button, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import { Box, Button, config, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import { Icon, Icons } from '../icons';
 import FocusTrap from 'focus-trap-react';
 import { ImageUsage } from '../../plugins/custom-emoji';
 import { stopPropagation } from '../../utils/keyboard';

src/app/components/image-viewer/ImageViewer.tsx

@@ -2,7 +2,8 @@
 import React from 'react';
 import FileSaver from 'file-saver';
 import classNames from 'classnames';
-import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds';
+import { Box, Chip, Header, IconButton, Text, as } from 'folds';
+import { Icon, Icons } from '../icons';
 import * as css from './ImageViewer.css';
 import { useZoom } from '../../hooks/useZoom';
 import { usePan } from '../../hooks/usePan';

src/app/components/invite-user-prompt/InviteUserPrompt.tsx

@@ -7,28 +7,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
+import { Overlay, OverlayBackdrop, OverlayCenter, Box, Header, config, Text, IconButton, Input, Button, Spinner, color, TextArea, Dialog, Menu, toRem, Scroll, MenuItem } from 'folds';
-  Overlay,
+import { Icon, Icons } from '../icons';
-  OverlayBackdrop,
-  OverlayCenter,
-  Box,
-  Header,
-  config,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  Input,
-  Button,
-  Spinner,
-  color,
-  TextArea,
-  Dialog,
-  Menu,
-  toRem,
-  Scroll,
-  MenuItem,
-} from 'folds';
 import { Room } from 'matrix-js-sdk';
 import { isKeyHotkey } from 'is-hotkey';
 import FocusTrap from 'focus-trap-react';

src/app/components/join-address-prompt/JoinAddressPrompt.tsx

@@ -1,21 +1,7 @@
 import React, { FormEventHandler, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
-import {
+import { Dialog, Overlay, OverlayCenter, OverlayBackdrop, Header, config, Box, Text, IconButton, Button, Input, color } from 'folds';
-  Dialog,
+import { Icon, Icons } from '../icons';
-  Overlay,
-  OverlayCenter,
-  OverlayBackdrop,
-  Header,
-  config,
-  Box,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  Button,
-  Input,
-  color,
-} from 'folds';
 import { stopPropagation } from '../../utils/keyboard';
 import { isRoomAlias, isRoomId } from '../../utils/matrix';
 import { parseMatrixToRoom, parseMatrixToRoomEvent, testMatrixTo } from '../../plugins/matrix-to';

src/app/components/join-space-prompt/JoinSpacePrompt.tsx

@@ -1,25 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
-import {
+import { Dialog, Overlay, OverlayCenter, OverlayBackdrop, Header, config, Box, Text, IconButton, color, Button, Spinner, Scroll, Checkbox, Avatar, Badge } from 'folds';
-  Dialog,
+import { Icon, Icons } from '../icons';
-  Overlay,
-  OverlayCenter,
-  OverlayBackdrop,
-  Header,
-  config,
-  Box,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  color,
-  Button,
-  Spinner,
-  Scroll,
-  Checkbox,
-  Avatar,
-  Badge,
-} from 'folds';
 import { IHierarchyRoom } from 'matrix-js-sdk/lib/@types/spaces';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { stopPropagation } from '../../utils/keyboard';

src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx

@@ -1,21 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 import FocusTrap from 'focus-trap-react';
-import {
+import { Dialog, Overlay, OverlayCenter, OverlayBackdrop, Header, config, Box, Text, IconButton, color, Button, Spinner } from 'folds';
-  Dialog,
+import { Icon, Icons } from '../icons';
-  Overlay,
-  OverlayCenter,
-  OverlayBackdrop,
-  Header,
-  config,
-  Box,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  color,
-  Button,
-  Spinner,
-} from 'folds';
 import { MatrixError } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';

src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx

@@ -1,21 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
-import {
+import { Dialog, Overlay, OverlayCenter, OverlayBackdrop, Header, config, Box, Text, IconButton, color, Button, Spinner } from 'folds';
-  Dialog,
+import { Icon, Icons } from '../icons';
-  Overlay,
-  OverlayCenter,
-  OverlayBackdrop,
-  Header,
-  config,
-  Box,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  color,
-  Button,
-  Spinner,
-} from 'folds';
 import { MatrixError, Room } from 'matrix-js-sdk';
 import { useAtomValue } from 'jotai';
 import { useMatrixClient } from '../../hooks/useMatrixClient';

src/app/components/manage-rooms-prompt/ManageRoomsPrompt.tsx

@@ -1,26 +1,7 @@
 import React, { useMemo, useState, useCallback, useRef, useEffect, MouseEvent } from 'react';
 import FocusTrap from 'focus-trap-react';
-import {
+import { Dialog, Overlay, OverlayCenter, OverlayBackdrop, Header, config, Box, Text, IconButton, color, Button, Spinner, Scroll, Checkbox, Badge, Line, Avatar } from 'folds';
-  Dialog,
+import { Icon, Icons } from '../icons';
-  Overlay,
-  OverlayCenter,
-  OverlayBackdrop,
-  Header,
-  config,
-  Box,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  color,
-  Button,
-  Spinner,
-  Scroll,
-  Checkbox,
-  Badge,
-  Line,
-  Avatar,
-} from 'folds';
 import { Room } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { stopPropagation } from '../../utils/keyboard';

src/app/components/media/Video.tsx

@@ -1,7 +1,8 @@
 import React, { VideoHTMLAttributes, forwardRef, useRef, useState, useEffect } from 'react';
 
 import classNames from 'classnames';
-import { Box, IconButton, Icon, Icons, Tooltip, TooltipProvider, Text } from 'folds';
+import { Box, IconButton, Tooltip, TooltipProvider, Text } from 'folds';
+import { Icon, Icons } from '../icons';
 import * as css from './media.css';
 import * as videoCss from './videoControls.css';
 

src/app/components/member-tile/MemberTile.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
-import { as, Avatar, Box, Icon, Icons, Text } from 'folds';
+import { as, Avatar, Box, Text } from 'folds';
+import { Icon, Icons } from '../icons';
 import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
 import { getMemberDisplayName } from '../../utils/room';
 import { getMxIdLocalPart } from '../../utils/matrix';

src/app/components/message/FileHeader.tsx

@@ -1,4 +1,5 @@
-import { Badge, Box, Icon, IconButton, Icons, Spinner, Text, as, toRem } from 'folds';
+import { Badge, Box, IconButton, Spinner, Text, as, toRem } from 'folds';
+import { Icon, Icons } from '../icons';
 import React, { ReactNode, useCallback } from 'react';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import FileSaver from 'file-saver';

src/app/components/message/MsgTypeRenderers.tsx

@@ -1,5 +1,6 @@
 import React, { CSSProperties, ReactNode } from 'react';
-import { Box, Chip, Icon, Icons, Text, toRem } from 'folds';
+import { Box, Chip, Text, toRem } from 'folds';
+import { Icon, Icons } from '../icons';
 import { IContent } from 'matrix-js-sdk';
 import { JUMBO_EMOJI_REG, URL_REG } from '../../utils/regex';
 import { trimReplyFromBody } from '../../utils/room';

src/app/components/message/Reply.tsx

@@ -1,4 +1,5 @@
-import { Box, Icon, Icons, Text, as, color, toRem } from 'folds';
+import { Box, Text, as, color, toRem } from 'folds';
+import { Icon, Icons } from '../icons';
 import { EventTimelineSet, Room } from 'matrix-js-sdk';
 import React, { MouseEventHandler, ReactNode, useCallback, useMemo } from 'react';
 import classNames from 'classnames';

src/app/components/message/content/AudioContent.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/media-has-caption */
 import React, { ReactNode, useCallback, useRef, useState } from 'react';
-import { Badge, Chip, Icon, IconButton, Icons, ProgressBar, Spinner, Text, toRem } from 'folds';
+import { Badge, Chip, IconButton, ProgressBar, Spinner, Text, toRem } from 'folds';
+import { Icon, Icons } from '../../icons';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import { Range } from 'react-range';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';

src/app/components/message/content/EventContent.tsx

@@ -1,4 +1,5 @@
-import { Box, Icon, IconSrc } from 'folds';
+import { Box } from 'folds';
+import { Icon, IconSrc } from '../../icons';
 import React, { ReactNode } from 'react';
 import { BubbleLayout, CompactLayout, ModernLayout } from '..';
 import { MessageLayout } from '../../../state/settings';

src/app/components/message/content/FallbackContent.tsx

@@ -1,4 +1,5 @@
-import { Box, Icon, Icons, Text, as, color, config } from 'folds';
+import { Box, Text, as, color, config } from 'folds';
+import { Icon, Icons } from '../../icons';
 import React from 'react';
 
 const warningStyle = { color: color.Warning.Main, opacity: config.opacity.P300 };

src/app/components/message/content/FileContent.tsx

@@ -1,19 +1,6 @@
 import React, { ReactNode, useCallback, useState } from 'react';
-import {
+import { Box, Button, Modal, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, Tooltip, TooltipProvider, as } from 'folds';
-  Box,
+import { Icon, Icons } from '../../icons';
-  Button,
-  Icon,
-  Icons,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Spinner,
-  Text,
-  Tooltip,
-  TooltipProvider,
-  as,
-} from 'folds';
 import FileSaver from 'file-saver';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import FocusTrap from 'focus-trap-react';

src/app/components/message/content/ImageContent.tsx

@@ -1,21 +1,6 @@
 import React, { ReactNode, useCallback, useEffect, useState } from 'react';
-import {
+import { Badge, Box, Button, Chip, Modal, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, Tooltip, TooltipProvider, as } from 'folds';
-  Badge,
+import { Icon, Icons } from '../../icons';
-  Box,
-  Button,
-  Chip,
-  Icon,
-  Icons,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Spinner,
-  Text,
-  Tooltip,
-  TooltipProvider,
-  as,
-} from 'folds';
 import classNames from 'classnames';
 import { BlurhashCanvas } from 'react-blurhash';
 import FocusTrap from 'focus-trap-react';

src/app/components/message/content/VideoContent.tsx

@@ -1,21 +1,6 @@
 import React, { ReactNode, useCallback, useEffect, useState } from 'react';
-import {
+import { Badge, Box, Button, Chip, Modal, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, Tooltip, TooltipProvider, as } from 'folds';
-  Badge,
+import { Icon, Icons } from '../../icons';
-  Box,
-  Button,
-  Chip,
-  Icon,
-  Icons,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Spinner,
-  Text,
-  Tooltip,
-  TooltipProvider,
-  as,
-} from 'folds';
 import classNames from 'classnames';
 import { BlurhashCanvas } from 'react-blurhash';
 import FocusTrap from 'focus-trap-react';

src/app/components/password-input/PasswordInput.tsx

@@ -1,5 +1,6 @@
 import React, { ComponentProps, forwardRef } from 'react';
-import { Icon, IconButton, Input, config, Icons } from 'folds';
+import { IconButton, Input, config } from 'folds';
+import { Icon, Icons } from '../icons';
 import { UseStateProvider } from '../UseStateProvider';
 
 type PasswordInputProps = Omit<ComponentProps<typeof Input>, 'type' | 'size'> & {

src/app/components/room-avatar/RoomAvatar.tsx

@@ -1,5 +1,6 @@
 import { JoinRule } from 'matrix-js-sdk';
-import { AvatarFallback, AvatarImage, Icon, Icons, color } from 'folds';
+import { AvatarFallback, AvatarImage, color } from 'folds';
+import { Icon, Icons } from '../icons';
 import React, { ComponentProps, ReactEventHandler, ReactNode, forwardRef, useState } from 'react';
 import * as css from './RoomAvatar.css';
 import { joinRuleToIconSrc } from '../../utils/room';

src/app/components/room-card/RoomCard.tsx

@@ -1,22 +1,7 @@
 import React, { ReactNode, useCallback, useRef, useState } from 'react';
 import { MatrixError, Room } from 'matrix-js-sdk';
-import {
+import { Avatar, Badge, Box, Button, Dialog, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, as, color, config } from 'folds';
-  Avatar,
+import { Icon, Icons } from '../icons';
-  Badge,
-  Box,
-  Button,
-  Dialog,
-  Icon,
-  Icons,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Spinner,
-  Text,
-  as,
-  color,
-  config,
-} from 'folds';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
 import * as css from './style.css';

src/app/components/room-topic-viewer/RoomTopicViewer.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { as, Box, Header, Icon, IconButton, Icons, Modal, Scroll, Text } from 'folds';
+import { as, Box, Header, IconButton, Modal, Scroll, Text } from 'folds';
+import { Icon, Icons } from '../icons';
 import classNames from 'classnames';
 import Linkify from 'linkify-react';
 import * as css from './style.css';

src/app/components/text-viewer/TextViewer.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import React, { ComponentProps, HTMLAttributes, Suspense, forwardRef, lazy } from 'react';
 import classNames from 'classnames';
-import { Box, Chip, Header, Icon, IconButton, Icons, Scroll, Text, as } from 'folds';
+import { Box, Chip, Header, IconButton, Scroll, Text, as } from 'folds';
+import { Icon, Icons } from '../icons';
 import { ErrorBoundary } from 'react-error-boundary';
 import * as css from './TextViewer.css';
 import { copyToClipboard } from '../../utils/dom';

src/app/components/title-bar/WindowControls.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Box, IconButton, Icon } from 'folds';
+import { Box, IconButton } from 'folds';
+import { Icon } from '../icons';
 import { invoke } from '@tauri-apps/api/core';
 import * as css from './WindowControls.css';
 

src/app/components/uia-stages/PasswordStage.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, color, config, Dialog, Header, Icon, IconButton, Icons, Text } from 'folds';
+import { Box, Button, color, config, Dialog, Header, IconButton, Text } from 'folds';
+import { Icon, Icons } from '../icons';
 import React, { FormEventHandler } from 'react';
 import { AuthType } from 'matrix-js-sdk';
 import { StageComponentProps } from './types';

src/app/components/uia-stages/SSOStage.tsx

@@ -1,5 +1,6 @@
 import { openExternalUrl } from '../../utils/tauri';
-import { Box, Button, color, config, Dialog, Header, Icon, IconButton, Icons, Text } from 'folds';
+import { Box, Button, color, config, Dialog, Header, IconButton, Text } from 'folds';
+import { Icon, Icons } from '../icons';
 import React, { useCallback, useEffect, useState } from 'react';
 import { StageComponentProps } from './types';
 

src/app/components/upload-board/UploadBoard.tsx

@@ -1,5 +1,6 @@
 import React, { MutableRefObject, ReactNode, useImperativeHandle, useRef } from 'react';
-import { Badge, Box, Chip, Header, Icon, Icons, Spinner, Text, as, percent } from 'folds';
+import { Badge, Box, Chip, Header, Spinner, Text, as, percent } from 'folds';
+import { Icon, Icons } from '../icons';
 import classNames from 'classnames';
 import { useAtomValue } from 'jotai';
 

src/app/components/upload-card/CompactUploadCardRenderer.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
-import { Chip, Icon, IconButton, Icons, Text, color } from 'folds';
+import { Chip, IconButton, Text, color } from 'folds';
+import { Icon, Icons } from '../icons';
 import { UploadCard, UploadCardError, CompactUploadCardProgress } from './UploadCard';
 import { TUploadAtom, UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
 import { useMatrixClient } from '../../hooks/useMatrixClient';

src/app/components/upload-card/UploadCard.tsx

@@ -1,4 +1,5 @@
-import { Badge, Box, Icon, Icons, ProgressBar, Text, percent } from 'folds';
+import { Badge, Box, ProgressBar, Text, percent } from 'folds';
+import { Icon, Icons } from '../icons';
 import React, { ReactNode, forwardRef } from 'react';
 
 import * as css from './UploadCard.css';

src/app/components/upload-card/UploadCardRenderer.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode, useEffect } from 'react';
-import { Box, Chip, Icon, IconButton, Icons, Text, color, config, toRem } from 'folds';
+import { Box, Chip, IconButton, Text, color, config, toRem } from 'folds';
+import { Icon, Icons } from '../icons';
 import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard';
 import { UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
 import { useMatrixClient } from '../../hooks/useMatrixClient';

src/app/components/url-preview/UrlPreviewCard.tsx

@@ -1,6 +1,7 @@
 import React, { MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { IPreviewUrlResponse } from 'matrix-js-sdk';
-import { Box, Icon, IconButton, Icons, Scroll, Spinner, Text, as, color, config } from 'folds';
+import { Box, IconButton, Scroll, Spinner, Text, as, color, config } from 'folds';
+import { Icon, Icons } from '../icons';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { UrlPreview, UrlPreviewContent, UrlPreviewDescription, UrlPreviewImg } from './UrlPreview';

src/app/components/url-preview/YouTubeEmbed.tsx

@@ -1,5 +1,6 @@
 import React, { MouseEvent, useCallback, useEffect, useState } from 'react';
-import { Box, Icon, Icons, Spinner, Text, as } from 'folds';
+import { Box, Spinner, Text, as } from 'folds';
+import { Icon, Icons } from '../icons';
 import * as css from './YouTubeEmbed.css';
 import { getYouTubeStream, isYouTubeStreamingAvailable, openExternalUrl } from '../../utils/tauri';
 

src/app/components/user-profile/CreatorChip.tsx

@@ -1,4 +1,5 @@
-import { Chip, color, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import { Chip, color, config, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import { Icon, Icons } from '../icons';
 import React, { MouseEventHandler, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';

src/app/components/user-profile/PowerChip.tsx

@@ -1,26 +1,5 @@
-import {
+import { Box, Button, Chip, color, config, Dialog, Header, IconButton, Line, Menu, MenuItem, Overlay, OverlayBackdrop, OverlayCenter, PopOut, RectCords, Spinner, Text, toRem } from 'folds';
-  Box,
+import { Icon, Icons } from '../icons';
-  Button,
-  Chip,
-  color,
-  config,
-  Dialog,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Line,
-  Menu,
-  MenuItem,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  PopOut,
-  RectCords,
-  Spinner,
-  Text,
-  toRem,
-} from 'folds';
 import React, { MouseEventHandler, useCallback, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';

src/app/components/user-profile/UserChips.tsx

@@ -4,24 +4,8 @@ import { useNavigate } from 'react-router-dom';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';
 import { Room } from 'matrix-js-sdk';
-import {
+import { PopOut, Menu, MenuItem, color, config, Text, Line, Chip, RectCords, Spinner, toRem, Box, Scroll, Avatar } from 'folds';
-  PopOut,
+import { Icon, Icons } from '../icons';
-  Menu,
-  MenuItem,
-  color,
-  config,
-  Text,
-  Line,
-  Chip,
-  Icon,
-  Icons,
-  RectCords,
-  Spinner,
-  toRem,
-  Box,
-  Scroll,
-  Avatar,
-} from 'folds';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { getMxIdServer } from '../../utils/matrix';
 import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';

src/app/components/user-profile/UserHero.tsx

@@ -1,16 +1,6 @@
 import React, { useState } from 'react';
-import {
+import { Avatar, Box, Modal, Overlay, OverlayBackdrop, OverlayCenter, Text, toRem } from 'folds';
-  Avatar,
+import { Icon, Icons } from '../icons';
-  Box,
-  Icon,
-  Icons,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Text,
-  toRem,
-} from 'folds';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
 import * as css from './styles.css';

src/app/components/user-profile/UserModeration.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, color, config, Icon, Icons, Spinner, Text, Input } from 'folds';
+import { Box, Button, color, config, Spinner, Text, Input } from 'folds';
+import { Icon, Icons } from '../icons';
 import React, { useCallback, useRef } from 'react';
 import { useRoom } from '../../hooks/useRoom';
 import { CutoutCard } from '../cutout-card';

src/app/components/user-profile/UserRoomProfile.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, color, config, Icon, Icons, Text, toRem } from 'folds';
+import { Box, Button, color, config, Text, toRem } from 'folds';
+import { Icon, Icons } from '../icons';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { UserHero, UserHeroName } from './UserHero';

src/app/components/video-viewer/VideoViewer.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import FileSaver from 'file-saver';
 import classNames from 'classnames';
-import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds';
+import { Box, Chip, Header, IconButton, Text, as } from 'folds';
+import { Icon, Icons } from '../icons';
 import * as css from './VideoViewer.css';
 import { downloadMedia } from '../../utils/matrix';
 import { getCurrentAccessToken } from '../../utils/auth';

src/app/features/ShareRoomPicker.tsx

@@ -2,24 +2,8 @@ import { useAtomValue } from 'jotai';
 import React, { ChangeEventHandler, useCallback, useMemo, useRef, useState } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import FocusTrap from 'focus-trap-react';
-import {
+import { Avatar, Box, Button, Header, IconButton, Input, MenuItem, Modal, Overlay, OverlayBackdrop, OverlayCenter, Scroll, Text, config } from 'folds';
-  Avatar,
+import { Icon, Icons } from '../components/icons';
-  Box,
-  Button,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Input,
-  MenuItem,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Scroll,
-  Text,
-  config,
-} from 'folds';
 import { useMatrixClient } from '../hooks/useMatrixClient';
 import { useAllJoinedRoomsSet, useGetRoom } from '../hooks/useGetRoom';
 import { allRoomsAtom } from '../state/room-list/roomList';

src/app/features/add-existing/AddExisting.tsx

@@ -1,24 +1,6 @@
 import FocusTrap from 'focus-trap-react';
-import {
+import { Avatar, Box, Button, config, Header, IconButton, Input, Menu, MenuItem, Modal, Overlay, OverlayBackdrop, OverlayCenter, Scroll, Spinner, Text } from 'folds';
-  Avatar,
+import { Icon, Icons } from '../../components/icons';
-  Box,
-  Button,
-  config,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Input,
-  Menu,
-  MenuItem,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Scroll,
-  Spinner,
-  Text,
-} from 'folds';
 import React, {
   ChangeEventHandler,
   MouseEventHandler,

src/app/features/call/CallOverlay.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Box, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider, color } from 'folds';
+import { Box, IconButton, Text, Tooltip, TooltipProvider, color } from 'folds';
+import { Icon, Icons } from '../../components/icons';
 import { useAtom } from 'jotai';
 import { useCall } from './useCall';
 import { useRoomCallMembers } from './useRoomCallMembers';

src/app/features/call/DockedCallContent.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Box, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider, Scroll, color } from 'folds';
+import { Box, IconButton, Text, Tooltip, TooltipProvider, Scroll, color } from 'folds';
+import { Icon, Icons } from '../../components/icons';
 import { useSetAtom } from 'jotai';
 import { useCall } from './useCall';
 import { ScreenShareItem, ScreenShareEntry } from './CallOverlay';

src/app/features/call/IncomingCallNotification.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable no-console */
 import React, { useCallback, useEffect, useState } from 'react';
 import { MatrixEvent, Room, RoomStateEvent } from 'matrix-js-sdk';
-import { Box, Icon, IconButton, Icons, Text, color } from 'folds';
+import { Box, IconButton, Text, color } from 'folds';
+import { Icon, Icons } from '../../components/icons';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useCall } from './useCall';
 import { CallType } from './types';

src/app/features/call/SidebarDockedCallPanel.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Box, Icon, IconButton, Icons, Scroll, Text, Tooltip, TooltipProvider, color } from 'folds';
+import { Box, IconButton, Scroll, Text, Tooltip, TooltipProvider, color } from 'folds';
+import { Icon, Icons } from '../../components/icons';
 import { useSetAtom } from 'jotai';
 import { useCall } from './useCall';
 import { useRoomCallMembers } from './useRoomCallMembers';

src/app/features/common-settings/developer-tools/DevelopTools.tsx

@@ -1,23 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import {
+import { Box, Text, IconButton, Scroll, Switch, Button, MenuItem, config, color, TextArea, Dialog, Overlay, OverlayBackdrop, OverlayCenter, Modal } from 'folds';
-  Box,
+import { Icon, Icons } from '../../../components/icons';
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  Scroll,
-  Switch,
-  Button,
-  MenuItem,
-  config,
-  color,
-  TextArea,
-  Dialog,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Modal,
-} from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';

src/app/features/common-settings/developer-tools/SendRoomEvent.tsx

@@ -1,19 +1,7 @@
 import React, { useCallback, useRef, useState, FormEventHandler, useEffect } from 'react';
 import { MatrixError } from 'matrix-js-sdk';
-import {
+import { Box, Chip, IconButton, Text, config, Button, Spinner, color, TextAreaComponent as TextArea, Input } from 'folds';
-  Box,
+import { Icon, Icons } from '../../../components/icons';
-  Chip,
-  Icon,
-  Icons,
-  IconButton,
-  Text,
-  config,
-  Button,
-  Spinner,
-  color,
-  TextArea as TextAreaComponent,
-  Input,
-} from 'folds';
 import { Page, PageHeader } from '../../../components/page';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRoom } from '../../../hooks/useRoom';

src/app/features/common-settings/developer-tools/StateEventEditor.tsx

@@ -1,18 +1,6 @@
 import React, { FormEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
+import { Box, Text, IconButton, Chip, Scroll, config, TextAreaComponent as TextArea, color, Spinner, Button } from 'folds';
-  Box,
+import { Icon, Icons } from '../../../components/icons';
-  Text,
-  Icon,
-  Icons,
-  IconButton,
-  Chip,
-  Scroll,
-  config,
-  TextArea as TextAreaComponent,
-  color,
-  Spinner,
-  Button,
-} from 'folds';
 import { MatrixError } from 'matrix-js-sdk';
 import { Page, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';

src/app/features/common-settings/emojis-stickers/EmojisStickers.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
+import { Box, IconButton, Scroll, Text } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { ImagePack } from '../../../plugins/custom-emoji';
 import { ImagePackView } from '../../../components/image-pack-view';

src/app/features/common-settings/emojis-stickers/RoomPacks.tsx

@@ -1,20 +1,6 @@
 import React, { FormEventHandler, useCallback, useMemo, useState } from 'react';
-import {
+import { Box, Text, Button, Avatar, AvatarFallback, toRem, config, Input, Spinner, color, IconButton, Menu } from 'folds';
-  Box,
+import { Icon, Icons } from '../../../components/icons';
-  Text,
-  Button,
-  Icon,
-  Icons,
-  Avatar,
-  AvatarFallback,
-  toRem,
-  config,
-  Input,
-  Spinner,
-  color,
-  IconButton,
-  Menu,
-} from 'folds';
 import { MatrixError } from 'matrix-js-sdk';
 import { SequenceCard } from '../../../components/sequence-card';
 import {

src/app/features/common-settings/general/EmbedFilters.tsx

@@ -1,18 +1,6 @@
 import React, { FormEventHandler, useCallback, useState } from 'react';
-import {
+import { Box, Button, Chip, color, config, Input, Spinner, Text, Tooltip, TooltipProvider } from 'folds';
-  Box,
+import { Icon, Icons } from '../../../components/icons';
-  Button,
-  Chip,
-  color,
-  config,
-  Icon,
-  Icons,
-  Input,
-  Spinner,
-  Text,
-  Tooltip,
-  TooltipProvider,
-} from 'folds';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';

src/app/features/common-settings/general/RoomAddress.tsx

@@ -1,19 +1,6 @@
 import React, { FormEventHandler, useCallback, useState } from 'react';
-import {
+import { Badge, Box, Button, Checkbox, Chip, color, config, Input, Spinner, Text, toRem } from 'folds';
-  Badge,
+import { Icon, Icons } from '../../../components/icons';
-  Box,
-  Button,
-  Checkbox,
-  Chip,
-  color,
-  config,
-  Icon,
-  Icons,
-  Input,
-  Spinner,
-  Text,
-  toRem,
-} from 'folds';
 import { MatrixError } from 'matrix-js-sdk';
 import { SettingTile } from '../../../components/setting-tile';
 import { SequenceCard } from '../../../components/sequence-card';

src/app/features/common-settings/general/RoomEncryption.tsx

@@ -1,20 +1,5 @@
-import {
+import { Badge, Box, Button, color, config, Dialog, Header, IconButton, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text } from 'folds';
-  Badge,
+import { Icon, Icons } from '../../../components/icons';
-  Box,
-  Button,
-  color,
-  config,
-  Dialog,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Spinner,
-  Text,
-} from 'folds';
 import React, { useCallback, useState } from 'react';
 import { MatrixError } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';

src/app/features/common-settings/general/RoomHistoryVisibility.tsx

@@ -1,17 +1,6 @@
 import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
-import {
+import { Button, color, config, Menu, MenuItem, PopOut, RectCords, Spinner, Text } from 'folds';
-  Button,
+import { Icon, Icons } from '../../../components/icons';
-  color,
-  config,
-  Icon,
-  Icons,
-  Menu,
-  MenuItem,
-  PopOut,
-  RectCords,
-  Spinner,
-  Text,
-} from 'folds';
 import { HistoryVisibility, MatrixError } from 'matrix-js-sdk';
 import { RoomHistoryVisibilityEventContent } from 'matrix-js-sdk/lib/types';
 import FocusTrap from 'focus-trap-react';

src/app/features/common-settings/general/RoomProfile.tsx

@@ -1,16 +1,5 @@
-import {
+import { Avatar, Box, Button, Chip, color, Input, Spinner, Text, TextArea } from 'folds';
-  Avatar,
+import { Icon, Icons } from '../../../components/icons';
-  Box,
-  Button,
-  Chip,
-  color,
-  Icon,
-  Icons,
-  Input,
-  Spinner,
-  Text,
-  TextArea,
-} from 'folds';
 import React, { FormEventHandler, useCallback, useMemo, useState } from 'react';
 import { useAtomValue } from 'jotai';
 import Linkify from 'linkify-react';

src/app/features/common-settings/general/RoomUpgrade.tsx

@@ -1,20 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import {
+import { Button, color, Spinner, Text, Overlay, OverlayBackdrop, OverlayCenter, Dialog, Header, config, Box, IconButton } from 'folds';
-  Button,
+import { Icon, Icons } from '../../../components/icons';
-  color,
-  Spinner,
-  Text,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Dialog,
-  Header,
-  config,
-  Box,
-  IconButton,
-  Icon,
-  Icons,
-} from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { MatrixError, Method } from 'matrix-js-sdk';
 import { RoomTombstoneEventContent } from 'matrix-js-sdk/lib/types';

src/app/features/common-settings/members/Members.tsx

@@ -6,21 +6,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
+import { Box, Chip, config, IconButton, Input, PopOut, RectCords, Scroll, Spinner, Text, toRem } from 'folds';
-  Box,
+import { Icon, Icons } from '../../../components/icons';
-  Chip,
-  config,
-  Icon,
-  IconButton,
-  Icons,
-  Input,
-  PopOut,
-  RectCords,
-  Scroll,
-  Spinner,
-  Text,
-  toRem,
-} from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { RoomMember } from 'matrix-js-sdk';
 import { Page, PageContent, PageHeader } from '../../../components/page';

src/app/features/common-settings/permissions/PermissionGroups.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-array-index-key */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Badge, Box, Button, Chip, config, Icon, Icons, Menu, Spinner, Text } from 'folds';
+import { Badge, Box, Button, Chip, config, Menu, Spinner, Text } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import produce from 'immer';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';

src/app/features/common-settings/permissions/PowersEditor.tsx

@@ -1,23 +1,6 @@
 import React, { FormEventHandler, MouseEventHandler, useCallback, useMemo, useState } from 'react';
-import {
+import { Box, Text, Chip, IconButton, Scroll, Button, Input, RectCords, PopOut, Menu, config, Spinner, toRem, TooltipProvider, Tooltip } from 'folds';
-  Box,
+import { Icon, Icons } from '../../../components/icons';
-  Text,
-  Chip,
-  Icon,
-  Icons,
-  IconButton,
-  Scroll,
-  Button,
-  Input,
-  RectCords,
-  PopOut,
-  Menu,
-  config,
-  Spinner,
-  toRem,
-  TooltipProvider,
-  Tooltip,
-} from 'folds';
 import { HexColorPicker } from 'react-colorful';
 import { useAtomValue } from 'jotai';
 import { Page, PageContent, PageHeader } from '../../../components/page';

src/app/features/create-chat/CreateChat.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, color, config, Icon, Icons, Input, Spinner, Switch, Text } from 'folds';
+import { Box, Button, color, config, Input, Spinner, Switch, Text } from 'folds';
+import { Icon, Icons } from '../../components/icons';
 import React, { FormEventHandler, useCallback, useState } from 'react';
 import { ICreateRoomStateEvent, MatrixError, Preset, Visibility } from 'matrix-js-sdk';
 import { useNavigate } from 'react-router-dom';

src/app/features/create-room/CreateRoom.tsx

@@ -1,19 +1,7 @@
 import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
 import { MatrixError, Room } from 'matrix-js-sdk';
-import {
+import { Box, Button, Chip, color, config, Input, Spinner, Switch, Text, TextArea } from 'folds';
-  Box,
+import { Icon, Icons } from '../../components/icons';
-  Button,
-  Chip,
-  color,
-  config,
-  Icon,
-  Icons,
-  Input,
-  Spinner,
-  Switch,
-  Text,
-  TextArea,
-} from 'folds';
 import { SettingTile } from '../../components/setting-tile';
 import { SequenceCard } from '../../components/sequence-card';
 import {

src/app/features/create-room/CreateRoomModal.tsx

@@ -1,18 +1,6 @@
 import React, { useCallback } from 'react';
-import {
+import { Box, config, Header, IconButton, Modal, Overlay, OverlayBackdrop, OverlayCenter, Scroll, Text } from 'folds';
-  Box,
+import { Icon, Icons } from '../../components/icons';
-  config,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Scroll,
-  Text,
-} from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { useAtomValue } from 'jotai';
 import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';

src/app/features/create-space/CreateSpace.tsx

@@ -1,24 +1,8 @@
 import React, { FormEventHandler, MouseEventHandler, useCallback, useEffect, useState } from 'react';
 import { MatrixError, Room } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
-import {
+import { Box, Button, Chip, color, config, Input, Menu, MenuItem, PopOut, RectCords, Spinner, Switch, Text, TextArea } from 'folds';
-  Box,
+import { Icon, Icons } from '../../components/icons';
-  Button,
-  Chip,
-  color,
-  config,
-  Icon,
-  Icons,
-  Input,
-  Menu,
-  MenuItem,
-  PopOut,
-  RectCords,
-  Spinner,
-  Switch,
-  Text,
-  TextArea,
-} from 'folds';
 import { SettingTile } from '../../components/setting-tile';
 import { SequenceCard } from '../../components/sequence-card';
 import {

src/app/features/create-space/CreateSpaceModal.tsx

@@ -1,18 +1,6 @@
 import React from 'react';
-import {
+import { Box, config, Header, IconButton, Modal, Overlay, OverlayBackdrop, OverlayCenter, Scroll, Text } from 'folds';
-  Box,
+import { Icon, Icons } from '../../components/icons';
-  config,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Scroll,
-  Text,
-} from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
 import { SpaceProvider } from '../../hooks/useSpace';