Align icon related docs

Author: satya164

versioned_docs/version-8.x/bottom-tab-navigator.md

@@ -300,7 +300,7 @@ function MyTabBar({ navigation }) {
 }
 ```
 
-Also see [icons documentation](icons.md) to use system icons such as [`SF Symbols`](https://developer.apple.com/sf-symbols/) and [Material Design Icons](https://material.io/resources/icons/) in your custom tab bar.
+Also see [Icons](icons.md) for supported icon formats such as [SF Symbols](https://developer.apple.com/sf-symbols/), [Material Symbols](https://fonts.google.com/icons), and [images](icons.md#images) in your custom tab bar.
 
 ### Options
 
@@ -575,14 +575,7 @@ The icon object can be one of the following types:
 
   It's necessary to provide icons for multiple screen densities (1x, 2x, 3x), e.g.: `icon.png`, `icon@2x.png`, `icon@3x.png` etc. as icons are not scaled automatically on iOS for the `native` implementation.
 
-  It also supports [drawable resource](https://developer.android.com/guide/topics/resources/drawable-resource) on Android, [xcasset](https://developer.apple.com/documentation/xcode/adding-images-to-your-xcode-project) on iOS:
-
-  ```js
-  tabBarIcon: {
-    type: 'image',
-    source: { uri: 'icon_name' },
-  }
-  ```
+  See [Icons](icons.md#images) for more details.
 
   A `tinted` property can be used to control whether the icon should be tinted with the active/inactive color:
 

versioned_docs/version-8.x/customizing-bottom-tabs.md

@@ -12,9 +12,9 @@ This is similar to how you would customize a stack navigator — there are s
 
 Icons can be specified using the [`tabBarIcon`](bottom-tab-navigator.md#tabbaricon) option. The format of the icon varies based on the platform:
 
-- Local image - all platforms
-- SF Symbols name - iOS
-- Custom drawable name - Android
+- [Images](icons.md#images) - all platforms
+- [SF Symbols](icons.md#sf-symbols) name - iOS
+- [Material Symbols](icons.md#material-symbols) name - Android
 
 ```js name="Tab bar icons" static2dynamic
 import * as React from 'react';
