diff --git a/web/src/styles/app.css b/web/src/styles/app.css
index 75de100..3c99413 100644
--- a/web/src/styles/app.css
+++ b/web/src/styles/app.css
@@ -327,8 +327,10 @@ img { max-width: 100%; }
 /* A folder colour tints its icon; the label keeps the sidebar's contrast. */
 .folder-row .folder-icon { display: inline-flex; align-items: center; }
 /* .nav-item svg sets colour on the svg itself, so inheriting from the span is
-   not enough -- the icon has to be targeted directly to win the cascade. */
-.folder-row .folder-icon[style*="--folder-color"] svg { color: var(--folder-color); }
+   not enough -- the icon has to be targeted directly to win the cascade.
+   The fill overrides lucide's own fill="none": a CSS rule beats a presentation
+   attribute, and a solid folder reads at a glance where an outline does not. */
+.folder-row .folder-icon[style*="--folder-color"] svg { color: var(--bg); fill: var(--folder-color); }
 /* The Folders heading doubles as the way back to the top level while dragging. */
 .nav-section.drop-target { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); color: var(--accent-soft-fg); }
 .nav-item svg { flex: 0 0 auto; color: var(--fg-muted); }