fix(fox): improve ecosystem icon consistency and header spacing

src/components/Layout/Header/Header.tsx

@@ -86,13 +86,12 @@ export const Header = memo(() => {
 
   const searchBoxDisplay = {
     base: 'none',
-    '2xl': 'flex',
-    xl: 'none',
+    '3xl': 'flex',
   }
 
   const iconButtonDisplay = {
     base: 'flex',
-    '2xl': 'none',
+    '3xl': 'none',
   }
 
   useEffect(() => {

src/pages/Fox/components/FoxFarming.tsx

@@ -7,6 +7,7 @@ import {
   Divider,
   Flex,
   Heading,
+  Icon,
   SimpleGrid,
   Skeleton,
   Stack,
@@ -20,6 +21,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'
 import dayjs from 'dayjs'
 import qs from 'qs'
 import { useCallback, useEffect, useMemo } from 'react'
+import { TbPlant2 } from 'react-icons/tb'
 import { useTranslate } from 'react-polyglot'
 import { useLocation, useNavigate } from 'react-router-dom'
 
@@ -70,6 +72,7 @@ const columnsProps = {
   base: 1,
   md: 2,
 }
+const farmingIcon = <Icon as={TbPlant2} aria-hidden color='blue.500' boxSize={8} me={2} />
 
 export const FoxFarming = () => {
   const { assetAccountId } = useFoxPageContext()
@@ -302,9 +305,7 @@ export const FoxFarming = () => {
         <Flex sx={headerSx}>
           <Box mb={headerTitleMb} maxWidth={headerTitleMaxWidth}>
             <Heading as='h2' fontSize='2xl' display='flex' alignItems='center'>
-              <CText as='span' me={2}>
-                🧑‍🌾
-              </CText>
+              {farmingIcon}
               {translate('foxPage.foxFarming.title')}
               <Skeleton isLoaded={Boolean(!isOpportunityLoading && apy)} ml={2}>
                 <Tag colorScheme='green' verticalAlign='middle'>

src/pages/Fox/components/FoxGovernance.tsx

@@ -6,17 +6,18 @@ import {
   Divider,
   Flex,
   Heading,
+  Icon,
   Link,
   Skeleton,
   Tab,
   TabList,
   TabPanel,
   TabPanels,
   Tabs,
-  Text as CText,
 } from '@chakra-ui/react'
 import { foxAssetId } from '@shapeshiftoss/caip'
 import { useCallback, useEffect, useMemo } from 'react'
+import { TbBuildingBank } from 'react-icons/tb'
 import { useTranslate } from 'react-polyglot'
 
 import { FoxGovernanceProposal } from './FoxGovernanceProposal'
@@ -52,6 +53,7 @@ const flexPropsMdAuto = { base: 1, md: 'auto' }
 const widthBaseFull = { base: 'full' }
 const widthMdAuto = { base: 'full', md: 'auto' }
 const tabListPaddingLeft = { base: 6, md: 0 }
+const governanceIcon = <Icon as={TbBuildingBank} aria-hidden color='blue.500' boxSize={8} me={2} />
 
 export const FoxGovernance = () => {
   const isConnected = useIsWalletConnected()
@@ -119,9 +121,7 @@ export const FoxGovernance = () => {
         <Flex sx={headerSx}>
           <Box mb={headerTitleMb} maxWidth={headerTitleMaxWidth}>
             <Heading as='h2' fontSize='2xl' display='flex' alignItems='center'>
-              <CText as='span' me={2}>
-                🏛️
-              </CText>
+              {governanceIcon}
               {translate('foxPage.governance.title')}
             </Heading>
             <Flex alignItems='center'>