diff --git a/.Jules/palette.md b/.Jules/palette.md
index 1b20d64..393c762 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -5,3 +5,7 @@
 ## 2026-04-13 - [Keyboard Accessibility in Interactive Modals]
 **Learning:** Many game UI elements rely solely on hover/click states. Adding `focus-visible:ring-2` and `aria-label` to selection buttons ensures that keyboard-only users can navigate and understand the interface.
 **Action:** Always include focus indicators and descriptive ARIA labels for icon-heavy or list-based interactive elements.
+
+## 2026-04-20 - [Visual Context in Cargo Inventories]
+**Learning:** Text-only inventory lists are slow to parse mentally. Adding 16px resource icons provides immediate visual recognition of cargo contents, aligning with the "recognition over recall" usability heuristic.
+**Action:** Use `ResourceIcon` in all inventory contexts (Units, Settlements, Trade) to ensure consistent visual language for goods.
diff --git a/src/ui/UnitPanel.tsx b/src/ui/UnitPanel.tsx
index 5a19981..c8030ce 100644
--- a/src/ui/UnitPanel.tsx
+++ b/src/ui/UnitPanel.tsx
@@ -13,6 +13,7 @@ import {
 import { useUIStore } from '../game/state/uiStore';
 import { UnitType } from '../game/entities/types';
 import { UnitSelector } from './UnitPanel/components/UnitSelector';
+import { ResourceIcon } from './ResourceIcon';
 import { distance } from '../game/entities/Position';
 import type { Unit } from '../game/entities/Unit';
 
@@ -145,8 +146,11 @@ export const UnitPanel: React.FC = () => {
         ) : (
           <ul className="space-y-1">
             {Array.from(unit.cargo.entries()).map(([good, amount]) => (
-              <li key={good} className="flex justify-between items-center border-b border-white/5 pb-1 last:border-0">
-                <span className="capitalize text-slate-300 font-medium">{good.toLowerCase()}</span>
+              <li key={good} className="flex justify-between items-center border-b border-white/5 pb-1 last:border-0 gap-2">
+                <div className="flex items-center gap-2 min-w-0">
+                  <ResourceIcon good={good} size={16} className="shrink-0" />
+                  <span className="capitalize text-slate-300 font-medium truncate">{good.replace('_', ' ').toLowerCase()}</span>
+                </div>
                 <span className="font-mono font-bold text-blue-300">{amount}</span>
               </li>
             ))}