Icons

2025-12-05 19:45:36 -05:00 · 2025-05-18 16:09:24 +02:00
parent 07384e30cc
commit 4b70cec6e9
62 changed files with 3597 additions and 211 deletions
--- a/docs/adding-icons.md
+++ b/docs/adding-icons.md
@@ -0,0 +1,128 @@
+# Adding New Icons to Creamlinux
+
+This guide explains how to add new icons to the Creamlinux project.
+
+## Prerequisites
+
+- Basic knowledge of SVG files
+- Node.js and npm installed
+- Creamlinux project set up
+
+## Step 1: Find or Create SVG Icons
+
+You can:
+
+- Create your own SVG icons using tools like Figma, Sketch, or Illustrator
+- Download icons from libraries like Heroicons, Material Icons, or Feather Icons
+- Use existing SVG files
+
+Ideally, icons should:
+
+- Be 24x24px or have a viewBox of "0 0 24 24"
+- Have a consistent style with existing icons
+- Use stroke-width of 2 for outline variants
+- Use solid fills for bold variants
+
+## Step 2: Optimize SVG Files
+
+We have a script to optimize SVG files for the icon system:
+
+```bash
+# Install dependencies
+npm install
+
+# Optimize a single SVG
+npm run optimize-svg path/to/icon.svg
+
+# Optimize all SVGs in a directory
+npm run optimize-svg src/components/icons/ui/outline
+```
+
+The optimizer will:
+
+- Remove unnecessary attributes
+- Set the viewBox to "0 0 24 24"
+- Add currentColor for fills/strokes for proper color inheritance
+- Remove width and height attributes for flexible sizing
+
+## Step 3: Add SVG Files to the Project
+
+1. Decide if your icon is a "bold" (filled) or "outline" (stroked) variant
+2. Place the file in the appropriate directory:
+   - For outline variants: `src/components/icons/ui/outline/`
+   - For bold variants: `src/components/icons/ui/bold/`
+3. Use a descriptive name like `download.svg` or `settings.svg`
+
+## Step 4: Export the Icons
+
+1. Open the index.ts file in the respective directory:
+
+   - `src/components/icons/ui/outline/index.ts` for outline variants
+   - `src/components/icons/ui/bold/index.ts` for bold variants
+
+2. Add an export statement for your new icon:
+
+```typescript
+// For outline variant
+export { ReactComponent as NewIconOutlineIcon } from './new-icon.svg'
+
+// For bold variant
+export { ReactComponent as NewIconBoldIcon } from './new-icon.svg'
+```
+
+Use a consistent naming pattern:
+
+- CamelCase
+- Descriptive name
+- Suffix with BoldIcon or OutlineIcon based on variant
+
+## Step 5: Use the Icon in Your Components
+
+Now you can use your new icon in any component:
+
+```tsx
+import { Icon } from '@/components/icons'
+import { NewIconOutlineIcon, NewIconBoldIcon } from '@/components/icons'
+
+// In your component:
+<Icon icon={NewIconOutlineIcon} size="md" />
+<Icon icon={NewIconBoldIcon} size="lg" fillColor="var(--primary-color)" />
+```
+
+## Best Practices
+
+1. **Create both variants**: When possible, create both bold and outline variants for consistency.
+
+2. **Use semantic names**: Name icons based on their meaning, not appearance (e.g., "success" instead of "checkmark").
+
+3. **Be consistent**: Follow the existing icon style for visual harmony.
+
+4. **Test different sizes**: Ensure icons look good at all standard sizes: xs, sm, md, lg, xl.
+
+5. **Optimize manually if needed**: Sometimes automatic optimization may not work perfectly. You might need to manually edit SVG files.
+
+6. **Add accessibility**: When using icons, provide proper accessibility:
+
+```tsx
+<Icon icon={InfoOutlineIcon} title="Additional information" size="md" />
+```
+
+## Troubleshooting
+
+**Problem**: Icon doesn't change color with CSS
+**Solution**: Make sure your SVG uses `currentColor` for fill or stroke
+
+**Problem**: Icon looks pixelated
+**Solution**: Ensure your SVG has a proper viewBox attribute
+
+**Problem**: Icon sizing is inconsistent
+**Solution**: Use the standard size props (xs, sm, md, lg, xl) instead of custom sizes
+
+**Problem**: SVG has complex gradients or effects that don't render correctly
+**Solution**: Simplify the SVG design; complex effects aren't ideal for UI icons
+
+## Additional Resources
+
+- [SVGR documentation](https://react-svgr.com/docs/what-is-svgr/)
+- [SVGO documentation](https://github.com/svg/svgo)
+- [SVG MDN documentation](https://developer.mozilla.org/en-US/docs/Web/SVG)
--- a/docs/icons.md
+++ b/docs/icons.md
@@ -0,0 +1,160 @@
+# Icon Usage Methods
+
+There are two ways to use icons in Creamlinux, both fully supported and completely interchangeable.
+
+## Method 1: Using Icon component with name prop
+
+This approach uses the `Icon` component with a `name` prop:
+
+```tsx
+import { Icon, refresh, check, info, steam } from '@/components/icons'
+
+<Icon name={refresh} />
+<Icon name={check} variant="bold" />
+<Icon name={info} size="lg" fillColor="var(--info)" />
+<Icon name={steam} /> {/* Brand icons auto-detect the variant */}
+```
+
+## Method 2: Using direct icon components
+
+This approach imports pre-configured icon components directly:
+
+```tsx
+import { RefreshIcon, CheckBoldIcon, InfoIcon, SteamIcon } from '@/components/icons'
+
+<RefreshIcon />               {/* Outline variant */}
+<CheckBoldIcon />             {/* Bold variant */}
+<InfoIcon size="lg" fillColor="var(--info)" />
+<SteamIcon />                 {/* Brand icon */}
+```
+
+## When to use each method
+
+### Use Method 1 (Icon + name) when:
+
+- You have dynamic icon selection based on data or state
+- You want to keep your imports list shorter
+- You're working with icons in loops or maps
+- You want to change variants dynamically
+
+Example of dynamic icon selection:
+
+```tsx
+import { Icon } from '@/components/icons'
+
+function StatusIndicator({ status }) {
+  const iconName =
+    status === 'success'
+      ? 'Check'
+      : status === 'warning'
+      ? 'Warning'
+      : status === 'error'
+      ? 'Close'
+      : 'Info'
+
+  return <Icon name={iconName} variant="bold" />
+}
+```
+
+### Use Method 2 (direct components) when:
+
+- You want the most concise syntax
+- You're using a fixed set of icons that won't change
+- You want specific variants (like InfoBoldIcon vs InfoIcon)
+- You prefer more explicit component names in your JSX
+
+Example of fixed icon usage:
+
+```tsx
+import { InfoIcon, CloseIcon } from '@/components/icons'
+
+function ModalHeader({ title, onClose }) {
+  return (
+    <div className="modal-header">
+      <div className="title">
+        <InfoIcon size="sm" />
+        <h3>{title}</h3>
+      </div>
+      <button onClick={onClose}>
+        <CloseIcon size="md" />
+      </button>
+    </div>
+  )
+}
+```
+
+## Available Icon Component Exports
+
+### UI Icons (Outline variant by default)
+
+```tsx
+import {
+  ArrowUpIcon,
+  CheckIcon,
+  CloseIcon,
+  ControllerIcon,
+  CopyIcon,
+  DownloadIcon,
+  EditIcon,
+  InfoIcon,
+  LayersIcon,
+  RefreshIcon,
+  SearchIcon,
+  TrashIcon,
+  WarningIcon,
+  WineIcon,
+} from '@/components/icons'
+```
+
+### Bold Variants
+
+```tsx
+import { CheckBoldIcon, InfoBoldIcon, WarningBoldIcon } from '@/components/icons'
+```
+
+### Brand Icons
+
+```tsx
+import { DiscordIcon, GitHubIcon, LinuxIcon, SteamIcon, WindowsIcon } from '@/components/icons'
+```
+
+## Combining Methods
+
+Both methods work perfectly together and can be mixed in the same component:
+
+```tsx
+import {
+  Icon,
+  refresh, // Method 1
+  CheckBoldIcon, // Method 2
+} from '@/components/icons'
+
+function MyComponent() {
+  return (
+    <div>
+      <Icon name={refresh} />
+      <CheckBoldIcon />
+    </div>
+  )
+}
+```
+
+## Props are Identical
+
+Both methods accept the same props:
+
+```tsx
+// These are equivalent:
+<InfoIcon size="lg" fillColor="blue" className="my-icon" />
+<Icon name={info} size="lg" fillColor="blue" className="my-icon" />
+```
+
+Available props in both cases:
+
+- `size`: "xs" | "sm" | "md" | "lg" | "xl" | number
+- `variant`: "outline" | "bold" | "brand" (only for Icon + name method)
+- `fillColor`: CSS color string
+- `strokeColor`: CSS color string
+- `className`: CSS class string
+- `title`: Accessibility title
+- ...plus all standard SVG attributes
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
-    "tauri": "tauri"
+    "tauri": "tauri",
+    "optimize-svg": "node scripts/optimize-svg.js"
  },
  "dependencies": {
    "@tauri-apps/api": "^2.5.0",
@@ -19,6 +20,8 @@
  },
  "devDependencies": {
    "@eslint/js": "^9.22.0",
+    "@svgr/core": "^8.1.0",
+    "@svgr/webpack": "^8.1.0",
    "@tauri-apps/cli": "^2.5.0",
    "@types/node": "^20.10.0",
    "@types/react": "^19.0.10",
@@ -31,6 +34,7 @@
    "sass-embedded": "^1.86.3",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.26.1",
-    "vite": "^6.3.1"
+    "vite": "^6.3.1",
+    "vite-plugin-svgr": "^4.3.0"
  }
 }
--- a/scripts/optimize-svg.js
+++ b/scripts/optimize-svg.js
@@ -0,0 +1,131 @@
+#!/usr/bin/env node
+
+/**
+ * SVG Optimizer for Creamlinux
+ *
+ * This script optimizes SVG files for use in the icon system.
+ * Run it with `node optimize-svg.js path/to/svg`
+ */
+
+import fs from 'fs'
+import path from 'path'
+import optimize from 'svgo'
+
+// Check if a file path is provided
+if (process.argv.length < 3) {
+  console.error('Please provide a path to an SVG file or directory')
+  process.exit(1)
+}
+
+const inputPath = process.argv[2]
+
+// SVGO configuration
+const svgoConfig = {
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          // Keep viewBox attribute
+          removeViewBox: false,
+          // Don't remove IDs
+          cleanupIDs: false,
+          // Don't minify colors
+          convertColors: false,
+        },
+      },
+    },
+    // Add currentColor for path fill if not specified
+    {
+      name: 'addAttributesToSVGElement',
+      params: {
+        attributes: [
+          {
+            fill: 'currentColor',
+          },
+        ],
+      },
+    },
+    // Remove width and height
+    {
+      name: 'removeAttrs',
+      params: {
+        attrs: ['width', 'height'],
+      },
+    },
+    // Make sure viewBox is 0 0 24 24 for consistent sizing
+    {
+      name: 'addAttributesToSVGElement',
+      params: {
+        attributes: [
+          {
+            viewBox: '0 0 24 24',
+          },
+        ],
+      },
+    },
+  ],
+}
+
+// Function to optimize a single SVG file
+function optimizeSVG(filePath) {
+  try {
+    const svg = fs.readFileSync(filePath, 'utf8')
+    const result = optimize(svg, svgoConfig)
+
+    // Write the optimized SVG back to the file
+    fs.writeFileSync(filePath, result.data)
+    console.log(`✅ Optimized: ${filePath}`)
+
+    return true
+  } catch (error) {
+    console.error(`❌ Error optimizing ${filePath}:`, error)
+    return false
+  }
+}
+
+// Function to process a directory of SVG files
+function processDirectory(dirPath) {
+  try {
+    const files = fs.readdirSync(dirPath)
+    let optimizedCount = 0
+
+    for (const file of files) {
+      const filePath = path.join(dirPath, file)
+      const stat = fs.statSync(filePath)
+
+      if (stat.isDirectory()) {
+        // Recursively process subdirectories
+        optimizedCount += processDirectory(filePath)
+      } else if (path.extname(file).toLowerCase() === '.svg') {
+        // Process SVG files
+        if (optimizeSVG(filePath)) {
+          optimizedCount++
+        }
+      }
+    }
+
+    return optimizedCount
+  } catch (error) {
+    console.error(`Error processing directory ${dirPath}:`, error)
+    return 0
+  }
+}
+
+// Main execution
+try {
+  const stat = fs.statSync(inputPath)
+
+  if (stat.isDirectory()) {
+    const count = processDirectory(inputPath)
+    console.log(`\nOptimized ${count} SVG files in ${inputPath}`)
+  } else if (path.extname(inputPath).toLowerCase() === '.svg') {
+    optimizeSVG(inputPath)
+  } else {
+    console.error('The provided path is not an SVG file or directory')
+    process.exit(1)
+  }
+} catch (error) {
+  console.error('Error:', error)
+  process.exit(1)
+}
--- a/src/components/buttons/ActionButton.tsx
+++ b/src/components/buttons/ActionButton.tsx
@@ -1,5 +1,6 @@
 import { FC } from 'react'
 import Button, { ButtonVariant } from '../buttons/Button'
