diff --git a/public/icon-sprite.svg b/public/icon-sprite.svg
new file mode 100644
index 00000000..7f1d45a2
--- /dev/null
+++ b/public/icon-sprite.svg
@@ -0,0 +1,21 @@
+
+
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4736a57e..0282e746 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,19 @@
+'use client';
+
+import Icon from '../components/Icon';
+
const Home = () => {
- return ;
+ return (
+ // 아래는 예시 사용방법입니다.
+
+
+
+
+
+
+
+
+ );
};
export default Home;
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
new file mode 100644
index 00000000..91e4eb88
--- /dev/null
+++ b/src/components/Icon/index.tsx
@@ -0,0 +1,18 @@
+import React, { ComponentProps } from 'react';
+
+import { IconName } from './type';
+
+interface IconProps extends Omit, 'width' | 'height'> {
+ id: IconName;
+ size?: number;
+}
+
+const Icon = ({ id, size = 20, ...props }: IconProps) => {
+ return (
+
+ );
+};
+
+export default Icon;
diff --git a/src/components/Icon/type.ts b/src/components/Icon/type.ts
new file mode 100644
index 00000000..c7c8ab62
--- /dev/null
+++ b/src/components/Icon/type.ts
@@ -0,0 +1 @@
+export type IconName = 'heart' | 'home' | 'user' | 'comment' | 'chat' | 'add';