[🐴] Change up icons (#3938)

* Swap for chat icon

* Replace icons in left nav

* Replace icons in bottom bars

* Ditch feeds, drop size

* Fine tune

* Swap bell icon, improve alignment and size

1 files changed, 52 insertions, 109 deletions

diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index 1d27a10a4..b1f58afed 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -23,21 +23,6 @@ import {useSession} from '#/state/session'
 import {useComposerControls} from '#/state/shell/composer'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {
-  BellIcon,
-  BellIconSolid,
-  CogIcon,
-  CogIconSolid,
-  ComposeIcon2,
-  HashtagIcon,
-  HomeIcon,
-  HomeIconSolid,
-  ListIcon,
-  MagnifyingGlassIcon2,
-  MagnifyingGlassIcon2Solid,
-  UserIcon,
-  UserIconSolid,
-} from 'lib/icons'
 import {getCurrentRoute, isStateAtTabRoot, isTab} from 'lib/routes/helpers'
 import {makeProfileLink} from 'lib/routes/links'
 import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types'
@@ -48,8 +33,37 @@ import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
 import {PressableWithHover} from 'view/com/util/PressableWithHover'
 import {Text} from 'view/com/util/text/Text'
 import {UserAvatar} from 'view/com/util/UserAvatar'
-import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope'
-import {Envelope_Filled_Stroke2_Corner0_Rounded as EnvelopeFilled} from '#/components/icons/Envelope'
+import {
+  Bell_Filled_Corner0_Rounded as BellFilled,
+  Bell_Stroke2_Corner0_Rounded as Bell,
+} from '#/components/icons/Bell'
+import {
+  BulletList_Filled_Corner0_Rounded as ListFilled,
+  BulletList_Stroke2_Corner0_Rounded as List,
+} from '#/components/icons/BulletList'
+import {EditBig_Stroke2_Corner0_Rounded as EditBig} from '#/components/icons/EditBig'
+import {
+  Hashtag_Filled_Corner0_Rounded as HashtagFilled,
+  Hashtag_Stroke2_Corner0_Rounded as Hashtag,
+} from '#/components/icons/Hashtag'
+import {
+  HomeOpen_Filled_Corner0_Rounded as HomeFilled,
+  HomeOpen_Stoke2_Corner0_Rounded as Home,
+} from '#/components/icons/HomeOpen'
+import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as MagnifyingGlassFilled} from '#/components/icons/MagnifyingGlass'
+import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2'
+import {
+  Message_Stroke2_Corner0_Rounded as Message,
+  Message_Stroke2_Corner0_Rounded_Filled as MessageFilled,
+} from '#/components/icons/Message'
+import {
+  SettingsGear2_Filled_Corner0_Rounded as SettingsFilled,
+  SettingsGear2_Stroke2_Corner0_Rounded as Settings,
+} from '#/components/icons/SettingsGear2'
+import {
+  UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
+  UserCircle_Stroke2_Corner0_Rounded as UserCircle,
+} from '#/components/icons/UserCircle'
 import {router} from '../../../routes'
 
 function ProfileCard() {
@@ -256,11 +270,7 @@ function ComposeBtn() {
         accessibilityLabel={_(msg`New post`)}
         accessibilityHint="">
         <View style={styles.newPostBtnIconWrapper}>
-          <ComposeIcon2
-            size={19}
-            strokeWidth={2}
-            style={styles.newPostBtnLabel}
-          />
+          <EditBig width={19} style={styles.newPostBtnLabel} />
         </View>
         <Text type="button" style={styles.newPostBtnLabel}>
           <Trans context="action">New Post</Trans>
@@ -278,6 +288,7 @@ export function DesktopLeftNav() {
   const numUnreadNotifications = useUnreadNotifications()
   const numUnreadMessages = useUnreadMessageCount()
   const gate = useGate()
+  const iconWidth = 28
 
   if (!hasSession && !isDesktop) {
     return null
@@ -305,134 +316,66 @@ export function DesktopLeftNav() {
 
           <NavItem
             href="/"
-            icon={<HomeIcon size={isDesktop ? 24 : 28} style={pal.text} />}
-            iconFilled={
-              <HomeIconSolid
-                strokeWidth={4}
-                size={isDesktop ? 24 : 28}
-                style={pal.text}
-              />
-            }
+            icon={<Home width={iconWidth} style={pal.text} />}
+            iconFilled={<HomeFilled width={iconWidth} style={pal.text} />}
             label={_(msg`Home`)}
           />
           <NavItem
             href="/search"
-            icon={
-              <MagnifyingGlassIcon2
-                strokeWidth={2}
-                size={isDesktop ? 24 : 26}
-                style={pal.text}
-              />
-            }
+            icon={<MagnifyingGlass style={pal.text} width={iconWidth} />}
             iconFilled={
-              <MagnifyingGlassIcon2Solid
-                strokeWidth={2}
-                size={isDesktop ? 24 : 26}
-                style={pal.text}
-              />
+              <MagnifyingGlassFilled style={pal.text} width={iconWidth} />
             }
             label={_(msg`Search`)}
           />
           <NavItem
             href="/notifications"
             count={numUnreadNotifications}
-            icon={
-              <BellIcon
-                strokeWidth={2}
-                size={isDesktop ? 24 : 26}
-                style={pal.text}
-              />
-            }
-            iconFilled={
-              <BellIconSolid
-                strokeWidth={1.5}
-                size={isDesktop ? 24 : 26}
-                style={pal.text}
-              />
-            }
+            icon={<Bell width={iconWidth} style={pal.text} />}
+            iconFilled={<BellFilled width={iconWidth} style={pal.text} />}
             label={_(msg`Notifications`)}
           />
           {gate('dms') && (
             <NavItem
               href="/messages"
               count={numUnreadMessages.numUnread}
-              icon={<Envelope style={pal.text} width={isDesktop ? 26 : 30} />}
-              iconFilled={
-                <EnvelopeFilled style={pal.text} width={isDesktop ? 26 : 30} />
-              }
+              icon={<Message style={pal.text} width={iconWidth} />}
+              iconFilled={<MessageFilled style={pal.text} width={iconWidth} />}
               label={_(msg`Messages`)}
             />
           )}
           <NavItem
             href="/feeds"
             icon={
-              <HashtagIcon
-                strokeWidth={2.25}
+              <Hashtag
                 style={pal.text as FontAwesomeIconStyle}
-                size={isDesktop ? 24 : 28}
+                width={iconWidth}
               />
             }
             iconFilled={
-              <HashtagIcon
-                strokeWidth={4}
+              <HashtagFilled
                 style={pal.text as FontAwesomeIconStyle}
-                size={isDesktop ? 24 : 28}
+                width={iconWidth}
               />
             }
             label={_(msg`Feeds`)}
           />
           <NavItem
             href="/lists"
-            icon={
-              <ListIcon
-                style={pal.text}
-                size={isDesktop ? 26 : 30}
-                strokeWidth={2}
-              />
-            }
-            iconFilled={
-              <ListIcon
-                style={pal.text}
-                size={isDesktop ? 26 : 30}
-                strokeWidth={3}
-              />
-            }
+            icon={<List style={pal.text} width={iconWidth} />}
+            iconFilled={<ListFilled style={pal.text} width={iconWidth} />}
             label={_(msg`Lists`)}
           />
           <NavItem
             href={currentAccount ? makeProfileLink(currentAccount) : '/'}
-            icon={
-              <UserIcon
-                strokeWidth={1.75}
-                size={isDesktop ? 28 : 30}
-                style={pal.text}
-              />
-            }
-            iconFilled={
-              <UserIconSolid
-                strokeWidth={1.75}
-                size={isDesktop ? 28 : 30}
-                style={pal.text}
-              />
-            }
+            icon={<UserCircle width={iconWidth} style={pal.text} />}
+            iconFilled={<UserCircleFilled width={iconWidth} style={pal.text} />}
             label={_(msg`Profile`)}
           />
           <NavItem
             href="/settings"
-            icon={
-              <CogIcon
-                strokeWidth={1.75}
-                size={isDesktop ? 28 : 32}
-                style={pal.text}
-              />
-            }
-            iconFilled={
-              <CogIconSolid
-                strokeWidth={1.5}
-                size={isDesktop ? 28 : 32}
-                style={pal.text}
-              />
-            }
+            icon={<Settings width={iconWidth} style={pal.text} />}
+            iconFilled={<SettingsFilled width={iconWidth} style={pal.text} />}
             label={_(msg`Settings`)}
           />
 
@@ -494,7 +437,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     width: 28,
-    height: 28,
+    height: 24,
     marginTop: 2,
     zIndex: 1,
   },