diff --git a/packages/mobile/src/harmony-native/components/CompletionCheck/CompletionCheck.tsx b/packages/mobile/src/harmony-native/components/CompletionCheck/CompletionCheck.tsx
index 09df1d4ea4b..2832d35882f 100644
--- a/packages/mobile/src/harmony-native/components/CompletionCheck/CompletionCheck.tsx
+++ b/packages/mobile/src/harmony-native/components/CompletionCheck/CompletionCheck.tsx
@@ -55,7 +55,7 @@ const CompletionError = ({ value }: CompletionCheckProps) => {
 
   return (
     <CompletionIconBase style={[animationStyle]}>
-      <IconMultiselectRemove />
+      <IconMultiselectRemove size='m' />
     </CompletionIconBase>
   )
 }
diff --git a/packages/mobile/src/screens/signon/CreatePassword.tsx b/packages/mobile/src/screens/signon/CreatePassword.tsx
index 522c0328e75..21b04f18b6c 100644
--- a/packages/mobile/src/screens/signon/CreatePassword.tsx
+++ b/packages/mobile/src/screens/signon/CreatePassword.tsx
@@ -24,11 +24,7 @@ import { SafeAreaView } from 'react-native-safe-area-context'
 import { useDispatch, useSelector } from 'react-redux'
 import { useEffectOnce } from 'react-use'
 
-import {
-  IconArrowRight,
-  IconCheck,
-  IconMultiselectRemove
-} from '@audius/harmony-native'
+import { CompletionCheck, IconArrowRight } from '@audius/harmony-native'
 import Button from 'app/components/button'
 import LoadingSpinner from 'app/components/loading-spinner'
 import { track, make } from 'app/services/analytics'
@@ -107,28 +103,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignContent: 'flex-start',
     marginTop: 16,
+    gap: 8,
     width: '100%'
   },
-  unchecked: {
-    width: 16,
-    height: 16,
-    borderWidth: 2,
-    borderColor: '#858199',
-    borderRadius: 12,
-    marginRight: 13
-  },
-  iconCheck: {
-    position: 'absolute',
-    width: 16,
-    height: 16,
-    zIndex: 2
-  },
-  errorIcon: {
-    position: 'absolute',
-    width: 16,
-    height: 16,
-    zIndex: 2
-  },
   uncheckedDescription: {
     color: '#858199',
     fontSize: 14,
@@ -219,38 +196,17 @@ const Checkbox = ({
     }).start(() => {})
   }
 
