From 67bf76b03576079622f093a8714a746040363354 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Sat, 4 Oct 2025 21:17:41 +0200
Subject: [PATCH] pl-fe: replace some icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 packages/pl-fe/package.json                   |  1 +
 .../src/components/dropdown-navigation.tsx    | 58 ++++++-------
 .../src/components/sidebar-navigation.tsx     | 82 ++++++++++---------
 .../pl-fe/src/components/thumb-navigation.tsx | 22 ++---
 packages/pl-fe/src/styles/new/layout.scss     | 10 +--
 pnpm-lock.yaml                                | 10 ++-
 6 files changed, 100 insertions(+), 83 deletions(-)

diff --git a/packages/pl-fe/package.json b/packages/pl-fe/package.json
index 617cbaeff..1436ecfb6 100644
--- a/packages/pl-fe/package.json
+++ b/packages/pl-fe/package.json
@@ -55,6 +55,7 @@
     "@lexical/selection": "^0.29.0",
     "@lexical/utils": "^0.29.0",
     "@mkljczk/url-purify": "^0.0.3",
+    "@phosphor-icons/core": "^2.1.1",
     "@reach/combobox": "^0.18.0",
     "@reach/rect": "^0.18.0",
     "@reach/tabs": "^0.18.0",
diff --git a/packages/pl-fe/src/components/dropdown-navigation.tsx b/packages/pl-fe/src/components/dropdown-navigation.tsx
index baf117a79..c88f6ec13 100644
--- a/packages/pl-fe/src/components/dropdown-navigation.tsx
+++ b/packages/pl-fe/src/components/dropdown-navigation.tsx
@@ -149,7 +149,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
   };
 
   const renderAccount = (account: AccountEntity) => (
-    <a href='#' onClick={handleSwitchAccount(account)} key={account.id}>
+    <a className='⁂-dropdown-navigation__account-switcher__account' href='#' onClick={handleSwitchAccount(account)} key={account.id}>
       <div>
         <Account account={account} showAccountHoverCard={false} withRelationship={false} withLinkToProfile={false} />
       </div>
@@ -222,7 +222,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
 
               <DropdownNavigationLink
                 to={`/@${account.acct}`}
-                icon={require('@tabler/icons/outline/user.svg')}
+                icon={require('@phosphor-icons/core/regular/user.svg')}
                 text={intl.formatMessage(messages.profile)}
                 onClick={closeSidebar}
               />
@@ -230,7 +230,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
               {(account.locked || followRequestsCount > 0) && (
                 <DropdownNavigationLink
                   to='/follow_requests'
-                  icon={require('@tabler/icons/outline/user-plus.svg')}
+                  icon={require('@phosphor-icons/core/regular/user-plus.svg')}
                   text={intl.formatMessage(messages.followRequests)}
                   onClick={closeSidebar}
                 />
@@ -239,7 +239,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
               {(interactionRequestsCount > 0) && (
                 <DropdownNavigationLink
                   to='/interaction_requests'
-                  icon={require('@tabler/icons/outline/flag-question.svg')}
+                  icon={require('@phosphor-icons/core/regular/heart-half.svg')}
                   text={intl.formatMessage(messages.interactionRequests)}
                   onClick={closeSidebar}
                 />
@@ -248,7 +248,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
               {features.conversations && (
                 <DropdownNavigationLink
                   to='/conversations'
-                  icon={require('@tabler/icons/outline/mail.svg')}
+                  icon={require('@phosphor-icons/core/regular/envelope-simple.svg')}
                   text={intl.formatMessage(messages.conversations)}
                   onClick={closeSidebar}
                 />
@@ -257,7 +257,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
               {features.bookmarks && (
                 <DropdownNavigationLink
                   to='/bookmarks'
-                  icon={require('@tabler/icons/outline/bookmark.svg')}
+                  icon={require('@phosphor-icons/core/regular/bookmarks.svg')}
                   text={intl.formatMessage(messages.bookmarks)}
                   onClick={closeSidebar}
                 />
@@ -266,7 +266,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
               {features.groups && (
                 <DropdownNavigationLink
                   to='/groups'
-                  icon={require('@tabler/icons/outline/circles.svg')}
+                  icon={require('@phosphor-icons/core/regular/users-three.svg')}
                   text={intl.formatMessage(messages.groups)}
                   onClick={closeSidebar}
                 />
@@ -275,7 +275,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
               {features.lists && (
                 <DropdownNavigationLink
                   to='/lists'
-                  icon={require('@tabler/icons/outline/list.svg')}
+                  icon={require('@phosphor-icons/core/regular/list-dashes.svg')}
                   text={intl.formatMessage(messages.lists)}
                   onClick={closeSidebar}
                 />
@@ -284,7 +284,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
               {features.circles && (
                 <DropdownNavigationLink
                   to='/circles'
-                  icon={require('@tabler/icons/outline/chart-circles.svg')}
+                  icon={require('@phosphor-icons/core/regular/circles-three.svg')}
                   text={intl.formatMessage(messages.circles)}
                   onClick={closeSidebar}
                 />
@@ -293,7 +293,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
               {features.events && (
                 <DropdownNavigationLink
                   to='/events'
-                  icon={require('@tabler/icons/outline/calendar-event.svg')}
+                  icon={require('@phosphor-icons/core/regular/calendar-dot.svg')}
                   text={intl.formatMessage(messages.events)}
                   onClick={closeSidebar}
                 />
@@ -302,7 +302,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
               {features.profileDirectory && (
                 <DropdownNavigationLink
                   to='/directory'
-                  icon={require('@tabler/icons/outline/address-book.svg')}
+                  icon={require('@phosphor-icons/core/regular/address-book.svg')}
                   text={intl.formatMessage(messages.profileDirectory)}
                   onClick={closeSidebar}
                 />
@@ -311,7 +311,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
               {scheduledStatusCount > 0 && (
                 <DropdownNavigationLink
                   to='/scheduled_statuses'
-                  icon={require('@tabler/icons/outline/calendar-stats.svg')}
+                  icon={require('@phosphor-icons/core/regular/hourglass.svg')}
                   text={intl.formatMessage(messages.scheduledStatuses)}
                   onClick={closeSidebar}
                 />
@@ -320,7 +320,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
               {draftCount > 0 && (
                 <DropdownNavigationLink
                   to='/draft_statuses'
-                  icon={require('@tabler/icons/outline/notes.svg')}
+                  icon={require('@phosphor-icons/core/regular/pencil-simple.svg')}
                   text={intl.formatMessage(messages.drafts)}
                   onClick={closeSidebar}
                 />
@@ -331,7 +331,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
 
                 <DropdownNavigationLink
                   to='/timeline/local'
-                  icon={features.federating ? require('@tabler/icons/outline/affiliate.svg') : require('@tabler/icons/outline/world.svg')}
+                  icon={require('@phosphor-icons/core/regular/planet.svg')}
                   text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
                   onClick={closeSidebar}
                 />
@@ -339,7 +339,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
                 {features.bubbleTimeline && (
                   <DropdownNavigationLink
                     to='/timeline/bubble'
-                    icon={require('@tabler/icons/outline/chart-bubble.svg')}
+                    icon={require('@phosphor-icons/core/regular/graph.svg')}
                     text={<FormattedMessage id='tabs_bar.bubble' defaultMessage='Bubble' />}
                     onClick={closeSidebar}
                   />
@@ -348,7 +348,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
                 {features.federating && (
                   <DropdownNavigationLink
                     to='/timeline/fediverse'
-                    icon={require('@tabler/icons/outline/topology-star-ring-3.svg')}
+                    icon={require('@phosphor-icons/core/regular/fediverse-logo.svg')}
                     text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
                     onClick={closeSidebar}
                   />
@@ -359,7 +359,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
 
               <DropdownNavigationLink
                 to='/settings/preferences'
-                icon={require('@tabler/icons/outline/settings.svg')}
+                icon={require('@phosphor-icons/core/regular/sliders-horizontal.svg')}
                 text={intl.formatMessage(messages.preferences)}
                 onClick={closeSidebar}
               />
@@ -367,7 +367,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
               {features.followedHashtagsList && (
                 <DropdownNavigationLink
                   to='/followed_tags'
-                  icon={require('@tabler/icons/outline/hash.svg')}
+                  icon={require('@phosphor-icons/core/regular/hash.svg')}
                   text={intl.formatMessage(messages.followedTags)}
                   onClick={closeSidebar}
                 />
@@ -376,7 +376,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
               {(account.is_admin || account.is_moderator) && (
                 <DropdownNavigationLink
                   to='/admin'
-                  icon={require('@tabler/icons/outline/dashboard.svg')}
+                  icon={require('@phosphor-icons/core/regular/gauge.svg')}
                   text={intl.formatMessage(messages.dashboard)}
                   onClick={closeSidebar}
                   // count={dashboardCount} WIP
@@ -387,7 +387,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
 
               <DropdownNavigationLink
                 to='/logout'
-                icon={require('@tabler/icons/outline/logout.svg')}
+                icon={require('@phosphor-icons/core/regular/sign-out.svg')}
                 text={intl.formatMessage(messages.logout)}
                 onClick={onClickLogOut}
               />
@@ -396,7 +396,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
 
               <DropdownNavigationLink
                 href={sourceCode.url}
-                icon={require('@tabler/icons/outline/code.svg')}
+                icon={require('@phosphor-icons/core/regular/code.svg')}
                 text={intl.formatMessage(messages.sourceCode)}
                 onClick={closeSidebar}
               />
@@ -414,7 +414,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
                   </Text>
 
                   <Icon
-                    src={require('@tabler/icons/outline/chevron-down.svg')}
+                    src={require('@phosphor-icons/core/regular/caret-down.svg')}
                   />
                 </button>
 
@@ -423,7 +423,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
                     {otherAccounts.map(account => renderAccount(account))}
 
                     <NavLink className='⁂-dropdown-navigation__account-switcher__add' to='/login/add' onClick={handleClose}>
-                      <Icon src={require('@tabler/icons/outline/plus.svg')} />
+                      <Icon src={require('@phosphor-icons/core/regular/plus.svg')} />
                       <Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
                     </NavLink>
                   </div>
@@ -436,7 +436,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
             {features.publicTimeline && !restrictUnauth.timelines.local && <>
               <DropdownNavigationLink
                 to='/timeline/local'
-                icon={features.federating ? require('@tabler/icons/outline/affiliate.svg') : require('@tabler/icons/outline/world.svg')}
+                icon={require('@phosphor-icons/core/regular/planet.svg')}
                 text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
                 onClick={closeSidebar}
               />
@@ -444,7 +444,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
               {features.bubbleTimeline && !restrictUnauth.timelines.bubble && (
                 <DropdownNavigationLink
                   to='/timeline/bubble'
-                  icon={require('@tabler/icons/outline/chart-bubble.svg')}
+                  icon={require('@phosphor-icons/core/regular/graph.svg')}
                   text={<FormattedMessage id='tabs_bar.bubble' defaultMessage='Bubble' />}
                   onClick={closeSidebar}
                 />
@@ -453,7 +453,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
               {features.federating && !restrictUnauth.timelines.federated && (
                 <DropdownNavigationLink
                   to='/timeline/fediverse'
-                  icon={require('@tabler/icons/outline/topology-star-ring-3.svg')}
+                  icon={require('@phosphor-icons/core/regular/fediverse-logo.svg')}
                   text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
                   onClick={closeSidebar}
                 />
@@ -464,7 +464,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
 
             <DropdownNavigationLink
               to='/login'
-              icon={require('@tabler/icons/outline/login.svg')}
+              icon={require('@phosphor-icons/core/regular/sign-in.svg')}
               text={intl.formatMessage(messages.login)}
               onClick={closeSidebar}
             />
@@ -472,7 +472,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
             {isOpen && (
               <DropdownNavigationLink
                 to='/signup'
-                icon={require('@tabler/icons/outline/user-plus.svg')}
+                icon={require('@phosphor-icons/core/regular/user-plus.svg')}
                 text={intl.formatMessage(messages.register)}
                 onClick={closeSidebar}
               />
@@ -482,7 +482,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
 
             <DropdownNavigationLink
               href={sourceCode.url}
-              icon={require('@tabler/icons/outline/code.svg')}
+              icon={require('@phosphor-icons/core/regular/code.svg')}
               text={intl.formatMessage(messages.sourceCode)}
               onClick={closeSidebar}
             />
diff --git a/packages/pl-fe/src/components/sidebar-navigation.tsx b/packages/pl-fe/src/components/sidebar-navigation.tsx
index b7ca67b2e..4ba6b20b2 100644
--- a/packages/pl-fe/src/components/sidebar-navigation.tsx
+++ b/packages/pl-fe/src/components/sidebar-navigation.tsx
@@ -86,7 +86,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
         menu.push({
           to: '/conversations',
           text: intl.formatMessage(messages.conversations),
-          icon: require('@tabler/icons/outline/mail.svg'),
+          icon: require('@phosphor-icons/core/regular/envelope-simple.svg'),
         });
       }
 
@@ -94,7 +94,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
         menu.push({
           to: '/follow_requests',
           text: intl.formatMessage(messages.followRequests),
-          icon: require('@tabler/icons/outline/user-plus.svg'),
+          icon: require('@phosphor-icons/core/regular/user-plus.svg'),
           count: followRequestsCount,
         });
       }
@@ -103,7 +103,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
         menu.push({
           to: '/interaction_requests',
           text: intl.formatMessage(messages.interactionRequests),
-          icon: require('@tabler/icons/outline/flag-question.svg'),
+          icon: require('@phosphor-icons/core/regular/heart-half.svg'),
           count: interactionRequestsCount,
         });
       }
@@ -112,7 +112,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
         menu.push({
           to: '/bookmarks',
           text: intl.formatMessage(messages.bookmarks),
-          icon: require('@tabler/icons/outline/bookmark.svg'),
+          icon: require('@phosphor-icons/core/regular/bookmarks.svg'),
         });
       }
 
@@ -120,7 +120,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
         menu.push({
           to: '/lists',
           text: intl.formatMessage(messages.lists),
-          icon: require('@tabler/icons/outline/list.svg'),
+          icon: require('@phosphor-icons/core/regular/list-dashes.svg'),
         });
       }
 
@@ -128,7 +128,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
         menu.push({
           to: '/circles',
           text: intl.formatMessage(messages.circles),
-          icon: require('@tabler/icons/outline/chart-circles.svg'),
+          icon: require('@phosphor-icons/core/regular/circles-three.svg'),
         });
       }
 
@@ -136,7 +136,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
         menu.push({
           to: '/events',
           text: intl.formatMessage(messages.events),
-          icon: require('@tabler/icons/outline/calendar-event.svg'),
+          icon: require('@phosphor-icons/core/regular/calendar-dot.svg'),
         });
       }
 
@@ -144,7 +144,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
         menu.push({
           to: '/directory',
           text: intl.formatMessage(messages.profileDirectory),
-          icon: require('@tabler/icons/outline/address-book.svg'),
+          icon: require('@phosphor-icons/core/regular/address-book.svg'),
         });
       }
 
@@ -152,14 +152,14 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
         menu.push({
           to: '/followed_tags',
           text: intl.formatMessage(messages.followedTags),
-          icon: require('@tabler/icons/outline/hash.svg'),
+          icon: require('@phosphor-icons/core/regular/hash.svg'),
         });
       }
 
       if (scheduledStatusCount > 0) {
         menu.push({
           to: '/scheduled_statuses',
-          icon: require('@tabler/icons/outline/calendar-stats.svg'),
+          icon: require('@phosphor-icons/core/regular/hourglass.svg'),
           text: intl.formatMessage(messages.scheduledStatuses),
           count: scheduledStatusCount,
         });
@@ -168,7 +168,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
       if (draftCount > 0) {
         menu.push({
           to: '/draft_statuses',
-          icon: require('@tabler/icons/outline/notes.svg'),
+          icon: require('@phosphor-icons/core/regular/pencil-simple.svg'),
           text: intl.formatMessage(messages.drafts),
           count: draftCount,
         });
@@ -177,18 +177,18 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
       menu.push(null);
 
       menu.push({
-        icon: require('@tabler/icons/outline/help-circle.svg'),
+        icon: require('@phosphor-icons/core/regular/question.svg'),
         text: intl.formatMessage(messages.help),
         items: [
           {
             action: () => openModal('HOTKEYS'),
-            icon: require('@tabler/icons/outline/keyboard.svg'),
+            icon: require('@phosphor-icons/core/regular/keyboard.svg'),
             text: intl.formatMessage(messages.keyboardShortcuts),
           },
           {
             href: sourceCode.url,
             target: '_blank',
-            icon: require('@tabler/icons/outline/code.svg'),
+            icon: require('@phosphor-icons/core/regular/code.svg'),
             text: intl.formatMessage(messages.sourceCode),
           },
         ],
@@ -218,7 +218,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
               ) : (
                 <Account
                   account={account}
-                  action={<Icon src={require('@tabler/icons/outline/chevron-down.svg')} className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500' />}
+                  action={<Icon src={require('@phosphor-icons/core/regular/caret-down.svg')} className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500' />}
                   disabled
                   withLinkToProfile={false}
                 />
@@ -236,15 +236,16 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
       <Stack space={1.5}>
         <SidebarNavigationLink
           to='/'
-          icon={require('@tabler/icons/outline/home.svg')}
-          activeIcon={require('@tabler/icons/filled/home.svg')}
+          icon={require('@phosphor-icons/core/regular/house.svg')}
+          activeIcon={require('@phosphor-icons/core/fill/house-fill.svg')}
           text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />}
           shrink={shrink}
         />
 
         <SidebarNavigationLink
           to='/search'
-          icon={require('@tabler/icons/outline/search.svg')}
+          icon={require('@phosphor-icons/core/regular/magnifying-glass.svg')}
+          activeIcon={require('@phosphor-icons/core/fill/magnifying-glass-fill.svg')}
           text={<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />}
           shrink={shrink}
         />
@@ -253,8 +254,8 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
           <>
             <SidebarNavigationLink
               to='/notifications'
-              icon={require('@tabler/icons/outline/bell.svg')}
-              activeIcon={require('@tabler/icons/filled/bell.svg')}
+              icon={require('@phosphor-icons/core/regular/bell-simple.svg')}
+              activeIcon={require('@phosphor-icons/core/fill/bell-simple-fill.svg')}
               count={notificationCount}
               text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
               shrink={shrink}
@@ -263,7 +264,8 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
             {features.chats && (
               <SidebarNavigationLink
                 to='/chats'
-                icon={require('@tabler/icons/outline/messages.svg')}
+                icon={require('@phosphor-icons/core/regular/chats-teardrop.svg')}
+                activeIcon={require('@phosphor-icons/core/fill/chats-teardrop-fill.svg')}
                 count={unreadChatsCount}
                 countMax={9}
                 text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
@@ -274,8 +276,8 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
             {!features.chats && features.conversations && (
               <SidebarNavigationLink
                 to='/conversations'
-                icon={require('@tabler/icons/outline/mail.svg')}
-                activeIcon={require('@tabler/icons/filled/mail.svg')}
+                icon={require('@phosphor-icons/core/regular/envelope-simple.svg')}
+                activeIcon={require('@phosphor-icons/core/fill/envelope-simple-fill.svg')}
                 text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Direct messages' />}
                 shrink={shrink}
               />
@@ -284,8 +286,8 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
             {features.groups && (
               <SidebarNavigationLink
                 to='/groups'
-                icon={require('@tabler/icons/outline/circles.svg')}
-                activeIcon={require('@tabler/icons/filled/circles.svg')}
+                icon={require('@phosphor-icons/core/regular/users-three.svg')}
+                activeIcon={require('@phosphor-icons/core/fill/users-three-fill.svg')}
                 text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
                 shrink={shrink}
               />
@@ -293,16 +295,16 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
 
             <SidebarNavigationLink
               to={`/@${account.acct}`}
-              icon={require('@tabler/icons/outline/user.svg')}
-              activeIcon={require('@tabler/icons/filled/user.svg')}
+              icon={require('@phosphor-icons/core/regular/user.svg')}
+              activeIcon={require('@phosphor-icons/core/fill/user-fill.svg')}
               text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />}
               shrink={shrink}
             />
 
             <SidebarNavigationLink
               to='/settings'
-              icon={require('@tabler/icons/outline/settings.svg')}
-              activeIcon={require('@tabler/icons/filled/settings.svg')}
+              icon={require('@phosphor-icons/core/regular/sliders-horizontal.svg')}
+              activeIcon={require('@phosphor-icons/core/fill/sliders-horizontal-fill.svg')}
               text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />}
               shrink={shrink}
             />
@@ -310,7 +312,8 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
             {(account.is_admin || account.is_moderator) && (
               <SidebarNavigationLink
                 to='/pl-fe/admin'
-                icon={require('@tabler/icons/outline/dashboard.svg')}
+                icon={require('@phosphor-icons/core/regular/gauge.svg')}
+                activeIcon={require('@phosphor-icons/core/fill/gauge-fill.svg')}
                 count={dashboardCount}
                 text={<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />}
                 shrink={shrink}
@@ -324,8 +327,8 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
             {(account || !restrictUnauth.timelines.local) && (
               <SidebarNavigationLink
                 to='/timeline/local'
-                icon={features.federating ? require('@tabler/icons/outline/affiliate.svg') : require('@tabler/icons/outline/world.svg')}
-                activeIcon={features.federating ? require('@tabler/icons/filled/affiliate.svg') : undefined}
+                icon={require('@phosphor-icons/core/regular/planet.svg')}
+                activeIcon={require('@phosphor-icons/core/fill/planet-fill.svg')}
                 text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
                 shrink={shrink}
               />
@@ -334,8 +337,8 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
             {(features.bubbleTimeline && (account || !restrictUnauth.timelines.bubble)) && (
               <SidebarNavigationLink
                 to='/timeline/bubble'
-                icon={require('@tabler/icons/outline/chart-bubble.svg')}
-                activeIcon={require('@tabler/icons/filled/chart-bubble.svg')}
+                icon={require('@phosphor-icons/core/regular/graph.svg')}
+                activeIcon={require('@phosphor-icons/core/fill/graph-fill.svg')}
                 text={<FormattedMessage id='tabs_bar.bubble' defaultMessage='Bubble' />}
                 shrink={shrink}
               />
@@ -344,7 +347,8 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
             {(features.federating && (account || !restrictUnauth.timelines.federated)) && (
               <SidebarNavigationLink
                 to='/timeline/fediverse'
-                icon={require('@tabler/icons/outline/topology-star-ring-3.svg')}
+                icon={require('@phosphor-icons/core/regular/fediverse-logo.svg')}
+                activeIcon={require('@phosphor-icons/core/fill/fediverse-logo-fill.svg')}
                 text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
                 shrink={shrink}
               />
@@ -355,7 +359,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
         {menu.length > 0 && (
           <DropdownMenu items={menu} placement='top' width='16rem'>
             <SidebarNavigationLink
-              icon={require('@tabler/icons/outline/dots-circle-horizontal.svg')}
+              icon={require('@phosphor-icons/core/regular/dots-three-circle.svg')}
               text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />}
               shrink={shrink}
             />
@@ -366,14 +370,16 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
           <Stack className='xl:hidden' space={1.5}>
             <SidebarNavigationLink
               to='/login'
-              icon={require('@tabler/icons/outline/login.svg')}
+              icon={require('@phosphor-icons/core/regular/sign-in.svg')}
+              activeIcon={require('@phosphor-icons/core/fill/sign-in-fill.svg')}
               text={<FormattedMessage id='account.login' defaultMessage='Log in' />}
               shrink={shrink}
             />
 
             {isOpen && <SidebarNavigationLink
               to='/signup'
-              icon={require('@tabler/icons/outline/user-plus.svg')}
+              icon={require('@phosphor-icons/core/regular/user-plus.svg')}
+              activeIcon={require('@phosphor-icons/core/fill/user-plus-fill.svg')}
               text={<FormattedMessage id='account.register' defaultMessage='Sign up' />}
               shrink={shrink}
             />}
diff --git a/packages/pl-fe/src/components/thumb-navigation.tsx b/packages/pl-fe/src/components/thumb-navigation.tsx
index 751cc574d..b75a87d23 100644
--- a/packages/pl-fe/src/components/thumb-navigation.tsx
+++ b/packages/pl-fe/src/components/thumb-navigation.tsx
@@ -57,7 +57,7 @@ const ThumbNavigation: React.FC = React.memo((): JSX.Element => {
       onClick={handleOpenComposeModal}
       title={intl.formatMessage(messages.compose)}
     >
-      <Icon src={require('@tabler/icons/outline/square-rounded-plus.svg')} />
+      <Icon src={require('@phosphor-icons/core/regular/plus-square.svg')} />
     </button>
   );
 
@@ -68,12 +68,12 @@ const ThumbNavigation: React.FC = React.memo((): JSX.Element => {
         onClick={isSidebarOpen ? closeSidebar : openSidebar}
         title={intl.formatMessage(isSidebarOpen ? messages.closeSidebar : messages.openSidebar)}
       >
-        <Icon src={require('@tabler/icons/outline/menu-2.svg')} />
+        <Icon src={require('@phosphor-icons/core/regular/list.svg')} />
       </button>
 
       <ThumbNavigationLink
-        src={require('@tabler/icons/outline/home.svg')}
-        activeSrc={require('@tabler/icons/filled/home.svg')}
+        src={require('@phosphor-icons/core/regular/house.svg')}
+        activeSrc={require('@phosphor-icons/core/fill/house-fill.svg')}
         text={intl.formatMessage(messages.home)}
         to='/'
         exact
@@ -81,8 +81,8 @@ const ThumbNavigation: React.FC = React.memo((): JSX.Element => {
 
       {/* {features.groups && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/outline/circles.svg')}
-          activeSrc={require('@tabler/icons/filled/circles.svg')}
+          src={require('@phosphor-icons/core/regular/users-three.svg')}
+          activeSrc={require('@phosphor-icons/core/fill/users-three-fill.svg')}
           text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
           to='/groups'
           exact
@@ -93,7 +93,8 @@ const ThumbNavigation: React.FC = React.memo((): JSX.Element => {
 
       {(!standalone || account) && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/outline/search.svg')}
+          src={require('@phosphor-icons/core/regular/magnifying-glass.svg')}
+          activeSrc={require('@phosphor-icons/core/fill/magnifying-glass-fill.svg')}
           text={intl.formatMessage(messages.search)}
           to='/search'
           exact
@@ -102,8 +103,8 @@ const ThumbNavigation: React.FC = React.memo((): JSX.Element => {
 
       {account && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/outline/bell.svg')}
-          activeSrc={require('@tabler/icons/filled/bell.svg')}
+          src={require('@phosphor-icons/core/regular/bell-simple.svg')}
+          activeSrc={require('@phosphor-icons/core/fill/bell-simple-fill.svg')}
           text={intl.formatMessage(messages.notifications)}
           to='/notifications'
           exact
@@ -114,7 +115,8 @@ const ThumbNavigation: React.FC = React.memo((): JSX.Element => {
       {account && features.chats && (
         <>
           <ThumbNavigationLink
-            src={require('@tabler/icons/outline/messages.svg')}
+            src={require('@phosphor-icons/core/regular/chats-teardrop.svg')}
+            activeSrc={require('@phosphor-icons/core/fill/chats-teardrop-fill.svg')}
             text={intl.formatMessage(messages.chats)}
             to='/chats'
             exact
diff --git a/packages/pl-fe/src/styles/new/layout.scss b/packages/pl-fe/src/styles/new/layout.scss
index cece93181..fb356889c 100644
--- a/packages/pl-fe/src/styles/new/layout.scss
+++ b/packages/pl-fe/src/styles/new/layout.scss
@@ -80,13 +80,13 @@ body {
 
     &__accounts {
       @apply border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800;
+    }
 
-      > a {
-        @apply block py-2;
+    &__account {
+      @apply block py-2;
 
-        > div {
-          @apply pointer-events-none;
-        }
+      > div {
+        @apply pointer-events-none;
       }
     }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6129cc3f3..95a7da6a1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -166,6 +166,9 @@ importers:
       '@mkljczk/url-purify':
         specifier: ^0.0.3
         version: 0.0.3
+      '@phosphor-icons/core':
+        specifier: ^2.1.1
+        version: 2.1.1
       '@reach/combobox':
         specifier: ^0.18.0
         version: 0.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1962,6 +1965,9 @@ packages:
     resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
     engines: {node: '>= 10.0.0'}
 
+  '@phosphor-icons/core@2.1.1':
+    resolution: {integrity: sha512-v4ARvrip4qBCImOE5rmPUylOEK4iiED9ZyKjcvzuezqMaiRASCHKcRIuvvxL/twvLpkfnEODCOJp5dM4eZilxQ==}
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -8211,6 +8217,8 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.1
     optional: true
 
+  '@phosphor-icons/core@2.1.1': {}
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -10272,7 +10280,7 @@ snapshots:
       tinyglobby: 0.2.14
       unrs-resolver: 1.11.1
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.38.0(eslint@8.57.1)(typescript@5.9.2))(eslint-import-resolver-typescript@4.4.4)(eslint@8.57.1)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.38.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-typescript@4.4.4)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color