@factorialco/f0-react-native 0.29.0 → 0.30.0

package/src/components/Button/index.tsx

@@ -3,7 +3,7 @@ import { Pressable, Text, View } from "react-native"
 import { tv, type VariantProps } from "tailwind-variants"
 
 import { cn } from "../../lib/utils"
-import { Icon, type IconType } from "../Icon"
+import { F0Icon, type IconType, type IconColor } from "../primitives/F0Icon"
 
 export const variants = [
   "default",
@@ -68,29 +68,35 @@ const pressedVariants = tv({
   },
 })
 
-const getIconColor = (variant: ButtonVariant, isPressed: boolean) => {
+const getIconColor = (
+  variant: ButtonVariant,
+  isPressed: boolean
+): IconColor => {
   switch (variant) {
     case "default":
-      return "text-f0-icon-inverse"
+      return "inverse"
     case "critical":
-      return isPressed ? "text-f0-icon-inverse" : "text-f0-icon-critical-bold"
+      return isPressed ? "inverse" : "critical-bold"
     default:
-      return "text-f0-icon"
+      return "default"
   }
 }
 
-const getIconOnlyColor = (variant: ButtonVariant, isPressed: boolean) => {
+const getIconOnlyColor = (
+  variant: ButtonVariant,
+  isPressed: boolean
+): IconColor => {
   switch (variant) {
     case "critical":
-      return isPressed ? "text-f0-icon-inverse" : "text-f0-icon-critical-bold"
+      return isPressed ? "inverse" : "critical-bold"
     case "default":
-      return "text-f0-icon-inverse"
+      return "inverse"
     case "outline":
     case "neutral":
     case "ghost":
     case "promote":
     default:
-      return "text-f0-icon-bold"
+      return "bold"
   }
 }
 
@@ -191,15 +197,15 @@ export const Button = forwardRef<View, ButtonProps>(function Button(
         accessibilityHint={accessibilityHint}
       >
         {icon && (
-          <Icon
+          <F0Icon
             icon={icon}
             size={size === "sm" ? "sm" : "md"}
-            className={cn(
-              hideLabel && round ? undefined : "-ml-0.5",
+            color={
               hideLabel && round
                 ? getIconOnlyColor(variant, shouldShowPressed)
                 : getIconColor(variant, shouldShowPressed)
-            )}
+            }
+            className={hideLabel && round ? undefined : "-ml-0.5"}
           />
         )}
         {emoji && (

package/src/components/Icon/__tests__/Icon.spec.tsx

@@ -20,8 +20,6 @@ describe("Icon", () => {
     const { getByTestId } = render(
       <Icon icon={Archive} size="lg" testID="icon" />
     )
-    // In a real test environment, we could check the actual style props applied
-    // but for now we just ensure it renders
     expect(getByTestId("icon")).toBeTruthy()
   })
 
@@ -29,8 +27,6 @@ describe("Icon", () => {
     const { getByTestId } = render(
       <Icon icon={Archive} className="text-red-500" testID="icon" />
     )
-    // In a real test environment, we could check the actual style props applied
-    // but for now we just ensure it renders
     expect(getByTestId("icon")).toBeTruthy()
   })
 })

package/src/components/Icon/index.tsx

@@ -1,13 +1,9 @@
-import React, {
-  forwardRef,
-  ForwardRefExoticComponent,
-  RefAttributes,
-} from "react"
+import React, { forwardRef } from "react"
 import { Svg, SvgProps } from "react-native-svg"
 import { tv, type VariantProps } from "tailwind-variants"
-import { withUniwind } from "uniwind"
 
 import { cn } from "../../lib/utils"
+import { applyIconInterop, type IconType } from "../primitives/F0Icon"
 
 const iconVariants = tv({
   base: "shrink-0",
@@ -33,26 +29,11 @@ export interface IconProps extends SvgProps, VariantProps<typeof iconVariants> {
   isPressed?: boolean
 }
 
-export type IconType = ForwardRefExoticComponent<
-  SvgProps &
-    RefAttributes<Svg> & {
-      className?: string
-    }
->
-
-// Keep track of icons that have already had withUniwind applied
-const interopAppliedIcons = new WeakSet()
-
-// Function to apply UniWind interop to an icon component
-export function applyIconInterop(icon: IconType) {
-  if (!interopAppliedIcons.has(icon)) {
-    const wrappedIcon = withUniwind(icon)
-    interopAppliedIcons.add(wrappedIcon)
-    return wrappedIcon
-  }
-  return icon
-}
-
+/**
+ * @deprecated Use F0Icon instead. This component will be removed in a future version.
+ * Migration: Replace <Icon icon={X} /> with <F0Icon icon={X} />.
+ * F0Icon supports the same `icon`, `size`, `testID`, and `className` props, plus semantic `color` variants.
+ */
 export const Icon = forwardRef<Svg, IconProps>(function Icon(
   { size = "md", icon, className, testID, ...props },
   ref

package/src/components/OneChip/index.tsx

@@ -3,8 +3,8 @@ import { tv, type VariantProps } from "tailwind-variants"
 
 import { CrossedCircle } from "../../icons/app"
 import { cn } from "../../lib/utils"
-import { Icon, type IconType } from "../Icon"
 import { PressableFeedback } from "../PressableFeedback"
+import { F0Icon, type IconType } from "../primitives/F0Icon"
 
 export const chipContainerVariants = tv({
   base: "flex items-center gap-1 rounded-full border border-solid border-f0-border px-2 py-0.5 grow-0",
@@ -61,7 +61,7 @@ export const OneChip = ({
       >
         <View className="flex flex-row items-center gap-0.5">
           {icon && (
-            <Icon
+            <F0Icon
               icon={icon}
               size="sm"
               className={chipTextVariants({ variant })}
@@ -78,7 +78,7 @@ export const OneChip = ({
               accessibilityRole="button"
               accessibilityLabel="Close"
             >
-              <Icon
+              <F0Icon
                 icon={CrossedCircle}
                 className={chipTextVariants({ variant })}
                 size="sm"

package/src/components/Tags/AlertTab/index.tsx

@@ -1,7 +1,7 @@
 import { AlertCircle, InfoCircle, Warning } from "../../../icons/app"
 import { useTextFormatEnforcer } from "../../../lib/text"
 import { cn } from "../../../lib/utils"
-import { Icon, IconType } from "../../Icon"
+import { F0Icon, type IconType } from "../../primitives/F0Icon"
 import { BaseTag } from "../BaseTag"
 
 type Level = "info" | "warning" | "critical"
@@ -40,7 +40,7 @@ export const AlertTag = <T extends string>({ text, level }: Props<T>) => {
         }[level]
       )}
       left={
-        <Icon
+        <F0Icon
           icon={iconMap[level]}
           className={cn(
             {

package/src/components/Tags/RawTag/index.tsx

@@ -1,6 +1,6 @@
 import { useTextFormatEnforcer } from "../../../lib/text"
 import { cn } from "../../../lib/utils"
-import { Icon, IconType } from "../../Icon"
+import { F0Icon, type IconType } from "../../primitives/F0Icon"
 import { BaseTag } from "../BaseTag"
 
 export type RawTagProps = {
@@ -29,7 +29,7 @@ export const RawTag = ({
       classNameText="text-f0-foreground"
       left={
         icon ? (
-          <Icon icon={icon} size="sm" className="text-f0-icon" aria-hidden />
+          <F0Icon icon={icon} size="sm" color="default" aria-hidden />
         ) : null
       }
       text={text}

package/src/components/experimental/Lists/DataList/ItemContainer.tsx

@@ -2,7 +2,7 @@ import { ReactElement, ReactNode } from "react"
 import { View, Text } from "react-native"
 
 import { cn } from "../../../../lib/utils"
-import { Icon, IconType } from "../../../Icon"
+import { F0Icon, type IconType } from "../../../primitives/F0Icon"
 
 import { CopyAction } from "./actions/CopyAction"
 import { GenericAction } from "./actions/GenericAction"
@@ -34,7 +34,7 @@ export const ItemContainer = (props: ItemContainerProps) => {
           (typeof LeftIcon === "function" ? (
             LeftIcon({})
           ) : (
-            <Icon icon={LeftIcon} size="md" />
+            <F0Icon icon={LeftIcon} size="md" />
           ))}
         <Text className="line-clamp-5 text-left text-f0-foreground">
           {text}

package/src/components/experimental/Lists/DataList/actions/CopyAction.tsx

@@ -5,7 +5,7 @@ import { Pressable, View } from "react-native"
 import { CopyActionType } from ".."
 import { CheckCircle, LayersFront } from "../../../../../icons/app"
 import { cn } from "../../../../../lib/utils"
-import { Icon } from "../../../../Icon"
+import { F0Icon } from "../../../../primitives/F0Icon"
 
 const COPIED_SHOWN_MS = 750
 
@@ -47,24 +47,21 @@ export const CopyAction = ({ text, children }: CopyActionProps) => {
       <View className="flex flex-row items-center gap-1.5">{children}</View>
       <View className="flex">
         {!copied && (
-          <Icon
+          <F0Icon
             icon={LayersFront}
             size="md"
             aria-hidden={true}
-            className={cn(
-              "col-start-1 col-end-2 row-start-1 row-end-2 text-f0-icon-bold"
-            )}
+            color="bold"
+            className="col-start-1 col-end-2 row-start-1 row-end-2"
           />
         )}
         {copied && (
-          <Icon
+          <F0Icon
             icon={CheckCircle}
             size="md"
             aria-hidden={true}
-            className={cn(
-              "col-start-1 col-end-2 row-start-1 row-end-2",
-              "text-f0-icon-positive"
-            )}
+            color="positive"
+            className="col-start-1 col-end-2 row-start-1 row-end-2"
           />
         )}
       </View>

package/src/components/experimental/Lists/DataList/actions/GenericAction.tsx

@@ -4,7 +4,7 @@ import { Pressable, View } from "react-native"
 import { GenericActionType } from ".."
 import { ChevronRight } from "../../../../../icons/app"
 import { cn } from "../../../../../lib/utils"
-import { Icon } from "../../../../Icon"
+import { F0Icon } from "../../../../primitives/F0Icon"
 
 export type GenericActionProps = {
   children: ReactNode
@@ -24,7 +24,7 @@ export const GenericAction = memo(
         )}
       >
         <View className="flex flex-row items-center gap-1.5">{children}</View>
-        <Icon
+        <F0Icon
           aria-hidden={true}
           icon={ChevronRight}
           size="md"

package/src/components/experimental/Lists/DataList/index.tsx

@@ -5,7 +5,7 @@ import { cn } from "../../../../lib/utils"
 import { CompanyAvatar } from "../../../Avatars/CompanyAvatar"
 import { PersonAvatar } from "../../../Avatars/PersonAvatar"
 import { TeamAvatar } from "../../../Avatars/TeamAvatar"
-import { IconType } from "../../../Icon"
+import { type IconType } from "../../../primitives/F0Icon"
 import { DotTag, DotTagProps } from "../../../Tags/DotTag"
 
 import { ItemContainer } from "./ItemContainer"

package/src/components/experimental/Lists/DetailsItem/__snapshots__/index.spec.tsx.snap

@@ -101,7 +101,7 @@ exports[`DetailsItem Snapshot type company 1`] = `
               aria-hidden={true}
               bbHeight="100%"
               bbWidth="100%"
-              className="shrink-0 w-5 h-5 stroke-md col-start-1 col-end-2 row-start-1 row-end-2 text-f0-icon-bold"
+              className="shrink-0 w-5 h-5 stroke-md text-f0-icon-bold col-start-1 col-end-2 row-start-1 row-end-2"
               fill="none"
               focusable={false}
               meetOrSlice={0}
@@ -343,7 +343,7 @@ exports[`DetailsItem Snapshot type item 1`] = `
               aria-hidden={true}
               bbHeight="100%"
               bbWidth="100%"
-              className="shrink-0 w-5 h-5 stroke-md col-start-1 col-end-2 row-start-1 row-end-2 text-f0-icon-bold"
+              className="shrink-0 w-5 h-5 stroke-md text-f0-icon-bold col-start-1 col-end-2 row-start-1 row-end-2"
               fill="none"
               focusable={false}
               meetOrSlice={0}
@@ -519,7 +519,7 @@ exports[`DetailsItem Snapshot type person 1`] = `
               aria-hidden={true}
               bbHeight="100%"
               bbWidth="100%"
-              className="shrink-0 w-5 h-5 stroke-md col-start-1 col-end-2 row-start-1 row-end-2 text-f0-icon-bold"
+              className="shrink-0 w-5 h-5 stroke-md text-f0-icon-bold col-start-1 col-end-2 row-start-1 row-end-2"
               fill="none"
               focusable={false}
               meetOrSlice={0}
@@ -695,7 +695,7 @@ exports[`DetailsItem Snapshot type team 1`] = `
               aria-hidden={true}
               bbHeight="100%"
               bbWidth="100%"
-              className="shrink-0 w-5 h-5 stroke-md col-start-1 col-end-2 row-start-1 row-end-2 text-f0-icon-bold"
+              className="shrink-0 w-5 h-5 stroke-md text-f0-icon-bold col-start-1 col-end-2 row-start-1 row-end-2"
               fill="none"
               focusable={false}
               meetOrSlice={0}

package/src/components/experimental/Lists/DetailsItemsList/__snapshots__/index.spec.tsx.snap

@@ -79,7 +79,7 @@ exports[`DetailsItemsList Snapshot  1`] = `
                   aria-hidden={true}
                   bbHeight="100%"
                   bbWidth="100%"
-                  className="shrink-0 w-5 h-5 stroke-md col-start-1 col-end-2 row-start-1 row-end-2 text-f0-icon-bold"
+                  className="shrink-0 w-5 h-5 stroke-md text-f0-icon-bold col-start-1 col-end-2 row-start-1 row-end-2"
                   fill="none"
                   focusable={false}
                   meetOrSlice={0}

package/src/components/exports.ts

@@ -5,7 +5,7 @@ export * from "./Badge"
 export * from "./Button"
 export * from "./Counter"
 export * from "./ExampleComponent"
-export * from "./Icon"
+export { Icon, type IconProps } from "./Icon"
 export * from "./Navigation/PageHeader"
 export * from "./OneChip"
 export * from "./OnePreset"
@@ -17,3 +17,4 @@ export * from "./experimental/Lists/DetailsItemsList"
 
 // Export primitives
 export * from "./primitives/F0Text"
+export * from "./primitives/F0Icon"

package/src/components/primitives/F0Icon/F0Icon.md

@@ -0,0 +1,187 @@
+# F0Icon
+
+Icon component for rendering SVG icons with consistent sizing and semantic colors from the F0 Design System.
+
+## Overview
+
+F0Icon is an atomic component that wraps SVG icon components with automatic UniWind interop, standardized sizing variants, and semantic icon colors. It follows the same pattern as F0Text: a `color` prop maps to design system tokens, with `className` available as an escape hatch.
+
+## Architecture
+
+- **Pattern:** Props API (Atomic Component)
+- **Category:** Primitive Component
+- **Location:** `src/components/primitives/F0Icon/`
+
+## Usage
+
+<!-- prettier-ignore -->
+```tsx
+import { F0Icon } from "@factorialco/f0-react-native"
+import { Archive } from "@factorialco/f0-react-native/icons/app"
+import { Home } from "@factorialco/f0-react-native/icons/modules"
+
+<F0Icon icon={Archive} />
+
+<F0Icon icon={Home} size="lg" />
+
+<F0Icon icon={Archive} color="critical" />
+
+<F0Icon icon={Archive} size="sm" color="positive" testID="archive-icon" />
+```
+
+## Props
+
+### `icon` (required)
+
+- **Type:** `IconType`
+- **Description:** SVG icon component to render (from `icons/` directory)
+
+<!-- prettier-ignore -->
+```tsx
+import { Archive } from "@factorialco/f0-react-native/icons/app"
+<F0Icon icon={Archive} />
+```
+
+### `size`
+
+- **Type:** `'xl' | 'lg' | 'md' | 'sm' | 'xs'`
+- **Default:** `'md'`
+- **Description:** Size variant for the icon
+
+<!-- prettier-ignore -->
+```tsx
+<F0Icon icon={Archive} size="xl" />  // 32x32px
+<F0Icon icon={Archive} size="lg" />  // 24x24px
+<F0Icon icon={Archive} size="md" />  // 20x20px (default)
+<F0Icon icon={Archive} size="sm" />  // 16x16px
+<F0Icon icon={Archive} size="xs" />  // 12x12px
+```
+
+### `color`
+
+- **Type:** `IconColor` (see below)
+- **Default:** none (no color class applied; icon inherits from parent)
+- **Description:** Semantic icon color from the F0 design system. Maps to `f0-icon-*` tokens.
+
+<!-- prettier-ignore -->
+```tsx
+<F0Icon icon={Archive} color="default" />
+<F0Icon icon={Archive} color="critical" />
+<F0Icon icon={Archive} color="positive" />
+<F0Icon icon={Archive} color="info" />
+<F0Icon icon={Archive} color="warning" />
+<F0Icon icon={Archive} color="accent" />
+```
+
+### `testID`
+
+- **Type:** `string`
+- **Description:** Test identifier for testing library
+
+<!-- prettier-ignore -->
+```tsx
+<F0Icon icon={Archive} testID="my-icon" />
+```
+
+### `className`
+
+- **Type:** `string`
+- **Description:** Tailwind classes for custom styling. Use as an escape hatch when `color` doesn't cover the need (e.g. layout adjustments, one-off colors).
+
+<!-- prettier-ignore -->
+```tsx
+<F0Icon icon={Archive} className="-ml-0.5" />
+<F0Icon icon={Star} className="text-yellow-500" />
+```
+
+### Other Props
+
+F0Icon accepts all SVG props from `react-native-svg` except `style` (use `color` or `className` instead).
+
+## Size Variants
+
+| Variant | Width/Height   | Stroke Width | Use Case                           |
+| ------- | -------------- | ------------ | ---------------------------------- |
+| `xl`    | 32px (w-8 h-8) | stroke-xl    | Large feature icons, hero sections |
+| `lg`    | 24px (w-6 h-6) | stroke-lg    | Primary buttons, major actions     |
+| `md`    | 20px (w-5 h-5) | stroke-md    | Default size, most UI elements     |
+| `sm`    | 16px (w-4 h-4) | stroke-sm    | Secondary buttons, compact UI      |
+| `xs`    | 12px (w-3 h-3) | stroke-xs    | Inline icons, dense layouts        |
+
+## Color Variants
+
+Derived from `f0-icon-*` tokens in `src/styles/theme.css`. Sync is enforced by `F0Icon.tokens.spec.ts`.
+
+| Color                 | Token                              | Use Case                  |
+| --------------------- | ---------------------------------- | ------------------------- |
+| `default`             | `text-f0-icon`                     | Standard icon color       |
+| `secondary`           | `text-f0-icon-secondary`           | Muted/secondary icons     |
+| `inverse`             | `text-f0-icon-inverse`             | Icons on dark backgrounds |
+| `bold`                | `text-f0-icon-bold`                | High emphasis icons       |
+| `critical`            | `text-f0-icon-critical`            | Error/destructive         |
+| `critical-bold`       | `text-f0-icon-critical-bold`       | Bold critical emphasis    |
+| `accent`              | `text-f0-icon-accent`              | Brand accent              |
+| `info`                | `text-f0-icon-info`                | Informational             |
+| `warning`             | `text-f0-icon-warning`             | Warning states            |
+| `positive`            | `text-f0-icon-positive`            | Success/positive          |
+| `promote`             | `text-f0-icon-promote`             | Promotional highlights    |
+| `selected`            | `text-f0-icon-selected`            | Selected state            |
+| `selected-hover`      | `text-f0-icon-selected-hover`      | Selected hover state      |
+| `mood-super-negative` | `text-f0-icon-mood-super-negative` | Mood: very negative       |
+| `mood-negative`       | `text-f0-icon-mood-negative`       | Mood: negative            |
+| `mood-neutral`        | `text-f0-icon-mood-neutral`        | Mood: neutral             |
+| `mood-positive`       | `text-f0-icon-mood-positive`       | Mood: positive            |
+| `mood-super-positive` | `text-f0-icon-mood-super-positive` | Mood: very positive       |
+
+## Implementation Details
+
+### UniWind Interop
+
+F0Icon automatically applies UniWind interop to icon components using `withUniwind()`. Icons are cached in a `WeakSet` to ensure the wrapper is only applied once per icon type.
+
+### Performance
+
+- Wrapped in `React.memo` to prevent unnecessary re-renders
+- `useMemo` for className generation
+- Icon interop caching via `WeakSet`
+
+### TypeScript
+
+Style prop is blocked at compile-time to enforce `color`/`className` usage:
+
+<!-- prettier-ignore -->
+```tsx
+<F0Icon icon={Archive} color="critical" />
+
+// TypeScript error - style not allowed
+<F0Icon icon={Archive} style={{ color: 'red' }} />
+```
+
+### Token Sync
+
+`ICON_COLORS` in `F0Icon.types.ts` is kept in sync with `f0-icon-*` tokens from `theme.css` by a CI test (`F0Icon.tokens.spec.ts`). Adding or removing a token in theme.css without updating `ICON_COLORS` will fail the test.
+
+## File Structure
+
+```
+src/components/primitives/F0Icon/
+├── index.ts                       # Barrel exports
+├── F0Icon.tsx                     # Component implementation
+├── F0Icon.types.ts                # TypeScript type definitions (ICON_COLORS, IconColor)
+├── F0Icon.styles.ts               # tailwind-variants configuration (size + color)
+├── F0Icon.md                      # This documentation
+└── __tests__/
+    ├── F0Icon.spec.tsx            # Component tests
+    └── F0Icon.tokens.spec.ts     # Token sync test (theme.css ↔ ICON_COLORS)
+```
+
+## Related Components
+
+- **F0Text** - Text primitive with semantic `color` prop (foreground tokens)
+- **Button** - Uses F0Icon for icon slots
+- **Badge** - Can include F0Icon
+
+## References
+
+- Design tokens: `src/styles/theme.css`
+- Icon source: `src/icons/`

package/src/components/primitives/F0Icon/F0Icon.styles.ts

@@ -0,0 +1,43 @@
+import { tv } from "tailwind-variants"
+
+/**
+ * F0Icon tailwind-variants configuration
+ * Size and color variants from the F0 design system
+ */
+export const iconVariants = tv({
+  base: "shrink-0",
+
+  variants: {
+    size: {
+      xl: "w-8 h-8 stroke-xl",
+      lg: "w-6 h-6 stroke-lg",
+      md: "w-5 h-5 stroke-md",
+      sm: "w-4 h-4 stroke-sm",
+      xs: "w-3 h-3 stroke-xs",
+    },
+    color: {
+      default: "text-f0-icon",
+      secondary: "text-f0-icon-secondary",
+      inverse: "text-f0-icon-inverse",
+      bold: "text-f0-icon-bold",
+      critical: "text-f0-icon-critical",
+      "critical-bold": "text-f0-icon-critical-bold",
+      accent: "text-f0-icon-accent",
+      info: "text-f0-icon-info",
+      warning: "text-f0-icon-warning",
+      positive: "text-f0-icon-positive",
+      promote: "text-f0-icon-promote",
+      selected: "text-f0-icon-selected",
+      "selected-hover": "text-f0-icon-selected-hover",
+      "mood-super-negative": "text-f0-icon-mood-super-negative",
+      "mood-negative": "text-f0-icon-mood-negative",
+      "mood-neutral": "text-f0-icon-mood-neutral",
+      "mood-positive": "text-f0-icon-mood-positive",
+      "mood-super-positive": "text-f0-icon-mood-super-positive",
+    },
+  },
+
+  defaultVariants: {
+    size: "md",
+  },
+})

package/src/components/primitives/F0Icon/F0Icon.tsx

@@ -0,0 +1,73 @@
+import React, { useMemo } from "react"
+import type { Svg } from "react-native-svg"
+import { withUniwind } from "uniwind"
+
+import { cn } from "../../../lib/utils"
+
+import { iconVariants } from "./F0Icon.styles"
+import type { F0IconProps, IconType } from "./F0Icon.types"
+
+// Cache original icon -> wrapped icon so withUniwind is only applied once per icon type
+const interopCache = new WeakMap<IconType, IconType>()
+
+/**
+ * Applies UniWind interop to an icon component
+ * Ensures withUniwind is only applied once per icon type
+ * @internal
+ */
+export function applyIconInterop(icon: IconType): IconType {
+  let wrapped = interopCache.get(icon)
+  if (!wrapped) {
+    wrapped = withUniwind(icon) as IconType
+    interopCache.set(icon, wrapped)
+  }
+  return wrapped
+}
+
+/**
+ * F0Icon - Icon component for the F0 Design System
+ *
+ * Renders SVG icons with consistent sizing and semantic colors.
+ * Icons are automatically wrapped with UniWind for className support.
+ *
+ * @example
+ * import { Archive } from '@/icons/app';
+ *
+ * <F0Icon icon={Archive} size="lg" />
+ * <F0Icon icon={Archive} color="critical" />
+ * <F0Icon icon={Archive} size="sm" color="positive" />
+ */
+const F0Icon = React.memo(
+  React.forwardRef<Svg, F0IconProps>(
+    (
+      { size = "md", color, icon, testID, className: customClassName, ...rest },
+      ref
+    ) => {
+      const IconComponent = useMemo(
+        () => (icon ? applyIconInterop(icon) : null),
+        [icon]
+      )
+
+      const className = useMemo(
+        () => cn(iconVariants({ size, color }), customClassName),
+        [size, color, customClassName]
+      )
+
+      // Early return if no icon provided (after all hooks)
+      if (!icon || !IconComponent) return null
+
+      return (
+        <IconComponent
+          ref={ref}
+          className={className}
+          testID={testID}
+          {...rest}
+        />
+      )
+    }
+  )
+)
+
+F0Icon.displayName = "F0Icon"
+
+export default F0Icon