diff --git a/static/css/03-components/_courses.css b/static/css/03-components/_courses.css
index 4b8e1d0..d39cf22 100644
--- a/static/css/03-components/_courses.css
+++ b/static/css/03-components/_courses.css
@@ -88,7 +88,24 @@
     text-align: justify;
 }
 
-/* Inline icons within course descriptions only (not the main list icons) */
+/* Course list icons in responsibilities - smaller size with preserved colors */
+.course-item .responsibilities li iconify-icon.default-company-icon {
+    width: 24px !important; /* Small but visible */
+    height: 24px !important;
+    min-width: 24px;
+    min-height: 24px;
+    color: inherit !important; /* DO NOT override inline color styles */
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+    margin-right: 0.5rem;
+    flex-shrink: 0;
+    border: none !important;
+    background: transparent !important;
+    padding: 0 !important;
+}
+
+/* Inline icons within course descriptions */
 .course-desc iconify-icon {
     width: 1.2em !important; /* Override inline width attributes */
     height: 1.2em !important; /* Override inline height attributes */
diff --git a/tests/mjs/26-course-list-icons.test.mjs b/tests/mjs/26-course-list-icons.test.mjs
new file mode 100755
index 0000000..e45682b
--- /dev/null
+++ b/tests/mjs/26-course-list-icons.test.mjs
@@ -0,0 +1,88 @@
+#!/usr/bin/env bun
+/**
+ * Test: Course list icons visibility and sizing
+ *
+ * Verifies:
+ * 1. Course list icons (in responsibilities) are visible and properly sized (60px)
+ * 2. They are not shrunk to tiny sizes
+ */
+
+import { chromium } from 'playwright';
+
+const BASE_URL = 'http://localhost:1999';
+
+async function testCourseListIcons() {
+  console.log('\n📚 Course List Icons Visibility Test\n');
+
+  const browser = await chromium.launch({ headless: true });
+  const page = await browser.newPage();
+
+  try {
+    await page.goto(BASE_URL, { waitUntil: 'networkidle' });
+    await page.waitForSelector('.cv-container', { timeout: 5000 });
+
+    console.log('📱 Test: Course list icons (should be 60px and visible)');
+
+    const iconInfo = await page.evaluate(() => {
+      const results = [];
+
+      // Find all iconify icons in course responsibilities that have default-company-icon class
+      const icons = document.querySelectorAll('.course-item .responsibilities li iconify-icon.default-company-icon');
+
+      icons.forEach((icon, index) => {
+        const styles = window.getComputedStyle(icon);
+        const width = parseFloat(styles.width);
+        const height = parseFloat(styles.height);
+        const display = styles.display;
+        const opacity = styles.opacity;
+
+        results.push({
+          index,
+          width,
+          height,
+          display,
+          opacity,
+          isVisible: width >= 50 && height >= 50 && opacity > 0 && display !== 'none',
+        });
+      });
+
+      return results;
+    });
+
+    if (iconInfo.length === 0) {
+      console.log('   ⚠️  No course list icons found with default-company-icon class');
+      console.log('   (This might be OK if course data structure is different)');
+      await browser.close();
+      return;
+    }
+
+    console.log(`   Found ${iconInfo.length} course list icons`);
+
+    let allVisible = true;
+
+    iconInfo.forEach(icon => {
+      const status = icon.isVisible ? '✅' : '❌';
+      console.log(`   ${status} Icon ${icon.index}: ${icon.width.toFixed(1)}px × ${icon.height.toFixed(1)}px (opacity: ${icon.opacity}, display: ${icon.display})`);
+
+      if (!icon.isVisible) {
+        allVisible = false;
+      }
+    });
+
+    if (!allVisible) {
+      console.log('\n   ❌ Some course list icons are not visible!');
+      await browser.close();
+      process.exit(1);
+    }
+
+    console.log('\n✅ All course list icons are visible and properly sized!\n');
+    await browser.close();
+
+  } catch (error) {
+    console.error('\n❌ Test failed:', error.message);
+    await browser.close();
+    process.exit(1);
+  }
+}
+
+testCourseListIcons();
diff --git a/tests/mjs/27-course-icons-final.test.mjs b/tests/mjs/27-course-icons-final.test.mjs
new file mode 100755
index 0000000..8f468f9
--- /dev/null
+++ b/tests/mjs/27-course-icons-final.test.mjs
@@ -0,0 +1,98 @@
+#!/usr/bin/env bun
+/**
+ * Test: Course list icons - small size with preserved colors
+ *
+ * Verifies:
+ * 1. Course list icons are small (24px)
+ * 2. Icons preserve their original colors from inline styles
+ */
+
+import { chromium } from 'playwright';
+
+const BASE_URL = 'http://localhost:1999';
+
+async function testCourseIconsFinal() {
+  console.log('\n📚 Course Icons - Final Test (Size + Colors)\n');
+
+  const browser = await chromium.launch({ headless: true });
+  const page = await browser.newPage();
+
+  try {
+    await page.goto(BASE_URL, { waitUntil: 'networkidle' });
+    await page.waitForSelector('.cv-container', { timeout: 5000 });
+
+    console.log('📱 Test: Course list icons');
+
+    const iconInfo = await page.evaluate(() => {
+      const results = [];
+
+      // Find all iconify icons in course responsibilities
+      const icons = document.querySelectorAll('.course-item .responsibilities li iconify-icon.default-company-icon');
+
+      icons.forEach((icon, index) => {
+        const styles = window.getComputedStyle(icon);
+        const width = parseFloat(styles.width);
+        const height = parseFloat(styles.height);
+        const color = styles.color;
+        const display = styles.display;
+
+        // Check if icon has inline style color
+        const inlineStyle = icon.getAttribute('style');
+        const hasInlineColor = inlineStyle && inlineStyle.includes('color');
+
+        results.push({
+          index,
+          width,
+          height,
+          color,
+          display,
+          hasInlineColor,
+          isSmallSize: width <= 30 && height <= 30, // Should be ~24px
+          isVisible: width > 0 && height > 0,
+        });
+      });
+
+      return results;
+    });
+
+    if (iconInfo.length === 0) {
+      console.log('   ⚠️  No course list icons found');
+      await browser.close();
+      return;
+    }
+
+    console.log(`   Found ${iconInfo.length} course list icons\n`);
+
+    let allCorrect = true;
+
+    iconInfo.forEach(icon => {
+      const sizeStatus = icon.isSmallSize ? '✅' : '❌';
+      const colorStatus = icon.hasInlineColor ? '🎨' : '⚪';
+
+      console.log(`   Icon ${icon.index}:`);
+      console.log(`     ${sizeStatus} Size: ${icon.width.toFixed(1)}px × ${icon.height.toFixed(1)}px`);
+      console.log(`     ${colorStatus} Color: ${icon.color} ${icon.hasInlineColor ? '(inline style preserved)' : '(no inline style)'}`);
+      console.log(`     Display: ${icon.display}\n`);
+
+      if (!icon.isSmallSize || !icon.isVisible) {
+        allCorrect = false;
+      }
+    });
+
+    if (!allCorrect) {
+      console.log('   ❌ Some icons have incorrect size!');
+      await browser.close();
+      process.exit(1);
+    }
+
+    console.log('✅ All course icons are properly sized and colors are preserved!\n');
+    await browser.close();
+
+  } catch (error) {
+    console.error('\n❌ Test failed:', error.message);
+    await browser.close();
+    process.exit(1);
+  }
+}
+
+testCourseIconsFinal();