diff --git a/src/components/Icon/Icon.props.ts b/src/components/Icon/Icon.props.ts
new file mode 100644
index 00000000..2d17ba48
--- /dev/null
+++ b/src/components/Icon/Icon.props.ts
@@ -0,0 +1,10 @@
+// import type { SVGAttributes } from 'react';
+import { IconName } from '@virtuslab/tetrisly-icons';
+
+import type { BaseProps } from '@/types/BaseProps';
+
+export type IconProps = {
+ name: IconName;
+ color?: BaseProps['color'];
+ custom?: BaseProps;
+};
diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
new file mode 100644
index 00000000..f3fb1bd0
--- /dev/null
+++ b/src/components/Icon/Icon.stories.tsx
@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { icons } from '@virtuslab/tetrisly-icons';
+
+import { Icon } from './Icon';
+
+import { TetDocs } from '@/docs-components/TetDocs';
+
+const meta = {
+ title: 'Foundations / Icon',
+ component: Icon,
+ tags: ['autodocs'],
+ args: {
+ name: '20-tetrisly',
+ color: '$color-raspberry-0',
+ },
+ argTypes: {
+ name: {
+ options: Object.keys(icons),
+ defaultValue: undefined,
+ control: { type: 'select' },
+ },
+ },
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'A clean, consistent, and pixel-perfect icon library crafted especially for modern UI design.',
+ },
+ page: () => (
+
+ ),
+ },
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/components/Icon/Icon.test.tsx b/src/components/Icon/Icon.test.tsx
new file mode 100644
index 00000000..08597cc0
--- /dev/null
+++ b/src/components/Icon/Icon.test.tsx
@@ -0,0 +1,22 @@
+import { Icon } from './Icon';
+import { render } from '../../tests/render';
+
+const getIcon = (jsx: JSX.Element) => {
+ const { getByTestId } = render(jsx);
+
+ return getByTestId('icon');
+};
+
+describe('Loader', () => {
+ it('should render the component', () => {
+ const icon = getIcon();
+
+ expect(icon).toBeInTheDocument();
+ });
+
+ it('should render star with $color-raspberry-0 color', () => {
+ const icon = getIcon();
+
+ expect(icon).toHaveStyle('color: rgb(192, 48, 96);');
+ });
+});
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
new file mode 100644
index 00000000..27fe622e
--- /dev/null
+++ b/src/components/Icon/Icon.tsx
@@ -0,0 +1,15 @@
+import { Icon as SVGIcon } from '@virtuslab/tetrisly-icons';
+import { styled, system } from '@xstyled/styled-components';
+import { FC } from 'react';
+
+import type { IconProps } from './Icon.props';
+
+import type { MarginProps } from '@/types/MarginProps';
+
+const SVG = styled(SVGIcon)`
+ ${system}
+`;
+
+export const Icon: FC = ({ custom, ...rest }) => (
+
+);
diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts
new file mode 100644
index 00000000..20736fa0
--- /dev/null
+++ b/src/components/Icon/index.ts
@@ -0,0 +1,2 @@
+export { Icon } from './Icon';
+export type { IconProps } from './Icon.props';