From 12de2ea8d15e31b19a80e285df8599d80526199e Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Mon, 12 Feb 2024 13:16:40 -0800
Subject: [PATCH] [C-3804 C-3794] Fix native icon colors and size (#7560)

---
 .../harmony/src/foundations/color/semantic.ts |   1 +
 .../mobile/src/components/core/IconButton.tsx | 104 ------------------
 packages/mobile/src/components/core/index.ts  |   1 -
 .../details-tile/DetailsTileActionButtons.tsx |  38 ++++---
 .../components/feed-tip-tile/FeedTipTile.tsx  |  18 +--
 .../lineup-tile/LineupTileActionButtons.tsx   |  40 ++++---
 .../now-playing-drawer/ActionsBar.tsx         |  24 ++--
 .../now-playing-drawer/AudioControls.tsx      |  21 ++--
 .../now-playing-drawer/PlaybackRateButton.tsx |  11 +-
 .../components/SuggestedTracks.tsx            |  11 +-
 .../components/track-list/TrackListItem.tsx   |  28 ++---
 .../Button/BaseButton/BaseButton.tsx          |   5 +-
 .../components/Button/BaseButton/types.ts     |   4 +
 .../Button/IconButton/IconButton.tsx          |  34 +++++-
 packages/mobile/src/harmony-native/icons.ts   |   3 +-
 .../left-nav-drawer/LeftNavDrawer.tsx         |  11 --
 .../left-nav-drawer/LeftNavLink.tsx           |  17 +--
 .../screens/app-screen/TopBarIconButton.tsx   |  24 +---
 .../app-screen/useAppScreenOptions.tsx        |  42 +++----
 .../ArtistRecommendations.tsx                 |  18 ++-
 .../ProfileHeader/SocialLink.tsx              |   3 +-
 .../screens/profile-screen/ProfileScreen.tsx  |  12 +-
 .../src/screens/search-screen/SearchBar.tsx   |  14 ++-
 .../SearchHistory/SearchHistoryListItem.tsx   |   8 +-
 .../src/screens/signon/SignupHeader.tsx       |  21 ++--
 .../SmartCollectionScreen.tsx                 |   2 +-
 .../components/LinkedWallet.tsx               |  20 ++--
 27 files changed, 215 insertions(+), 320 deletions(-)
 delete mode 100644 packages/mobile/src/components/core/IconButton.tsx

diff --git a/packages/harmony/src/foundations/color/semantic.ts b/packages/harmony/src/foundations/color/semantic.ts
index 88a42fe22d3..ac542522ddd 100644
--- a/packages/harmony/src/foundations/color/semantic.ts
+++ b/packages/harmony/src/foundations/color/semantic.ts
@@ -17,6 +17,7 @@ const createSemanticTheme = (primitives: PrimitiveColors) => ({
     default: primitives.neutral.neutral,
     subdued: primitives.neutral.n400,
     disabled: primitives.neutral.n150,
+    active: primitives.primary.primary,
     accent: primitives.secondary.s300,
     staticWhite: primitives.static.white,
     warning: primitives.special.orange,
diff --git a/packages/mobile/src/components/core/IconButton.tsx b/packages/mobile/src/components/core/IconButton.tsx
deleted file mode 100644
index 7418110e4d7..00000000000
--- a/packages/mobile/src/components/core/IconButton.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import type {
-  Insets,
-  StyleProp,
-  TouchableOpacityProps,
-  ViewStyle
-} from 'react-native'
-import { Animated, TouchableOpacity, View } from 'react-native'
-import type { SvgProps } from 'react-native-svg'
-
-import { usePressScaleAnimation } from 'app/hooks/usePressScaleAnimation'
-import { useToast } from 'app/hooks/useToast'
-import type { StylesProps } from 'app/styles'
-import { makeStyles } from 'app/styles'
-import type { GestureResponderHandler } from 'app/types/gesture'
-import { useThemeColors } from 'app/utils/theme'
-
-export type IconButtonProps = {
-  fill?: string
-  icon: React.FC<
-    SvgProps & {
-      fillSecondary?: string
-    }
-  >
-  isDisabled?: boolean
-  disabledPressToastContent?: string | JSX.Element
-  onPress?: GestureResponderHandler
-  fullWidth?: boolean
-  hitSlop?: Insets
-} & StylesProps<{ root?: StyleProp<ViewStyle>; icon?: StyleProp<ViewStyle> }> &
-  Omit<TouchableOpacityProps, 'hitSlop'>
-
-const useStyles = makeStyles(() => ({
-  icon: {
-    height: 18,
-    width: 18,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-}))
-
-const defaultHitSlop = { top: 12, right: 12, bottom: 12, left: 12 }
-
-/**
- * A button with touchable feedback that is only an
- * icon. Different from a Button in that it has no
- * container.
- *
- * The default size is 18x18 but this can be overridden via styles.icon
- */
-export const IconButton = ({
-  fill: inputFill,
-  fullWidth = true,
-  icon: Icon,
-  isDisabled,
-  disabledPressToastContent,
-  onPress,
-  style,
-  styles: stylesProp,
-  hitSlop,
-  ...other
-}: IconButtonProps) => {
-  const styles = useStyles()
-  const { scale, handlePressIn, handlePressOut } = usePressScaleAnimation(0.9)
-  const { neutral } = useThemeColors()
-  const { toast } = useToast()
-
-  const onDisabledPress = () => {
-    if (disabledPressToastContent) {
-      toast({ content: disabledPressToastContent })
-    }
-  }
-
-  const fill = inputFill ?? neutral
-
-  return (
-    <Animated.View
-      style={[{ transform: [{ scale }] }, stylesProp?.root, style]}
-    >
-      <TouchableOpacity
-        onPress={isDisabled ? onDisabledPress : onPress}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
-        disabled={isDisabled && !disabledPressToastContent}
-        activeOpacity={0.95}
-        hitSlop={{ ...defaultHitSlop, ...hitSlop }}
-        {...other}
-      >
-        <View
-          style={[
-            styles.icon,
-            stylesProp?.icon,
-            isDisabled && { opacity: 0.5 }
-          ]}
-        >
-          <Icon
-            fill={fill}
-            height='100%'
-            {...(fullWidth ? { width: '100%' } : {})}
-          />
-        </View>
-      </TouchableOpacity>
-    </Animated.View>
-  )
-}
diff --git a/packages/mobile/src/components/core/index.ts b/packages/mobile/src/components/core/index.ts
index df9e3014620..06a5664e669 100644
--- a/packages/mobile/src/components/core/index.ts
+++ b/packages/mobile/src/components/core/index.ts
@@ -6,7 +6,6 @@ export * from './EmptyTile'
 export * from './GradientIcon'
 export * from './GradientText'
 export * from './Hyperlink'
-export * from './IconButton'
 export * from './Link'
 export * from './Screen'
 export * from './TextInput'
diff --git a/packages/mobile/src/components/details-tile/DetailsTileActionButtons.tsx b/packages/mobile/src/components/details-tile/DetailsTileActionButtons.tsx
index 27f54efbf69..cb2262a473e 100644
--- a/packages/mobile/src/components/details-tile/DetailsTileActionButtons.tsx
+++ b/packages/mobile/src/components/details-tile/DetailsTileActionButtons.tsx
@@ -8,17 +8,16 @@ import { View } from 'react-native'
 import { useSelector } from 'react-redux'
 
 import {
+  IconButton,
   IconKebabHorizontal,
   IconPencil,
   IconRocket,
   IconShare
 } from '@audius/harmony-native'
-import { IconButton } from 'app/components/core'
 import { FavoriteButton } from 'app/components/favorite-button'
 import { RepostButton } from 'app/components/repost-button'
 import { makeStyles } from 'app/styles'
 import type { GestureResponderHandler } from 'app/types/gesture'
-import { useThemeColors } from 'app/utils/theme'
 
 const { getCollecitonHasHiddenTracks, getIsCollectionEmpty } =
   cacheCollectionsSelectors
@@ -27,7 +26,11 @@ const messages = {
   publishButtonEmptyDisabledContent: 'You must add at least 1 track.',
   publishButtonHiddenDisabledContent:
     'You cannot make a playlist with hidden tracks public.',
-  shareButtonDisabledContent: 'You can’t share an empty playlist.'
+  shareButtonDisabledHint: 'You can’t share an empty playlist.',
+  shareButtonLabel: 'Share Content',
+  overflowButtonLabel: 'More Options',
+  editButtonLabel: 'Edit Content',
+  publishButtonLabel: 'Publish Content'
 }
 
 type DetailsTileActionButtonsProps = {
@@ -86,7 +89,6 @@ export const DetailsTileActionButtons = ({
   onPressShare
 }: DetailsTileActionButtonsProps) => {
   const styles = useStyles()
-  const { neutralLight4 } = useThemeColors()
   const isCollectionEmpty = useSelector((state: CommonState) =>
     getIsCollectionEmpty(state, { id: collectionId })
   )
@@ -125,45 +127,49 @@ export const DetailsTileActionButtons = ({
 
   const shareButton = (
     <IconButton
-      fill={neutralLight4}
+      color='subdued'
       icon={IconShare}
-      isDisabled={isCollectionEmpty}
-      disabledPressToastContent={messages.shareButtonDisabledContent}
+      disabled={isCollectionEmpty}
+      disabledHint={messages.shareButtonDisabledHint}
       onPress={onPressShare}
-      styles={{ icon: [styles.actionButton] }}
+      aria-label={messages.shareButtonLabel}
+      size='2xl'
     />
   )
 
   const overflowMenu = (
     <IconButton
-      fill={neutralLight4}
+      color='subdued'
       icon={IconKebabHorizontal}
       onPress={onPressOverflow}
-      styles={{ icon: styles.actionButton }}
+      aria-label={messages.overflowButtonLabel}
+      size='2xl'
     />
   )
 
   const editButton = (
     <IconButton
-      fill={neutralLight4}
+      color='subdued'
       icon={IconPencil}
       onPress={onPressEdit}
-      styles={{ icon: styles.actionButton }}
+      aria-label={messages.editButtonLabel}
+      size='2xl'
     />
   )
 
   const publishButton = (
     <IconButton
-      fill={neutralLight4}
+      color='subdued'
       icon={IconRocket}
-      isDisabled={isCollectionEmpty || collectionHasHiddenTracks}
-      disabledPressToastContent={
+      disabled={isCollectionEmpty || collectionHasHiddenTracks}
+      disabledHint={
         collectionHasHiddenTracks
           ? messages.publishButtonHiddenDisabledContent
           : messages.publishButtonEmptyDisabledContent
       }
+      aria-label={messages.publishButtonLabel}
       onPress={onPressPublish}
-      styles={{ icon: styles.actionButton }}
+      size='2xl'
     />
   )
 
diff --git a/packages/mobile/src/components/feed-tip-tile/FeedTipTile.tsx b/packages/mobile/src/components/feed-tip-tile/FeedTipTile.tsx
index bc5dbb33254..3c37c18716d 100644
--- a/packages/mobile/src/components/feed-tip-tile/FeedTipTile.tsx
+++ b/packages/mobile/src/components/feed-tip-tile/FeedTipTile.tsx
@@ -12,7 +12,7 @@ import { storeDismissedTipInfo } from 'common/store/tipping/sagas'
 import { View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 
-import { IconClose } from '@audius/harmony-native'
+import { IconButton, IconClose } from '@audius/harmony-native'
 import { FadeInView, Tile } from 'app/components/core'
 import { make, track } from 'app/services/analytics'
 import { localStorage } from 'app/services/local-storage'
@@ -36,20 +36,14 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     marginHorizontal: spacing(3),
     marginTop: spacing(3),
     paddingHorizontal: spacing(2),
-    paddingVertical: spacing(4)
+    paddingVertical: spacing(3)
   },
   header: {
-    display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between'
   },
   skeleton: {
     paddingBottom: 0
-  },
-  iconRemove: {
-    height: spacing(6),
-    width: spacing(6),
-    fill: palette.neutralLight4
   }
 }))
 
@@ -104,7 +98,13 @@ export const FeedTipTile = () => {
       <FadeInView>
         <View style={styles.header}>
           <ReceiverDetails receiver={usersMap[tipToDisplay.receiver_id]} />
-          <IconClose {...styles.iconRemove} onPress={handlePressClose} />
+          <IconButton
+            icon={IconClose}
+            style={{ alignSelf: 'flex-start' }}
+            size='m'
+            color='subdued'
+            onPress={handlePressClose}
+          />
         </View>
         <SenderDetails
           senders={[
diff --git a/packages/mobile/src/components/lineup-tile/LineupTileActionButtons.tsx b/packages/mobile/src/components/lineup-tile/LineupTileActionButtons.tsx
index 6ffbe5b294f..895ae54a9ea 100644
--- a/packages/mobile/src/components/lineup-tile/LineupTileActionButtons.tsx
+++ b/packages/mobile/src/components/lineup-tile/LineupTileActionButtons.tsx
@@ -5,17 +5,26 @@ import { isContentUSDCPurchaseGated } from '@audius/common/models'
 import type { Nullable } from '@audius/common/utils'
 import { View } from 'react-native'
 
-import { IconKebabHorizontal, IconShare } from '@audius/harmony-native'
-import { IconButton } from 'app/components/core'
+import {
+  IconButton,
+  IconKebabHorizontal,
+  IconShare
+} from '@audius/harmony-native'
 import { FavoriteButton } from 'app/components/favorite-button'
 import { RepostButton } from 'app/components/repost-button'
 import { useIsUSDCEnabled } from 'app/hooks/useIsUSDCEnabled'
 import { flexRowCentered, makeStyles } from 'app/styles'
 import type { GestureResponderHandler } from 'app/types/gesture'
-import { useThemeColors } from 'app/utils/theme'
 
 import { LineupTileAccessStatus } from './LineupTileAccessStatus'
 
+const messages = {
+  shareButtonLabel: 'Share Content',
+  overflowButtonLabel: 'More Options',
+  editButtonLabel: 'Edit Content',
+  publishButtonLabel: 'Publish Content'
+}
+
 type Props = {
   disabled?: boolean
   readonly?: boolean
@@ -43,15 +52,17 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     minHeight: spacing(8)
   },
   button: {
-    height: spacing(5.5),
-    width: spacing(5.5)
+    height: spacing(6),
+    width: spacing(6),
+    alignItems: 'center',
+    justifyContent: 'center'
   },
   buttonMargin: {
-    marginRight: spacing(8)
+    marginRight: spacing(6)
   },
   leftButtons: {
     ...flexRowCentered(),
-    marginVertical: spacing(2)
+    marginVertical: spacing(1)
   }
 }))
 
@@ -71,7 +82,6 @@ export const LineupTileActionButtons = ({
   onPressSave,
   onPressShare
 }: Props) => {
-  const { neutralLight4 } = useThemeColors()
   const styles = useStyles()
   const isUSDCEnabled = useIsUSDCEnabled()
   const isUSDCPurchase =
@@ -99,21 +109,23 @@ export const LineupTileActionButtons = ({
 
   const shareButton = (
     <IconButton
-      fill={neutralLight4}
+      color='subdued'
       icon={IconShare}
-      isDisabled={disabled}
+      disabled={disabled}
       onPress={onPressShare}
-      styles={{ icon: styles.button }}
+      aria-label={messages.shareButtonLabel}
+      size='l'
     />
   )
 
   const moreButton = (
     <IconButton
-      fill={neutralLight4}
+      color='subdued'
       icon={IconKebabHorizontal}
-      isDisabled={disabled}
+      disabled={disabled}
       onPress={onPressOverflow}
-      styles={{ icon: styles.button }}
+      aria-label={messages.overflowButtonLabel}
+      size='l'
     />
   )
 
diff --git a/packages/mobile/src/components/now-playing-drawer/ActionsBar.tsx b/packages/mobile/src/components/now-playing-drawer/ActionsBar.tsx
index d38e3b4c3c4..447468549ae 100644
--- a/packages/mobile/src/components/now-playing-drawer/ActionsBar.tsx
+++ b/packages/mobile/src/components/now-playing-drawer/ActionsBar.tsx
@@ -30,13 +30,14 @@ import { useDispatch, useSelector } from 'react-redux'
 import { trpc } from 'utils/trpcClientWeb'
 
 import {
+  IconButton,
   IconCastAirplay,
   IconCastChromecast,
   IconKebabHorizontal,
   IconShare
 } from '@audius/harmony-native'
 import { useAirplay } from 'app/components/audio/Airplay'
-import { Button, IconButton } from 'app/components/core'
+import { Button } from 'app/components/core'
 import { useIsOfflineModeEnabled } from 'app/hooks/useIsOfflineModeEnabled'
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { useToast } from 'app/hooks/useToast'
@@ -60,7 +61,10 @@ const { getIsReachable } = reachabilitySelectors
 
 const messages = {
   repostProhibited: "You can't Repost your own Track!",
-  favoriteProhibited: "You can't Favorite your own Track!"
+  favoriteProhibited: "You can't Favorite your own Track!",
+  castLabel: 'Cast to Device',
+  shareLabel: 'Share Content',
+  optionsLabel: 'More Options'
 }
 
 const useStyles = makeStyles(({ palette, spacing }) => ({
@@ -254,8 +258,10 @@ export const ActionsBar = ({ track }: ActionsBarProps) => {
         <IconButton
           onPress={openAirplayDialog}
           icon={IconCastAirplay}
-          fill={isCasting ? primary : neutral}
-          styles={{ icon: styles.icon, root: styles.button }}
+          color={isCasting ? 'active' : 'default'}
+          size='l'
+          aria-label={messages.castLabel}
+          style={styles.button}
         />
       )
     }
@@ -308,8 +314,10 @@ export const ActionsBar = ({ track }: ActionsBarProps) => {
     return (
       <IconButton
         icon={IconShare}
-        styles={{ icon: styles.icon, root: styles.button }}
         onPress={handleShare}
+        size='l'
+        aria-label={messages.shareLabel}
+        style={styles.button}
       />
     )
   }
@@ -318,9 +326,11 @@ export const ActionsBar = ({ track }: ActionsBarProps) => {
     return (
       <IconButton
         icon={IconKebabHorizontal}
-        styles={{ icon: styles.icon, root: styles.button }}
         onPress={onPressOverflow}
-        isDisabled={!isReachable}
+        size='l'
+        disabled={!isReachable}
+        aria-label={messages.optionsLabel}
+        style={styles.button}
       />
     )
   }
diff --git a/packages/mobile/src/components/now-playing-drawer/AudioControls.tsx b/packages/mobile/src/components/now-playing-drawer/AudioControls.tsx
index 0cc01678fa2..ea8a04d3951 100644
--- a/packages/mobile/src/components/now-playing-drawer/AudioControls.tsx
+++ b/packages/mobile/src/components/now-playing-drawer/AudioControls.tsx
@@ -14,9 +14,9 @@ import {
   IconSkipNext,
   IconPodcastBack,
   IconPodcastForward,
-  IconSkipPrevious
+  IconSkipPrevious,
+  IconButton
 } from '@audius/harmony-native'
-import { IconButton } from 'app/components/core'
 import { usePressScaleAnimation } from 'app/hooks/usePressScaleAnimation'
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { makeStyles } from 'app/styles'
@@ -30,6 +30,11 @@ const { setVisibility } = modalsActions
 const { getRepeat, getShuffle } = queueSelectors
 const { shuffle, repeat } = queueActions
 
+const messages = {
+  nextLabel: 'Next Track',
+  previousLabel: 'Previous Track'
+}
+
 const useStyles = makeStyles(({ spacing }) => ({
   container: {
     marginTop: spacing(10),
@@ -59,10 +64,6 @@ const useStyles = makeStyles(({ spacing }) => ({
     width: 80,
     height: 80
   },
-  nextPrevIcons: {
-    width: 30,
-    height: 30
-  },
   shuffleRepeatIcons: {
     width: 24,
     height: 24
@@ -146,7 +147,9 @@ export const AudioControls = ({
       <IconButton
         onPress={onPrevious}
         icon={isLongFormContent ? IconPodcastBack : IconSkipPrevious}
-        styles={{ root: styles.button, icon: styles.nextPrevIcons }}
+        style={styles.button}
+        size='xl'
+        aria-label={messages.previousLabel}
       />
     )
   }
@@ -167,7 +170,9 @@ export const AudioControls = ({
       <IconButton
         onPress={onNext}
         icon={isLongFormContent ? IconPodcastForward : IconSkipNext}
-        styles={{ root: styles.button, icon: styles.nextPrevIcons }}
+        style={styles.button}
+        size='xl'
+        aria-label={messages.nextLabel}
       />
     )
   }
diff --git a/packages/mobile/src/components/now-playing-drawer/PlaybackRateButton.tsx b/packages/mobile/src/components/now-playing-drawer/PlaybackRateButton.tsx
index a822ad9658e..e0dd46459da 100644
--- a/packages/mobile/src/components/now-playing-drawer/PlaybackRateButton.tsx
+++ b/packages/mobile/src/components/now-playing-drawer/PlaybackRateButton.tsx
@@ -2,6 +2,8 @@ import type { PlaybackRate } from '@audius/common/store'
 import { playerSelectors } from '@audius/common/store'
 import { useSelector } from 'react-redux'
 
+import type { IconButtonProps } from '@audius/harmony-native'
+import { IconButton } from '@audius/harmony-native'
 import Icon0_5x from 'app/assets/images/iconPlaybackRate0_5x.svg'
 import Icon0_8x from 'app/assets/images/iconPlaybackRate0_8x.svg'
 import Icon1_1x from 'app/assets/images/iconPlaybackRate1_1x.svg'
@@ -11,11 +13,13 @@ import Icon1x from 'app/assets/images/iconPlaybackRate1x.svg'
 import Icon2_5x from 'app/assets/images/iconPlaybackRate2_5x.svg'
 import Icon2x from 'app/assets/images/iconPlaybackRate2x.svg'
 import Icon3x from 'app/assets/images/iconPlaybackRate3x.svg'
-import type { IconButtonProps } from 'app/components/core'
-import { IconButton } from 'app/components/core'
 
 const { getPlaybackRate } = playerSelectors
 
+const messages = {
+  playbackLabel: 'Change Playback Rate'
+}
+
 type PlaybackRateButtonProps = Omit<IconButtonProps, 'icon'>
 
 const playbackRateIconMap: Record<PlaybackRate, typeof Icon1x> = {
@@ -35,8 +39,9 @@ export const PlaybackRateButton = (props: PlaybackRateButtonProps) => {
   return (
     <IconButton
       icon={playbackRateIconMap[playbackRate]}
+      size='xl'
+      aria-label={messages.playbackLabel}
       {...props}
-      fullWidth={false}
     />
   )
 }
diff --git a/packages/mobile/src/components/suggested-tracks/components/SuggestedTracks.tsx b/packages/mobile/src/components/suggested-tracks/components/SuggestedTracks.tsx
index f3c39039865..57640fa6fa0 100644
--- a/packages/mobile/src/components/suggested-tracks/components/SuggestedTracks.tsx
+++ b/packages/mobile/src/components/suggested-tracks/components/SuggestedTracks.tsx
@@ -10,14 +10,7 @@ import { useSelector } from 'react-redux'
 import { useToggle } from 'react-use'
 
 import { IconCaretDown, IconRefresh } from '@audius/harmony-native'
-import {
-  Button,
-  Divider,
-  IconButton,
-  Text,
-  TextButton,
-  Tile
-} from 'app/components/core'
+import { Button, Divider, Text, TextButton, Tile } from 'app/components/core'
 import { makeStyles } from 'app/styles'
 
 import { TrackImage } from '../../image/TrackImage'
@@ -189,7 +182,7 @@ export const SuggestedTracks = (props: SuggestedTracksProps) => {
             </Text>
           </View>
           <Animated.View style={expandIconStyle}>
-            <IconButton icon={IconCaretDown} />
+            <IconCaretDown size='l' color='default' />
           </Animated.View>
         </View>
       </TouchableOpacity>
diff --git a/packages/mobile/src/components/track-list/TrackListItem.tsx b/packages/mobile/src/components/track-list/TrackListItem.tsx
index e9b927bd01e..b52fa896326 100644
--- a/packages/mobile/src/components/track-list/TrackListItem.tsx
+++ b/packages/mobile/src/components/track-list/TrackListItem.tsx
@@ -26,16 +26,16 @@ import { useDispatch, useSelector } from 'react-redux'
 import { trpc } from 'utils/trpcClientWeb'
 
 import {
+  IconButton,
   IconDrag,
   IconKebabHorizontal,
   IconLock,
   IconRemove
 } from '@audius/harmony-native'
-import { IconButton } from 'app/components/core'
 import UserBadges from 'app/components/user-badges'
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { flexRowCentered, font, makeStyles } from 'app/styles'
-import { useColor, useThemeColors } from 'app/utils/theme'
+import { useColor } from 'app/utils/theme'
 
 import { TrackDownloadStatusIndicator } from '../offline-downloads/TrackDownloadStatusIndicator'
 
@@ -151,7 +151,10 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
 
 const getMessages = ({ isDeleted = false }: { isDeleted?: boolean } = {}) => ({
   deleted: isDeleted ? ' [Deleted By Artist]' : '',
-  locked: 'Locked'
+  locked: 'Locked',
+  reorderLabel: 'Reorder Track',
+  overflowLabel: 'More Options',
+  deleteLabel: 'Delete Track'
 })
 
 export type TrackListItemProps = {
@@ -264,7 +267,6 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => {
   const messages = getMessages({ isDeleted })
   const styles = useStyles()
   const dispatch = useDispatch()
-  const themeColors = useThemeColors()
   const white = useColor('white')
   const [titleWidth, setTitleWidth] = useState(0)
 
@@ -420,10 +422,11 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => {
           {isReorderable ? (
             <IconButton
               icon={IconDrag}
-              fill={themeColors.neutralLight4}
+              color='subdued'
               style={styles.dragIcon}
               onLongPress={onDrag}
               delayLongPress={100}
+              aria-label={messages.reorderLabel}
             />
           ) : null}
           <View
@@ -468,21 +471,18 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => {
           {trackItemAction === 'overflow' ? (
             <IconButton
               icon={IconKebabHorizontal}
-              fill={themeColors.neutralLight4}
-              styles={{
-                root: styles.iconContainer,
-                icon: styles.icon
-              }}
+              color='subdued'
+              style={styles.iconContainer}
               onPress={handlePressOverflow}
+              aria-label={messages.overflowLabel}
             />
           ) : null}
           {trackItemAction === 'remove' ? (
             <IconButton
               icon={IconRemove}
-              styles={{
-                root: styles.iconContainer,
-                icon: styles.removeIcon
-              }}
+              color='danger'
+              style={styles.iconContainer}
+              aria-label={messages.deleteLabel}
               onPress={handlePressRemove}
             />
           ) : null}
diff --git a/packages/mobile/src/harmony-native/components/Button/BaseButton/BaseButton.tsx b/packages/mobile/src/harmony-native/components/Button/BaseButton/BaseButton.tsx
index a26f15e4b62..3c6409b77ce 100644
--- a/packages/mobile/src/harmony-native/components/Button/BaseButton/BaseButton.tsx
+++ b/packages/mobile/src/harmony-native/components/Button/BaseButton/BaseButton.tsx
@@ -32,6 +32,7 @@ export const BaseButton = (props: BaseButtonProps) => {
     sharedValue: sharedValueProp,
     minWidth,
     fullWidth,
+    pressScale = 0.97,
     ...other
   } = props
   const pressedInternal = useSharedValue(0)
@@ -79,7 +80,9 @@ export const BaseButton = (props: BaseButtonProps) => {
 
   const animatedStyles = useAnimatedStyle(() => ({
     ...(!fullWidth && {
-      transform: [{ scale: interpolate(pressed.value, [0, 1], [1, 0.97]) }]
+      transform: [
+        { scale: interpolate(pressed.value, [0, 1], [1, pressScale]) }
+      ]
     })
   }))
 
diff --git a/packages/mobile/src/harmony-native/components/Button/BaseButton/types.ts b/packages/mobile/src/harmony-native/components/Button/BaseButton/types.ts
index 3d5a4d9cb03..510c7ca7bb2 100644
--- a/packages/mobile/src/harmony-native/components/Button/BaseButton/types.ts
+++ b/packages/mobile/src/harmony-native/components/Button/BaseButton/types.ts
@@ -79,4 +79,8 @@ export type BaseButtonProps = {
   sharedValue?: SharedValue<number>
 
   children?: ReactNode
+  /**
+   * The percentage to scale the button when pressed
+   */
+  pressScale?: number
 } & PressableProps
diff --git a/packages/mobile/src/harmony-native/components/Button/IconButton/IconButton.tsx b/packages/mobile/src/harmony-native/components/Button/IconButton/IconButton.tsx
index d0ef103d8f3..e3be328da1b 100644
--- a/packages/mobile/src/harmony-native/components/Button/IconButton/IconButton.tsx
+++ b/packages/mobile/src/harmony-native/components/Button/IconButton/IconButton.tsx
@@ -1,4 +1,6 @@
-import type { StyleProp, ViewStyle } from 'react-native'
+import { useCallback } from 'react'
+
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native'
 import {
   interpolateColor,
   useAnimatedStyle,
@@ -7,6 +9,7 @@ import {
 
 import { useTheme } from 'app/harmony-native/foundations/theme'
 import type { Icon, IconProps } from 'app/harmony-native/icons'
+import { useToast } from 'app/hooks/useToast'
 
 import { BaseButton } from '../BaseButton/BaseButton'
 import type { BaseButtonProps } from '../BaseButton/types'
@@ -15,28 +18,33 @@ export type IconButtonProps = {
   icon: Icon
   ripple?: boolean
   style?: StyleProp<ViewStyle>
+  disabledHint?: string
 } & Pick<IconProps, 'color' | 'size' | 'shadow'> &
-  Pick<BaseButtonProps, 'onPress' | 'disabled' | 'style'> &
+  Omit<BaseButtonProps, 'fill' | 'styles'> &
   (
     | {
-        accessibilityLabel: string
+        accessibilityLabel?: string
       }
-    | { 'aria-label': string }
+    // TODO: make arial-label or accessibilityLabel required
+    | { 'aria-label'?: string }
   )
 
 export const IconButton = (props: IconButtonProps) => {
   const {
     icon: Icon,
-    color: iconColor,
+    color: iconColor = 'default',
     size = 'l',
     shadow,
     ripple,
     style,
+    onPress,
+    disabled,
+    disabledHint,
     ...other
   } = props
-  const { disabled } = other
   const pressed = useSharedValue(0)
   const { color, spacing } = useTheme()
+  const { toast } = useToast()
 
   const buttonStyles = {
     borderRadius: 1000,
@@ -51,11 +59,25 @@ export const IconButton = (props: IconButtonProps) => {
     )
   }))
 
+  const handlePress = useCallback(
+    (e: GestureResponderEvent) => {
+      if (!disabled) {
+        onPress?.(e)
+      } else if (disabledHint) {
+        toast({ content: disabledHint })
+      }
+    },
+    [disabled, disabledHint, onPress, toast]
+  )
+
   return (
     <BaseButton
       {...other}
       style={[buttonStyles, ripple ? rippleStyles : undefined, style]}
       sharedValue={pressed}
+      onPress={handlePress}
+      disabled={disabled && !disabledHint}
+      pressScale={0.9}
     >
       <Icon
         color={disabled ? 'disabled' : iconColor}
diff --git a/packages/mobile/src/harmony-native/icons.ts b/packages/mobile/src/harmony-native/icons.ts
index fd1cc1145ff..56e01684ed3 100644
--- a/packages/mobile/src/harmony-native/icons.ts
+++ b/packages/mobile/src/harmony-native/icons.ts
@@ -3,7 +3,8 @@ import type { FunctionComponent } from 'react'
 import { type IconProps as HarmonyIconProps } from '@audius/harmony'
 import type { SvgProps } from 'react-native-svg'
 
-export type IconProps = SvgProps & HarmonyIconProps & { fillSecondary?: string }
+export type IconProps = Omit<SvgProps, 'color'> &
+  HarmonyIconProps & { fillSecondary?: string }
 export type Icon = FunctionComponent<IconProps>
 
 export { default as IconAlbum } from '@audius/harmony/src/assets/icons/Album.svg'
diff --git a/packages/mobile/src/screens/app-drawer-screen/left-nav-drawer/LeftNavDrawer.tsx b/packages/mobile/src/screens/app-drawer-screen/left-nav-drawer/LeftNavDrawer.tsx
index fc4847a9c30..110dd7c7494 100644
--- a/packages/mobile/src/screens/app-drawer-screen/left-nav-drawer/LeftNavDrawer.tsx
+++ b/packages/mobile/src/screens/app-drawer-screen/left-nav-drawer/LeftNavDrawer.tsx
@@ -22,7 +22,6 @@ import { USDCBalancePill } from 'app/components/usdc-balance-pill/USDCBalancePil
 import { env } from 'app/env'
 import { useFeatureFlag, useRemoteVar } from 'app/hooks/useRemoteConfig'
 import { make, track } from 'app/services/analytics'
-import { spacing } from 'app/styles/spacing'
 
 import { AppDrawerContextProvider } from '../AppDrawerContext'
 
@@ -106,11 +105,6 @@ const WrappedLeftNavDrawer = () => {
       </LeftNavLink>
       <LeftNavLink
         icon={IconCloudUpload}
-        iconProps={{
-          height: spacing(8),
-          width: spacing(8),
-          style: { marginLeft: -2 }
-        }}
         label={messages.upload}
         to='Upload'
         params={{ fromAppDrawer: false }}
@@ -132,11 +126,6 @@ const WrappedLeftNavDrawer = () => {
         label={messages.settings}
         to='SettingsScreen'
         params={null}
-        iconProps={{
-          height: spacing(9),
-          width: spacing(9),
-          style: { marginLeft: spacing(-1) }
-        }}
       />
       {isStaging || isFeatureFlagAccessEnabled ? (
         <LeftNavLink
diff --git a/packages/mobile/src/screens/app-drawer-screen/left-nav-drawer/LeftNavLink.tsx b/packages/mobile/src/screens/app-drawer-screen/left-nav-drawer/LeftNavLink.tsx
index ef3c8b4ed88..236e4266553 100644
--- a/packages/mobile/src/screens/app-drawer-screen/left-nav-drawer/LeftNavLink.tsx
+++ b/packages/mobile/src/screens/app-drawer-screen/left-nav-drawer/LeftNavLink.tsx
@@ -1,15 +1,14 @@
-import type { ComponentType, ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { useContext, useCallback } from 'react'
 
 import { TouchableOpacity, View } from 'react-native'
-import type { SvgProps } from 'react-native-svg'
 
+import type { Icon } from '@audius/harmony-native'
 import type { TextProps } from 'app/components/core'
 import { Text } from 'app/components/core'
 import type { ContextualParams } from 'app/hooks/useNavigation'
 import type { AppTabScreenParamList } from 'app/screens/app-screen'
 import { makeStyles } from 'app/styles'
-import { spacing } from 'app/styles/spacing'
 import { useThemeColors } from 'app/utils/theme'
 
 import { AppDrawerContext } from '../AppDrawerContext'
@@ -46,8 +45,7 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
 }))
 
 type LeftNavLinkProps<Screen extends keyof AppTabScreenParamList> = {
-  icon: ComponentType<SvgProps>
-  iconProps?: SvgProps
+  icon: Icon
   to: Screen
   params: AppTabScreenParamList[Screen] extends undefined
     ? ContextualParams | null
@@ -64,7 +62,6 @@ export const LeftNavLink = <Screen extends keyof AppTabScreenParamList>(
 ) => {
   const {
     icon: Icon,
-    iconProps,
     to,
     params,
     label,
@@ -88,13 +85,7 @@ export const LeftNavLink = <Screen extends keyof AppTabScreenParamList>(
   return (
     <TouchableOpacity style={styles.accountListItem} onPress={handlePress}>
       <View style={styles.accountListItemIconRoot}>
-        <Icon
-          fill={neutral}
-          height={spacing(7)}
-          width={spacing(7)}
-          {...iconProps}
-          style={[styles.accountListItemIcon, iconProps?.style]}
-        />
+        <Icon fill={neutral} size='xl' style={styles.accountListItemIcon} />
         {showNotificationBubble ? (
           <View style={styles.notificationBubble} />
         ) : null}
diff --git a/packages/mobile/src/screens/app-screen/TopBarIconButton.tsx b/packages/mobile/src/screens/app-screen/TopBarIconButton.tsx
index c569c04a402..99f9efbe182 100644
--- a/packages/mobile/src/screens/app-screen/TopBarIconButton.tsx
+++ b/packages/mobile/src/screens/app-screen/TopBarIconButton.tsx
@@ -1,26 +1,8 @@
-import type { IconButtonProps } from 'app/components/core'
-import { IconButton } from 'app/components/core'
-import { makeStyles } from 'app/styles'
-import { useThemeColors } from 'app/utils/theme'
-
-const useStyles = makeStyles(() => ({
-  icon: {
-    height: 20,
-    width: 20
-  }
-}))
+import type { IconButtonProps } from '@audius/harmony-native'
+import { IconButton } from '@audius/harmony-native'
 
 type TopBarIconButtonProps = IconButtonProps
 
 export const TopBarIconButton = (props: TopBarIconButtonProps) => {
-  const { styles: stylesProp, ...other } = props
-  const styles = useStyles()
-  const { neutralLight4 } = useThemeColors()
-  return (
-    <IconButton
-      styles={{ icon: [styles.icon, stylesProp?.icon], root: stylesProp?.root }}
-      fill={neutralLight4}
-      {...other}
-    />
-  )
+  return <IconButton color='subdued' size='m' {...props} />
 }
diff --git a/packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx b/packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx
index e4278cb747d..76f2a56767f 100644
--- a/packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx
+++ b/packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx
@@ -9,14 +9,16 @@ import type {
 import { CardStyleInterpolators } from '@react-navigation/stack'
 import { Text, View } from 'react-native'
 
-import { IconCaretLeft, IconSearch } from '@audius/harmony-native'
-import AudiusLogo from 'app/assets/images/audiusLogoHorizontalDeprecated.svg'
-import { IconButton } from 'app/components/core'
+import {
+  IconAudiusLogoHorizontal,
+  IconButton,
+  IconCaretLeft,
+  IconSearch
+} from '@audius/harmony-native'
 import type { ContextualParams } from 'app/hooks/useNavigation'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { makeStyles } from 'app/styles'
-import { useThemeColors } from 'app/utils/theme'
 
 import { AppDrawerContext } from '../app-drawer-screen'
 
@@ -33,19 +35,11 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
     color: palette.neutralLight5,
     textTransform: 'uppercase'
   },
-  iconArrowBack: {
-    height: 28,
-    width: 28
-  },
   audiusLogo: {
     height: 24,
     width: 93,
     marginRight: 10
   },
-  iconSearch: {
-    height: 18,
-    width: 18
-  },
   earlyAccess: {
     fontSize: 10,
     position: 'absolute',
@@ -73,7 +67,6 @@ export const useAppScreenOptions = (
   overrides?: Partial<NativeStackNavigationOptions>
 ) => {
   const styles = useStyles()
-  const { neutralLight4 } = useThemeColors()
   const navigation = useNavigation()
   const { drawerHelpers } = useContext(AppDrawerContext)
 
@@ -81,10 +74,6 @@ export const useAppScreenOptions = (
     drawerHelpers?.openDrawer()
   }, [drawerHelpers])
 
-  const handlePressHome = useCallback(() => {
-    navigation.navigate('trending')
-  }, [navigation])
-
   const handlePressSearch = useCallback(() => {
     navigation.navigate('Search')
   }, [navigation])
@@ -115,8 +104,8 @@ export const useAppScreenOptions = (
                 <View style={styles.headerLeft}>
                   <IconButton
                     icon={IconCaretLeft}
-                    fill={neutralLight4}
-                    styles={{ icon: styles.iconArrowBack }}
+                    color='subdued'
+                    size='l'
                     {...other}
                     onPress={navigation.goBack}
                   />
@@ -141,11 +130,10 @@ export const useAppScreenOptions = (
             }
             return (
               <View>
-                <IconButton
-                  icon={AudiusLogo}
-                  fill={neutralLight4}
-                  styles={{ icon: styles.audiusLogo }}
-                  onPress={handlePressHome}
+                <IconAudiusLogoHorizontal
+                  height={24}
+                  width={100}
+                  color='subdued'
                 />
                 {isEarlyAccess ? (
                   <Text style={styles.earlyAccess}>{messages.earlyAccess}</Text>
@@ -159,9 +147,9 @@ export const useAppScreenOptions = (
               <View style={styles.headerRight}>
                 <IconButton
                   icon={IconSearch}
-                  fill={neutralLight4}
-                  styles={{ icon: styles.iconSearch }}
                   onPress={handlePressSearch}
+                  color='subdued'
+                  size='m'
                 />
               </View>
             )
@@ -171,10 +159,8 @@ export const useAppScreenOptions = (
       },
       [
         handleOpenLeftNavDrawer,
-        handlePressHome,
         handlePressSearch,
         styles,
-        neutralLight4,
         overrides,
         isEarlyAccess
       ]
diff --git a/packages/mobile/src/screens/profile-screen/ArtistRecommendations/ArtistRecommendations.tsx b/packages/mobile/src/screens/profile-screen/ArtistRecommendations/ArtistRecommendations.tsx
index ba98aaf6819..6527fa40220 100644
--- a/packages/mobile/src/screens/profile-screen/ArtistRecommendations/ArtistRecommendations.tsx
+++ b/packages/mobile/src/screens/profile-screen/ArtistRecommendations/ArtistRecommendations.tsx
@@ -19,9 +19,10 @@ import {
   IconUserFollow,
   IconUserFollowing,
   IconClose,
-  useTheme
+  useTheme,
+  IconButton
 } from '@audius/harmony-native'
-import { Button, IconButton, Text, ProfilePicture } from 'app/components/core'
+import { Button, Text, ProfilePicture } from 'app/components/core'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { track, make } from 'app/services/analytics'
 import { makeStyles } from 'app/styles'
@@ -38,7 +39,8 @@ const { followUser, unfollowUser } = usersSocialActions
 const messages = {
   description: 'Here are some accounts that vibe well with',
   followAll: 'Follow All',
-  followingAll: 'Following All'
+  followingAll: 'Following All',
+  closeLabel: 'Close'
 }
 
 const useStyles = makeStyles(({ spacing, palette, typography }) => ({
@@ -60,11 +62,6 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   dismissButton: {
     marginRight: spacing(2)
   },
-  dismissIcon: {
-    height: 24,
-    width: 24,
-    fill: palette.neutralLight4
-  },
   suggestedArtistsPhotos: {
     flexDirection: 'row',
     justifyContent: 'center',
@@ -157,8 +154,9 @@ export const ArtistRecommendations = (props: ArtistRecommendationsProps) => {
       <View style={styles.header} pointerEvents='box-none'>
         <IconButton
           icon={IconClose}
-          styles={{ root: styles.dismissButton, icon: styles.dismissIcon }}
-          fill={styles.dismissIcon.fill}
+          style={styles.dismissButton}
+          color='subdued'
+          aria-label={messages.closeLabel}
           onPress={onClose}
         />
         <View pointerEvents='none' style={styles.description}>
diff --git a/packages/mobile/src/screens/profile-screen/ProfileHeader/SocialLink.tsx b/packages/mobile/src/screens/profile-screen/ProfileHeader/SocialLink.tsx
index b30b43afe76..c4420562968 100644
--- a/packages/mobile/src/screens/profile-screen/ProfileHeader/SocialLink.tsx
+++ b/packages/mobile/src/screens/profile-screen/ProfileHeader/SocialLink.tsx
@@ -3,8 +3,9 @@ import { useCallback, useState } from 'react'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { View } from 'react-native'
 
+import type { IconButtonProps } from '@audius/harmony-native'
 import { IconInstagram, IconTikTok, IconTwitter } from '@audius/harmony-native'
-import type { LinkProps, IconButtonProps } from 'app/components/core'
+import type { LinkProps } from 'app/components/core'
 import { Text, Link, Hyperlink } from 'app/components/core'
 import Skeleton from 'app/components/skeleton'
 import { make } from 'app/services/analytics'
diff --git a/packages/mobile/src/screens/profile-screen/ProfileScreen.tsx b/packages/mobile/src/screens/profile-screen/ProfileScreen.tsx
index 5a59eb62ce2..31cc3d09d77 100644
--- a/packages/mobile/src/screens/profile-screen/ProfileScreen.tsx
+++ b/packages/mobile/src/screens/profile-screen/ProfileScreen.tsx
@@ -16,13 +16,16 @@ import { useFocusEffect } from '@react-navigation/native'
 import { Animated, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 
-import { IconKebabHorizontal, IconShare } from '@audius/harmony-native'
-import { IconButton, Screen, ScreenContent } from 'app/components/core'
+import {
+  IconButton,
+  IconKebabHorizontal,
+  IconShare
+} from '@audius/harmony-native'
+import { Screen, ScreenContent } from 'app/components/core'
 import { OfflinePlaceholder } from 'app/components/offline-placeholder'
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { useRoute } from 'app/hooks/useRoute'
 import { makeStyles } from 'app/styles'
-import { useThemeColors } from 'app/utils/theme'
 
 import { ProfileHeader } from './ProfileHeader'
 import { ProfileScreenSkeleton } from './ProfileScreenSkeleton'
@@ -60,7 +63,6 @@ export const ProfileScreen = () => {
   const dispatch = useDispatch()
   const status = useSelector((state) => getProfileStatus(state, handleLower))
   const [isRefreshing, setIsRefreshing] = useState(false)
-  const { neutralLight4 } = useThemeColors()
   const isNotReachable = useSelector(getIsReachable) === false
   const { isEnabled: isChatEnabled } = useFeatureFlag(FeatureFlags.CHAT_ENABLED)
 
@@ -119,7 +121,7 @@ export const ProfileScreen = () => {
 
   const topbarRight = (
     <IconButton
-      fill={neutralLight4}
+      color='subdued'
       icon={isChatEnabled && !isOwner ? IconKebabHorizontal : IconShare}
       onPress={handlePressTopRight}
     />
diff --git a/packages/mobile/src/screens/search-screen/SearchBar.tsx b/packages/mobile/src/screens/search-screen/SearchBar.tsx
index d5ba33ad338..24a4e838b20 100644
--- a/packages/mobile/src/screens/search-screen/SearchBar.tsx
+++ b/packages/mobile/src/screens/search-screen/SearchBar.tsx
@@ -13,13 +13,12 @@ import {
 import { useDispatch, useSelector } from 'react-redux'
 import { useTimeoutFn } from 'react-use'
 
-import { IconClose } from '@audius/harmony-native'
+import { IconButton, IconClose } from '@audius/harmony-native'
 import type { TextInputProps, TextInputRef } from 'app/components/core'
-import { IconButton, TextInput } from 'app/components/core'
+import { TextInput } from 'app/components/core'
 import LoadingSpinner from 'app/components/loading-spinner'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { makeStyles } from 'app/styles'
-import { useThemeColors } from 'app/utils/theme'
 
 const useStyles = makeStyles(({ spacing }) => ({
   loadingSpinner: {
@@ -89,12 +88,15 @@ export const SearchBar = (props: SearchBarProps) => {
 
   const isLoading = searchStatus === Status.LOADING
 
-  const { neutralLight5 } = useThemeColors()
-
   const endAdornmentElement = isLoading ? (
     <LoadingSpinner style={styles.loadingSpinner} />
   ) : searchInput ? (
-    <IconButton icon={IconClose} fill={neutralLight5} onPress={handleClear} />
+    <IconButton
+      icon={IconClose}
+      color='subdued'
+      onPress={handleClear}
+      size='xs'
+    />
   ) : undefined
 
   return (
diff --git a/packages/mobile/src/screens/search-screen/SearchHistory/SearchHistoryListItem.tsx b/packages/mobile/src/screens/search-screen/SearchHistory/SearchHistoryListItem.tsx
index 35a034c188b..72a0ac9b3af 100644
--- a/packages/mobile/src/screens/search-screen/SearchHistory/SearchHistoryListItem.tsx
+++ b/packages/mobile/src/screens/search-screen/SearchHistory/SearchHistoryListItem.tsx
@@ -22,10 +22,6 @@ const useStyles = makeStyles(({ spacing }) => ({
   },
   itemTextContainer: {
     flex: 1
-  },
-  arrow: {
-    height: spacing(3),
-    width: spacing(3)
   }
 }))
 
@@ -37,7 +33,7 @@ export const SearchHistoryListItem = (props: SearchHistoryListItemProps) => {
   const { text } = props
   const styles = useStyles()
   const navigation = useNavigation()
-  const { neutralLight4, neutralLight8 } = useThemeColors()
+  const { neutralLight8 } = useThemeColors()
   const dispatch = useDispatch()
 
   const handlePress = useCallback(() => {
@@ -60,7 +56,7 @@ export const SearchHistoryListItem = (props: SearchHistoryListItemProps) => {
             {text}
           </Text>
         </View>
-        <IconArrowRight style={styles.arrow} fill={neutralLight4} />
+        <IconArrowRight size='s' color='subdued' />
       </View>
     </TouchableHighlight>
   )
diff --git a/packages/mobile/src/screens/signon/SignupHeader.tsx b/packages/mobile/src/screens/signon/SignupHeader.tsx
index a2e30548210..d11b45a84ab 100644
--- a/packages/mobile/src/screens/signon/SignupHeader.tsx
+++ b/packages/mobile/src/screens/signon/SignupHeader.tsx
@@ -1,10 +1,12 @@
 import { View } from 'react-native'
 
-import { IconCaretLeft } from '@audius/harmony-native'
+import { IconButton, IconCaretLeft } from '@audius/harmony-native'
 import HeaderLogo from 'app/assets/images/audiusLogoHorizontalDeprecated.svg'
-import { IconButton } from 'app/components/core'
 import { makeStyles } from 'app/styles'
-import { useThemeColors } from 'app/utils/theme'
+
+const messages = {
+  backLabel: 'Back'
+}
 
 const useStyles = makeStyles(({ palette, spacing }) => ({
   container: {
@@ -25,10 +27,6 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
     height: spacing(6),
     marginLeft: spacing(4)
   },
-  backButtonIcon: {
-    width: spacing(6),
-    height: spacing(6)
-  },
   audiusLogoHeader: {
     position: 'absolute',
     alignSelf: 'center',
@@ -47,19 +45,16 @@ type SignupHeaderProps = {
 const SignupHeader = (props: SignupHeaderProps) => {
   const { showBackButton, onPressBack } = props
   const styles = useStyles()
-  const { neutralLight4 } = useThemeColors()
   return (
     <View style={styles.container}>
       <View style={styles.header}>
         {showBackButton ? (
           <IconButton
-            styles={{
-              root: styles.backButton,
-              icon: styles.backButtonIcon
-            }}
-            fill={neutralLight4}
+            style={styles.backButton}
+            color='subdued'
             icon={IconCaretLeft}
             onPress={onPressBack}
+            aria-label={messages.backLabel}
           />
         ) : null}
         <HeaderLogo style={styles.audiusLogoHeader} fill={'#C2C0CC'} />
diff --git a/packages/mobile/src/screens/smart-collection-screen/SmartCollectionScreen.tsx b/packages/mobile/src/screens/smart-collection-screen/SmartCollectionScreen.tsx
index eb33a19d45c..b88c7a8a6ab 100644
--- a/packages/mobile/src/screens/smart-collection-screen/SmartCollectionScreen.tsx
+++ b/packages/mobile/src/screens/smart-collection-screen/SmartCollectionScreen.tsx
@@ -97,7 +97,7 @@ export const SmartCollectionScreen = (props: SmartCollectionScreenProps) => {
         >
           {Icon ? (
             <View style={styles.imageIcon}>
-              <Icon width='100%' height='100%' />
+              <Icon width='100%' height='100%' color='staticWhite' />
             </View>
           ) : null}
         </LinearGradient>
diff --git a/packages/mobile/src/screens/wallet-connect/components/LinkedWallet.tsx b/packages/mobile/src/screens/wallet-connect/components/LinkedWallet.tsx
index 113a42f2ca3..cafa2a39937 100644
--- a/packages/mobile/src/screens/wallet-connect/components/LinkedWallet.tsx
+++ b/packages/mobile/src/screens/wallet-connect/components/LinkedWallet.tsx
@@ -8,8 +8,8 @@ import { View } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 import { useDispatch } from 'react-redux'
 
-import { IconCopy, IconRemove } from '@audius/harmony-native'
-import { ChainLogo, IconButton, Text } from 'app/components/core'
+import { IconButton, IconCopy, IconRemove } from '@audius/harmony-native'
+import { ChainLogo, Text } from 'app/components/core'
 import LoadingSpinner from 'app/components/loading-spinner'
 import { useDrawer } from 'app/hooks/useDrawer'
 import { useToast } from 'app/hooks/useToast'
@@ -22,7 +22,8 @@ import { useCanConnectNewWallet } from '../useCanConnectNewWallet'
 const { requestRemoveWallet } = tokenDashboardPageActions
 
 const messages = {
-  copied: 'Copied To Clipboard!'
+  copied: 'Copied To Clipboard!',
+  removeLabel: 'Remove Wallet'
 }
 
 type WalletProps = {
@@ -82,10 +83,6 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     borderWidth: 1,
     borderRadius: 6
   },
-  removeIcon: {
-    height: spacing(6),
-    width: spacing(6)
-  },
   loading: {
     marginLeft: -1,
     height: 22,
@@ -147,13 +144,12 @@ export const LinkedWallet = ({
           <LoadingSpinner style={styles.loading} />
         ) : (
           <IconButton
-            isDisabled={!canConnectNewWallet}
+            disabled={!canConnectNewWallet}
+            color='danger'
             icon={IconRemove}
-            styles={{
-              root: styles.removeButton,
-              icon: styles.removeIcon
-            }}
+            style={styles.removeButton}
             onPress={onRequestRemoveWallet}
+            aria-label={messages.removeLabel}
           />
         )}
       </View>