Icons

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,23 +20,30 @@ const Header = ({
 }: HeaderProps) => {
   return (
     <header className="app-header">
-      <h1>CreamLinux</h1>
+      <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>
-        <input
-          type="text"
-          placeholder="Search games..."
-          className="search-input"
-          value={searchQuery}
-          onChange={(e) => onSearch(e.target.value)}
-        />
+        <div className="search-container">
+          <input
+            type="text"
+            placeholder="Search games..."
+            className="search-input"
+            value={searchQuery}
+            onChange={(e) => onSearch(e.target.value)}
+          />
+          <Icon name={search} variant="bold" size="md" className="search-icon" />
+        </div>
       </div>
     </header>
   )

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">
-      <h2>Library</h2>
+      <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>