diff --git a/packages/blade/src/components/Avatar/Avatar.native.tsx b/packages/blade/src/components/Avatar/Avatar.native.tsx
new file mode 100644
index 00000000000..73f9e303282
--- /dev/null
+++ b/packages/blade/src/components/Avatar/Avatar.native.tsx
@@ -0,0 +1,14 @@
+import type { AvatarProps } from './types';
+import { throwBladeError } from '~utils/logger';
+
+const Avatar = (_props: AvatarProps): React.ReactElement => {
+  throwBladeError({
+    message: 'Avatar is not yet implemented for React Native',
+    moduleName: 'Avatar',
+  });
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <></>;
+};
+
+export { Avatar };
diff --git a/packages/blade/src/components/Avatar/Avatar.web.tsx b/packages/blade/src/components/Avatar/Avatar.web.tsx
new file mode 100644
index 00000000000..439e8235a52
--- /dev/null
+++ b/packages/blade/src/components/Avatar/Avatar.web.tsx
@@ -0,0 +1,192 @@
+import React from 'react';
+import type { AvatarProps } from './types';
+import { StyledAvatar } from './StyledAvatar';
+import { DefaultAvatarIcon } from './DefaultAvatarIcon';
+
+import { useAvatarGroupContext } from './AvatarGroupContext';
+import { getStyledProps } from '~components/Box/styledProps';
+import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
+import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
+import { useDropdown } from '~components/Dropdown/useDropdown';
+import { getActionListContainerRole } from '~components/ActionList/getA11yRoles';
+import BaseButton from '~components/Button/BaseButton/BaseButton';
+import { throwBladeError } from '~utils/logger';
+
+const getInitials = (name: string): string => {
+  // Combine first and last name initials
+  const names = name.split(' ');
+  if (names.length === 1) {
+    return name.substring(0, 2);
+  }
+  return names[0].substring(0, 1) + names[names.length - 1].substring(0, 1);
+};
+
+const _Avatar = ({
+  name = 'Nitin Kumar',
+  color = 'neutral',
+  size = 'xsmall',
+  variant = 'circle',
+  icon,
+  href,
+  target,
+  rel,
+  // Image Props
+  src,
+  alt,
+  srcSet,
+  crossOrigin,
+  referrerPolicy,
+  testID,
+  ...styledProps
+}: AvatarProps): React.ReactElement => {
+  if (src && !alt && !name) {
+    throwBladeError({
+      moduleName: 'Avatar',
+      message: '"alt" or "name" prop is required when the "src" prop is provided.',
+    });
+  }
+  const accessibilityLabel = alt ?? name;
+  const groupProps = useAvatarGroupContext();
+  console.log('🚀 ~ groupProps:', groupProps);
+  const avatarSize = groupProps?.size ?? size;
+
+  const {
+    onTriggerClick,
+    onTriggerKeydown,
+    dropdownBaseId,
+    isOpen,
+    activeIndex,
+    hasFooterAction,
+    triggererRef,
+    dropdownTriggerer,
+  } = useDropdown();
+  const isInsideDropdown = dropdownTriggerer === 'Avatar';
+
+  const dropDownTriggerProps = isInsideDropdown
+    ? {
+        ref: triggererRef,
+        onClick: onTriggerClick,
+        accessibilityProps: {
+          label: accessibilityLabel,
+          hasPopup: getActionListContainerRole(hasFooterAction, 'DropdownButton'),
+          expanded: isOpen,
+          controls: `${dropdownBaseId}-actionlist`,
+          activeDescendant: activeIndex >= 0 ? `${dropdownBaseId}-${activeIndex}` : undefined,
+        },
+      }
+    : {};
+
+  const getChildrenToRender = (): React.ReactElement => {
+    if (src) {
+      return (
+        <BaseButton
+          variant="secondary"
+          color={color}
+          size="xsmall"
+          isPressAnimationDisabled={true}
+          imgProps={{
+            src,
+            alt: alt ?? name,
+            srcSet,
+            crossOrigin,
+            referrerPolicy,
+          }}
+          href={href}
+          target={target}
+          rel={rel}
+          {...dropDownTriggerProps}
+          onKeyDown={(e) => {
+            if (isInsideDropdown) {
+              // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-explicit-any
+              onTriggerKeydown?.({ event: e as any });
+            }
+          }}
+        />
+      );
+    }
+
+    if (name && !src) {
+      return (
+        <BaseButton
+          variant="secondary"
+          color={color}
+          size="xsmall"
+          iconSize={avatarSize}
+          isPressAnimationDisabled={true}
+          href={href}
+          target={target}
+          rel={rel}
+          onKeyDown={(e) => {
+            if (isInsideDropdown) {
+              // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-explicit-any
+              onTriggerKeydown?.({ event: e as any });
+            }
+          }}
+          {...dropDownTriggerProps}
+        >
+          {getInitials(name)}
+        </BaseButton>
+      );
+    }
+
+    return (
+      <BaseButton
+        variant="secondary"
+        color={color}
+        size="xsmall"
+        iconSize={avatarSize}
+        icon={icon ?? DefaultAvatarIcon}
+        isPressAnimationDisabled={true}
+        href={href}
+        target={target}
+        rel={rel}
+        onKeyDown={(e) => {
+          if (isInsideDropdown) {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-explicit-any
+            onTriggerKeydown?.({ event: e as any });
+          }
+        }}
+        {...dropDownTriggerProps}
+      />
+    );
+  };
+
+  return (
+    <StyledAvatar
+      {...metaAttribute({ name: MetaConstants.Avatar, testID })}
+      {...getStyledProps(styledProps)}
+      backgroundColor="surface.background.gray.intense"
+      variant={variant}
+      color={color}
+      size={avatarSize}
+    >
+      {getChildrenToRender()}
+    </StyledAvatar>
+  );
+};
+
+/**
+ * ### Avatar Component
+ * 
+ * The Avatar component is used to group related buttons together.
+ * 
+ * ---
+ * 
+ * #### Usage
+ * 
+ * ```jsx
+  <Avatar name="Nitin Kumar" src="https://avatars.githubusercontent.com/u/46647141?v=4" /> 
+ * ```
+ *
+ *  ---
+ *
+ * Checkout {@link https://blade.razorpay.com/?path=/docs/components-avatar Avatar Documentation}
+ * 
+ */
+const Avatar = assignWithoutSideEffects(_Avatar, {
+  displayName: 'Avatar',
+  componentId: 'Avatar',
+});
+
+export { Avatar };
+export type { AvatarProps };
diff --git a/packages/blade/src/components/Avatar/AvatarGroup.web.tsx b/packages/blade/src/components/Avatar/AvatarGroup.web.tsx
new file mode 100644
index 00000000000..84401a7805f
--- /dev/null
+++ b/packages/blade/src/components/Avatar/AvatarGroup.web.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import type { AvatarGroupProps, AvatarGroupContextType } from './types';
+import { StyledAvatarGroup } from './StyledAvatarGroup';
+import { StyledAvatar } from './StyledAvatar';
+import { AvatarGroupProvider } from './AvatarGroupContext';
+import { getStyledProps } from '~components/Box/styledProps';
+import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
+import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
+import { throwBladeError } from '~utils/logger';
+import { isValidAllowedChildren } from '~utils/isValidAllowedChildren';
+import BaseButton from '~components/Button/BaseButton/BaseButton';
+
+const _AvatarGroup = ({
+  children,
+  size = 'xsmall',
+  maxCount = 2,
+  testID,
+  ...styledProps
+}: AvatarGroupProps): React.ReactElement => {
+  const contextValue: AvatarGroupContextType = {
+    size,
+  };
+
+  return (
+    <AvatarGroupProvider value={contextValue}>
+      <StyledAvatarGroup
+        {...metaAttribute({ name: MetaConstants.AvatarGroup, testID })}
+        {...getStyledProps(styledProps)}
+        role="group"
+        size={size}
+      >
+        {React.Children.map(children, (child, index) => {
+          if (__DEV__) {
+            // throw error if child is not an Avatar
+            if (!isValidAllowedChildren(child, 'Avatar')) {
+              throwBladeError({
+                moduleName: 'AvatarGroup',
+                message: `Only "Avatar" component is allowed as a children.`,
+              });
+            }
+          }
+
+          if (maxCount && maxCount <= React.Children.count(children)) {
+            if (index === maxCount) {
+              return (
+                <StyledAvatar
+                  {...metaAttribute({ name: MetaConstants.Avatar, testID })}
+                  backgroundColor="surface.background.gray.intense"
+                  size={size}
+                  color="neutral"
+                  variant="circle"
+                >
+                  <BaseButton
+                    variant="secondary"
+                    color="neutral"
+                    size="xsmall"
+                    iconSize={size}
+                    isPressAnimationDisabled={true}
+                  >
+                    {`+${String(React.Children.count(children) - maxCount)}`}
+                  </BaseButton>
+                </StyledAvatar>
+              );
+            }
+
+            if (index > maxCount) {
+              return null;
+            }
+          }
+
+          return child;
+        })}
+      </StyledAvatarGroup>
+    </AvatarGroupProvider>
+  );
+};
+
+/**
+ * ### AvatarGroup Component
+ * 
+ * The Avatar component is used to group related buttons together.
+ * 
+ * ---
+ * 
+ * #### Usage
+ * 
+ * ```jsx
+  const App = () => {
+    return (
+      <Avatar>
+        <Button icon={RefreshIcon}>Sync</Button>
+        <Button icon={ShareIcon}>Share</Button>
+        <Button icon={DownloadIcon}>Download</Button>
+      </Avatar>
+    );
+  }
+ * ```
+ *
+ *  ---
+ *
+ * Checkout {@link https://blade.razorpay.com/?path=/docs/components-buttongroup FileUpload Documentation}
+ * 
+ */
+const AvatarGroup = assignWithoutSideEffects(_AvatarGroup, {
+  displayName: 'AvatarGroup',
+  componentId: 'AvatarGroup',
+});
+
+export { AvatarGroup };
+export type { AvatarGroupProps };
diff --git a/packages/blade/src/components/Avatar/AvatarGroupContext.tsx b/packages/blade/src/components/Avatar/AvatarGroupContext.tsx
new file mode 100644
index 00000000000..4b71fc933da
--- /dev/null
+++ b/packages/blade/src/components/Avatar/AvatarGroupContext.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import type { AvatarGroupContextType } from './types';
+
+const AvatarGroupContext = React.createContext<AvatarGroupContextType>({});
+const AvatarGroupProvider = AvatarGroupContext.Provider;
+
+const useAvatarGroupContext = (): AvatarGroupContextType => {
+  const context = React.useContext(AvatarGroupContext);
+  return context;
+};
+
+export { useAvatarGroupContext, AvatarGroupProvider };
diff --git a/packages/blade/src/components/Avatar/DefaultAvatarIcon.tsx b/packages/blade/src/components/Avatar/DefaultAvatarIcon.tsx
new file mode 100644
index 00000000000..667b35fd2e0
--- /dev/null
+++ b/packages/blade/src/components/Avatar/DefaultAvatarIcon.tsx
@@ -0,0 +1,82 @@
+import { Svg, Path } from '~components/Icons/_Svg';
+import type { IconComponent } from '~components/Icons';
+import useIconProps from '~components/Icons/useIconProps';
+
+const DefaultAvatarIcon: IconComponent = ({ color, size, ...styledProps }) => {
+  const { iconColor } = useIconProps({ color });
+
+  if (size === 'xsmall') {
+    return (
+      <Svg {...styledProps} width="14" height="14" viewBox="0 0 14 14" fill="none">
+        <Path
+          d="M0.928589 11.3881C1.55965 8.94407 3.72749 7.14289 6.3048 7.14289H7.69523C10.2725 7.14289 12.4404 8.94407 13.0714 11.3881C11.505 12.96 9.36258 13.9286 7.00002 13.9286C4.63745 13.9286 2.49507 12.96 0.928589 11.3881Z"
+          fill={iconColor}
+        />
+        <Path
+          d="M4.21915 3.21432C4.21915 1.63637 5.46417 0.357178 7.00002 0.357178C8.53587 0.357178 9.78088 1.63637 9.78088 3.21432C9.78088 4.79228 8.53587 6.07146 7.00002 6.07146C5.46417 6.07146 4.21915 4.79228 4.21915 3.21432Z"
+          fill={iconColor}
+        />
+      </Svg>
+    );
+  }
+
+  if (size === 'small') {
+    return (
+      <Svg {...styledProps} width="18" height="20" viewBox="0 0 18 20" fill="none">
+        <Path
+          d="M0.5 15.9433C1.38348 12.5217 4.41846 10 8.0267 10H9.9733C13.5815 10 16.6166 12.5217 17.5 15.9433C15.3069 18.1439 12.3076 19.5 9 19.5C5.69241 19.5 2.69308 18.1439 0.5 15.9433Z"
+          fill={iconColor}
+        />
+        <Path
+          d="M5.10679 4.5C5.10679 2.29086 6.84981 0.5 9 0.5C11.1502 0.5 12.8932 2.29086 12.8932 4.5C12.8932 6.70914 11.1502 8.5 9 8.5C6.84981 8.5 5.10679 6.70914 5.10679 4.5Z"
+          fill={iconColor}
+        />
+      </Svg>
+    );
+  }
+
+  if (size === 'medium') {
+    return (
+      <Svg {...styledProps} width="22" height="26" viewBox="0 0 22 26" fill="none">
+        <Path
+          d="M0.0714111 20.4985C1.20732 16.0992 5.10943 12.8571 9.74859 12.8571H12.2514C16.8905 12.8571 20.7927 16.0992 21.9286 20.4985C19.1089 23.3278 15.2526 25.0714 11 25.0714C6.74737 25.0714 2.89108 23.3278 0.0714111 20.4985Z"
+          fill={iconColor}
+        />
+        <Path
+          d="M5.99443 5.78568C5.99443 2.94536 8.23546 0.642822 11 0.642822C13.7645 0.642822 16.0055 2.94536 16.0055 5.78568C16.0055 8.626 13.7645 10.9285 11 10.9285C8.23546 10.9285 5.99443 8.626 5.99443 5.78568Z"
+          fill={iconColor}
+        />
+      </Svg>
+    );
+  }
+
+  if (size === 'large') {
+    return (
+      <Svg {...styledProps} width="30" height="34" viewBox="0 0 30 34" fill="none">
+        <Path
+          d="M0.428589 27.3314C1.94313 21.4657 7.14594 17.1429 13.3315 17.1429H16.6685C22.8541 17.1429 28.057 21.4657 29.5714 27.3314C25.8119 31.1038 20.6702 33.4286 15 33.4286C9.32987 33.4286 4.18815 31.1038 0.428589 27.3314Z"
+          fill={iconColor}
+        />
+        <Path
+          d="M8.32594 7.71432C8.32594 3.92723 11.314 0.857178 15 0.857178C18.6861 0.857178 21.6741 3.92723 21.6741 7.71432C21.6741 11.5014 18.6861 14.5715 15 14.5715C11.314 14.5715 8.32594 11.5014 8.32594 7.71432Z"
+          fill={iconColor}
+        />
+      </Svg>
+    );
+  }
+
+  return (
+    <Svg {...styledProps} width="34" height="38" viewBox="0 0 34 38" fill="none">
+      <Path
+        d="M0 30.8866C1.76696 24.0433 7.83691 19 15.0534 19H18.9466C26.1631 19 32.2332 24.0433 34 30.8866C29.6138 35.2878 23.6152 38 17 38C10.3848 38 4.38616 35.2878 0 30.8866Z"
+        fill={iconColor}
+      />
+      <Path
+        d="M9.21358 8C9.21358 3.58173 12.6996 0 17 0C21.3004 0 24.7864 3.58173 24.7864 8C24.7864 12.4183 21.3004 16 17 16C12.6996 16 9.21358 12.4183 9.21358 8Z"
+        fill={iconColor}
+      />
+    </Svg>
+  );
+};
+
+export { DefaultAvatarIcon };
diff --git a/packages/blade/src/components/Avatar/StyledAvatar.tsx b/packages/blade/src/components/Avatar/StyledAvatar.tsx
new file mode 100644
index 00000000000..efdba49bdc6
--- /dev/null
+++ b/packages/blade/src/components/Avatar/StyledAvatar.tsx
@@ -0,0 +1,92 @@
+import styled from 'styled-components';
+import type { StyledAvatarProps } from './types';
+import {
+  avatarSizeTokens,
+  avatarTextSizeMapping,
+  avatarColorTokens,
+  avatarBorderRadiusTokens,
+} from './avatarTokens';
+import BaseBox from '~components/Box/BaseBox';
+import { makeBorderSize, makeSize } from '~utils';
+import { getBackgroundColorToken } from '~components/Button/BaseButton/BaseButton';
+import getIn from '~utils/lodashButBetter/get';
+import getBaseTextStyles from '~components/Typography/BaseText/getBaseTextStyles';
+import { getTextProps, getHeadingProps } from '~components/Typography';
+
+const StyledAvatar = styled(BaseBox)<StyledAvatarProps>(({ theme, variant, color, size }) => {
+  return {
+    width: 'fit-content',
+    // borderWidth: makeBorderSize(theme.border.width.thinner),
+    borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),
+    // borderColor: getIn(theme.colors, 'surface.border.gray.subtle'),
+    // borderStyle: 'solid',
+
+    // '&:hover': {
+    //   borderColor: getIn(theme.colors, 'surface.border.gray.muted'),
+
+    //   'button[role="button"]': {
+    //     borderColor: getIn(theme.colors, 'surface.border.gray.muted'),
+    //     backgroundColor: getIn(theme.colors, avatarColorTokens.background[color]),
+    //   },
+    // },
+
+    'div[data-blade-component="base-text"]': {
+      ...getBaseTextStyles({
+        theme,
+        ...(size === 'xlarge'
+          ? {
+              ...getHeadingProps({
+                size: avatarTextSizeMapping[size].size,
+                weight: 'semibold',
+                color: getIn(theme.colors, avatarColorTokens.text[color]),
+              }),
+            }
+          : {
+              ...getTextProps({
+                variant: avatarTextSizeMapping[size].variant,
+                size: avatarTextSizeMapping[size].size,
+                weight: 'semibold',
+                color: getIn(theme.colors, avatarColorTokens.text[color]),
+              }),
+            }),
+      }),
+    },
+
+    'button[role="button"]': {
+      minHeight: makeSize(avatarSizeTokens[size]),
+      height: makeSize(avatarSizeTokens[size]),
+      width: makeSize(avatarSizeTokens[size]),
+      borderWidth: makeBorderSize(theme.border.width.thin),
+      borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),
+      borderColor: getIn(theme.colors, 'transparent'),
+      backgroundColor: getIn(theme.colors, avatarColorTokens.background[color]),
+
+      img: {
+        display: 'block',
+        height: avatarSizeTokens[size],
+        width: avatarSizeTokens[size],
+        borderRadius: makeBorderSize(theme.border.radius[avatarBorderRadiusTokens[variant]]),
+        objectFit: 'cover',
+      },
+
+      '&:hover': {
+        borderColor: getIn(theme.colors, 'surface.border.gray.muted'),
+        backgroundColor: getIn(theme.colors, avatarColorTokens.background[color]),
+      },
+
+      '&:focus': {
+        backgroundColor: getIn(
+          theme.colors,
+          getBackgroundColorToken({
+            property: 'background',
+            variant: 'secondary',
+            color,
+            state: 'default',
+          }),
+        ),
+      },
+    },
+  };
+});
+
+export { StyledAvatar };
diff --git a/packages/blade/src/components/Avatar/StyledAvatarGroup.tsx b/packages/blade/src/components/Avatar/StyledAvatarGroup.tsx
new file mode 100644
index 00000000000..7f553e1c693
--- /dev/null
+++ b/packages/blade/src/components/Avatar/StyledAvatarGroup.tsx
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import type { AvatarGroupProps } from './types';
+import { avatarSizeTokens } from './avatarTokens';
+import BaseBox from '~components/Box/BaseBox';
+import { makeSize } from '~utils';
+
+const StyledAvatarGroup = styled(BaseBox)<{ size: NonNullable<AvatarGroupProps['size']> }>(
+  ({ size }) => {
+    return {
+      display: 'inline-flex',
+      flexDirection: 'row',
+
+      [`> *:not(:first-child)`]: {
+        marginLeft: `-${makeSize(avatarSizeTokens[size] / 2)}`,
+        zIndex: 2,
+      },
+    };
+  },
+);
+
+export { StyledAvatarGroup };
diff --git a/packages/blade/src/components/Avatar/avatarTokens.ts b/packages/blade/src/components/Avatar/avatarTokens.ts
new file mode 100644
index 00000000000..240451c505c
--- /dev/null
+++ b/packages/blade/src/components/Avatar/avatarTokens.ts
@@ -0,0 +1,105 @@
+import { Theme } from '~components/BladeProvider';
+import { size } from '~tokens/global';
+import type { DotNotationToken } from '~utils/lodashButBetter/get';
+
+const avatarSizeTokens = {
+  xsmall: size[20],
+  small: size[28],
+  medium: size[36],
+  large: size[48],
+  xlarge: size[56],
+};
+
+const avatarIconSizeTokens = {
+  xsmall: size[16],
+  small: size[16],
+  medium: size[20],
+  large: size[24],
+  xlarge: size[30],
+};
+
+const avatarTextSizeMapping = {
+  xsmall: {
+    variant: 'body',
+    size: 'xsmall',
+  },
+  small: {
+    variant: 'body',
+    size: 'xsmall',
+  },
+  medium: {
+    variant: 'body',
+    size: 'small',
+  },
+  large: {
+    variant: 'body',
+    size: 'medium',
+  },
+  xlarge: {
+    variant: 'heading',
+    size: 'medium',
+  },
+} as const;
+
+type InteractiveTextColors<
+  T extends 'positive' | 'negative' | 'primary' | 'notice' | 'information' | 'neutral'
+> = `interactive.text.${T}.${DotNotationToken<Theme['colors']['interactive']['text'][T]>}`;
+
+type InteractiveBackgroundColors<
+  T extends 'positive' | 'negative' | 'primary' | 'notice' | 'information' | 'neutral'
+> = `interactive.background.${T}.${DotNotationToken<
+  Theme['colors']['interactive']['background'][T]
+>}`;
+
+type AvatarBackgroundColors =
+  | InteractiveBackgroundColors<'positive'>
+  | InteractiveBackgroundColors<'negative'>
+  | InteractiveBackgroundColors<'primary'>
+  | InteractiveBackgroundColors<'notice'>
+  | InteractiveBackgroundColors<'neutral'>
+  | InteractiveBackgroundColors<'information'>;
+
+type AvatarTextColors =
+  | InteractiveTextColors<'positive'>
+  | InteractiveTextColors<'negative'>
+  | InteractiveTextColors<'primary'>
+  | InteractiveTextColors<'notice'>
+  | InteractiveTextColors<'neutral'>
+  | InteractiveTextColors<'information'>;
+
+type AvatarColorTokensType = {
+  text: Record<string, AvatarTextColors>;
+  background: Record<string, AvatarBackgroundColors>;
+};
+
+const avatarColorTokens: AvatarColorTokensType = {
+  text: {
+    primary: 'interactive.text.primary.normal',
+    positive: 'interactive.text.positive.normal',
+    negative: 'interactive.text.negative.normal',
+    notice: 'interactive.text.notice.normal',
+    information: 'interactive.text.information.normal',
+    neutral: 'interactive.text.neutral.normal',
+  },
+  background: {
+    primary: 'interactive.background.primary.faded',
+    positive: 'interactive.background.positive.faded',
+    negative: 'interactive.background.negative.faded',
+    notice: 'interactive.background.notice.faded',
+    information: 'interactive.background.information.faded',
+    neutral: 'interactive.background.neutral.faded',
+  },
+};
+
+const avatarBorderRadiusTokens = {
+  circle: 'max',
+  square: 'medium',
+} as const;
+
+export {
+  avatarSizeTokens,
+  avatarIconSizeTokens,
+  avatarTextSizeMapping,
+  avatarColorTokens,
+  avatarBorderRadiusTokens,
+};
diff --git a/packages/blade/src/components/Avatar/docs/Avatar.stories.tsx b/packages/blade/src/components/Avatar/docs/Avatar.stories.tsx
new file mode 100644
index 00000000000..165ee8ec492
--- /dev/null
+++ b/packages/blade/src/components/Avatar/docs/Avatar.stories.tsx
@@ -0,0 +1,285 @@
+import type { StoryFn, Meta } from '@storybook/react';
+import type { AvatarProps } from '../Avatar.web';
+import { Avatar as AvatarComponent } from '../Avatar.web';
+import { AvatarGroup as AvatarGroupComponent } from '../AvatarGroup.web';
+import { Heading } from '~components/Typography/Heading';
+import { Box } from '~components/Box';
+import { Sandbox } from '~utils/storybook/Sandbox';
+import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
+import { Button } from '~components/Button';
+import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes';
+import { RefreshIcon, ShareIcon, DownloadIcon, ChevronDownIcon, PlusIcon } from '~components/Icons';
+import { Dropdown, DropdownButton, DropdownOverlay } from '~components/Dropdown';
+import { ActionList, ActionListItem } from '~components/ActionList';
+import iconMap from '~components/Icons/iconMap';
+
+const Page = (): React.ReactElement => {
+  return (
+    <StoryPageWrapper
+      componentName="Avatar"
+      componentDescription="The Avatar component is used to group related buttons together."
+      apiDecisionLink={null}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=80753%3A108070&mode=design&t=iGYw4ygZL8cErFIL-1"
+    >
+      <Heading size="large">Usage</Heading>
+      <Sandbox showConsole>
+        {`
+        import {
+          Button,
+          Avatar,
+          RefreshIcon,
+          ShareIcon,
+          DownloadIcon,
+        } from '@razorpay/blade/components';
+        
+        function App(): React.ReactElement {
+          return (
+            <Avatar>
+              <Button icon={RefreshIcon}>Sync</Button>
+              <Button icon={ShareIcon}>Share</Button>
+              <Button icon={DownloadIcon}>Download</Button>
+            </Avatar>
+          )
+        }
+
+        export default App;
+      `}
+      </Sandbox>
+    </StoryPageWrapper>
+  );
+};
+
+export default {
+  title: 'Components/Avatar',
+  component: AvatarComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    ...getStyledPropsArgTypes(),
+    icon: {
+      name: 'icon',
+      type: 'select',
+      options: Object.keys(iconMap),
+      mapping: iconMap,
+    },
+  },
+  parameters: {
+    docs: {
+      page: Page,
+    },
+  },
+} as Meta<AvatarProps>;
+
+const AvatarTemplate: StoryFn<typeof AvatarComponent> = (args) => {
+  return <AvatarComponent {...args} />;
+};
+
+export const Default = AvatarTemplate.bind({});
+Default.storyName = 'Default';
+
+const AvatarSizesTemplate: StoryFn<typeof AvatarComponent> = (args) => {
+  const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'] as const;
+  return (
+    <Box display="flex" flexDirection="column" gap="spacing.5">
+      {sizes.map((size) => (
+        <Box
+          key={size}
+          display="flex"
+          flex="1 1 auto"
+          alignItems="center"
+          justifyItems="center"
+          alignContent="center"
+          gap="spacing.5"
+          flexWrap="nowrap"
+          width="120px"
+        >
+          <Box width="50px">
+            <Heading>{size}</Heading>
+          </Box>
+          <Box display="flex" flex="1 1 auto" justifyContent="center">
+            <AvatarComponent {...args} size={size} />
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export const AllSizes = AvatarSizesTemplate.bind({});
+AllSizes.storyName = 'All Sizes';
+
+const AvatarColorsTemplate: StoryFn<typeof AvatarComponent> = (args) => {
+  const colors = ['primary', 'positive', 'negative', 'neutral', 'notice', 'information'] as const;
+  return (
+    <Box display="flex" flexDirection="column" gap="spacing.5">
+      {colors.map((color) => (
+        <Box
+          key={color}
+          display="flex"
+          flex="1 1 auto"
+          alignItems="center"
+          justifyItems="center"
+          alignContent="center"
+          gap="spacing.5"
+          flexWrap="nowrap"
+          width="200px"
+        >
+          <Box width="40px">
+            <Heading>{color}</Heading>
+          </Box>
+          <Box display="flex" flex="1 1 auto" justifyContent="center">
+            <AvatarComponent size="medium" {...args} color={color} />
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export const AllColors = AvatarColorsTemplate.bind({});
+AllColors.storyName = 'All Colors';
+
+const AvatarVariantsTemplate: StoryFn<typeof AvatarComponent> = (args) => {
+  const variants = ['circle', 'square'] as const;
+  return (
+    <Box display="flex" flexDirection="column" gap="spacing.5">
+      {variants.map((variant) => (
+        <Box
+          key={variant}
+          display="flex"
+          flex="1 1 auto"
+          alignItems="center"
+          justifyItems="center"
+          alignContent="center"
+          gap="spacing.5"
+          flexWrap="nowrap"
+          width="120px"
+        >
+          <Box width="40px">
+            <Heading>{variant}</Heading>
+          </Box>
+          <Box display="flex" flex="1 1 auto" justifyContent="center">
+            <AvatarComponent size="medium" {...args} variant={variant} />
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export const AllVariants = AvatarVariantsTemplate.bind({});
+AllVariants.storyName = 'All Variants';
+
+const AvatarGroupTemplate: StoryFn<typeof AvatarGroupComponent> = (args) => {
+  // const variants = ['circle', 'square'] as const;
+  return (
+    <Box display="flex" flexDirection="column" gap="spacing.5">
+      {/* {variants.map((variant) => (
+        <Box
+          key={variant}
+          display="flex"
+          flex="1 1 auto"
+          alignItems="center"
+          justifyItems="center"
+          alignContent="center"
+          gap="spacing.5"
+          flexWrap="nowrap"
+          width="120px"
+        >
+          <Box width="40px">
+            <Heading>{variant}</Heading>
+          </Box>
+          <Box display="flex" flex="1 1 auto" justifyContent="center">
+            <AvatarComponent size="medium" {...args} variant={variant} />
+          </Box>
+        </Box>
+      ))} */}
+      <AvatarGroupComponent>
+        <AvatarComponent name="Nitin Kumar" />
+        <AvatarComponent name="Nitin Kumar" />
+        <AvatarComponent name="Nitin Kumar" />
+        <AvatarComponent name="Nitin Kumar" />
+      </AvatarGroupComponent>
+    </Box>
+  );
+};
+
+export const AvatarGroup = AvatarGroupTemplate.bind({});
+AvatarGroup.storyName = 'AvatarGroup';
+// const AvatarDropdownTemplate: StoryFn<typeof AvatarComponent> = (args) => {
+//   return (
+//     <Box display="flex" alignItems="center" justifyContent="center">
+//       <AvatarComponent {...args}>
+//         <Button icon={PlusIcon}>Payout</Button>
+//         <Dropdown>
+//           <DropdownButton icon={ChevronDownIcon} />
+//           <DropdownOverlay defaultPlacement="bottom-end">
+//             <ActionList>
+//               <ActionListItem title="Bulk Payout" value="bulk-payout" />
+//               <ActionListItem title="Upload Invoice" value="upload-invoice" />
+//               <ActionListItem title="Add Contact" value="add-contact" />
+//               <ActionListItem title="Team Member" value="team-member" />
+//             </ActionList>
+//           </DropdownOverlay>
+//         </Dropdown>
+//       </AvatarComponent>
+//     </Box>
+//   );
+// };
+
+// export const WithDropdown = AvatarDropdownTemplate.bind({});
+// WithDropdown.storyName = 'With Dropdown';
+
+// const AvatarVariantsTemplate: StoryFn<typeof AvatarComponent> = (args) => {
+//   const variants: AvatarProps['variant'][] = ['primary', 'secondary', 'tertiary'];
+//   return (
+//     <>
+//       {variants.map((variant) => (
+//         <Box key={variant} marginBottom="spacing.8">
+//           <Heading marginBottom="spacing.3">{variant}</Heading>
+//           <AvatarComponent {...args} variant={variant}>
+//             <Button icon={RefreshIcon}>Sync</Button>
+//             <Button icon={ShareIcon}>Share</Button>
+//             <Button icon={DownloadIcon}>Download</Button>
+//           </AvatarComponent>
+//         </Box>
+//       ))}
+//     </>
+//   );
+// };
+
+// export const AllVariants = AvatarVariantsTemplate.bind({});
+// AllVariants.storyName = 'All Variants';
+
+// const AvatarSizesTemplate: StoryFn<typeof AvatarComponent> = (args) => {
+//   const sizes: AvatarProps['size'][] = ['xsmall', 'small', 'medium', 'large'];
+//   return (
+//     <>
+//       {sizes.map((size) => (
+//         <Box key={size} marginBottom="spacing.8">
+//           <Heading marginBottom="spacing.3">{size}</Heading>
+//           <AvatarComponent {...args} size={size}>
+//             <Button icon={RefreshIcon}>Sync</Button>
+//             <Button icon={ShareIcon}>Share</Button>
+//             <Button icon={DownloadIcon}>Download</Button>
+//           </AvatarComponent>
+//         </Box>
+//       ))}
+//     </>
+//   );
+// };
+
+// export const AllSizes = AvatarSizesTemplate.bind({});
+// AllSizes.storyName = 'All Sizes';
+
+// const AvatarIconOnlyTemplate: StoryFn<typeof AvatarComponent> = (args) => {
+//   return (
+//     <AvatarComponent {...args}>
+//       <Button icon={RefreshIcon} />
+//       <Button icon={ShareIcon} />
+//       <Button icon={DownloadIcon} />
+//     </AvatarComponent>
+//   );
+// };
+
+// export const IconsOnly = AvatarIconOnlyTemplate.bind({});
+// IconsOnly.storyName = 'Icons Only';
diff --git a/packages/blade/src/components/Avatar/docs/_KitchenSink.Avatar.stories.tsx b/packages/blade/src/components/Avatar/docs/_KitchenSink.Avatar.stories.tsx
new file mode 100644
index 00000000000..e24986568ed
--- /dev/null
+++ b/packages/blade/src/components/Avatar/docs/_KitchenSink.Avatar.stories.tsx
@@ -0,0 +1,31 @@
+import { composeStories } from '@storybook/react';
+import * as buttonGroupStories from './Avatar.stories';
+import { Box } from '~components/Box';
+import { Heading } from '~components/Typography';
+
+const allStories = Object.values(composeStories(buttonGroupStories));
+
+export const Avatar = (): JSX.Element => {
+  return (
+    <Box display="flex" flexDirection="column" gap="spacing.4">
+      {allStories.map((Story) => {
+        return (
+          <>
+            <Heading>{Story.storyName}</Heading>
+            <Story />
+          </>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default {
+  title: 'Components/KitchenSink/Avatar',
+  component: Avatar,
+  parameters: {
+    // enable Chromatic's snapshots only for kitchen sink
+    chromatic: { disableSnapshot: false },
+    options: { showPanel: false },
+  },
+};
diff --git a/packages/blade/src/components/Avatar/index.ts b/packages/blade/src/components/Avatar/index.ts
new file mode 100644
index 00000000000..ddb0518fc70
--- /dev/null
+++ b/packages/blade/src/components/Avatar/index.ts
@@ -0,0 +1 @@
+export * from './Avatar.web';
diff --git a/packages/blade/src/components/Avatar/types.ts b/packages/blade/src/components/Avatar/types.ts
new file mode 100644
index 00000000000..b1998d29a0b
--- /dev/null
+++ b/packages/blade/src/components/Avatar/types.ts
@@ -0,0 +1,95 @@
+import type { HTMLAttributeReferrerPolicy } from 'react';
+import type { ButtonProps } from '~components/Button/Button';
+import type { IconComponent } from '~components/Icons';
+
+type AvatarGroupProps = {
+  /**
+   * Children elements representing the avatars to stack.
+   */
+  children: React.ReactNode;
+  /**
+   * The size of each avatar within the group. Propagates to all avatars.
+   * @default "xsmall"
+   */
+  size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  /**
+   * The maximum number of avatars to display before truncating.
+   */
+  maxCount?: number;
+  testID?: string;
+};
+
+type AvatarProps = {
+  /**
+   * The size of the avatar.
+   */
+  size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  /**
+   * The visual variant of the avatar.
+   */
+  variant?: 'circle' | 'square';
+  /**
+   * The color theme of the avatar.
+   */
+  color?: 'primary' | 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
+  /**
+   * Custom icon component to use as the avatar.
+   */
+  icon?: IconComponent;
+  /**
+   * The name of the avatar, used to generate initials.
+   * If src has loaded, the name will be used as the alt attribute of the img. If src is not loaded, the name will be used to create the initials.
+   */
+  name?: string;
+  /**
+   * Custom image source for an image avatar.
+   */
+  src?: string;
+  /**
+   * The `alt` attribute for the `img` element
+   */
+  alt?: string;
+  /**
+   * The `srcSet` attribute for the `img` element, useful for responsive images.
+   */
+  srcSet?: string;
+  /**
+   * CORS settings attributes
+   */
+  crossOrigin?: 'anonymous' | 'use-credentials' | '';
+  /**
+   * Defines which referrer is sent when fetching the resource.
+   */
+  referrerPolicy?: HTMLAttributeReferrerPolicy;
+  /**
+   * Automatically renders button with `a` tag with `href` on web
+   */
+  href?: ButtonProps['href'];
+  /**
+   * anchor target attribute
+   *
+   * Should only be used alongside `href`
+   */
+  target?: ButtonProps['target'];
+  /**
+   * anchor rel attribute
+   *
+   * Should only be used alongside `href`
+   */
+  rel?: ButtonProps['rel'];
+  /**
+   * Click handler for the avatar.
+   */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  testID?: string;
+};
+
+type AvatarGroupContextType = Pick<AvatarGroupProps, 'size'>;
+
+type StyledAvatarProps = {
+  size: NonNullable<AvatarProps['size']>;
+  variant: NonNullable<AvatarProps['variant']>;
+  color: NonNullable<AvatarProps['color']>;
+};
+
+export type { AvatarGroupProps, AvatarProps, StyledAvatarProps, AvatarGroupContextType };
diff --git a/packages/blade/src/components/Button/BaseButton/BaseButton.tsx b/packages/blade/src/components/Button/BaseButton/BaseButton.tsx
index 0c7fa054118..30368686423 100644
--- a/packages/blade/src/components/Button/BaseButton/BaseButton.tsx
+++ b/packages/blade/src/components/Button/BaseButton/BaseButton.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import type { HTMLAttributeReferrerPolicy } from 'react';
 import React from 'react';
 import styled from 'styled-components';
 import type { GestureResponderEvent } from 'react-native';
@@ -23,7 +24,7 @@ import type { DotNotationToken } from '~utils/lodashButBetter/get';
 import getIn from '~utils/lodashButBetter/get';
 import type { BaseLinkProps } from '~components/Link/BaseLink';
 import type { Theme } from '~components/BladeProvider';
-import type { IconComponent } from '~components/Icons';
+import type { IconComponent, IconSize } from '~components/Icons';
 import type { Platform } from '~utils';
 import { isReactNative } from '~utils';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
@@ -54,6 +55,7 @@ type BaseButtonCommonProps = {
   rel?: BaseLinkProps['rel'];
   size?: 'xsmall' | 'small' | 'medium' | 'large';
   iconPosition?: 'left' | 'right';
+  iconSize?: IconSize;
   isDisabled?: boolean;
   isFullWidth?: boolean;
   onKeyDown?: Platform.Select<{
@@ -69,15 +71,40 @@ type BaseButtonCommonProps = {
   accessibilityProps?: Partial<AccessibilityProps>;
   variant?: 'primary' | 'secondary' | 'tertiary';
   color?: 'primary' | 'white' | 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
+  isPressAnimationDisabled?: boolean;
 } & TestID &
   StyledPropsBlade &
   BladeCommonEvents;
 
+type ButtonImgProps = {
+  /**
+   * Custom image source
+   */
+  src: string;
+  /**
+   * The `alt` attribute for the `img` element
+   */
+  alt: string;
+  /**
+   * The `srcSet` attribute for the `img` element, useful for responsive images.
+   */
+  srcSet?: string;
+  /**
+   * CORS settings attributes
+   */
+  crossOrigin?: 'anonymous' | 'use-credentials' | '';
+  /**
+   * Defines which referrer is sent when fetching the resource.
+   */
+  referrerPolicy?: HTMLAttributeReferrerPolicy;
+};
+
 /*
 Mandatory children prop when icon is not provided
 */
-type BaseButtonWithoutIconProps = BaseButtonCommonProps & {
+type BaseButtonWithoutIconOrImgProps = BaseButtonCommonProps & {
   icon?: undefined;
+  imgProps?: undefined;
   children: StringChildrenType;
 };
 
@@ -87,12 +114,25 @@ type BaseButtonWithoutIconProps = BaseButtonCommonProps & {
 type BaseButtonWithIconProps = BaseButtonCommonProps & {
   icon: IconComponent;
   children?: StringChildrenType;
+  imgProps?: undefined;
+};
+
+/*
+ Optional children/icon props when img is provided
+*/
+type BaseButtonWithImageProps = BaseButtonCommonProps & {
+  imgProps: ButtonImgProps;
+  children?: StringChildrenType;
+  icon?: undefined;
 };
 
 /*
- With or without icon prop. We need at least an icon or a children prop present.
+ With or without icon/img props. We need at least an icon or a children prop present.
 */
-export type BaseButtonProps = BaseButtonWithIconProps | BaseButtonWithoutIconProps;
+export type BaseButtonProps =
+  | BaseButtonWithIconProps
+  | BaseButtonWithImageProps
+  | BaseButtonWithoutIconOrImgProps;
 
 type BaseButtonColorTokenModifiers = {
   variant: NonNullable<BaseButtonProps['variant']>;
@@ -194,7 +234,9 @@ const getProps = ({
 
   const isIconOnly = hasIcon && (!childrenString || childrenString?.trim().length === 0);
   const props: BaseButtonStyleProps = {
-    iconSize: isIconOnly ? buttonIconOnlySizeToIconSizeMap[size] : buttonSizeToIconSizeMap[size],
+    defaultIconSize: isIconOnly
+      ? buttonIconOnlySizeToIconSizeMap[size]
+      : buttonSizeToIconSizeMap[size],
     spinnerSize: buttonSizeToSpinnerSizeMap[size],
     fontSize: buttonTypographyTokens.fonts.size[size],
     lineHeight: buttonTypographyTokens.lineHeights[size],
@@ -303,6 +345,8 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
     size = 'medium',
     icon: Icon,
     iconPosition = 'left',
+    iconSize,
+    imgProps,
     isDisabled = false,
     isFullWidth = false,
     isLoading = false,
@@ -320,6 +364,7 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
     accessibilityProps,
     onTouchEnd,
     onTouchStart,
+    isPressAnimationDisabled = false,
     ...rest
   },
   ref,
@@ -335,9 +380,9 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
   const disabled = buttonGroupProps.isDisabled ?? (isLoading || (isDisabled && !isLink));
 
   if (__DEV__) {
-    if (!Icon && !childrenString?.trim()) {
+    if (!Icon && !childrenString?.trim() && !imgProps?.src) {
       throwBladeError({
-        message: 'At least one of icon or text is required to render a button.',
+        message: 'At least one of icon, text, or image is required to render a button.',
         moduleName: 'BaseButton',
       });
     }
@@ -368,7 +413,7 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
     hoverBorderColor,
     hoverBackgroundColor,
     iconColor,
-    iconSize,
+    defaultIconSize,
     iconPadding,
     spinnerSize,
     lineHeight,
@@ -393,33 +438,33 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
   const defaultRel = target === '_blank' ? 'noreferrer noopener' : undefined;
 
   const handlePointerPressedIn = React.useCallback(() => {
-    if (disabled) return;
+    if (disabled || isPressAnimationDisabled) return;
     setIsPressed(true);
-  }, [disabled]);
+  }, [disabled, isPressAnimationDisabled]);
 
   const handlePointerPressedOut = React.useCallback(() => {
-    if (disabled) return;
+    if (disabled || isPressAnimationDisabled) return;
     setIsPressed(false);
-  }, [disabled]);
+  }, [disabled, isPressAnimationDisabled]);
 
   const handleKeyboardPressedIn = React.useCallback(
     (e: React.KeyboardEvent) => {
-      if (disabled) return;
+      if (disabled || isPressAnimationDisabled) return;
       if (e.key === ' ' || e.key === 'Enter') {
         setIsPressed(true);
       }
     },
-    [disabled],
+    [disabled, isPressAnimationDisabled],
   );
 
   const handleKeyboardPressedOut = React.useCallback(
     (e: React.KeyboardEvent) => {
-      if (disabled) return;
+      if (disabled || isPressAnimationDisabled) return;
       if (e.key === ' ' || e.key === 'Enter') {
         setIsPressed(false);
       }
     },
-    [disabled],
+    [disabled, isPressAnimationDisabled],
   );
 
   return (
@@ -524,9 +569,11 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
               justifyContent="center"
               alignItems="center"
             >
-              <Icon size={iconSize} color={iconColor} />
+              <Icon size={iconSize ?? defaultIconSize} color={iconColor} />
             </BaseBox>
           ) : null}
+          {/* eslint-disable-next-line jsx-a11y/alt-text -- alt text is provided in imgProps */}
+          {imgProps?.src ? <img {...imgProps} /> : null}
           {text ? (
             isChildrenComponent ? (
               children
@@ -553,7 +600,7 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
               justifyContent="center"
               alignItems="center"
             >
-              <Icon size={iconSize} color={iconColor} />
+              <Icon size={iconSize ?? defaultIconSize} color={iconColor} />
             </BaseBox>
           ) : null}
         </ButtonContent>
diff --git a/packages/blade/src/components/Button/BaseButton/types.ts b/packages/blade/src/components/Button/BaseButton/types.ts
index f9193ddd365..297af149f43 100644
--- a/packages/blade/src/components/Button/BaseButton/types.ts
+++ b/packages/blade/src/components/Button/BaseButton/types.ts
@@ -17,7 +17,7 @@ import type { BaseTextProps } from '~components/Typography/BaseText/types';
 export type IconColor = Exclude<IconProps['color'], 'currentColor'>;
 
 export type BaseButtonStyleProps = {
-  iconSize: IconSize;
+  defaultIconSize: IconSize;
   spinnerSize: BaseSpinnerProps['size'];
   fontSize: keyof Theme['typography']['fonts']['size'];
   lineHeight: keyof Theme['typography']['lineHeights'];
diff --git a/packages/blade/src/components/Dropdown/useDropdown.ts b/packages/blade/src/components/Dropdown/useDropdown.ts
index 4c3397a4844..0f9f7bd6188 100644
--- a/packages/blade/src/components/Dropdown/useDropdown.ts
+++ b/packages/blade/src/components/Dropdown/useDropdown.ts
@@ -72,7 +72,7 @@ type DropdownContextType = {
   /** common baseId which is prepended to multiple other ids inside this dropdown  */
   dropdownBaseId: string;
   /** Which element has triggered the dropdown */
-  dropdownTriggerer?: 'SelectInput' | 'DropdownButton' | 'AutoComplete' | 'DropdownLink';
+  dropdownTriggerer?: 'SelectInput' | 'DropdownButton' | 'AutoComplete' | 'DropdownLink' | 'Avatar';
   /** ref of triggerer. Used to call focus in certain places */
   triggererRef: React.MutableRefObject<HTMLButtonElement | null>;
   triggererWrapperRef: React.MutableRefObject<ContainerElementType | null>;
diff --git a/packages/blade/src/tokens/global/size.ts b/packages/blade/src/tokens/global/size.ts
index 301126afe74..c7f931b130e 100644
--- a/packages/blade/src/tokens/global/size.ts
+++ b/packages/blade/src/tokens/global/size.ts
@@ -35,6 +35,8 @@ export const size = {
   /** 28 px */
   28: 28,
   /** 32 px */
+  30: 30,
+  /** 32 px */
   32: 32,
   /** 33 px */
   33: 33,
diff --git a/packages/blade/src/utils/metaAttribute/metaConstants.ts b/packages/blade/src/utils/metaAttribute/metaConstants.ts
index fb4ac0e83b0..8b4002ff451 100644
--- a/packages/blade/src/utils/metaAttribute/metaConstants.ts
+++ b/packages/blade/src/utils/metaAttribute/metaConstants.ts
@@ -10,6 +10,9 @@ export const MetaConstants = {
   Alert: 'alert',
   Amount: 'amount',
   AutoComplete: 'autocomplete',
+  Avatar: 'avatar',
+  AvatarDefaultIcon: 'avatar-default-icon',
+  AvatarGroup: 'avatar-group',
   Badge: 'badge',
   Box: 'box',
   BaseBox: 'base-box',