diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.tsx
similarity index 57%
rename from src/components/MultipleAvatars.js
rename to src/components/MultipleAvatars.tsx
index 209540189b69..e867de7ddb97 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.tsx
@@ -1,77 +1,69 @@
-import PropTypes from 'prop-types';
 import React, {memo, useMemo} from 'react';
-import {View} from 'react-native';
-import _ from 'underscore';
+import {StyleProp, View, ViewStyle} from 'react-native';
+import {ValueOf} from 'type-fest';
+import {AvatarSource} from '@libs/UserUtils';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
 import themeColors from '@styles/themes/default';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import type {Icon} from '@src/types/onyx/OnyxCommon';
 import Avatar from './Avatar';
-import avatarPropTypes from './avatarPropTypes';
 import Text from './Text';
 import Tooltip from './Tooltip';
 import UserDetailsTooltip from './UserDetailsTooltip';
 
-const propTypes = {
+type MultipleAvatarsProps = {
     /** Array of avatar URLs or icons */
-    icons: PropTypes.arrayOf(avatarPropTypes),
+    icons: Icon[];
 
     /** Set the size of avatars */
-    size: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
+    size?: ValueOf<typeof CONST.AVATAR_SIZE>;
 
     /** Style for Second Avatar */
-    // eslint-disable-next-line react/forbid-prop-types
-    secondAvatarStyle: PropTypes.arrayOf(PropTypes.object),
+    secondAvatarStyle?: StyleProp<ViewStyle>;
 
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
-    fallbackIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    fallbackIcon?: AvatarSource;
 
     /** Prop to identify if we should load avatars vertically instead of diagonally */
-    shouldStackHorizontally: PropTypes.bool,
+    shouldStackHorizontally?: boolean;
 
     /** Prop to identify if we should display avatars in rows */
-    shouldDisplayAvatarsInRows: PropTypes.bool,
+    shouldDisplayAvatarsInRows?: boolean;
 
     /** Whether the avatars are hovered */
-    isHovered: PropTypes.bool,
+    isHovered?: boolean;
 
     /** Whether the avatars are in an element being pressed */
-    isPressed: PropTypes.bool,
+    isPressed?: boolean;
 
     /** Whether #focus mode is on */
-    isFocusMode: PropTypes.bool,
+    isFocusMode?: boolean;
 
     /** Whether avatars are displayed within a reportAction */
-    isInReportAction: PropTypes.bool,
+    isInReportAction?: boolean;
 
     /** Whether to show the toolip text */
-    shouldShowTooltip: PropTypes.bool,
+    shouldShowTooltip?: boolean;
 
     /** Whether avatars are displayed with the highlighted background color instead of the app background color. This is primarily the case for IOU previews. */
-    shouldUseCardBackground: PropTypes.bool,
+    shouldUseCardBackground?: boolean;
 
     /** Prop to limit the amount of avatars displayed horizontally */
-    maxAvatarsInRow: PropTypes.number,
+    maxAvatarsInRow?: number;
 };
 
-const defaultProps = {
-    icons: [],
-    size: CONST.AVATAR_SIZE.DEFAULT,
-    secondAvatarStyle: [StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)],
-    fallbackIcon: undefined,
-    shouldStackHorizontally: false,
-    shouldDisplayAvatarsInRows: false,
-    isHovered: false,
-    isPressed: false,
-    isFocusMode: false,
-    isInReportAction: false,
-    shouldShowTooltip: true,
-    shouldUseCardBackground: false,
-    maxAvatarsInRow: CONST.AVATAR_ROW_SIZE.DEFAULT,
+type AvatarStyles = {
+    singleAvatarStyle: ViewStyle;
+    secondAvatarStyles: ViewStyle;
 };
 
-const avatarSizeToStylesMap = {
+type AvatarSizeToStyles = typeof CONST.AVATAR_SIZE.SMALL | typeof CONST.AVATAR_SIZE.LARGE | typeof CONST.AVATAR_SIZE.DEFAULT;
+
+type AvatarSizeToStylesMap = Record<AvatarSizeToStyles, AvatarStyles>;
+
+const avatarSizeToStylesMap: AvatarSizeToStylesMap = {
     [CONST.AVATAR_SIZE.SMALL]: {
         singleAvatarStyle: styles.singleAvatarSmall,
         secondAvatarStyles: styles.secondAvatarSmall,
@@ -80,78 +72,92 @@ const avatarSizeToStylesMap = {
         singleAvatarStyle: styles.singleAvatarMedium,
         secondAvatarStyles: styles.secondAvatarMedium,
     },
-    default: {
+    [CONST.AVATAR_SIZE.DEFAULT]: {
         singleAvatarStyle: styles.singleAvatar,
         secondAvatarStyles: styles.secondAvatar,
     },
 };
-function MultipleAvatars(props) {
-    let avatarContainerStyles = StyleUtils.getContainerStyles(props.size, props.isInReportAction);
-    const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[props.size] || avatarSizeToStylesMap.default, [props.size]);
 
-    const tooltipTexts = props.shouldShowTooltip ? _.pluck(props.icons, 'name') : [''];
+function MultipleAvatars({
+    fallbackIcon,
+    icons = [],
+    size = CONST.AVATAR_SIZE.DEFAULT,
+    secondAvatarStyle = [StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)],
+    shouldStackHorizontally = false,
+    shouldDisplayAvatarsInRows = false,
+    isHovered = false,
+    isPressed = false,
+    isFocusMode = false,
+    isInReportAction = false,
+    shouldShowTooltip = true,
+    shouldUseCardBackground = false,
+    maxAvatarsInRow = CONST.AVATAR_ROW_SIZE.DEFAULT,
+}: MultipleAvatarsProps) {
+    let avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
+    const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size]);
+
+    const tooltipTexts = useMemo(() => (shouldShowTooltip ? icons.map((icon) => icon.name) : ['']), [shouldShowTooltip, icons]);
     const avatarSize = useMemo(() => {
-        if (props.isFocusMode) {
+        if (isFocusMode) {
             return CONST.AVATAR_SIZE.MID_SUBSCRIPT;
         }
 
-        if (props.size === CONST.AVATAR_SIZE.LARGE) {
+        if (size === CONST.AVATAR_SIZE.LARGE) {
             return CONST.AVATAR_SIZE.MEDIUM;
         }
 
         return CONST.AVATAR_SIZE.SMALLER;
-    }, [props.isFocusMode, props.size]);
+    }, [isFocusMode, size]);
 
     const avatarRows = useMemo(() => {
         // If we're not displaying avatars in rows or the number of icons is less than or equal to the max avatars in a row, return a single row
-        if (!props.shouldDisplayAvatarsInRows || props.icons.length <= props.maxAvatarsInRow) {
-            return [props.icons];
+        if (!shouldDisplayAvatarsInRows || icons.length <= maxAvatarsInRow) {
+            return [icons];
         }
 
         // Calculate the size of each row
-        const rowSize = Math.min(Math.ceil(props.icons.length / 2), props.maxAvatarsInRow);
+        const rowSize = Math.min(Math.ceil(icons.length / 2), maxAvatarsInRow);
 
         // Slice the icons array into two rows
-        const firstRow = props.icons.slice(rowSize);
-        const secondRow = props.icons.slice(0, rowSize);
+        const firstRow = icons.slice(rowSize);
+        const secondRow = icons.slice(0, rowSize);
 
         // Update the state with the two rows as an array
         return [firstRow, secondRow];
-    }, [props.icons, props.maxAvatarsInRow, props.shouldDisplayAvatarsInRows]);
+    }, [icons, maxAvatarsInRow, shouldDisplayAvatarsInRows]);
 
-    if (!props.icons.length) {
+    if (!icons.length) {
         return null;
     }
 
-    if (props.icons.length === 1 && !props.shouldStackHorizontally) {
+    if (icons.length === 1 && !shouldStackHorizontally) {
         return (
             <UserDetailsTooltip
-                accountID={props.icons[0].id}
-                icon={props.icons[0]}
+                accountID={icons[0].id}
+                icon={icons[0]}
                 fallbackUserDetails={{
-                    displayName: props.icons[0].name,
-                    avatar: props.icons[0].avatar,
+                    displayName: icons[0].name,
                 }}
             >
                 <View style={avatarContainerStyles}>
                     <Avatar
-                        source={props.icons[0].source}
-                        size={props.size}
+                        source={icons[0].source}
+                        size={size}
                         fill={themeColors.iconSuccessFill}
-                        name={props.icons[0].name}
-                        type={props.icons[0].type}
-                        fallbackIcon={props.icons[0].fallbackIcon}
+                        name={icons[0].name}
+                        type={icons[0].type}
+                        fallbackIcon={icons[0].fallbackIcon}
                     />
                 </View>
             </UserDetailsTooltip>
         );
     }
 
-    const oneAvatarSize = StyleUtils.getAvatarStyle(props.size);
-    const oneAvatarBorderWidth = StyleUtils.getAvatarBorderWidth(props.size).borderWidth;
+    const oneAvatarSize = StyleUtils.getAvatarStyle(size);
+    const oneAvatarBorderWidth = StyleUtils.getAvatarBorderWidth(size).borderWidth ?? 0;
     const overlapSize = oneAvatarSize.width / 3;
 
-    if (props.shouldStackHorizontally) {
+    if (shouldStackHorizontally) {
         // Height of one avatar + border space
         const height = oneAvatarSize.height + 2 * oneAvatarBorderWidth;
         avatarContainerStyles = StyleUtils.combineStyles([styles.alignItemsCenter, styles.flexRow, StyleUtils.getHeight(height)]);
@@ -159,36 +165,36 @@ function MultipleAvatars(props) {
 
     return (
         <>
-            {props.shouldStackHorizontally ? (
-                _.map(avatarRows, (avatars, rowIndex) => (
+            {shouldStackHorizontally ? (
+                avatarRows.map((avatars, rowIndex) => (
                     <View
                         style={avatarContainerStyles}
+                        /* eslint-disable-next-line react/no-array-index-key */
                         key={`avatarRow-${rowIndex}`}
                     >
-                        {_.map([...avatars].splice(0, props.maxAvatarsInRow), (icon, index) => (
+                        {[...avatars].splice(0, maxAvatarsInRow).map((icon, index) => (
                             <UserDetailsTooltip
-                                key={`stackedAvatars-${index}`}
+                                key={`stackedAvatars-${icon.id}`}
                                 accountID={icon.id}
                                 icon={icon}
                                 fallbackUserDetails={{
                                     displayName: icon.name,
-                                    avatar: icon.avatar,
                                 }}
                             >
-                                <View style={[StyleUtils.getHorizontalStackedAvatarStyle(index, overlapSize), StyleUtils.getAvatarBorderRadius(props.size, icon.type)]}>
+                                <View style={[StyleUtils.getHorizontalStackedAvatarStyle(index, overlapSize), StyleUtils.getAvatarBorderRadius(size, icon.type)]}>
                                     <Avatar
                                         iconAdditionalStyles={[
                                             StyleUtils.getHorizontalStackedAvatarBorderStyle({
-                                                isHovered: props.isHovered,
-                                                isPressed: props.isPressed,
-                                                isInReportAction: props.isInReportAction,
-                                                shouldUseCardBackground: props.shouldUseCardBackground,
+                                                isHovered,
+                                                isPressed,
+                                                isInReportAction,
+                                                shouldUseCardBackground,
                                             }),
-                                            StyleUtils.getAvatarBorderWidth(props.size),
+                                            StyleUtils.getAvatarBorderWidth(size),
                                         ]}
-                                        source={icon.source || props.fallbackIcon}
+                                        source={icon.source ?? fallbackIcon}
                                         fill={themeColors.iconSuccessFill}
-                                        size={props.size}
+                                        size={size}
                                         name={icon.name}
                                         type={icon.type}
                                         fallbackIcon={icon.fallbackIcon}
@@ -196,26 +202,26 @@ function MultipleAvatars(props) {
                                 </View>
                             </UserDetailsTooltip>
                         ))}
-                        {avatars.length > props.maxAvatarsInRow && (
+                        {avatars.length > maxAvatarsInRow && (
                             <Tooltip
                                 // We only want to cap tooltips to only 10 users or so since some reports have hundreds of users, causing performance to degrade.
-                                text={tooltipTexts.slice(avatarRows.length * props.maxAvatarsInRow - 1, avatarRows.length * props.maxAvatarsInRow + 9).join(', ')}
+                                text={tooltipTexts.slice(avatarRows.length * maxAvatarsInRow - 1, avatarRows.length * maxAvatarsInRow + 9).join(', ')}
                             >
                                 <View
                                     style={[
                                         styles.alignItemsCenter,
                                         styles.justifyContentCenter,
                                         StyleUtils.getHorizontalStackedAvatarBorderStyle({
-                                            isHovered: props.isHovered,
-                                            isPressed: props.isPressed,
-                                            isInReportAction: props.isInReportAction,
-                                            shouldUseCardBackground: props.shouldUseCardBackground,
+                                            isHovered,
+                                            isPressed,
+                                            isInReportAction,
+                                            shouldUseCardBackground,
                                         }),
 
                                         // Set overlay background color with RGBA value so that the text will not inherit opacity
                                         StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.overlay, variables.overlayOpacity),
                                         StyleUtils.getHorizontalStackedOverlayAvatarStyle(oneAvatarSize, oneAvatarBorderWidth),
-                                        props.icons[3].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(props.size, props.icons[3].type) : {},
+                                        icons[3].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(size, icons[3].type) : {},
                                     ]}
                                 >
                                     <View
@@ -227,9 +233,9 @@ function MultipleAvatars(props) {
                                         ]}
                                     >
                                         <Text
-                                            style={[styles.avatarInnerTextSmall, StyleUtils.getAvatarExtraFontSizeStyle(props.size), styles.userSelectNone]}
+                                            style={[styles.avatarInnerTextSmall, StyleUtils.getAvatarExtraFontSizeStyle(size), styles.userSelectNone]}
                                             dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
-                                        >{`+${avatars.length - props.maxAvatarsInRow}`}</Text>
+                                        >{`+${avatars.length - maxAvatarsInRow}`}</Text>
                                     </View>
                                 </View>
                             </Tooltip>
@@ -238,53 +244,45 @@ function MultipleAvatars(props) {
                 ))
             ) : (
                 <View style={avatarContainerStyles}>
-                    <View style={[singleAvatarStyle, props.icons[0].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(props.size, props.icons[0].type) : {}]}>
+                    <View style={[singleAvatarStyle, icons[0].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(size, icons[0].type) : {}]}>
                         <UserDetailsTooltip
-                            accountID={props.icons[0].id}
-                            icon={props.icons[0]}
+                            accountID={icons[0].id}
+                            icon={icons[0]}
                             fallbackUserDetails={{
-                                displayName: props.icons[0].name,
-                                avatar: props.icons[0].avatar,
+                                displayName: icons[0].name,
                             }}
                         >
                             {/* View is necessary for tooltip to show for multiple avatars in LHN */}
                             <View>
                                 <Avatar
-                                    source={props.icons[0].source || props.fallbackIcon}
+                                    source={icons[0].source ?? fallbackIcon}
                                     fill={themeColors.iconSuccessFill}
                                     size={avatarSize}
                                     imageStyles={[singleAvatarStyle]}
-                                    name={props.icons[0].name}
-                                    type={props.icons[0].type}
-                                    fallbackIcon={props.icons[0].fallbackIcon}
+                                    name={icons[0].name}
+                                    type={icons[0].type}
+                                    fallbackIcon={icons[0].fallbackIcon}
                                 />
                             </View>
                         </UserDetailsTooltip>
-                        <View
-                            style={[
-                                secondAvatarStyles,
-                                ...props.secondAvatarStyle,
-                                props.icons[1].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(props.size, props.icons[1].type) : {},
-                            ]}
-                        >
-                            {props.icons.length === 2 ? (
+                        <View style={[secondAvatarStyles, secondAvatarStyle, icons[1].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(size, icons[1].type) : {}]}>
+                            {icons.length === 2 ? (
                                 <UserDetailsTooltip
-                                    accountID={props.icons[1].id}
-                                    icon={props.icons[1]}
+                                    accountID={icons[1].id}
+                                    icon={icons[1]}
                                     fallbackUserDetails={{
-                                        displayName: props.icons[1].name,
-                                        avatar: props.icons[1].avatar,
+                                        displayName: icons[1].name,
                                     }}
                                 >
                                     <View>
                                         <Avatar
-                                            source={props.icons[1].source || props.fallbackIcon}
+                                            source={icons[1].source ?? fallbackIcon}
                                             fill={themeColors.iconSuccessFill}
                                             size={avatarSize}
                                             imageStyles={[singleAvatarStyle]}
-                                            name={props.icons[1].name}
-                                            type={props.icons[1].type}
-                                            fallbackIcon={props.icons[1].fallbackIcon}
+                                            name={icons[1].name}
+                                            type={icons[1].type}
+                                            fallbackIcon={icons[1].fallbackIcon}
                                         />
                                     </View>
                                 </UserDetailsTooltip>
@@ -292,10 +290,10 @@ function MultipleAvatars(props) {
                                 <Tooltip text={tooltipTexts.slice(1).join(', ')}>
                                     <View style={[singleAvatarStyle, styles.alignItemsCenter, styles.justifyContentCenter]}>
                                         <Text
-                                            style={(styles.userSelectNone, props.size === CONST.AVATAR_SIZE.SMALL ? styles.avatarInnerTextSmall : styles.avatarInnerText)}
+                                            style={[styles.userSelectNone, size === CONST.AVATAR_SIZE.SMALL ? styles.avatarInnerTextSmall : styles.avatarInnerText]}
                                             dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
                                         >
-                                            {`+${props.icons.length - 1}`}
+                                            {`+${icons.length - 1}`}
                                         </Text>
                                     </View>
                                 </Tooltip>
@@ -308,8 +306,6 @@ function MultipleAvatars(props) {
     );
 }
 
-MultipleAvatars.defaultProps = defaultProps;
-MultipleAvatars.propTypes = propTypes;
 MultipleAvatars.displayName = 'MultipleAvatars';
 
 export default memo(MultipleAvatars);
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
index a4744ee88cdf..a99d292e9dc6 100644
--- a/src/styles/StyleUtils.ts
+++ b/src/styles/StyleUtils.ts
@@ -17,6 +17,12 @@ import variables from './variables';
 
 type AllStyles = ViewStyle | TextStyle | ImageStyle;
 type ParsableStyle = StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
+type AvatarStyle = {
+    width: number;
+    height: number;
+    borderRadius: number;
+    backgroundColor: string;
+};
 
 type ColorValue = ValueOf<typeof colors>;
 type AvatarSizeName = ValueOf<typeof CONST.AVATAR_SIZE>;
@@ -210,7 +216,7 @@ function getAvatarWidthStyle(size: AvatarSizeName): ViewStyle {
 /**
  * Return the style from an avatar size constant
  */
-function getAvatarStyle(size: AvatarSizeName): ViewStyle {
+function getAvatarStyle(size: AvatarSizeName): AvatarStyle {
     const avatarSize = getAvatarSize(size);
     return {
         height: avatarSize,
@@ -241,7 +247,7 @@ function getAvatarBorderWidth(size: AvatarSizeName): ViewStyle {
 /**
  * Return the border radius for an avatar
  */
-function getAvatarBorderRadius(size: AvatarSizeName, type: string): ViewStyle {
+function getAvatarBorderRadius(size: AvatarSizeName, type?: string): ViewStyle {
     if (type === CONST.ICON_TYPE_WORKSPACE) {
         return {borderRadius: avatarBorderSizes[size]};
     }
diff --git a/src/types/onyx/OnyxCommon.ts b/src/types/onyx/OnyxCommon.ts
index 202407d6a2e8..ac69baed3ef1 100644
--- a/src/types/onyx/OnyxCommon.ts
+++ b/src/types/onyx/OnyxCommon.ts
@@ -1,6 +1,5 @@
-import * as React from 'react';
-import {SvgProps} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
+import {AvatarSource} from '@libs/UserUtils';
 import CONST from '@src/CONST';
 
 type PendingAction = ValueOf<typeof CONST.RED_BRICK_ROAD_PENDING_ACTION>;
@@ -12,11 +11,20 @@ type ErrorFields<TKey extends string = string> = Record<TKey, Errors | null | un
 type Errors = Record<string, string>;
 
 type Icon = {
-    source: string | React.FC<SvgProps>;
+    /** Avatar source to display */
+    source: AvatarSource;
+
+    /** Denotes whether it is an avatar or a workspace avatar */
     type: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE;
+
+    /** Owner of the avatar. If user, displayName. If workspace, policy name */
     name: string;
+
+    /** Avatar id */
     id: number | string;
-    fallbackIcon?: string | React.FC<SvgProps>;
+
+    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
+    fallbackIcon?: AvatarSource;
 };
 
 export type {Icon, PendingAction, PendingFields, ErrorFields, Errors};