diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx
index b1f137b9a1..41ec0aced5 100644
--- a/src/components/BottomNavigation/BottomNavigation.tsx
+++ b/src/components/BottomNavigation/BottomNavigation.tsx
@@ -78,8 +78,8 @@ type Props = {
    *
    * - `key`: a unique key to identify the route (required)
    * - `title`: title of the route to use as the tab label
-   * - `focusedIcon`:  icon to use as the focused tab icon, can be a string, an image source or a react component
-   * - `unfocusedIcon`:  icon to use as the unfocused tab icon, can be a string, an image source or a react component
+   * - `focusedIcon`:  icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v3.x
+   * - `unfocusedIcon`:  icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v3.x with theme version 3
    * - `color`: color to use as background color for shifting bottom navigation
    * - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.
    * - `accessibilityLabel`: accessibility label for the tab button
@@ -567,12 +567,14 @@ const BottomNavigation = ({
       : true;
 
   const textColor = isDark ? white : black;
+
   const activeTintColor =
     typeof activeColor !== 'undefined'
       ? activeColor
       : isV3
       ? theme.colors.onSecondaryContainer
       : textColor;
+
   const inactiveTintColor =
     typeof inactiveColor !== 'undefined'
       ? inactiveColor
@@ -773,12 +775,18 @@ const BottomNavigation = ({
 
               const badge = getBadge({ route });
 
-              const labelColor = !isV3
+              const activeLabelColor = !isV3
                 ? activeTintColor
                 : focused
                 ? theme.colors.onSurface
                 : theme.colors.onSurfaceVariant;
 
+              const inactiveLabelColor = !isV3
+                ? inactiveTintColor
+                : focused
+                ? theme.colors.onSurface
+                : theme.colors.onSurfaceVariant;
+
               const badgeStyle = {
                 top: !isV3 ? -2 : typeof badge === 'boolean' ? 4 : 2,
                 right:
@@ -911,7 +919,7 @@ const BottomNavigation = ({
                             renderLabel({
                               route,
                               focused: true,
-                              color: labelColor,
+                              color: activeLabelColor,
                             })
                           ) : (
                             <Text
@@ -919,7 +927,7 @@ const BottomNavigation = ({
                               style={[
                                 styles.label,
                                 {
-                                  color: labelColor,
+                                  color: activeLabelColor,
                                 },
                               ]}
                             >
@@ -938,7 +946,7 @@ const BottomNavigation = ({
                               renderLabel({
                                 route,
                                 focused: false,
-                                color: labelColor,
+                                color: inactiveLabelColor,
                               })
                             ) : (
                               <Text
@@ -947,7 +955,7 @@ const BottomNavigation = ({
                                 style={[
                                   styles.label,
                                   {
-                                    color: labelColor,
+                                    color: inactiveLabelColor,
                                   },
                                 ]}
                               >
diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
index aa442a9701..f2a82c1293 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
@@ -1479,7 +1479,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                 }
               >
                 <text
-                  color="#ffffff"
+                  color="rgba(255, 255, 255, 0.5)"
                 />
               </View>
             </View>
@@ -1645,7 +1645,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                 }
               >
                 <text
-                  color="#ffffff"
+                  color="rgba(255, 255, 255, 0.5)"
                 />
               </View>
             </View>
@@ -1811,7 +1811,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                 }
               >
                 <text
-                  color="#ffffff"
+                  color="rgba(255, 255, 255, 0.5)"
                 />
               </View>
             </View>
@@ -3051,7 +3051,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                           "textAlign": "center",
                         },
                         Object {
-                          "color": "#FBF7DB",
+                          "color": "#853D4B",
                         },
                       ],
                     ]
@@ -3296,7 +3296,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                           "textAlign": "center",
                         },
                         Object {
-                          "color": "#FBF7DB",
+                          "color": "#853D4B",
                         },
                       ],
                     ]
@@ -3541,7 +3541,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                           "textAlign": "center",
                         },
                         Object {
-                          "color": "#FBF7DB",
+                          "color": "#853D4B",
                         },
                       ],
                     ]
@@ -4652,7 +4652,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
                           "textAlign": "center",
                         },
                         Object {
-                          "color": "#ffffff",
+                          "color": "rgba(255, 255, 255, 0.5)",
                         },
                       ],
                     ]
@@ -4897,7 +4897,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
                           "textAlign": "center",
                         },
                         Object {
-                          "color": "#ffffff",
+                          "color": "rgba(255, 255, 255, 0.5)",
                         },
                       ],
                     ]
@@ -5142,7 +5142,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
                           "textAlign": "center",
                         },
                         Object {
-                          "color": "#ffffff",
+                          "color": "rgba(255, 255, 255, 0.5)",
                         },
                       ],
                     ]