diff --git a/docs/changelog.mdx b/docs/changelog.mdx
index 53340a2..5d2a7fa 100644
--- a/docs/changelog.mdx
+++ b/docs/changelog.mdx
@@ -5,6 +5,19 @@ description: Release notes for Tangly.
 
 Notable changes per release. Each entry is authored as an [`<Update>`](/reference/components/callouts#update) block, the same component you can use in your own docs.
 
+<Update label="v0.2.4" description="20 Jul 26" tags={["feat"]}>
+  ## Highlights
+
+  Sidebar group and section headers now render their icon.
+
+  - **Group icons show up.** A nav group can carry an `icon` in `docs.json`, and the manifest already attached it to the group's sidebar item, but the theme dropped it and rendered a bare title. Both the top-level and nested group headers now render the icon (same `<Icon>` and spacing as leaf pages and tabs). Groups without an icon are unchanged. ([#13](https://github.com/tanglydocs/tangly/pull/13))
+
+  ## Changes
+
+  ### Features
+  - feat(theme-ui): render icons on sidebar group headers ([#13](https://github.com/tanglydocs/tangly/pull/13))
+</Update>
+
 <Update label="v0.2.3" description="17 Jul 26" tags={["fix"]}>
   ## Highlights
 
diff --git a/packages/theme-ui/src/Sidebar.astro b/packages/theme-ui/src/Sidebar.astro
index cea4a29..14f2ca5 100644
--- a/packages/theme-ui/src/Sidebar.astro
+++ b/packages/theme-ui/src/Sidebar.astro
@@ -22,8 +22,9 @@ const isRoot = _depth === 0;
         <li>
           {item.isGroup ? (
             <div>
-              <div class="px-2 pt-1 pb-2 text-[13px] font-semibold text-[var(--tangly-color-fg)]">
-                {item.title}
+              <div class="flex items-center gap-2.5 px-2 pt-1 pb-2 text-[13px] font-semibold text-[var(--tangly-color-fg)]">
+                {item.icon ? <Icon icon={item.icon} size={15} /> : null}
+                <span class="flex-1 truncate">{item.title}</span>
               </div>
               <ul class="space-y-0.5">
                 <Astro.self items={item.children ?? []} currentSlug={currentSlug} config={config} _depth={_depth + 1} />
@@ -64,8 +65,9 @@ const isRoot = _depth === 0;
       <li>
         {item.isGroup ? (
           <div class="pt-4">
-            <div class="px-2 pb-1 text-[12px] font-semibold text-[var(--tangly-color-fg)]">
-              {item.title}
+            <div class="flex items-center gap-2.5 px-2 pb-1 text-[12px] font-semibold text-[var(--tangly-color-fg)]">
+              {item.icon ? <Icon icon={item.icon} size={15} /> : null}
+              <span class="flex-1 truncate">{item.title}</span>
             </div>
             <ul class="space-y-0.5">
               <Astro.self items={item.children ?? []} currentSlug={currentSlug} config={config} _depth={_depth + 1} />