diff --git a/packages/shared/components/src/Icon.tsx b/packages/shared/components/src/Icon.tsx
new file mode 100644
index 0000000..300e88a
--- /dev/null
+++ b/packages/shared/components/src/Icon.tsx
@@ -0,0 +1,28 @@
+import { favolink, forwardRef } from '@favolink/system';
+import { classNames } from '@favolink/utils';
+import { type ComponentPropsWithoutRef } from 'react';
+
+const ICON_CLASSNAME = 'favolink-icon';
+
+export type IconProps = ComponentPropsWithoutRef<'svg'>;
+
+const Icon = forwardRef<IconProps, 'svg'>(function Icon(props, ref) {
+  const { as: element, children, className, ...restProps } = props;
+
+  const sharedProps = {
+    ref,
+    className: classNames(ICON_CLASSNAME, className),
+  };
+
+  if (element && typeof element !== 'string') {
+    return <favolink.svg as={element} {...sharedProps} {...restProps} />;
+  }
+
+  return (
+    <favolink.svg {...sharedProps} {...restProps}>
+      {children}
+    </favolink.svg>
+  );
+});
+
+export default Icon;
diff --git a/packages/shared/components/src/index.ts b/packages/shared/components/src/index.ts
index 5044b6f..d8db8c9 100644
--- a/packages/shared/components/src/index.ts
+++ b/packages/shared/components/src/index.ts
@@ -4,6 +4,7 @@ export * from '@favolink/system';
 export { default as Box } from './Box';
 export { default as Button, type ButtonProps } from './Button';
 export { default as Heading, type HeadingProps } from './Heading';
+export { default as Icon, type IconProps } from './Icon';
 export { default as Link, type LinkProps } from './Link';
 export {
   default as Modal,