diff --git a/client/src/common/components/Avatar/index.tsx b/client/src/common/components/Avatar/index.tsx
new file mode 100644
index 00000000..8968a8da
--- /dev/null
+++ b/client/src/common/components/Avatar/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+export interface AvatarProps {
+  size: 'small' | 'medium';
+  variant: 'circle' | 'rectangle';
+  name: string;
+  url?: string;
+}
+
+const ROUNDED = {
+  rectangle: 'rounded-2xl',
+  circle: 'rounded-full',
+};
+
+const WH = {
+  small: 'w-[57px] h-[57px]',
+  medium: 'w-[65px] h-[65px]',
+};
+
+const Avatar: React.FC<AvatarProps> = ({ name, url, size, variant }) => {
+  return (
+    <div
+      className={`flex justify-center items-center ${WH[size]} border border-line ${ROUNDED[variant]} text-s24 italic font-bold overflow-hidden select-none`}
+    >
+      {url ? (
+        <img
+          className="object-cover"
+          src={url}
+          alt={`커뮤니티 ${name}의 프로필 이미지`}
+        />
+      ) : (
+        name.at(0)
+      )}
+    </div>
+  );
+};
+
+export default Avatar;
diff --git a/client/src/common/components/CommunityAvatar/index.tsx b/client/src/common/components/CommunityAvatar/index.tsx
new file mode 100644
index 00000000..bc0306f7
--- /dev/null
+++ b/client/src/common/components/CommunityAvatar/index.tsx
@@ -0,0 +1,13 @@
+import Avatar, { AvatarProps } from '@components/Avatar';
+import React from 'react';
+
+const CommunityAvatar: React.FC<AvatarProps> = ({
+  variant = 'rectangle',
+  size = 'medium',
+  name,
+  url,
+}) => {
+  return <Avatar variant={variant} size={size} name={name} url={url} />;
+};
+
+export default CommunityAvatar;
diff --git a/client/src/common/components/UserAvatar/index.tsx b/client/src/common/components/UserAvatar/index.tsx
new file mode 100644
index 00000000..2f7dbaa4
--- /dev/null
+++ b/client/src/common/components/UserAvatar/index.tsx
@@ -0,0 +1,13 @@
+import Avatar, { AvatarProps } from '@components/Avatar';
+import React from 'react';
+
+const UserAvatar: React.FC<AvatarProps> = ({
+  variant = 'circle',
+  size = 'small',
+  name,
+  url,
+}) => {
+  return <Avatar variant={variant} size={size} name={name} url={url} />;
+};
+
+export default UserAvatar;