diff --git a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap
index e926246c756..b6526d36674 100644
--- a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap
+++ b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap
@@ -704,25 +704,14 @@ exports[`CategoryModal should render with a subcategory 1`] = `
             }
           >
             <Text
-              adjustsFontSizeToFit={true}
-              allowFontScaling={false}
               style={
-                [
-                  {
-                    "color": undefined,
-                    "fontSize": 12,
-                  },
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 22,
-                  },
-                  {
-                    "fontFamily": "anticon",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
+                {
+                  "color": "#FFFFFF",
+                  "fontFamily": "anticon",
+                  "fontSize": 22,
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                }
               }
             >
               
@@ -2135,25 +2124,14 @@ exports[`CategoryModal should render with an empty subcategory 1`] = `
             }
           >
             <Text
-              adjustsFontSizeToFit={true}
-              allowFontScaling={false}
               style={
-                [
-                  {
-                    "color": undefined,
-                    "fontSize": 12,
-                  },
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 0,
-                  },
-                  {
-                    "fontFamily": "anticon",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
+                {
+                  "color": "#FFFFFF",
+                  "fontFamily": "anticon",
+                  "fontSize": 0,
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                }
               }
             >
               
diff --git a/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap
index 4ff0da7303e..cb6961ddc29 100644
--- a/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap
+++ b/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap
@@ -209,25 +209,14 @@ exports[`WalletListModal should render with loading props 1`] = `
         }
       >
         <Text
-          adjustsFontSizeToFit={true}
-          allowFontScaling={false}
           style={
-            [
-              {
-                "color": undefined,
-                "fontSize": 12,
-              },
-              {
-                "color": "#FFFFFF",
-                "fontSize": 22,
-              },
-              {
-                "fontFamily": "anticon",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              {},
-            ]
+            {
+              "color": "#FFFFFF",
+              "fontFamily": "anticon",
+              "fontSize": 22,
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            }
           }
         >
           
@@ -392,25 +381,14 @@ exports[`WalletListModal should render with loading props 1`] = `
           }
         >
           <Text
-            adjustsFontSizeToFit={true}
-            allowFontScaling={false}
             style={
-              [
-                {
-                  "color": undefined,
-                  "fontSize": 12,
-                },
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 0,
-                },
-                {
-                  "fontFamily": "anticon",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
+              {
+                "color": "#FFFFFF",
+                "fontFamily": "anticon",
+                "fontSize": 0,
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              }
             }
           >
             
diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap
index b640142cd1a..37e416115a4 100644
--- a/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap
@@ -639,25 +639,14 @@ exports[`CreateWalletAccountSelect renders 1`] = `
             }
           >
             <Text
-              adjustsFontSizeToFit={true}
-              allowFontScaling={false}
               style={
-                [
-                  {
-                    "color": undefined,
-                    "fontSize": 12,
-                  },
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 0,
-                  },
-                  {
-                    "fontFamily": "anticon",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
+                {
+                  "color": "#FFFFFF",
+                  "fontFamily": "anticon",
+                  "fontSize": 0,
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                }
               }
             >
               
diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletImportScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletImportScene.test.tsx.snap
index faf2ca5cab6..db5d4d8f65a 100644
--- a/src/__tests__/scenes/__snapshots__/CreateWalletImportScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/CreateWalletImportScene.test.tsx.snap
@@ -613,25 +613,14 @@ exports[`CreateWalletImportScene should render with loading props 1`] = `
           }
         >
           <Text
-            adjustsFontSizeToFit={true}
-            allowFontScaling={false}
             style={
-              [
-                {
-                  "color": undefined,
-                  "fontSize": 12,
-                },
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 0,
-                },
-                {
-                  "fontFamily": "anticon",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
+              {
+                "color": "#FFFFFF",
+                "fontFamily": "anticon",
+                "fontSize": 0,
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              }
             }
           >
             
diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap
index 90a4ae94d29..dd2a2c839ac 100644
--- a/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap
@@ -379,25 +379,14 @@ exports[`CreateWalletSelectCrypto should render with loading props 1`] = `
           }
         >
           <Text
-            adjustsFontSizeToFit={true}
-            allowFontScaling={false}
             style={
-              [
-                {
-                  "color": undefined,
-                  "fontSize": 12,
-                },
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 22,
-                },
-                {
-                  "fontFamily": "anticon",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
+              {
+                "color": "#FFFFFF",
+                "fontFamily": "anticon",
+                "fontSize": 22,
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              }
             }
           >
             
@@ -563,25 +552,14 @@ exports[`CreateWalletSelectCrypto should render with loading props 1`] = `
             }
           >
             <Text