+import { Icon, layers, download } from '@/components/icons'

 // Define available action types
 export type ActionType = 'install_cream' | 'uninstall_cream' | 'install_smoke' | 'uninstall_smoke'
@@ -42,6 +43,21 @@ const ActionButton: FC<ActionButtonProps> = ({
    return 'success'
  }

+  // Select appropriate icon based on action type and state
+  const getIconInfo = () => {
+    const isCream = action.includes('cream')
+    
+    if (isInstalled) {
+      // Uninstall actions
+      return { name: layers, variant: 'bold' }
+    } else {
+      // Install actions
+      return { name: download, variant: isCream ? 'bold' : 'outline' }
+    }
+  }
+
+  const iconInfo = getIconInfo()
+
  return (
    <Button
      variant={getButtonVariant()}
@@ -50,6 +66,13 @@ const ActionButton: FC<ActionButtonProps> = ({
      disabled={disabled || isWorking}
      fullWidth
      className={`action-button ${className}`}
+      leftIcon={isWorking ? undefined : (
+        <Icon
+          name={iconInfo.name}
+          variant={iconInfo.variant}
+          size="md"
+        />
+      )}
    >
      {getButtonText()}
    </Button>
--- a/src/components/buttons/AnimatedCheckbox.tsx
+++ b/src/components/buttons/AnimatedCheckbox.tsx
@@ -1,3 +1,5 @@
+import { Icon, check } from '@/components/icons'
+
 interface AnimatedCheckboxProps {
  checked: boolean;
  onChange: () => void;
@@ -26,17 +28,14 @@ const AnimatedCheckbox = ({
      />
      
      <span className={`checkbox-custom ${checked ? 'checked' : ''}`}>
-        <svg viewBox="0 0 24 24" className="checkmark-icon" aria-hidden="true">
-          <path
-            className={`checkmark ${checked ? 'checked' : ''}`}
-            d="M5 12l5 5L20 7"
-            stroke="#fff"
-            strokeWidth="2.5"
-            fill="none"
-            strokeLinecap="round"
-            strokeLinejoin="round"
+        {checked && (
+          <Icon
+            name={check}
+            variant="bold"
+            size="sm"
+            className="checkbox-icon"
          />
-        </svg>
+        )}
      </span>
      
      {(label || sublabel) && (
--- a/src/components/icons/Icon.tsx
+++ b/src/components/icons/Icon.tsx
@@ -0,0 +1,155 @@
+/**
+ * Icon component for displaying SVG icons with standardized properties
+ */
+import React from 'react'
+
+// Import all icon variants
+import * as OutlineIcons from './ui/outline'
+import * as BoldIcons from './ui/bold'
+import * as BrandIcons from './brands'
+
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number
+export type IconVariant = 'bold' | 'outline' | 'brand' | undefined
+export type IconName = keyof typeof OutlineIcons | keyof typeof BoldIcons | keyof typeof BrandIcons
+
+// Sets of icon names by type for determining default variants
+const BRAND_ICON_NAMES = new Set(Object.keys(BrandIcons))
+const OUTLINE_ICON_NAMES = new Set(Object.keys(OutlineIcons))
+const BOLD_ICON_NAMES = new Set(Object.keys(BoldIcons))
+
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  /** Name of the icon to render */
+  name: IconName | string
+  /** Size of the icon */
+  size?: IconSize
+  /** Icon variant - bold, outline, or brand */
+  variant?: IconVariant | string
+  /** Title for accessibility */
+  title?: string
+  /** Fill color (if not specified by the SVG itself) */
+  fillColor?: string
+  /** Stroke color (if not specified by the SVG itself) */
+  strokeColor?: string
+  /** Additional CSS class names */
+  className?: string
+}
+
+/**
+ * Convert size string to pixel value
+ */
+const getSizeValue = (size: IconSize): string => {
+  if (typeof size === 'number') return `${size}px`
+
+  const sizeMap: Record<string, string> = {
+    xs: '12px',
+    sm: '16px',
+    md: '24px',
+    lg: '32px',
+    xl: '48px'
+  }
+
+  return sizeMap[size] || sizeMap.md
+}
+
+/**
+ * Gets the icon component based on name and variant
+ */
+const getIconComponent = (name: string, variant: IconVariant | string): React.ComponentType<React.SVGProps<SVGSVGElement>> | null => {
+  // Normalize variant to ensure it's a valid IconVariant
+  const normalizedVariant = (variant === 'bold' || variant === 'outline' || variant === 'brand') 
+    ? variant as IconVariant 
+    : undefined;
+
+  // Try to get the icon from the specified variant
+  switch (normalizedVariant) {
+    case 'outline':
+      return OutlineIcons[name as keyof typeof OutlineIcons] || null
+    case 'bold':
+      return BoldIcons[name as keyof typeof BoldIcons] || null
+    case 'brand':
+      return BrandIcons[name as keyof typeof BrandIcons] || null
+    default:
+      // If no variant specified, determine best default
+      if (BRAND_ICON_NAMES.has(name)) {
+        return BrandIcons[name as keyof typeof BrandIcons] || null
+      } else if (OUTLINE_ICON_NAMES.has(name)) {
+        return OutlineIcons[name as keyof typeof OutlineIcons] || null
+      } else if (BOLD_ICON_NAMES.has(name)) {
+        return BoldIcons[name as keyof typeof BoldIcons] || null
+      }
+      return null
+  }
+}
+
+/**
+ * Icon component
+ * Renders SVG icons with consistent sizing and styling
+ */
+const Icon: React.FC<IconProps> = ({
+  name,
+  size = 'md',
+  variant,
+  title,
+  fillColor,
+  strokeColor,
+  className = '',
+  ...rest
+}) => {
+  // Determine default variant based on icon type if no variant provided
+  let defaultVariant: IconVariant | string = variant
+  
+  if (defaultVariant === undefined) {
+    if (BRAND_ICON_NAMES.has(name)) {
+      defaultVariant = 'brand'
+    } else {
+      defaultVariant = 'bold' // Default to outline for non-brand icons
+    }
+  }
+  
+  // Get the icon component based on name and variant
+  let finalIconComponent = getIconComponent(name, defaultVariant)
+  let finalVariant = defaultVariant
+  
+  // Try fallbacks if the icon doesn't exist in the requested variant
+  if (!finalIconComponent && defaultVariant !== 'outline') {
+    finalIconComponent = getIconComponent(name, 'outline')
+    finalVariant = 'outline'
+  }
+  
+  if (!finalIconComponent && defaultVariant !== 'bold') {
+    finalIconComponent = getIconComponent(name, 'bold')
+    finalVariant = 'bold'
+  }
+
+  if (!finalIconComponent && defaultVariant !== 'brand') {
+    finalIconComponent = getIconComponent(name, 'brand')
+    finalVariant = 'brand'
+  }
+  
+  // If still no icon found, return null
+  if (!finalIconComponent) {
+    console.warn(`Icon not found: ${name} (${defaultVariant})`)
+    return null
+  }
+
+  const sizeValue = getSizeValue(size)
+  const combinedClassName = `icon icon-${size} icon-${finalVariant} ${className}`.trim()
+  
+  const IconComponentToRender = finalIconComponent
+
+  return (
+    <IconComponentToRender
+      className={combinedClassName}
+      width={sizeValue}
+      height={sizeValue}
+      fill={fillColor || 'currentColor'} 
+      stroke={strokeColor || 'currentColor'}
+      role="img"
+      aria-hidden={!title}
+      aria-label={title}
+      {...rest}
+    />
+  )
+}
+
+export default Icon
--- a/src/components/icons/IconFactory.ts
+++ b/src/components/icons/IconFactory.ts
@@ -0,0 +1,24 @@
+// BROKEN
+
+//import React from 'react'
+//import Icon from './Icon'
+//import type { IconProps, IconVariant } from './Icon'
+//
+//export const createIconComponent = (
+//  name: string,
+//  defaultVariant: IconVariant = 'outline'
+//): React.FC<Omit<IconProps, 'name'>> => {
+//  const IconComponent: React.FC<Omit<IconProps, 'name'>> = (props) => {
+//    return (
+//      <Icon
+//        name={name}
+//        variant={(props as any).variant ?? defaultVariant}
+//        {...props}
+//      />
+//    )
+//  }
+//
+//  IconComponent.displayName = `${name}Icon`
+//  return IconComponent
+//}
+//
--- a/src/components/icons/brands/discord.svg
+++ b/src/components/icons/brands/discord.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.1.1 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.1 16.1 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02M8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12m6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12"/></svg>
--- a/src/components/icons/brands/github.svg
+++ b/src/components/icons/brands/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
--- a/src/components/icons/brands/index.ts
+++ b/src/components/icons/brands/index.ts
@@ -0,0 +1,6 @@
+// Bold variant icons
+export { ReactComponent as Linux } from './linux.svg'
+export { ReactComponent as steam } from './steam.svg'
+export { ReactComponent as windows } from './windows.svg'
+export { ReactComponent as github } from './github.svg'
+export { ReactComponent as discord } from './discord.svg'
--- a/src/components/icons/brands/linux.svg
+++ b/src/components/icons/brands/linux.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19.7 17.6c-.1-.2-.2-.4-.2-.6c0-.4-.2-.7-.5-1c-.1-.1-.3-.2-.4-.2c.6-1.8-.3-3.6-1.3-4.9c-.8-1.2-2-2.1-1.9-3.7c0-1.9.2-5.4-3.3-5.1c-3.6.2-2.6 3.9-2.7 5.2c0 1.1-.5 2.2-1.3 3.1c-.2.2-.4.5-.5.7c-1 1.2-1.5 2.8-1.5 4.3c-.2.2-.4.4-.5.6c-.1.1-.2.2-.2.3c-.1.1-.3.2-.5.3c-.4.1-.7.3-.9.7c-.1.3-.2.7-.1 1.1c.1.2.1.4 0 .7c-.2.4-.2.9 0 1.4c.3.4.8.5 1.5.6c.5 0 1.1.2 1.6.4c.5.3 1.1.5 1.7.5c.3 0 .7-.1 1-.2c.3-.2.5-.4.6-.7c.4 0 1-.2 1.7-.2c.6 0 1.2.2 2 .1c0 .1 0 .2.1.3c.2.5.7.9 1.3 1h.2c.8-.1 1.6-.5 2.1-1.1c.4-.4.9-.7 1.4-.9c.6-.3 1-.5 1.1-1c.1-.7-.1-1.1-.5-1.7M12.8 4.8c.6.1 1.1.6 1 1.2q0 .45-.3.9h-.1c-.2-.1-.3-.1-.4-.2c.1-.1.1-.3.2-.5c0-.4-.2-.7-.4-.7c-.3 0-.5.3-.5.7v.1c-.1-.1-.3-.1-.4-.2V6c-.1-.5.3-1.1.9-1.2m-.3 2c.1.1.3.2.4.2s.3.1.4.2c.2.1.4.2.4.5s-.3.6-.9.8c-.2.1-.3.1-.4.2c-.3.2-.6.3-1 .3c-.3 0-.6-.2-.8-.4c-.1-.1-.2-.2-.4-.3c-.1-.1-.3-.3-.4-.6c0-.1.1-.2.2-.3c.3-.2.4-.3.5-.4l.1-.1c.2-.3.6-.5 1-.5c.3.1.6.2.9.4M10.4 5c.4 0 .7.4.8 1.1v.2c-.1 0-.3.1-.4.2v-.2c0-.3-.2-.6-.4-.5c-.2 0-.3.3-.3.6c0 .2.1.3.2.4c0 0-.1.1-.2.1c-.2-.2-.4-.5-.4-.8c0-.6.3-1.1.7-1.1m-1 16.1c-.7.3-1.6.2-2.2-.2c-.6-.3-1.1-.4-1.8-.4c-.5-.1-1-.1-1.1-.3s-.1-.5.1-1q.15-.45 0-.9c-.1-.3-.1-.5 0-.8s.3-.4.6-.5s.5-.2.7-.4c.1-.1.2-.2.3-.4c.3-.4.5-.6.8-.6c.6.1 1.1 1 1.5 1.9c.2.3.4.7.7 1c.4.5.9 1.2.9 1.6c0 .5-.2.8-.5 1m4.9-2.2c0 .1 0 .1-.1.2c-1.2.9-2.8 1-4.1.3l-.6-.9c.9-.1.7-1.3-1.2-2.5c-2-1.3-.6-3.7.1-4.8c.1-.1.1 0-.3.8c-.3.6-.9 2.1-.1 3.2c0-.8.2-1.6.5-2.4c.7-1.3 1.2-2.8 1.5-4.3c.1.1.1.1.2.1c.1.1.2.2.3.2c.2.3.6.4.9.4h.1c.4 0 .8-.1 1.1-.4c.1-.1.2-.2.4-.2q.45-.15.9-.6c.4 1.3.8 2.5 1.4 3.6c.4.8.7 1.6.9 2.5c.3 0 .7.1 1 .3c.8.4 1.1.7 1 1.2H18c0-.3-.2-.6-.9-.9s-1.3-.3-1.5.4c-.1 0-.2.1-.3.1c-.8.4-.8 1.5-.9 2.6c.1.4 0 .7-.1 1.1m4.6.6c-.6.2-1.1.6-1.5 1.1c-.4.6-1.1 1-1.9.9c-.4 0-.8-.3-.9-.7c-.1-.6-.1-1.2.2-1.8c.1-.4.2-.7.3-1.1c.1-1.2.1-1.9.6-2.2c0 .5.3.8.7 1c.5 0 1-.1 1.4-.5h.2c.3 0 .5 0 .7.2s.3.5.3.7c0 .3.2.6.3.9c.5.5.5.8.5.9c-.1.2-.5.4-.9.6m-9-12c-.1 0-.1 0-.1.1c0 0 0 .1.1.1s.1.1.1.1c.3.4.8.6 1.4.7c.5-.1 1-.2 1.5-.6l.6-.3c.1 0 .1-.1.1-.1c0-.1 0-.1-.1-.1c-.2.1-.5.2-.7.3c-.4.3-.9.5-1.4.5s-.9-.3-1.2-.6c-.1 0-.2-.1-.3-.1"/></svg>
--- a/src/components/icons/brands/steam.svg
+++ b/src/components/icons/brands/steam.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10c-4.6 0-8.45-3.08-9.64-7.27l3.83 1.58a2.84 2.84 0 0 0 2.78 2.27c1.56 0 2.83-1.27 2.83-2.83v-.13l3.4-2.43h.08c2.08 0 3.77-1.69 3.77-3.77s-1.69-3.77-3.77-3.77s-3.78 1.69-3.78 3.77v.05l-2.37 3.46l-.16-.01c-.59 0-1.14.18-1.59.49L2 11.2C2.43 6.05 6.73 2 12 2M8.28 17.17c.8.33 1.72-.04 2.05-.84s-.05-1.71-.83-2.04l-1.28-.53c.49-.18 1.04-.19 1.56.03c.53.21.94.62 1.15 1.15c.22.52.22 1.1 0 1.62c-.43 1.08-1.7 1.6-2.78 1.15c-.5-.21-.88-.59-1.09-1.04zm9.52-7.75c0 1.39-1.13 2.52-2.52 2.52a2.52 2.52 0 0 1-2.51-2.52a2.5 2.5 0 0 1 2.51-2.51a2.52 2.52 0 0 1 2.52 2.51m-4.4 0c0 1.04.84 1.89 1.89 1.89c1.04 0 1.88-.85 1.88-1.89s-.84-1.89-1.88-1.89c-1.05 0-1.89.85-1.89 1.89"/></svg>
--- a/src/components/icons/brands/windows.svg
+++ b/src/components/icons/brands/windows.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m3.001 5.479l7.377-1.016v7.127H3zm0 13.042l7.377 1.017v-7.04H3zm8.188 1.125L21.001 21v-8.502h-9.812zm0-15.292v7.236h9.812V3z"/></svg>
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -0,0 +1,96 @@
+// import { createIconComponent } from './IconFactory' <-- Broken atm
+export { default as Icon } from './Icon'
+export type { IconProps, IconSize, IconVariant, IconName } from './Icon'
+
+// Re-export all icons by category for convenience
+import * as OutlineIcons from './ui/outline'
+import * as BoldIcons from './ui/bold'
+import * as BrandIcons from './brands'
+
+export { OutlineIcons, BoldIcons, BrandIcons }
+
+// Export individual icon names as constants
+// UI icons
+export const arrowUp = 'ArrowUp'
+export const check = 'Check'
+export const close = 'Close'
+export const controller = 'Controller'
+export const copy = 'Copy'
+export const download = 'Download'
+export const download1 = 'Download1'
+export const edit = 'Edit'
+export const error = 'Error'
+export const info = 'Info'
+export const layers = 'Layers'
+export const refresh = 'Refresh'
+export const search = 'Search'
+export const trash = 'Trash'
+export const warning = 'Warning'
+export const wine = 'Wine'
+
+// Brand icons
+export const discord = 'Discord'
+export const github = 'GitHub'
+export const linux = 'Linux'
+export const steam = 'Steam'
+export const windows = 'Windows'
+
+// Keep the IconNames object for backward compatibility and autocompletion
+export const IconNames = {
+  // UI icons
+  ArrowUp: arrowUp,
+  Check: check,
+  Close: close,
+  Controller: controller,
+  Copy: copy,
+  Download: download,
+  Download1: download1,
+  Edit: edit,
+  Error: error,
+  Info: info,
+  Layers: layers,
+  Refresh: refresh,
+  Search: search,
+  Trash: trash,
+  Warning: warning,
+  Wine: wine,
+  
+  // Brand icons
+  Discord: discord,
+  GitHub: github,
+  Linux: linux,
+  Steam: steam,
+  Windows: windows,
+} as const
+
+// Export direct icon components using createIconComponent from IconFactory
+// UI icons (outline variant by default)
+//export const ArrowUpIcon = createIconComponent(arrowUp, 'outline')
+//export const CheckIcon = createIconComponent(check, 'outline')
+//export const CloseIcon = createIconComponent(close, 'outline')
+//export const ControllerIcon = createIconComponent(controller, 'outline')
+//export const CopyIcon = createIconComponent(copy, 'outline')
+//export const DownloadIcon = createIconComponent(download, 'outline')
+//export const Download1Icon = createIconComponent(download1, 'outline')
+//export const EditIcon = createIconComponent(edit, 'outline')
+//export const ErrorIcon = createIconComponent(error, 'outline')
+//export const InfoIcon = createIconComponent(info, 'outline')
+//export const LayersIcon = createIconComponent(layers, 'outline')
+//export const RefreshIcon = createIconComponent(refresh, 'outline')
+//export const SearchIcon = createIconComponent(search, 'outline')
+//export const TrashIcon = createIconComponent(trash, 'outline')
+//export const WarningIcon = createIconComponent(warning, 'outline')
+//export const WineIcon = createIconComponent(wine, 'outline')
+
+// Brand icons
+//export const DiscordIcon = createIconComponent(discord, 'brand')
+//export const GitHubIcon = createIconComponent(github, 'brand')
+//export const LinuxIcon = createIconComponent(linux, 'brand')
+//export const SteamIcon = createIconComponent(steam, 'brand')
+//export const WindowsIcon = createIconComponent(windows, 'brand')
+
+// Bold variants for common icons
+//export const CheckBoldIcon = createIconComponent(check, 'bold')
+//export const InfoBoldIcon = createIconComponent(info, 'bold')
+//export const WarningBoldIcon = createIconComponent(warning, 'bold')
+//export const ErrorBoldIcon = createIconComponent(error, 'bold')
--- a/src/components/icons/ui/bold/arrow-up.svg
+++ b/src/components/icons/ui/bold/arrow-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v14m6-8l-6-6m-6 6l6-6"/></svg>
--- a/src/components/icons/ui/bold/check.svg
+++ b/src/components/icons/ui/bold/check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"/></svg>
--- a/src/components/icons/ui/bold/close.svg
+++ b/src/components/icons/ui/bold/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"/></svg>
--- a/src/components/icons/ui/bold/controller.svg
+++ b/src/components/icons/ui/bold/controller.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4.725 20q-1.5 0-2.562-1.075t-1.113-2.6q0-.225.025-.45t.075-.45l2.1-8.4q.35-1.35 1.425-2.187T7.125 4h9.75q1.375 0 2.45.838t1.425 2.187l2.1 8.4q.05.225.088.463t.037.462q0 1.525-1.088 2.588T19.276 20q-1.05 0-1.95-.55t-1.35-1.5l-.7-1.45q-.125-.25-.375-.375T14.375 16h-4.75q-.275 0-.525.125t-.375.375l-.7 1.45q-.45.95-1.35 1.5t-1.95.55m8.775-9q.425 0 .713-.288T14.5 10t-.288-.712T13.5 9t-.712.288T12.5 10t.288.713t.712.287m2-2q.425 0 .713-.288T16.5 8t-.288-.712T15.5 7t-.712.288T14.5 8t.288.713T15.5 9m0 4q.425 0 .713-.288T16.5 12t-.288-.712T15.5 11t-.712.288T14.5 12t.288.713t.712.287m2-2q.425 0 .713-.288T18.5 10t-.288-.712T17.5 9t-.712.288T16.5 10t.288.713t.712.287m-9 1.5q.325 0 .538-.213t.212-.537v-1h1q.325 0 .538-.213T11 10t-.213-.537t-.537-.213h-1v-1q0-.325-.213-.537T8.5 7.5t-.537.213t-.213.537v1h-1q-.325 0-.537.213T6 10t.213.538t.537.212h1v1q0 .325.213.538t.537.212"/></svg>
--- a/src/components/icons/ui/bold/copy.svg
+++ b/src/components/icons/ui/bold/copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M15.24 2h-3.894c-1.764 0-3.162 0-4.255.148c-1.126.152-2.037.472-2.755 1.193c-.719.721-1.038 1.636-1.189 2.766C3 7.205 3 8.608 3 10.379v5.838c0 1.508.92 2.8 2.227 3.342c-.067-.91-.067-2.185-.067-3.247v-5.01c0-1.281 0-2.386.118-3.27c.127-.948.413-1.856 1.147-2.593s1.639-1.024 2.583-1.152c.88-.118 1.98-.118 3.257-.118h3.07c1.276 0 2.374 0 3.255.118A3.6 3.6 0 0 0 15.24 2"/><path fill="currentColor" d="M6.6 11.397c0-2.726 0-4.089.844-4.936c.843-.847 2.2-.847 4.916-.847h2.88c2.715 0 4.073 0 4.917.847S21 8.671 21 11.397v4.82c0 2.726 0 4.089-.843 4.936c-.844.847-2.202.847-4.917.847h-2.88c-2.715 0-4.073 0-4.916-.847c-.844-.847-.844-2.21-.844-4.936z"/></svg>
--- a/src/components/icons/ui/bold/download.svg
+++ b/src/components/icons/ui/bold/download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21.086 8.804v2.21a.75.75 0 1 1-1.5 0v-2.21a2 2 0 0 0-.13-.76l-7.3 4.38v8.19q.172-.051.33-.14l2.53-1.4a.75.75 0 0 1 1 .29a.75.75 0 0 1-.3 1l-2.52 1.4a3.72 3.72 0 0 1-3.62 0l-6-3.3a3.79 3.79 0 0 1-1.92-3.27v-6.39c0-.669.18-1.325.52-1.9q.086-.155.2-.29l.12-.15a3.45 3.45 0 0 1 1.08-.93l6-3.31a3.81 3.81 0 0 1 3.62 0l6 3.31c.42.231.788.548 1.08.93a1 1 0 0 1 .12.15q.113.135.2.29a3.64 3.64 0 0 1 .49 1.9"/><path fill="currentColor" d="m22.196 17.624l-2 2a1.2 1.2 0 0 1-.39.26a1.1 1.1 0 0 1-.46.1q-.239 0-.46-.09a1.3 1.3 0 0 1-.4-.27l-2-2a.74.74 0 0 1 0-1.06a.75.75 0 0 1 1.06 0l1 1v-3.36a.75.75 0 0 1 1.5 0v3.38l1-1a.75.75 0 0 1 1.079-.02a.75.75 0 0 1-.02 1.08z"/></svg>
--- a/src/components/icons/ui/bold/download1.svg
+++ b/src/components/icons/ui/bold/download1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 15.575q-.2 0-.375-.062T11.3 15.3l-3.6-3.6q-.3-.3-.288-.7t.288-.7q.3-.3.713-.312t.712.287L11 12.15V5q0-.425.288-.712T12 4t.713.288T13 5v7.15l1.875-1.875q.3-.3.713-.288t.712.313q.275.3.288.7t-.288.7l-3.6 3.6q-.15.15-.325.213t-.375.062M6 20q-.825 0-1.412-.587T4 18v-2q0-.425.288-.712T5 15t.713.288T6 16v2h12v-2q0-.425.288-.712T19 15t.713.288T20 16v2q0 .825-.587 1.413T18 20z"/></svg>
--- a/src/components/icons/ui/bold/edit.svg
+++ b/src/components/icons/ui/bold/edit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4 21q-.425 0-.712-.288T3 20v-2.425q0-.4.15-.763t.425-.637L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.437.65T21 6.4q0 .4-.138.763t-.437.662l-12.6 12.6q-.275.275-.638.425t-.762.15zM17.6 7.8L19 6.4L17.6 5l-1.4 1.4z"/></svg>
--- a/src/components/icons/ui/bold/error.svg
+++ b/src/components/icons/ui/bold/error.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17q.425 0 .713-.288T13 16t-.288-.712T12 15t-.712.288T11 16t.288.713T12 17m0-4q.425 0 .713-.288T13 12V8q0-.425-.288-.712T12 7t-.712.288T11 8v4q0 .425.288.713T12 13m0 9q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"/></svg>
--- a/src/components/icons/ui/bold/index.ts
+++ b/src/components/icons/ui/bold/index.ts
@@ -0,0 +1,17 @@
+// Bold variant icons
+export { ReactComponent as ArrowUp } from './arrow-up.svg'
+export { ReactComponent as Check } from './check.svg'
+export { ReactComponent as Close } from './close.svg'
+export { ReactComponent as Controller } from './controller.svg'
+export { ReactComponent as Copy } from './copy.svg'
+export { ReactComponent as Download } from './download.svg'
+export { ReactComponent as Download1 } from './download1.svg'
+export { ReactComponent as Edit } from './edit.svg'
+export { ReactComponent as Error } from './error.svg'
+export { ReactComponent as Info } from './info.svg'
+export { ReactComponent as Layers } from './layers.svg'
+export { ReactComponent as Refresh } from './refresh.svg'
+export { ReactComponent as Search } from './search.svg'
+export { ReactComponent as Trash } from './trash.svg'
+export { ReactComponent as Warning } from './warning.svg'
+export { ReactComponent as Wine } from './wine.svg'
--- a/src/components/icons/ui/bold/info.svg
+++ b/src/components/icons/ui/bold/info.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17q.425 0 .713-.288T13 16v-4q0-.425-.288-.712T12 11t-.712.288T11 12v4q0 .425.288.713T12 17m0-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"/></svg>
--- a/src/components/icons/ui/bold/layers.svg
+++ b/src/components/icons/ui/bold/layers.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4.025 14.85q-.4-.3-.387-.787t.412-.788q.275-.2.6-.2t.6.2L12 18.5l6.75-5.225q.275-.2.6-.2t.6.2q.4.3.413.787t-.388.788l-6.75 5.25q-.55.425-1.225.425t-1.225-.425zm6.75.2l-5.75-4.475Q4.25 9.975 4.25 9t.775-1.575l5.75-4.475q.55-.425 1.225-.425t1.225.425l5.75 4.475q.775.6.775 1.575t-.775 1.575l-5.75 4.475q-.55.425-1.225.425t-1.225-.425"/></svg>
--- a/src/components/icons/ui/bold/refresh.svg
+++ b/src/components/icons/ui/bold/refresh.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 20q-3.35 0-5.675-2.325T4 12t2.325-5.675T12 4q1.725 0 3.3.712T18 6.75V5q0-.425.288-.712T19 4t.713.288T20 5v5q0 .425-.288.713T19 11h-5q-.425 0-.712-.288T13 10t.288-.712T14 9h3.2q-.8-1.4-2.187-2.2T12 6Q9.5 6 7.75 7.75T6 12t1.75 4.25T12 18q1.7 0 3.113-.862t2.187-2.313q.2-.35.563-.487t.737-.013q.4.125.575.525t-.025.75q-1.025 2-2.925 3.2T12 20"/></svg>
--- a/src/components/icons/ui/bold/search.svg
+++ b/src/components/icons/ui/bold/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"/></svg>
--- a/src/components/icons/ui/bold/trash.svg
+++ b/src/components/icons/ui/bold/trash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M20 6a1 1 0 0 1 .117 1.993L20 8h-.081L19 19a3 3 0 0 1-2.824 2.995L16 22H8c-1.598 0-2.904-1.249-2.992-2.75l-.005-.167L4.08 8H4a1 1 0 0 1-.117-1.993L4 6zm-6-4a2 2 0 0 1 2 2a1 1 0 0 1-1.993.117L14 4h-4l-.007.117A1 1 0 0 1 8 4a2 2 0 0 1 1.85-1.995L10 2z"/></svg>
--- a/src/components/icons/ui/bold/warning.svg
+++ b/src/components/icons/ui/bold/warning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M2.725 21q-.275 0-.5-.137t-.35-.363t-.137-.488t.137-.512l9.25-16q.15-.25.388-.375T12 3t.488.125t.387.375l9.25 16q.15.25.138.513t-.138.487t-.35.363t-.5.137zM12 18q.425 0 .713-.288T13 17t-.288-.712T12 16t-.712.288T11 17t.288.713T12 18m0-3q.425 0 .713-.288T13 14v-3q0-.425-.288-.712T12 10t-.712.288T11 11v3q0 .425.288.713T12 15"/></svg>
--- a/src/components/icons/ui/bold/wine.svg
+++ b/src/components/icons/ui/bold/wine.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M5.847 3.549A2 2 0 0 1 7.794 2h8.412c.93 0 1.738.642 1.947 1.549l1.023 4.431c.988 4.284-1.961 8.388-6.178 8.954L13 17v3h3a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h3v-3l.002-.066c-4.216-.566-7.166-4.67-6.177-8.954z"/></g></svg>
--- a/src/components/icons/ui/outline/arrow-up.svg
+++ b/src/components/icons/ui/outline/arrow-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M11.47 3.47a.75.75 0 0 1 1.06 0l6 6a.75.75 0 1 1-1.06 1.06l-4.72-4.72V20a.75.75 0 0 1-1.5 0V5.81l-4.72 4.72a.75.75 0 1 1-1.06-1.06z" clip-rule="evenodd"/></svg>
--- a/src/components/icons/ui/outline/check.svg
+++ b/src/components/icons/ui/outline/check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.88l8.802-8.801q.146-.146.344-.156t.363.156t.166.357t-.165.356l-8.944 8.95q-.243.243-.566.243t-.566-.243l-4.05-4.05q-.146-.146-.152-.347t.158-.366t.357-.165t.357.165z"/></svg>
--- a/src/components/icons/ui/outline/close.svg
+++ b/src/components/icons/ui/outline/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m12 12.708l-5.246 5.246q-.14.14-.344.15t-.364-.15t-.16-.354t.16-.354L11.292 12L6.046 6.754q-.14-.14-.15-.344t.15-.364t.354-.16t.354.16L12 11.292l5.246-5.246q.14-.14.345-.15q.203-.01.363.15t.16.354t-.16.354L12.708 12l5.246 5.246q.14.14.15.345q.01.203-.15.363t-.354.16t-.354-.16z"/></svg>
--- a/src/components/icons/ui/outline/controller.svg
+++ b/src/components/icons/ui/outline/controller.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4.725 20q-1.5 0-2.562-1.075t-1.113-2.6q0-.225.025-.45t.075-.45l2.1-8.4q.35-1.35 1.425-2.187T7.125 4h9.75q1.375 0 2.45.838t1.425 2.187l2.1 8.4q.05.225.088.463t.037.462q0 1.525-1.088 2.588T19.276 20q-1.05 0-1.95-.55t-1.35-1.5l-.7-1.45q-.125-.25-.375-.375T14.375 16h-4.75q-.275 0-.525.125t-.375.375l-.7 1.45q-.45.95-1.35 1.5t-1.95.55m.075-2q.475 0 .863-.25t.587-.675l.7-1.425q.375-.775 1.1-1.213T9.625 14h4.75q.85 0 1.575.45t1.125 1.2l.7 1.425q.2.425.588.675t.862.25q.7 0 1.2-.462t.525-1.163q0 .025-.05-.475l-2.1-8.375q-.175-.675-.7-1.1T16.875 6h-9.75q-.7 0-1.237.425t-.688 1.1L3.1 15.9q-.05.15-.05.45q0 .7.513 1.175T4.8 18m8.7-7q.425 0 .713-.287T14.5 10t-.288-.712T13.5 9t-.712.288T12.5 10t.288.713t.712.287m2-2q.425 0 .713-.288T16.5 8t-.288-.712T15.5 7t-.712.288T14.5 8t.288.713T15.5 9m0 4q.425 0 .713-.288T16.5 12t-.288-.712T15.5 11t-.712.288T14.5 12t.288.713t.712.287m2-2q.425 0 .713-.288T18.5 10t-.288-.712T17.5 9t-.712.288T16.5 10t.288.713t.712.287m-9 1.5q.325 0 .538-.213t.212-.537v-1h1q.325 0 .538-.213T11 10t-.213-.537t-.537-.213h-1v-1q0-.325-.213-.537T8.5 7.5t-.537.213t-.213.537v1h-1q-.325 0-.537.213T6 10t.213.538t.537.212h1v1q0 .325.213.538t.537.212M12 12"/></svg>
--- a/src/components/icons/ui/outline/copy.svg
+++ b/src/components/icons/ui/outline/copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15 1.25h-4.056c-1.838 0-3.294 0-4.433.153c-1.172.158-2.121.49-2.87 1.238c-.748.749-1.08 1.698-1.238 2.87c-.153 1.14-.153 2.595-.153 4.433V16a3.75 3.75 0 0 0 3.166 3.705c.137.764.402 1.416.932 1.947c.602.602 1.36.86 2.26.982c.867.116 1.97.116 3.337.116h3.11c1.367 0 2.47 0 3.337-.116c.9-.122 1.658-.38 2.26-.982s.86-1.36.982-2.26c.116-.867.116-1.97.116-3.337v-5.11c0-1.367 0-2.47-.116-3.337c-.122-.9-.38-1.658-.982-2.26c-.531-.53-1.183-.795-1.947-.932A3.75 3.75 0 0 0 15 1.25m2.13 3.021A2.25 2.25 0 0 0 15 2.75h-4c-1.907 0-3.261.002-4.29.14c-1.005.135-1.585.389-2.008.812S4.025 4.705 3.89 5.71c-.138 1.029-.14 2.383-.14 4.29v6a2.25 2.25 0 0 0 1.521 2.13c-.021-.61-.021-1.3-.021-2.075v-5.11c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117h3.11c.775 0 1.464 0 2.074.021M7.408 6.41c.277-.277.665-.457 1.4-.556c.754-.101 1.756-.103 3.191-.103h3c1.435 0 2.436.002 3.192.103c.734.099 1.122.28 1.399.556c.277.277.457.665.556 1.4c.101.754.103 1.756.103 3.191v5c0 1.435-.002 2.436-.103 3.192c-.099.734-.28 1.122-.556 1.399c-.277.277-.665.457-1.4.556c-.755.101-1.756.103-3.191.103h-3c-1.435 0-2.437-.002-3.192-.103c-.734-.099-1.122-.28-1.399-.556c-.277-.277-.457-.665-.556-1.4c-.101-.755-.103-1.756-.103-3.191v-5c0-1.435.002-2.437.103-3.192c.099-.734.28-1.122.556-1.399" clip-rule="evenodd"/></svg>
--- a/src/components/icons/ui/outline/download.svg
+++ b/src/components/icons/ui/outline/download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path stroke-linejoin="round" d="M20.935 11.009V8.793a2.98 2.98 0 0 0-1.529-2.61l-5.957-3.307a2.98 2.98 0 0 0-2.898 0L4.594 6.182a2.98 2.98 0 0 0-1.529 2.611v6.414a2.98 2.98 0 0 0 1.529 2.61l5.957 3.307a2.98 2.98 0 0 0 2.898 0l2.522-1.4"/><path stroke-linejoin="round" d="M20.33 6.996L12 12L3.67 6.996M12 21.49V12"/><path stroke-miterlimit="10" d="M19.97 19.245v-5"/><path stroke-linejoin="round" d="m17.676 17.14l1.968 1.968a.46.46 0 0 0 .65 0l1.968-1.968"/></g></svg>
--- a/src/components/icons/ui/outline/download1.svg
+++ b/src/components/icons/ui/outline/download1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 15.248q-.161 0-.298-.053t-.267-.184l-2.62-2.619q-.146-.146-.152-.344t.152-.363q.166-.166.357-.169q.192-.003.357.163L11.5 13.65V5.5q0-.213.143-.357T12 5t.357.143t.143.357v8.15l1.971-1.971q.146-.146.347-.153t.366.159q.16.165.163.354t-.162.353l-2.62 2.62q-.13.13-.267.183q-.136.053-.298.053M6.616 19q-.691 0-1.153-.462T5 17.384v-1.923q0-.213.143-.356t.357-.144t.357.144t.143.356v1.923q0 .231.192.424t.423.192h10.77q.23 0 .423-.192t.192-.424v-1.923q0-.213.143-.356t.357-.144t.357.144t.143.356v1.923q0 .691-.462 1.153T17.384 19z"/></svg>
--- a/src/components/icons/ui/outline/edit.svg
+++ b/src/components/icons/ui/outline/edit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M5 19h1.425L16.2 9.225L14.775 7.8L5 17.575zm-1 2q-.425 0-.712-.288T3 20v-2.425q0-.4.15-.763t.425-.637L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.437.65T21 6.4q0 .4-.138.763t-.437.662l-12.6 12.6q-.275.275-.638.425t-.762.15zM19 6.4L17.6 5zm-3.525 2.125l-.7-.725L16.2 9.225z"/></svg>
--- a/src/components/icons/ui/outline/error.svg
+++ b/src/components/icons/ui/outline/error.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17q.425 0 .713-.288T13 16t-.288-.712T12 15t-.712.288T11 16t.288.713T12 17m0-4q.425 0 .713-.288T13 12V8q0-.425-.288-.712T12 7t-.712.288T11 8v4q0 .425.288.713T12 13m0 9q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/></svg>
--- a/src/components/icons/ui/outline/index.ts
+++ b/src/components/icons/ui/outline/index.ts
@@ -0,0 +1,17 @@
+// Outline variant icons
+export { ReactComponent as ArrowUp } from './arrow-up.svg'
+export { ReactComponent as Check } from './check.svg'
+export { ReactComponent as Close } from './close.svg'
+export { ReactComponent as Controller } from './controller.svg'
+export { ReactComponent as Copy } from './copy.svg'
+export { ReactComponent as Download } from './download.svg'
+export { ReactComponent as Download1 } from './download1.svg'
+export { ReactComponent as Edit } from './edit.svg'
+export { ReactComponent as Error } from './error.svg'
+export { ReactComponent as Info } from './info.svg'
+export { ReactComponent as Layers } from './layers.svg'
+export { ReactComponent as Refresh } from './refresh.svg'
+export { ReactComponent as Search } from './search.svg'
+export { ReactComponent as Trash } from './trash.svg'
+export { ReactComponent as Warning } from './warning.svg'
+export { ReactComponent as Wine } from './wine.svg'
--- a/src/components/icons/ui/outline/info.svg
+++ b/src/components/icons/ui/outline/info.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17q.425 0 .713-.288T13 16v-4q0-.425-.288-.712T12 11t-.712.288T11 12v4q0 .425.288.713T12 17m0-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/></svg>
--- a/src/components/icons/ui/outline/layers.svg
+++ b/src/components/icons/ui/outline/layers.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4.025 14.85q-.4-.3-.387-.787t.412-.788q.275-.2.6-.2t.6.2L12 18.5l6.75-5.225q.275-.2.6-.2t.6.2q.4.3.413.787t-.388.788l-6.75 5.25q-.55.425-1.225.425t-1.225-.425zm6.75.2l-5.75-4.475Q4.25 9.975 4.25 9t.775-1.575l5.75-4.475q.55-.425 1.225-.425t1.225.425l5.75 4.475q.775.6.775 1.575t-.775 1.575l-5.75 4.475q-.55.425-1.225.425t-1.225-.425M12 13.45L17.75 9L12 4.55L6.25 9zM12 9"/></svg>
--- a/src/components/icons/ui/outline/refresh.svg
+++ b/src/components/icons/ui/outline/refresh.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12.077 19q-2.931 0-4.966-2.033q-2.034-2.034-2.034-4.964t2.034-4.966T12.077 5q1.783 0 3.339.847q1.555.847 2.507 2.365V5.5q0-.213.144-.356T18.424 5t.356.144t.143.356v3.923q0 .343-.232.576t-.576.232h-3.923q-.212 0-.356-.144t-.144-.357t.144-.356t.356-.143h3.2q-.78-1.496-2.197-2.364Q13.78 6 12.077 6q-2.5 0-4.25 1.75T6.077 12t1.75 4.25t4.25 1.75q1.787 0 3.271-.968q1.485-.969 2.202-2.573q.085-.196.274-.275q.19-.08.388-.013q.211.067.28.275t-.015.404q-.833 1.885-2.56 3.017T12.077 19"/></svg>
--- a/src/components/icons/ui/outline/search.svg
+++ b/src/components/icons/ui/outline/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M9.539 15.23q-2.398 0-4.065-1.666Q3.808 11.899 3.808 9.5t1.666-4.065T9.539 3.77t4.064 1.666T15.269 9.5q0 1.042-.369 2.017t-.97 1.668l5.909 5.907q.14.14.15.345q.009.203-.15.363q-.16.16-.354.16t-.354-.16l-5.908-5.908q-.75.639-1.725.989t-1.96.35m0-1q1.99 0 3.361-1.37q1.37-1.37 1.37-3.361T12.9 6.14T9.54 4.77q-1.991 0-3.361 1.37T4.808 9.5t1.37 3.36t3.36 1.37"/></svg>
--- a/src/components/icons/ui/outline/trash.svg
+++ b/src/components/icons/ui/outline/trash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"/></svg>
--- a/src/components/icons/ui/outline/warning.svg
+++ b/src/components/icons/ui/outline/warning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M2.725 21q-.275 0-.5-.137t-.35-.363t-.137-.488t.137-.512l9.25-16q.15-.25.388-.375T12 3t.488.125t.387.375l9.25 16q.15.25.138.513t-.138.487t-.35.363t-.5.137zm1.725-2h15.1L12 6zM12 18q.425 0 .713-.288T13 17t-.288-.712T12 16t-.712.288T11 17t.288.713T12 18m0-3q.425 0 .713-.288T13 14v-3q0-.425-.288-.712T12 10t-.712.288T11 11v3q0 .425.288.713T12 15m0-2.5"/></svg>
--- a/src/components/icons/ui/outline/wine.svg
+++ b/src/components/icons/ui/outline/wine.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M5.847 3.549A2 2 0 0 1 7.794 2h8.412c.93 0 1.738.642 1.947 1.549l1.023 4.431c.988 4.284-1.961 8.388-6.178 8.954L13 17v3h3a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h3v-3l.002-.066c-4.216-.566-7.166-4.67-6.177-8.954zM7.796 4L6.773 8.43C5.998 11.79 8.551 15 12 15s6.003-3.209 5.227-6.57L16.205 4h-8.41Z"/></g></svg>
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@/components/buttons'
+import { Icon, info, refresh, search } from '@/components/icons'

 interface HeaderProps {
  onRefresh: () => void
@@ -19,16 +20,21 @@ const Header = ({
 }: HeaderProps) => {
  return (
    <header className="app-header">
+      <div className="app-title">
+        <Icon name={info} variant="bold" size="md" className="app-logo-icon" />
        <h1>CreamLinux</h1>
+      </div>
      <div className="header-controls">
        <Button 
          variant="primary"
          onClick={onRefresh} 
          disabled={refreshDisabled}
          className="refresh-button"
+          leftIcon={<Icon name={refresh} variant="bold" size="md" />}
        >
          Refresh
        </Button>
+        <div className="search-container">
          <input
            type="text"
            placeholder="Search games..."
@@ -36,6 +42,8 @@ const Header = ({
            value={searchQuery}
            onChange={(e) => onSearch(e.target.value)}
          />
+          <Icon name={search} variant="bold" size="md" className="search-icon" />
+        </div>
      </div>
    </header>
  )
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,23 +1,36 @@
+import { Icon, layers, linux, wine } from '@/components/icons'
+
 interface SidebarProps {
  setFilter: (filter: string) => void
  currentFilter: string
 }

+// Define a type for filter items that makes variant optional
+type FilterItem = {
+  id: string
+  label: string
+  icon: string
+  variant?: string
+}
+
 /**
 * Application sidebar component
 * Contains filters for game types
 */
 const Sidebar = ({ setFilter, currentFilter }: SidebarProps) => {
-  // Available filter options
-  const filters = [
-    { id: 'all', label: 'All Games' },
-    { id: 'native', label: 'Native' },
-    { id: 'proton', label: 'Proton Required' }
+  // Available filter options with icons
+  const filters: FilterItem[] = [
+    { id: 'all', label: 'All Games', icon: layers, variant: 'bold' },
+    { id: 'native', label: 'Native', icon: linux, variant: 'brand' },
+    { id: 'proton', label: 'Proton Required', icon: wine, variant: 'bold' }
  ]
  
  return (
    <div className="sidebar">
+      <div className="sidebar-header">
        <h2>Library</h2>
+      </div>
+      
      <ul className="filter-list">
        {filters.map(filter => (
          <li 
@@ -25,7 +38,15 @@ const Sidebar = ({ setFilter, currentFilter }: SidebarProps) => {
            className={currentFilter === filter.id ? 'active' : ''}
            onClick={() => setFilter(filter.id)}
          >
-            {filter.label}
+            <div className="filter-item">
+              <Icon 
+                name={filter.icon}
+                variant={filter.variant}
+                size="md" 
+                className="filter-icon"
+              />
+              <span>{filter.label}</span>
+            </div>
          </li>
        ))}
      </ul>
--- a/src/components/notifications/Toast.tsx
+++ b/src/components/notifications/Toast.tsx
@@ -1,4 +1,5 @@
-import { ReactNode, useState, useEffect } from 'react'
+import { ReactNode, useState, useEffect, useCallback } from 'react'
+import { Icon, check, info, warning, error } from '@/components/icons'

 export interface ToastProps {
  id: string;
@@ -23,6 +24,13 @@ const Toast = ({
 }: ToastProps) => {
  const [visible, setVisible] = useState(false)

+  // Use useCallback to memoize the handleDismiss function
+  const handleDismiss = useCallback(() => {
+    setVisible(false)
+    // Give time for exit animation
+    setTimeout(() => onDismiss(id), 300)
+  }, [id, onDismiss])
+
  // Handle animation on mount/unmount
  useEffect(() => {
    // Start the enter animation
@@ -42,30 +50,24 @@ const Toast = ({
      clearTimeout(enterTimer)
      if (dismissTimer) clearTimeout(dismissTimer)
    }
-  }, [duration])
+  }, [duration, handleDismiss])

  // Get icon based on toast type
  const getIcon = (): ReactNode => {
    switch (type) {
      case 'success':
-        return '✓'
+        return <Icon name={check} size="md" variant='bold' />
      case 'error':
-        return '✗'
+        return <Icon name={error} size="md" variant='bold' />
      case 'warning':
-        return '⚠'
+        return <Icon name={warning} size="md" variant='bold' />
      case 'info':
-        return 'ℹ'
+        return <Icon name={info} size="md" variant='bold' />
      default:
-        return ''
+        return <Icon name={info} size="md" variant='bold' />
    }
  }

-  const handleDismiss = () => {
-    setVisible(false)
-    // Give time for exit animation
-    setTimeout(() => onDismiss(id), 300)
-  }
-
  return (
    <div className={`toast toast-${type} ${visible ? 'visible' : ''}`}>
      <div className="toast-icon">{getIcon()}</div>
--- a/src/styles/components/buttons/_animated_checkbox.scss
+++ b/src/styles/components/buttons/_animated_checkbox.scss
@@ -42,23 +42,18 @@
    border-color: var(--primary-color, #ffc896);
    box-shadow: 0 0 10px rgba(255, 200, 150, 0.2);
  }
-}

-.checkmark-icon {
-  width: 18px;
-  height: 18px;
-}
-
-.checkmark {
-  stroke-dasharray: 30;
-  stroke-dashoffset: 30;
+  .checkbox-icon {
+    color: var(--text-heavy);
    opacity: 0;
-  transition: stroke-dashoffset 0.3s ease;
+    transform: scale(0);
+    transition: all 0.3s var(--easing-bounce);
+  }

-  &.checked {
-    stroke-dashoffset: 0;
+  &.checked .checkbox-icon {
    opacity: 1;
-    animation: checkmarkAnimation 0.3s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+    transform: scale(1);
+    animation: checkbox-pop 0.3s var(--easing-bounce) forwards;
  }
 }

@@ -83,17 +78,18 @@
  color: var(--text-muted);
 }

-// Animation for the checkmark
-@keyframes checkmarkAnimation {
+// Animation for the checkbox
+@keyframes checkbox-pop {
  0% {
-    stroke-dashoffset: 30;
+    transform: scale(0);
    opacity: 0;
  }
-  40% {
+  70% {
+    transform: scale(1.2);
    opacity: 1;
  }
  100% {
-    stroke-dashoffset: 0;
+    transform: scale(1);
    opacity: 1;
  }
 }
--- a/src/styles/components/icons/_icon.scss
+++ b/src/styles/components/icons/_icon.scss
@@ -0,0 +1,128 @@
+@use '../../themes/index' as *;
+@use '../../abstracts/index' as *;
+
+/* 
+  Icon component styles
+*/
+.icon {
+  display: inline-flex;
+  vertical-align: middle;
+
+  // Base icon styling
+  &.icon-xs {
+    width: 12px;
+    height: 12px;
+  }
+
+  &.icon-sm {
+    width: 16px;
+    height: 16px;
+  }
+
+  &.icon-md {
+    width: 24px;
+    height: 24px;
+  }
+
+  &.icon-lg {
+    width: 32px;
+    height: 32px;
+  }
+
+  &.icon-xl {
+    width: 48px;
+    height: 48px;
+  }
+
+  // Interactive icons
+  &.icon-clickable {
+    cursor: pointer;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+
+    &:hover {
+      opacity: 0.8;
+      transform: scale(1.1);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+
+  // Icon with background
+  &.icon-with-bg {
+    padding: 6px;
+    border-radius: 50%;
+    background-color: var(--border-soft);
+
+    &:hover {
+      background-color: var(--border);
+    }
+  }
+
+  // Color variations
+  &.icon-primary {
+    color: var(--primary-color);
+  }
+
+  &.icon-secondary {
+    color: var(--text-secondary);
+  }
+
+  &.icon-danger {
+    color: var(--danger);
+  }
+
+  &.icon-success {
+    color: var(--success);
+  }
+
+  &.icon-warning {
+    color: var(--warning);
+  }
+
+  &.icon-info {
+    color: var(--info);
+  }
+}
+
+// Icon in button
+.btn .icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// Animated icons
+.icon-spin {
+  animation: icon-spin 2s linear infinite;
+}
+
+.icon-pulse {
+  animation: icon-pulse 1.5s ease-in-out infinite;
+}
+
+// Animations
+@keyframes icon-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes icon-pulse {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
--- a/src/styles/components/icons/_index.scss
+++ b/src/styles/components/icons/_index.scss
@@ -0,0 +1 @@
+@forward './icon';
--- a/src/styles/components/layout/_header.scss
+++ b/src/styles/components/layout/_header.scss
@@ -16,6 +16,11 @@
  z-index: var(--z-header);
  height: var(--header-height);

+  .app-title {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+
    h1 {
      font-size: 1.5rem;
      font-weight: 600;
@@ -24,6 +29,12 @@
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    }

+    .app-logo-icon {
+      color: var(--primary-color);
+      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+    }
+  }
+
  &::after {
    content: '';
    position: absolute;
@@ -57,12 +68,25 @@
  align-items: center;
 }

+.search-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  .search-icon {
+    position: absolute;
+    left: 0.8rem;
+    color: rgba(255, 255, 255, 0.4);
+    pointer-events: none;
+  }
+}
+
 .search-input {
  background-color: var(--border-dark);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  color: var(--text-primary);
-  padding: 0.6rem 1rem;
+  padding: 0.6rem 1rem 0.6rem 2.5rem;
  font-size: 0.9rem;
  transition: all var(--duration-normal) var(--easing-ease-out);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
@@ -73,6 +97,10 @@
    background-color: rgba(255, 255, 255, 0.1);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-color), 0.3), inset 0 2px 5px rgba(0, 0, 0, 0.2);
+
+    & + .search-icon {
+      color: var(--primary-color);
+    }
  }

  &::placeholder {
--- a/src/styles/components/layout/_sidebar.scss
+++ b/src/styles/components/layout/_sidebar.scss
@@ -17,12 +17,15 @@
  overflow-y: auto;
  z-index: var(--z-elevate) + 1;
  @include custom-scrollbar;
+}
+
+.sidebar-header {
+  margin-bottom: 1.5rem;

  h2 {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
-    margin-bottom: 1rem;
    letter-spacing: 0.5px;
    opacity: 0.9;
  }
@@ -52,74 +55,21 @@
      );
      box-shadow: 0 4px 10px rgba(var(--primary-color), 0.3);
      color: var(--elevated-bg);
+
+      .filter-icon {
+        color: var(--elevated-bg);
+      }
    }
  }
 }

-// Custom select dropdown styling
-.custom-select {
-  position: relative;
-  display: inline-block;
-
-  .select-selected {
-    background-color: rgba(255, 255, 255, 0.07);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: var(--radius-sm);
-    color: var(--text-primary);
-    padding: 0.6rem 1rem;
-    font-size: 0.9rem;
-    cursor: pointer;
-    transition: all var(--duration-normal) var(--easing-ease-out);
+.filter-item {
  display: flex;
  align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    min-width: 150px;
+  gap: 0.75rem;

-    &:after {
-      content: '⯆';
-      font-size: 0.7rem;
-      opacity: 0.7;
-    }
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-  }
-
-  .select-items {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    background-color: var(--secondary-bg);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: var(--radius-sm);
-    margin-top: 5px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    z-index: 10;
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s ease;
-
-    &.show {
-      max-height: 300px;
-    }
-
-    .select-item {
-      padding: 0.5rem 1rem;
-      cursor: pointer;
-      transition: all var(--duration-normal) var(--easing-ease-out);
-
-      &:hover {
-        background-color: rgba(255, 255, 255, 0.07);
-      }
-
-      &.selected {
-        background-color: var(--primary-color);
-        color: var(--text-primary);
-      }
-    }
+  .filter-icon {
+    flex-shrink: 0;
  }
 }

--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -23,6 +23,9 @@
 /* Notification components */
@use 'components/notifications/index' as *;

+/* Icon components */
+@use 'components/icons/index' as *;
+
 /* Common components */
@use 'components/common/index' as *;

--- a/src/types/svg.d.ts
+++ b/src/types/svg.d.ts
@@ -0,0 +1,32 @@
+/// <reference types="vite/client" />
+
+declare module '*.svg' {
+  import React from 'react'
+  
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >
+  
+  const src: string
+  export default src
+}
+
+declare module '*.png' {
+  const content: string
+  export default content
+}
+
+declare module '*.jpg' {
+  const content: string
+  export default content
+}
+
+declare module '*.jpeg' {
+  const content: string
+  export default content
+}
+
+declare module '*.gif' {
+  const content: string
+  export default content
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,8 +1,8 @@
 {
  "compilerOptions": {
-    "baseUrl": "./src",
+    "baseUrl": ".",
    "paths": {
-      "@/*": ["*"]
+      "@/*": ["src/*"]
    },
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import path from 'path'
+import svgr from "vite-plugin-svgr";

 // https://vitejs.dev/config/
 export default defineConfig({
@@ -10,7 +11,19 @@ export default defineConfig({
    },
  },
  
-  plugins: [react()],
+  plugins: [
+    react(),
+    svgr({
+      svgrOptions: {
+        // SVGR options go here
+        icon: true,
+        dimensions: false,
+        titleProp: true,
+        exportType: 'named',
+      },
+      include: '**/*.svg',
+    }),
+  ],

  clearScreen: false,
  server: {
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.1.1 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.1 16.1 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02M8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12m6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12"/></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m3.001 5.479l7.377-1.016v7.127H3zm0 13.042l7.377 1.017v-7.04H3zm8.188 1.125L21.001 21v-8.502h-9.812zm0-15.292v7.236h9.812V3z"/></svg>`