@@ -105,15 +105,13 @@ Let's dissect this:
 
 - [`tabBarIcon`](bottom-tab-navigator.md#tabbaricon) is a supported option in bottom tab navigator. So we know we can use it on our screen components in the `options` prop.
 - `tabBarIcon` is an object specifying the icon to display.
-  - For iOS, you can use SF Symbols by setting `type: 'sfSymbol'` and providing the symbol `name`.
-  - For Android, you can use Material Symbols by setting `type: 'materialSymbol'` and providing the symbol `name`.
-  - For other platforms, use `type: 'image'` with a `source` pointing to your image file. Image files must be provided for multiple screen densities (1x, 2x, 3x), e.g.: `home-icon.png`, `home-icon@2x.png`, `home-icon@3x.png`.
+  - For iOS, you can use [SF Symbols](icons.md#sf-symbols) by setting `type: 'sfSymbol'` and providing the symbol `name`.
+  - For Android, you can use [Material Symbols](icons.md#material-symbols) by setting `type: 'materialSymbol'` and providing the symbol `name`.
+  - For other platforms, use [`type: 'image'`](icons.md#images) with a `source` pointing to your image file. Image files must be provided for multiple screen densities (1x, 2x, 3x), e.g.: `home-icon.png`, `home-icon@2x.png`, `home-icon@3x.png`.
 - [`Platform.select`](https://reactnative.dev/docs/platform#select) can be used to provide different icons based on the platform.
 - The `tabBarActiveTintColor` and `tabBarInactiveTintColor` options in `screenOptions` control the icon and label colors. These default to the iOS platform defaults, but you can change them as shown above.
 - Read the [full API reference](bottom-tab-navigator.md) for further information on `createBottomTabNavigator` configuration options.
 
-See [Icons](icons.md) for more details on different icon types and how to use them with React Navigation.
-
 ### Different icons for active and inactive states
 
 You can also provide different icons for active and inactive states by using a function for the `tabBarIcon` option:

versioned_docs/version-8.x/drawer-navigator.md

@@ -320,67 +320,60 @@ String or a function that given `{ focused: boolean, color: string }` returns a
 
 #### `drawerIcon`
 
-Icon object to display or a function that given `{ focused: boolean, color: string, size: number }` returns an icon to display in drawer sidebar.
+Icon object to display or a function that given `{ focused: boolean, color: string, size: number }` returns an icon to display in the drawer.
 
-It supports the following types:
+The icon object can be one of the following types:
 
-- `materialSymbol` (Android only)
+- Local image - Supported on all platforms
 
   ```js
   drawerIcon: {
-    type: 'materialSymbol',
-    name: 'favorite',
-  }
-  ```
-
-  It also supports the following optional properties:
-  - `variant` - Supported values: `outlined`, `rounded`, `sharp`
-  - `weight` - Supported values: `100`, `200`, `300`, `400`, `500`, `600`, `700`
-
-  See [Icons](icons.md#material-symbols) for more details.
-
-- `sfSymbol` (iOS only)
-
-  ```js
-  drawerIcon: {
-    type: 'sfSymbol',
-    name: 'heart',
+    type: 'image',
+    source: require('./path/to/icon.png'),
   }
   ```
 
-  See [Icons](icons.md#sf-symbols) for more details.
+  See [Icons](icons.md#images) for more details.
 
-- `image`
+  A `tinted` property can be used to control whether the icon should be tinted with the active/inactive color:
 
   ```js
   drawerIcon: {
     type: 'image',
     source: require('./path/to/icon.png'),
+    tinted: false,
   }
   ```
 
-  It also supports [drawable resource](https://developer.android.com/guide/topics/resources/drawable-resource) on Android, [xcasset](https://developer.apple.com/documentation/xcode/adding-images-to-your-xcode-project) on iOS:
+  Set `tinted` to `false` if the image has its own colors that you want to preserve.
+
+  The image is tinted by default.
+
+- [SF Symbols](https://developer.apple.com/sf-symbols/) name - Supported on iOS
 
   ```js
   drawerIcon: {
-    type: 'image',
-    source: { uri: 'icon_name' },
+    type: 'sfSymbol',
+    name: 'heart',
   }
   ```
 
-  A `tinted` property can be used to control whether the icon should be tinted with the active/inactive color:
+  See [Icons](icons.md#sf-symbols) for more details.
+
+- [Material Symbols](https://fonts.google.com/icons) name - Supported on Android
 
   ```js
   drawerIcon: {
-    type: 'image',
-    source: require('./path/to/icon.png'),
-    tinted: false,
+    type: 'materialSymbol',
+    name: 'favorite',
   }
   ```
 
-  Set `tinted` to `false` if the image has its own colors that you want to preserve.
+  It also supports the following optional properties:
+  - `variant` - Supported values: `outlined`, `rounded`, `sharp`
+  - `weight` - Supported values: `100`, `200`, `300`, `400`, `500`, `600`, `700`
 
-  The image is tinted by default.
+  See [Icons](icons.md#material-symbols) for more details.
 
 In addition to the icon object, you can also provide a function which returns an icon object or a React element. It receives `focused`, `color`, and `size` in its argument object:
 
@@ -697,7 +690,7 @@ header: ({ navigation, route, options }) => {
 };
 ```
 
-Also see [icons documentation](icons.md) to use system icons such as [`SF Symbols`](https://developer.apple.com/sf-symbols/) and [Material Design Icons](https://material.io/resources/icons/) in your custom header.
+Also see [Icons](icons.md) for supported icon formats such as [SF Symbols](https://developer.apple.com/sf-symbols/), [Material Symbols](https://fonts.google.com/icons), and [images](icons.md#images) in your custom header.
 
 To set a custom header for all the screens in the navigator, you can specify this option in the `screenOptions` prop of the navigator.
 
@@ -748,7 +741,7 @@ headerLeft: (props) => (
 );
 ```
 
-See [Icons](icons.md) documentation on how to use [SF Symbols](icons.md#sf-symbols) and [Material Symbols](icons.md#material-symbols).
+See [Icons](icons.md) documentation on how to use [SF Symbols](icons.md#sf-symbols), [Material Symbols](icons.md#material-symbols), and [images](icons.md#images).
 
 ### Events
 

versioned_docs/version-8.x/elements.md

@@ -671,7 +671,7 @@ Usage:
 
 #### Custom back icon
 
-The `icon` prop accepts an icon object for SF Symbols on iOS, Material Symbols on Android and image source on all platforms:
+The `icon` prop accepts an icon object for [SF Symbols](icons.md#sf-symbols) on iOS, [Material Symbols](icons.md#material-symbols) on Android, and [image sources](icons.md#images) on all platforms:
 
 ```js
 <HeaderBackButton

versioned_docs/version-8.x/icons.md

@@ -441,9 +441,7 @@ The component accepts the following props:
 
   The available weights depend on which weights are included in the bundle. If the specified weight is not included, it will throw an error.
 
-## Other sources
-
-### Images
+## Images
 
 React Navigation also supports using images as icons. It supports the same formats as React Native's [`Image`](https://reactnative.dev/docs/image) component.
 
@@ -473,6 +471,8 @@ tabBarIcon: {
 
 Here `icon_name` is the resource name without the file extension. On Android, this can refer to a bitmap drawable such as `res/drawable/icon_name.png` or a vector drawable such as `res/drawable/icon_name.xml`. On iOS, this can refer to an image in an asset catalog, such as an image set named `icon_name`.
 
+## Other sources
+
 ### [React Native Vector Icons](https://github.com/oblador/react-native-vector-icons)
 
 The React Native Vector Icons library provides a large set of icons. However, these icons are rendered using custom fonts, which are not supported in most native navigation components such as tab bars or headers.

versioned_docs/version-8.x/material-top-tab-navigator.md

@@ -340,7 +340,7 @@ function MyTabBar({ navigation }) {
 }
 ```
 
-Also see [icons documentation](icons.md) to use system icons such as [`SF Symbols`](https://developer.apple.com/sf-symbols/) and [Material Design Icons](https://material.io/resources/icons/) in your custom tab bar.
+Also see [Icons](icons.md) for supported icon formats such as [SF Symbols](https://developer.apple.com/sf-symbols/), [Material Symbols](https://fonts.google.com/icons), and [images](icons.md#images) in your custom tab bar.
 
 ### Options
 
@@ -441,65 +441,58 @@ Whether the tab label should be visible. Defaults to `true`.
 
 Icon object to display or a function that given `{ focused: boolean, color: string, size: number }` returns an icon to display in the tab bar.
 
-It supports the following types:
+The icon object can be one of the following types:
 
-- `materialSymbol` (Android only)
+- Local image - Supported on all platforms
 
   ```js
   tabBarIcon: {
-    type: 'materialSymbol',
-    name: 'favorite',
-  }
-  ```
-
-  It also supports the following optional properties:
-  - `variant` - Supported values: `outlined`, `rounded`, `sharp`
-  - `weight` - Supported values: `100`, `200`, `300`, `400`, `500`, `600`, `700`
-
-  See [Icons](icons.md#material-symbols) for more details.
-
-- `sfSymbol` (iOS only)
-
-  ```js
-  tabBarIcon: {
-    type: 'sfSymbol',
-    name: 'heart',
+    type: 'image',
+    source: require('./path/to/icon.png'),
   }
   ```
 
-  See [Icons](icons.md#sf-symbols) for more details.
+  See [Icons](icons.md#images) for more details.
 
-- `image`
+  A `tinted` property can be used to control whether the icon should be tinted with the active/inactive color:
 
   ```js
   tabBarIcon: {
     type: 'image',
     source: require('./path/to/icon.png'),
+    tinted: false,
   }
   ```
 
-  It also supports [drawable resource](https://developer.android.com/guide/topics/resources/drawable-resource) on Android, [xcasset](https://developer.apple.com/documentation/xcode/adding-images-to-your-xcode-project) on iOS:
+  Set `tinted` to `false` if the image has its own colors that you want to preserve.
+
+  The image is tinted by default.
+
+- [SF Symbols](https://developer.apple.com/sf-symbols/) name - Supported on iOS
 
   ```js
   tabBarIcon: {
-    type: 'image',
-    source: { uri: 'icon_name' },
+    type: 'sfSymbol',
+    name: 'heart',
   }
   ```
 
-  A `tinted` property can be used to control whether the icon should be tinted with the active/inactive color:
+  See [Icons](icons.md#sf-symbols) for more details.
+
+- [Material Symbols](https://fonts.google.com/icons) name - Supported on Android
 
   ```js
   tabBarIcon: {
-    type: 'image',
-    source: require('./path/to/icon.png'),
-    tinted: false,
+    type: 'materialSymbol',
+    name: 'favorite',
   }
   ```
 
-  Set `tinted` to `false` if the image has its own colors that you want to preserve.
+  It also supports the following optional properties:
+  - `variant` - Supported values: `outlined`, `rounded`, `sharp`
+  - `weight` - Supported values: `100`, `200`, `300`, `400`, `500`, `600`, `700`
 
-  The image is tinted by default.
+  See [Icons](icons.md#material-symbols) for more details.
 
 In addition to the icon object, you can also provide a function which returns an icon object or a React element. It receives `focused`, `color`, and `size` in its argument object:
 

versioned_docs/version-8.x/native-stack-navigator.md

@@ -635,6 +635,8 @@ It supports the following types:
   }
   ```
 
+  See [Icons](icons.md#images) for more details.
+
 Defaults to back icon image for the platform:
 
 - A chevron on iOS
@@ -1222,7 +1224,7 @@ header: ({ navigation, route, options, back }) => {
 
 To set a custom header for all the screens in the navigator, you can specify this option in the `screenOptions` prop of the navigator.
 
-Also see [icons documentation](icons.md) to use system icons such as [`SF Symbols`](https://developer.apple.com/sf-symbols/) and [Material Design Icons](https://material.io/resources/icons/) in your custom header.
+Also see [Icons](icons.md) for supported icon formats such as [SF Symbols](https://developer.apple.com/sf-symbols/), [Material Symbols](https://fonts.google.com/icons), and [images](icons.md#images) in your custom header.
 
 Note that if you specify a custom header, the native functionality such as large title, search bar etc. won't work.
 
@@ -1711,14 +1713,7 @@ Common properties:
 
     It's necessary to provide icons for multiple screen densities (1x, 2x, 3x), e.g.: `icon.png`, `icon@2x.png`, `icon@3x.png` etc. as icons are not scaled automatically.
 
-    It also supports [xcasset](https://developer.apple.com/documentation/xcode/adding-images-to-your-xcode-project):
-
-    ```js
-    icon: {
-      type: 'image',
-      source: { uri: 'icon_name' },
-    }
-    ```
+    See [Icons](icons.md#images) for more details.
 
     A `tinted` property can be used to control whether the icon should be tinted with the active/inactive color:
 
@@ -1741,6 +1736,8 @@ Common properties:
     }
     ```
 
+    See [Icons](icons.md#sf-symbols) for more details.
+
 - `variant`: Visual variant of the button. Supported values:
   - `plain` (default)
   - `done`

versioned_docs/version-8.x/stack-navigator.md

@@ -294,7 +294,7 @@ header: ({ navigation, route, options, back }) => {
 
 To set a custom header for all the screens in the navigator, you can specify this option in the `screenOptions` prop of the navigator.
 
-Also see [icons documentation](icons.md) to use system icons such as [`SF Symbols`](https://developer.apple.com/sf-symbols/) and [Material Design Icons](https://material.io/resources/icons/) in your custom header.
+Also see [Icons](icons.md) for supported icon formats such as [SF Symbols](https://developer.apple.com/sf-symbols/), [Material Symbols](https://fonts.google.com/icons), and [images](icons.md#images) in your custom header.
 
 When using a custom header, there are 2 things to keep in mind:
 
@@ -387,6 +387,8 @@ It supports the following types:
   }
   ```
 
+  See [Icons](icons.md#images) for more details.
+
 In addition to the icon object, you can also provide a function which returns a React Element to display as the back icon. It receives `tintColor` in its argument object:
 
 ```js