-  const animatedStyles = [
-    styles.iconCheck,
-    {
-      opacity,
-      transform: [
-        {
-          scale: opacity.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, 1]
-          })
-        }
-      ]
-    }
-  ]
-
   if (met) {
     return (
       <View style={styles.checkboxContainer}>
-        <Animated.View style={animatedStyles}>
-          <IconCheck style={styles.iconCheck} />
-        </Animated.View>
-        <View style={styles.unchecked} />
+        <CompletionCheck value='complete' />
         <Text style={styles.uncheckedDescription}>{messages.checks[i]}</Text>
       </View>
     )
   } else if (error) {
     return (
       <View style={styles.checkboxContainer}>
-        <Animated.View style={animatedStyles}>
-          <IconMultiselectRemove style={styles.iconCheck} />
-        </Animated.View>
-        <View style={styles.unchecked} />
+        <CompletionCheck value='error' />
         <Text
           style={[styles.uncheckedDescription, { color: errorBorderColor }]}
         >
@@ -261,7 +217,7 @@ const Checkbox = ({
   } else {
     return (
       <View style={styles.checkboxContainer}>
-        <View style={styles.unchecked} />
+        <CompletionCheck value='incomplete' />
         <Text style={styles.uncheckedDescription}>{messages.checks[i]}</Text>
       </View>
     )
diff --git a/packages/mobile/src/screens/signon/ProfileManual.tsx b/packages/mobile/src/screens/signon/ProfileManual.tsx
index 08d7a540aaa..a404e3f4610 100644
--- a/packages/mobile/src/screens/signon/ProfileManual.tsx
+++ b/packages/mobile/src/screens/signon/ProfileManual.tsx
@@ -154,8 +154,6 @@ const useStyles = makeStyles(({ palette }) => ({
   },
   errorIcon: {
     flex: 1,
-    width: 12,
-    height: 12,
     marginRight: 10,
     alignSelf: 'center'
   },
@@ -320,7 +318,7 @@ const ProfileManual = ({ navigation }: ProfileManualProps) => {
     if (!handleIsValid && handleError !== '') {
       return (
         <View style={styles.errorContainer}>
-          <IconMultiselectRemove style={styles.errorIcon} />
+          <IconMultiselectRemove style={styles.errorIcon} size='m' />
           <Text style={styles.errorText}>
             &nbsp;
             {messages.errors[messages.errorTypes.indexOf(handleError)]}
@@ -331,7 +329,10 @@ const ProfileManual = ({ navigation }: ProfileManualProps) => {
     } else {
       return (
         <View style={styles.errorContainer}>
-          <IconMultiselectRemove style={[styles.errorIcon, { opacity: 0 }]} />
+          <IconMultiselectRemove
+            style={[styles.errorIcon, { opacity: 0 }]}
+            size='m'
+          />
           <Text style={styles.errorText}>&nbsp;</Text>
         </View>
       )
diff --git a/packages/mobile/src/screens/signon/SignOn.tsx b/packages/mobile/src/screens/signon/SignOn.tsx
index e8d11878a4a..0198745958a 100644
--- a/packages/mobile/src/screens/signon/SignOn.tsx
+++ b/packages/mobile/src/screens/signon/SignOn.tsx
@@ -224,8 +224,6 @@ const styles = StyleSheet.create({
   },
   errorIcon: {
     flex: 1,
-    width: 12,
-    height: 12,
     marginRight: 10,
     alignSelf: 'center'
   },
@@ -456,7 +454,7 @@ const SignOn = ({ navigation }: SignOnProps) => {
         <Animated.View
           style={[styles.errorContainer, { opacity: errorOpacity }]}
         >
-          <IconMultiselectRemove style={styles.errorIcon} />
+          <IconMultiselectRemove style={styles.errorIcon} size='m' />
           <Text style={styles.errorText}>{errorMessages.requiresOtp}</Text>
         </Animated.View>
       )
@@ -465,7 +463,7 @@ const SignOn = ({ navigation }: SignOnProps) => {
         <Animated.View
           style={[styles.errorContainer, { opacity: errorOpacity }]}
         >
-          <IconMultiselectRemove style={styles.errorIcon} />
+          <IconMultiselectRemove style={styles.errorIcon} size='m' />
           <Text style={styles.errorText}>{errorMessages.default}</Text>
         </Animated.View>
       )
@@ -475,7 +473,7 @@ const SignOn = ({ navigation }: SignOnProps) => {
         <Animated.View
           style={[styles.errorContainer, { opacity: errorOpacity }]}
         >
-          <IconMultiselectRemove style={styles.errorIcon} />
+          <IconMultiselectRemove style={styles.errorIcon} size='m' />
           <Text style={styles.errorText}>{errorMessages.invalidEmail}</Text>
         </Animated.View>
       )
@@ -485,14 +483,17 @@ const SignOn = ({ navigation }: SignOnProps) => {
         <Animated.View
           style={[styles.errorContainer, { opacity: errorOpacity }]}
         >
-          <IconMultiselectRemove style={styles.errorIcon} />
+          <IconMultiselectRemove style={styles.errorIcon} size='m' />
           <Text style={styles.errorText}>{errorMessages.emptyPassword}</Text>
         </Animated.View>
       )
     }
     return (
       <View style={styles.errorContainer}>
-        <IconMultiselectRemove style={[styles.errorIcon, { opacity: 0 }]} />
+        <IconMultiselectRemove
+          style={[styles.errorIcon, { opacity: 0 }]}
+          size='m'
+        />
         <Text />
       </View>
     )