diff --git a/src/assets/icons/index.tsx b/src/assets/icons/index.tsx
index 9e43f46..764c7e4 100644
--- a/src/assets/icons/index.tsx
+++ b/src/assets/icons/index.tsx
@@ -16,6 +16,7 @@ import KakaoLogin from './kakao-login.svg?react';
 import Link from './link.svg?react';
 import Location from './location.svg?react';
 import Map from './map.svg?react';
+import Marker from './marker.svg?react';
 import NaverLogin from './naver-login.svg?react';
 import Other from './other.svg?react';
 import Public from './public.svg?react';
@@ -38,6 +39,7 @@ export const Icons = {
   link: Link,
   map: Map,
   location: Location,
+  marker: Marker,
   kakaoLogin: KakaoLogin,
   naverLogin: NaverLogin,
   findy1: Findy1,
diff --git a/src/assets/icons/marker.svg b/src/assets/icons/marker.svg
new file mode 100644
index 0000000..74fd33f
--- /dev/null
+++ b/src/assets/icons/marker.svg
@@ -0,0 +1,18 @@
+<svg width="40" height="50" viewBox="0 0 46 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_497_1815)">
+<path d="M26.7455 50.2424C35.2473 41.7199 43 33.7792 43 24.2C43 13.5961 34.4934 5 24 5C13.5066 5 5 13.5961 5 24.2C5 33.7792 12.7527 41.7199 21.2545 50.2424C22.2215 51.2117 22.705 51.6963 23.2552 51.8754C23.7418 52.0338 24.2582 52.0338 24.7448 51.8754C25.295 51.6963 25.7785 51.2117 26.7455 50.2424Z" fill="#FF6265"/>
+<path d="M27.0294 50.5257C31.2757 46.2691 35.3646 42.1294 38.3885 37.8489C41.4155 33.564 43.4011 29.1035 43.4011 24.2C43.4011 13.3786 34.7189 4.59891 24 4.59891C13.2811 4.59891 4.59891 13.3786 4.59891 24.2C4.59891 29.1035 6.58448 33.564 9.61148 37.8489C12.6354 42.1294 16.7243 46.2691 20.9706 50.5256L20.9829 50.538C21.4559 51.0121 21.828 51.3852 22.1509 51.6604C22.4799 51.9409 22.7848 52.1441 23.1311 52.2568C23.6983 52.4414 24.3017 52.4414 24.8689 52.2568C25.2152 52.1441 25.5201 51.9409 25.8491 51.6605C26.1719 51.3852 26.544 51.0123 27.0168 50.5383L27.0294 50.5257Z" stroke="black" stroke-width="0.80218" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_497_1815" x="0.197754" y="0.197754" width="47.6044" height="56.5986" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_497_1815"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_497_1815" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/components/common/.gitkeep b/src/components/common/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/common/Marker/Marker.stories.tsx b/src/components/common/Marker/Marker.stories.tsx
new file mode 100644
index 0000000..04528af
--- /dev/null
+++ b/src/components/common/Marker/Marker.stories.tsx
@@ -0,0 +1,39 @@
+/* eslint-disable no-restricted-exports */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MARKER_CATEGORIES } from '@/constants/categories';
+
+import { Marker } from '.';
+
+const meta = {
+  title: 'components/common/Marker',
+  component: Marker,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Marker>;
+
+export default meta;
+type Story = StoryObj<typeof Marker>;
+
+export const Basic: Story = {
+  args: {
+    categoryName: 'restaurant',
+  },
+  argTypes: {
+    categoryName: { control: { type: 'select' }, options: MARKER_CATEGORIES },
+  },
+  render: (args) => {
+    return <Marker {...args} />;
+  },
+};
+
+export const ALL: Story = {
+  render: () => {
+    return (
+      <>
+        {MARKER_CATEGORIES.map((item) => (
+          <Marker key={item} categoryName={item} />
+        ))}
+      </>
+    );
+  },
+};
diff --git a/src/components/common/Marker/Marker.types.ts b/src/components/common/Marker/Marker.types.ts
new file mode 100644
index 0000000..f8fba10
--- /dev/null
+++ b/src/components/common/Marker/Marker.types.ts
@@ -0,0 +1,10 @@
+import { ComponentPropsWithoutRef } from 'react';
+
+import { MarkerCategory } from '@/constants/categories';
+
+export type Props = {
+  /**
+   * category name to be displayed.
+   */
+  categoryName: MarkerCategory;
+} & ComponentPropsWithoutRef<'button'>;
diff --git a/src/components/common/Marker/index.tsx b/src/components/common/Marker/index.tsx
new file mode 100644
index 0000000..5d7036a
--- /dev/null
+++ b/src/components/common/Marker/index.tsx
@@ -0,0 +1,30 @@
+import MarkerIcon from '@/assets/icons/marker.svg';
+
+import { Props } from './Marker.types';
+
+import { Icon } from '../Icon';
+
+export const Marker = ({ categoryName, ...props }: Props) => {
+  const ICON_SIZE = 35;
+  const ICON_POSITIONS = {
+    default: { left: '51%', top: '1/2' },
+    restaurant: { left: '51%', top: '[55%]' },
+  };
+
+  const position =
+    categoryName === 'restaurant' ? ICON_POSITIONS.restaurant : ICON_POSITIONS.default;
+  return (
+    <button
+      aria-label={`${categoryName} location marker`}
+      className="relative inline-block"
+      {...props}
+    >
+      <MarkerIcon />
+      <Icon
+        name={categoryName}
+        size={ICON_SIZE}
+        className={`absolute left-[${position.left}] top-${position.top} -translate-x-1/2 -translate-y-1/2`}
+      />
+    </button>
+  );
+};
diff --git a/src/constants/categories.ts b/src/constants/categories.ts
new file mode 100644
index 0000000..fdde898
--- /dev/null
+++ b/src/constants/categories.ts
@@ -0,0 +1,11 @@
+export const MARKER_CATEGORIES = [
+  'restaurant',
+  'cafe',
+  'bar',
+  'shopping',
+  'travel',
+  'public',
+  'hospital',
+  'other',
+] as const;
+export type MarkerCategory = (typeof MARKER_CATEGORIES)[number];