diff --git a/src/renderer/features/sidebar/components/collapsed-sidebar.tsx b/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
index ea330c277..7e7383db3 100644
--- a/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
+++ b/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
@@ -15,6 +15,7 @@ import { ServerSelectorItems } from '/@/renderer/features/sidebar/components/ser
 import { getCollectionTo } from '/@/renderer/features/sidebar/components/sidebar-collection-list';
 import { SidebarIcon } from '/@/renderer/features/sidebar/components/sidebar-icon';
 import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
+import { AppRoute } from '/@/renderer/router/routes';
 import {
     SidebarItemType,
     useCollections,
@@ -141,15 +142,13 @@ export const CollapsedSidebar = () => {
                                                         component={Link}
                                                         key={collection.id}
                                                         leftSection={
-                                                            <Icon
-                                                                color="muted"
-                                                                icon={
+                                                            <SidebarIcon
+                                                                route={
                                                                     collection.type ===
                                                                     LibraryItem.ALBUM
-                                                                        ? 'itemAlbum'
-                                                                        : 'itemSong'
+                                                                        ? AppRoute.LIBRARY_ALBUMS
+                                                                        : AppRoute.LIBRARY_SONGS
                                                                 }
-                                                                size="sm"
                                                             />
                                                         }
                                                         to={to}
diff --git a/src/renderer/features/sidebar/components/sidebar-collection-list.tsx b/src/renderer/features/sidebar/components/sidebar-collection-list.tsx
index 4bb7e1ca1..e7d6fc9b5 100644
--- a/src/renderer/features/sidebar/components/sidebar-collection-list.tsx
+++ b/src/renderer/features/sidebar/components/sidebar-collection-list.tsx
@@ -5,6 +5,7 @@ import { Link, useLocation } from 'react-router';
 
 import styles from './sidebar-collection-list.module.css';
 
+import { SidebarIcon } from '/@/renderer/features/sidebar/components/sidebar-icon';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCollections, useSettingsStoreActions } from '/@/renderer/store';
 import { getFilterQueryStringFromSearchParams } from '/@/renderer/utils/query-params';
@@ -13,7 +14,6 @@ import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Button } from '/@/shared/components/button/button';
 import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
 import { Group } from '/@/shared/components/group/group';
-import { Icon } from '/@/shared/components/icon/icon';
 import { Popover } from '/@/shared/components/popover/popover';
 import { Stack } from '/@/shared/components/stack/stack';
 import { TextInput } from '/@/shared/components/text-input/text-input';
@@ -93,13 +93,15 @@ const CollectionRow = ({
             <Popover.Target>
                 <div className={clsx(styles.row, { [styles.rowActive]: isActive })}>
                     <Link className={styles.rowLink} to={to}>
-                        <Group className={styles.rowContent}>
-                            <Icon
-                                color={isActive ? 'primary' : 'muted'}
-                                icon={
-                                    collection.type === LibraryItem.ALBUM ? 'itemAlbum' : 'itemSong'
+                        <Group className={styles.rowContent} wrap="nowrap">
+                            <SidebarIcon
+                                active={isActive}
+                                route={
+                                    collection.type === LibraryItem.ALBUM
+                                        ? AppRoute.LIBRARY_ALBUMS
+                                        : AppRoute.LIBRARY_SONGS
                                 }
-                                size="md"
+                                size="1rem"
                             />
                             <Text className={styles.name} fw={500} size="md">
                                 {collection.name}
diff --git a/src/renderer/features/sidebar/components/sidebar-icon.module.css b/src/renderer/features/sidebar/components/sidebar-icon.module.css
new file mode 100644
index 000000000..a74550b3a
--- /dev/null
+++ b/src/renderer/features/sidebar/components/sidebar-icon.module.css
@@ -0,0 +1,4 @@
+.wrapper {
+    display: inline-flex;
+    flex-shrink: 0;
+}
diff --git a/src/renderer/features/sidebar/components/sidebar-icon.tsx b/src/renderer/features/sidebar/components/sidebar-icon.tsx
index 237e2118a..be6923937 100644
--- a/src/renderer/features/sidebar/components/sidebar-icon.tsx
+++ b/src/renderer/features/sidebar/components/sidebar-icon.tsx
@@ -26,6 +26,8 @@ import {
 } from 'react-icons/ri';
 import { generatePath, useLocation } from 'react-router';
 
+import styles from './sidebar-icon.module.css';
+
 import { AppRoute } from '/@/renderer/router/routes';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
@@ -38,48 +40,51 @@ interface SidebarIconProps {
 export const SidebarIcon = ({ active, route, size }: SidebarIconProps) => {
     const location = useLocation();
     const isActive = active !== undefined ? active : location.pathname === route;
-    switch (route) {
-        case AppRoute.HOME:
-            if (isActive) return <RiHome6Fill size={size} />;
-            return <RiHome6Line size={size} />;
-        case AppRoute.LIBRARY_ALBUM_ARTISTS:
-            if (isActive) return <RiUserVoiceFill size={size} />;
-            return <RiUserVoiceLine size={size} />;
-        case AppRoute.LIBRARY_ALBUMS:
-            if (isActive) return <RiAlbumFill size={size} />;
-            return <RiAlbumLine size={size} />;
-        case AppRoute.LIBRARY_ARTISTS:
-            if (isActive) return <RiUserVoiceFill size={size} />;
-            return <RiUserVoiceLine size={size} />;
-        case AppRoute.LIBRARY_FOLDERS:
-            if (isActive) return <RiFolder3Fill size={size} />;
-            return <RiFolder3Line size={size} />;
-        case AppRoute.LIBRARY_GENRES:
-            if (isActive) return <RiFlag2Fill size={size} />;
-            return <RiFlag2Line size={size} />;
-        case AppRoute.LIBRARY_SONGS:
-            if (isActive) return <RiMusic2Fill size={size} />;
-            return <RiMusic2Line size={size} />;
-        case AppRoute.NOW_PLAYING:
-            if (isActive) return <RiPlayFill size={size} />;
-            return <RiPlayLine size={size} />;
-        case AppRoute.PLAYLISTS:
-            if (isActive) return <RiPlayListFill size={size} />;
-            return <RiPlayListLine size={size} />;
-        case AppRoute.RADIO:
-            if (isActive) return <RiRadioFill size={size} />;
-            return <RiRadioLine size={size} />;
-        case AppRoute.SETTINGS:
-            if (isActive) return <RiSettings2Fill size={size} />;
-            return <RiSettings2Line size={size} />;
-        case generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG }):
-            if (isActive) return <RiSearchFill size={size} />;
-            return <RiSearchLine size={size} />;
-        default:
-            if (route.startsWith(AppRoute.FAVORITES)) {
-                if (isActive) return <RiHeartFill size={size} />;
-                return <RiHeartLine size={size} />;
-            }
-            return <RiHome6Line size={size} />;
-    }
+    const renderIcon = () => {
+        switch (route) {
+            case AppRoute.HOME:
+                if (isActive) return <RiHome6Fill size={size} />;
+                return <RiHome6Line size={size} />;
+            case AppRoute.LIBRARY_ALBUM_ARTISTS:
+                if (isActive) return <RiUserVoiceFill size={size} />;
+                return <RiUserVoiceLine size={size} />;
+            case AppRoute.LIBRARY_ALBUMS:
+                if (isActive) return <RiAlbumFill size={size} />;
+                return <RiAlbumLine size={size} />;
+            case AppRoute.LIBRARY_ARTISTS:
+                if (isActive) return <RiUserVoiceFill size={size} />;
+                return <RiUserVoiceLine size={size} />;
+            case AppRoute.LIBRARY_FOLDERS:
+                if (isActive) return <RiFolder3Fill size={size} />;
+                return <RiFolder3Line size={size} />;
+            case AppRoute.LIBRARY_GENRES:
+                if (isActive) return <RiFlag2Fill size={size} />;
+                return <RiFlag2Line size={size} />;
+            case AppRoute.LIBRARY_SONGS:
+                if (isActive) return <RiMusic2Fill size={size} />;
+                return <RiMusic2Line size={size} />;
+            case AppRoute.NOW_PLAYING:
+                if (isActive) return <RiPlayFill size={size} />;
+                return <RiPlayLine size={size} />;
+            case AppRoute.PLAYLISTS:
+                if (isActive) return <RiPlayListFill size={size} />;
+                return <RiPlayListLine size={size} />;
+            case AppRoute.RADIO:
+                if (isActive) return <RiRadioFill size={size} />;
+                return <RiRadioLine size={size} />;
+            case AppRoute.SETTINGS:
+                if (isActive) return <RiSettings2Fill size={size} />;
+                return <RiSettings2Line size={size} />;
+            case generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG }):
+                if (isActive) return <RiSearchFill size={size} />;
+                return <RiSearchLine size={size} />;
+            default:
+                if (route.startsWith(AppRoute.FAVORITES)) {
+                    if (isActive) return <RiHeartFill size={size} />;
+                    return <RiHeartLine size={size} />;
+                }
+                return <RiHome6Line size={size} />;
+        }
+    };
+    return <span className={styles.wrapper}>{renderIcon()}</span>;
 };