-              adjustsFontSizeToFit={true}
-              allowFontScaling={false}
               style={
-                [
-                  {
-                    "color": undefined,
-                    "fontSize": 12,
-                  },
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 0,
-                  },
-                  {
-                    "fontFamily": "anticon",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
+                {
+                  "color": "#FFFFFF",
+                  "fontFamily": "anticon",
+                  "fontSize": 0,
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                }
               }
             >
               
diff --git a/src/components/icons/ThemedIcons.tsx b/src/components/icons/ThemedIcons.tsx
index 9935dc0db93..3883e8a86c2 100644
--- a/src/components/icons/ThemedIcons.tsx
+++ b/src/components/icons/ThemedIcons.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import Animated, { AnimatedProps, SharedValue, useAnimatedStyle } from 'react-native-reanimated'
+import Animated, { SharedValue, useAnimatedStyle } from 'react-native-reanimated'
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import { IconProps as VectorIconProps } from 'react-native-vector-icons/Icon'
+import { type Icon } from 'react-native-vector-icons/Icon'
 import IonIcon from 'react-native-vector-icons/Ionicons'
 
 import { Fontello } from '../../assets/vector'
@@ -9,7 +9,6 @@ import { useTheme } from '../services/ThemeContext'
 
 //
 // Types
-
 //
 
 export interface AnimatedIconProps {
@@ -27,56 +26,79 @@ export interface IconProps {
 export type IconComponent = React.FunctionComponent<IconProps>
 
 //
-// HOCs
+// Inner components
 //
 
-function makeAnimatedFontIcon(IconComponent: React.ComponentType<AnimatedProps<VectorIconProps>>, name: string): AnimatedIconComponent {
-  return (props: AnimatedIconProps) => {
-    const { accessible, color, size } = props
-    const { icon, rem } = useTheme()
-    const oneRem = rem(1)
+interface IconChoice {
+  IconComponent: typeof Icon
+  name: string
+}
+
+function AnimatedFontIcon(props: AnimatedIconProps & IconChoice): JSX.Element {
+  const { accessible, color, IconComponent, name, size } = props
+  const theme = useTheme()
+  const defaultColor = theme.icon
+  const defaultSize = theme.rem(1)
+
+  const fontFamily = IconComponent.getFontFamily()
+  const glyphMap = IconComponent.getRawGlyphMap()
+
+  const style = useAnimatedStyle(() => ({
+    color: color?.value ?? defaultColor,
+    fontFamily,
+    fontSize: size?.value ?? defaultSize,
+    fontStyle: 'normal',
+    fontWeight: 'normal'
+  }))
+
+  return (
+    <Animated.Text accessible={accessible} style={style}>
+      {String.fromCodePoint(glyphMap[name])}
+    </Animated.Text>
+  )
+}
 
-    const style = useAnimatedStyle(() => ({
-      color: color?.value ?? icon,
-      fontSize: size?.value ?? oneRem
-    }))
+function ThemedFontIcon(props: IconProps & IconChoice): JSX.Element {
+  const theme = useTheme()
+  const { accessible, color = theme.icon, IconComponent, name, size = theme.rem(1) } = props
 
-    return <IconComponent accessible={accessible} name={name} adjustsFontSizeToFit style={style} />
+  const style = {
+    color: color,
+    fontSize: size
   }
+  return <IconComponent accessible={accessible} name={name} adjustsFontSizeToFit style={style} />
 }
 
-function makeFontIcon(IconComponent: React.ComponentType<VectorIconProps>, name: string): IconComponent {
-  return (props: IconProps) => {
-    const { icon, rem } = useTheme()
-    const { accessible, color = icon, size = rem(1) } = props
+//
+// HOC's
+//
+
+function makeAnimatedFontIcon(IconComponent: typeof Icon, name: string): AnimatedIconComponent {
+  return props => AnimatedFontIcon({ ...props, IconComponent, name })
+}
 
-    const style = {
-      color: color,
-      fontSize: size
-    }
-    return <IconComponent accessible={accessible} name={name} adjustsFontSizeToFit style={style} />
-  }
+function makeFontIcon(IconComponent: typeof Icon, name: string): IconComponent {
+  return props => ThemedFontIcon({ ...props, IconComponent, name })
 }
 
 //
 // Font Icons
 //
 
-const AnimatedAntDesignIcon = Animated.createAnimatedComponent(AntDesignIcon)
-const AnimatedFontello = Animated.createAnimatedComponent(Fontello)
-const AnimatedIonIcon = Animated.createAnimatedComponent(IonIcon)
+export function EyeIconAnimated(props: AnimatedIconProps & { off: boolean }): JSX.Element {
+  const { off, ...rest } = props
+  return AnimatedFontIcon({
+    ...rest,
+    IconComponent: IonIcon,
+    name: off ? 'eye-off-outline' : 'eye-outline'
+  })
+}
 
 export const CloseIcon = makeFontIcon(AntDesignIcon, 'close')
-export const CloseIconAnimated = makeAnimatedFontIcon(AnimatedAntDesignIcon, 'close')
-
-export const EyeIcon = makeFontIcon(IonIcon, 'eye-outline')
-export const EyeIconAnimated = makeAnimatedFontIcon(AnimatedIonIcon, 'eye-outline')
-
-export const EyeOffIcon = makeFontIcon(IonIcon, 'eye-off-outline')
-export const EyeOffIconAnimated = makeAnimatedFontIcon(AnimatedIonIcon, 'eye-off-outline')
+export const CloseIconAnimated = makeAnimatedFontIcon(AntDesignIcon, 'close')
 
 export const FlipIcon = makeFontIcon(Fontello, 'exchange')
-export const FlipIconAnimated = makeAnimatedFontIcon(AnimatedFontello, 'exchange')
+export const FlipIconAnimated = makeAnimatedFontIcon(Fontello, 'exchange')
 
 export const SearchIcon = makeFontIcon(AntDesignIcon, 'search1')
-export const SearchIconAnimated = makeAnimatedFontIcon(AnimatedAntDesignIcon, 'search1')
+export const SearchIconAnimated = makeAnimatedFontIcon(AntDesignIcon, 'search1')
diff --git a/src/components/themed/FilledTextInput.tsx b/src/components/themed/FilledTextInput.tsx
index 8548392305c..d065b05afb5 100644
--- a/src/components/themed/FilledTextInput.tsx
+++ b/src/components/themed/FilledTextInput.tsx
@@ -16,7 +16,7 @@ import Animated, {
 import { useHandler } from '../../hooks/useHandler'
 import { SpaceProps, useSpaceStyle } from '../../hooks/useSpaceStyle'
 import { styled, styledWithRef } from '../hoc/styled'
-import { AnimatedIconComponent, CloseIconAnimated, EyeIconAnimated, EyeOffIconAnimated } from '../icons/ThemedIcons'
+import { AnimatedIconComponent, CloseIconAnimated, EyeIconAnimated } from '../icons/ThemedIcons'
 import { useTheme } from '../services/ThemeContext'
 import { EdgeText } from './EdgeText'
 import { NumericInput } from './NumericInput'
@@ -260,7 +260,7 @@ export const FilledTextInput = React.forwardRef<FilledTextInputRef, FilledTextIn
           {secureTextEntry ? (
             <TouchableWithoutFeedback testID={`${testID}.eyeIcon`} onPress={handleHidePassword}>
               <IconContainer>
-                {hidePassword ? <EyeOffIconAnimated accessible color={iconColor} /> : <EyeIconAnimated accessible color={iconColor} />}
+                <EyeIconAnimated accessible color={iconColor} off={!hidePassword} />
               </IconContainer>
             </TouchableWithoutFeedback>
           ) : null}