diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss
index 64044c4c5c..1aea3ae23b 100644
--- a/res/css/structures/_SpacePanel.pcss
+++ b/res/css/structures/_SpacePanel.pcss
@@ -211,6 +211,10 @@ Please see LICENSE files in the repository root for full details.
             }
         }
 
+        &.mx_SpaceButton_withIcon .mx_SpaceButton_icon {
+            background-color: $panel-actions;
+        }
+
         &.mx_SpaceButton_home .mx_SpaceButton_icon::before {
             mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
         }
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index 6a2ff81555..5436521840 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -341,7 +341,18 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(
                     </Draggable>
                 ))}
                 {children}
-                {ModuleApi.extras.spacePanelItems.map((renderer) => renderer({ isPanelCollapsed }))}
+                {ModuleApi.extras.spacePanelItems.map((itemProps) => (
+                    <li
+                        key={itemProps.spaceKey}
+                        className={classNames("mx_SpaceItem", {
+                            collapsed: isPanelCollapsed,
+                        })}
+                        role="treeitem"
+                        aria-selected={false} // TODO
+                    >
+                        <SpaceButton {...itemProps} isNarrow={isPanelCollapsed} size="32px" />
+                    </li>
+                ))}
                 {shouldShowComponent(UIComponent.CreateSpaces) && (
                     <CreateSpaceButton isPanelCollapsed={isPanelCollapsed} setPanelCollapsed={setPanelCollapsed} />
                 )}
diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index d03ac8a1e2..f2c41c367f 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -52,6 +52,7 @@ type ButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<
     className?: string;
     selected?: boolean;
     label: string;
+    icon?: JSX.Element;
     contextMenuTooltip?: string;
     notificationState?: NotificationState;
     isNarrow?: boolean;
@@ -65,6 +66,7 @@ export const SpaceButton = <T extends keyof HTMLElementTagNameMap>({
     space,
     spaceKey: _spaceKey,
     className,
+    icon,
     selected,
     label,
     contextMenuTooltip,
@@ -84,7 +86,7 @@ export const SpaceButton = <T extends keyof HTMLElementTagNameMap>({
 
     let avatar = (
         <div className="mx_SpaceButton_avatarPlaceholder">
-            <div className="mx_SpaceButton_icon" />
+            <div className="mx_SpaceButton_icon">{icon}</div>
         </div>
     );
     if (space) {
@@ -143,6 +145,7 @@ export const SpaceButton = <T extends keyof HTMLElementTagNameMap>({
                 mx_SpaceButton_active: selected,
                 mx_SpaceButton_hasMenuOpen: menuDisplayed,
                 mx_SpaceButton_narrow: isNarrow,
+                mx_SpaceButton_withIcon: Boolean(icon),
             })}
             aria-label={label}
             title={!isNarrow || menuDisplayed ? undefined : label}
diff --git a/src/modules/ExtrasApi.ts b/src/modules/ExtrasApi.ts
index fb98e13280..b82e618bf3 100644
--- a/src/modules/ExtrasApi.ts
+++ b/src/modules/ExtrasApi.ts
@@ -5,12 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type SpacePanelItemRenderFunction, type ExtrasApi } from "@element-hq/element-web-module-api";
+import { type SpacePanelItemProps, type ExtrasApi } from "@element-hq/element-web-module-api";
 
 export class ElementWebExtrasApi implements ExtrasApi {
-    public spacePanelItems: SpacePanelItemRenderFunction[] = [];
+    public spacePanelItems: SpacePanelItemProps[] = [];
 
-    public addSpacePanelItem(renderer: SpacePanelItemRenderFunction): void {
-        this.spacePanelItems.push(renderer);
+    public addSpacePanelItem(item: SpacePanelItemProps): void {
+        this.spacePanelItems.push(item);
     }
 }
diff --git a/src/stores/spaces/index.ts b/src/stores/spaces/index.ts
index 5a775692c9..d05435b587 100644
--- a/src/stores/spaces/index.ts
+++ b/src/stores/spaces/index.ts
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type Room, type HierarchyRoom } from "matrix-js-sdk/src/matrix";
+import { type HierarchyRoom } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../languageHandler";
 
@@ -42,7 +42,7 @@ export const getMetaSpaceName = (spaceKey: MetaSpace, allRoomsInHome = false): s
     }
 };
 
-export type SpaceKey = MetaSpace | Room["roomId"];
+export type SpaceKey = string;
 
 export interface ISuggestedRoom extends HierarchyRoom {
     viaServers: string[];