@umituz/react-native-design-system 2.9.70 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.9.70",
+  "version": "2.10.0",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -63,7 +63,6 @@
     "url": "https://github.com/umituz/react-native-design-system"
   },
   "peerDependencies": {
-    "@expo/vector-icons": ">=15.0.0",
     "@react-native-async-storage/async-storage": ">=1.18.0",
     "@react-native-community/datetimepicker": ">=8.0.0",
     "@react-navigation/bottom-tabs": ">=7.0.0",
@@ -103,7 +102,6 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
-    "@expo/vector-icons": "^15.0.0",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-community/datetimepicker": "^8.5.1",
     "@react-navigation/bottom-tabs": "^7.9.0",

package/src/atoms/AtomicBadge.tsx

@@ -19,7 +19,7 @@ export interface AtomicBadgeProps {
     variant?: BadgeVariant;
     /** Size preset */
     size?: BadgeSize;
-    /** Optional icon name (Ionicons) */
+    /** Optional icon name (interpreted by app's icon renderer) */
     icon?: IconName;
     /** Icon position */
     iconPosition?: "left" | "right";

package/src/atoms/AtomicIcon.README.md

@@ -1,316 +1,185 @@
 # AtomicIcon
 
-A theme-aware icon component using Ionicons with semantic sizing and colors.
+A theme-aware, **icon-library agnostic** icon component with semantic sizing and colors.
+
+## Setup - Icon Renderer (Required)
+
+AtomicIcon requires an icon renderer to be provided via `DesignSystemProvider`. This allows your app to use ANY icon library.
+
+```tsx
+// App.tsx or your root component
+import { Ionicons } from '@expo/vector-icons';
+// OR MaterialIcons, Feather, FontAwesome, etc.
+
+<DesignSystemProvider
+  iconRenderer={({ name, size, color }) => (
+    <Ionicons name={name} size={size} color={color} />
+  )}
+>
+  <App />
+</DesignSystemProvider>
+```
 
 ## Import & Usage
 
 ```typescript
-import { AtomicIcon } from 'react-native-design-system/src/atoms/AtomicIcon';
+import { AtomicIcon } from '@umituz/react-native-design-system';
 ```
 
-**Location:** `src/atoms/AtomicIcon.tsx`
-
 ## Basic Usage
 
 ```tsx
 <AtomicIcon name="heart" />
+<AtomicIcon name="heart" size="lg" color="primary" />
+<AtomicIcon name="settings" customSize={32} customColor="#FF0000" />
 ```
 
 ## Strategy
 
-**Purpose**: Provide consistent, accessible icons with theme integration.
-
-**When to Use**:
-- Navigation icons (tabs, headers, buttons)
-- Action indicators (favorites, settings, search)
-- Status indicators (success, error, warning)
-- Decorative icons with semantic meaning
-
-**When NOT to Use**:
-- For images or photos (use Image component)
-- When custom icon graphics are needed (use SVG)
-- For non-icon graphics or illustrations
-
-## Rules
+**Purpose**: Provide consistent, accessible icons with theme integration while allowing apps to choose their icon library.
 
-### Required
+**Key Benefits**:
+- ✅ Use ANY icon library (Ionicons, MaterialIcons, Feather, FontAwesome, etc.)
+- ✅ Theme-aware semantic colors
+- ✅ Consistent sizing across the app
+- ✅ No forced dependencies
 
-1. **MUST** provide `name` prop (valid Ionicons name)
-2. **ALWAYS** use appropriate size for context
-3. **SHOULD** use semantic colors when meaningful
-4. **MUST** provide accessibility label if not decorative
-5. **ALWAYS** validate icon name exists
-6. **SHOULD** use consistent sizing within context
-7. **MUST** handle invalid icon names gracefully
-
-### Size Guidelines
+## Props Reference
 
-1. **xs (16px)**: Inline text, tiny badges
-2. **sm (20px)**: List items, compact buttons
-3. **md (24px)**: Default, most use cases
-4. **lg (28px)**: Emphasis, large buttons
-5. **xl (32px)**: Headers, featured icons
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `name` | `string` | Yes | - | Icon name (interpreted by your renderer) |
+| `size` | `IconSize` | No | `'md'` | Semantic size preset |
+| `customSize` | `number` | No | - | Custom size in pixels |
+| `color` | `IconColor` | No | - | Semantic color from theme |
+| `customColor` | `string` | No | - | Custom color (hex, rgba, etc.) |
+| `svgPath` | `string` | No | - | Custom SVG path (built-in rendering) |
+| `svgViewBox` | `string` | No | `'0 0 24 24'` | SVG viewBox |
+| `withBackground` | `boolean` | No | `false` | Add circular background |
+| `backgroundColor` | `string` | No | - | Background color |
+| `accessibilityLabel` | `string` | No | - | Accessibility label |
+| `testID` | `string` | No | - | Test ID |
+| `style` | `StyleProp<ViewStyle>` | No | - | Additional styles |
 
-### Color Semantics
+## Size Presets
 
-1. **primary**: Primary actions, active states
-2. **success**: Success states, confirmations
-3. **warning**: Warning states, cautions
-4. **error**: Error states, destructive actions
-5. **secondary**: Secondary actions, inactive states
+| Size | Pixels | Use Case |
+|------|--------|----------|
+| `xs` | 12px | Inline text, tiny badges |
+| `sm` | 16px | List items, compact buttons |
+| `md` | 20px | Default, most use cases |
+| `lg` | 24px | Emphasis, large buttons |
+| `xl` | 32px | Headers, featured icons |
+| `xxl` | 48px | Hero icons, large displays |
 
-### Background Usage
+## Semantic Colors
 
-1. **Use for**: Floating action buttons, avatar icons
-2. **Don't overuse**: Not every icon needs background
-3. **Match colors**: Background should complement icon
+| Color | Use Case |
+|-------|----------|
+| `primary` | Primary actions, active states |
+| `secondary` | Secondary actions, inactive states |
+| `success` | Success states, confirmations |
+| `warning` | Warning states, cautions |
+| `error` | Error states, destructive actions |
+| `info` | Information states |
+| `textPrimary` | Default text color |
+| `textSecondary` | Subdued text |
 
-## Forbidden
+## Examples
 
-❌ **NEVER** do these:
+### Different Icon Libraries
 
 ```tsx
-// ❌ No icon name
-<AtomicIcon /> {/* ❌ Missing required prop */}
-
-// ❌ Invalid icon name
-<AtomicIcon name="invalid-icon-name" /> {/* ❌ Shows fallback */}
-
-// ❌ Wrong size for context
-<Button>
-  <AtomicIcon name="add" size="xxl" /> {/* ❌ Too large */}
-</Button>
-
-// ❌ Inconsistent sizes
-<View style={{ flexDirection: 'row' }}>
-  <AtomicIcon name="home" size="xs" />
-  <AtomicIcon name="settings" size="xl" /> {/* ❌ Inconsistent */}
-</View>
-
-// ❌ Decorative icon not hidden
-<AtomicIcon
-  name="sparkles"
-  // ❌ Should have accessibilityElementsHidden
+// Ionicons
+<DesignSystemProvider
+  iconRenderer={({ name, size, color }) => (
+    <Ionicons name={name} size={size} color={color} />
+  )}
 />
 
-// ❌ Confusing color semantics
-<AtomicIcon
-  name="trash"
-  color="success" {/* ❌ Trash should be error/danger */}
+// Material Icons
+<DesignSystemProvider
+  iconRenderer={({ name, size, color }) => (
+    <MaterialIcons name={name} size={size} color={color} />
+  )}
 />
 
-// ❌ Background for every icon
-<AtomicIcon
-  name="home"
-  withBackground {/* ❌ Unnecessary */}
+// Feather Icons
+<DesignSystemProvider
+  iconRenderer={({ name, size, color }) => (
+    <Feather name={name} size={size} color={color} />
+  )}
 />
-```
-
-## Best Practices
-
-### Size Selection
-
-✅ **DO**:
-```tsx
-// ✅ Inline with text
-<AtomicText>
-  <AtomicIcon name="star" size="xs" /> Featured
-</AtomicText>
-
-// ✅ Button icons
-<Button>
-  <AtomicIcon name="add" size="sm" />
-</Button>
-
-// ✅ Tab icons
-<TabBar>
-  <TabIcon icon="home" size="md" />
-</TabBar>
-```
-
-❌ **DON'T**:
-```tsx
-// ❌ Wrong sizes
-<Button>
-  <AtomicIcon name="add" size="xl" /> {/* Too large */}
-</Button>
-
-<AtomicText>
-  <AtomicIcon name="star" size="xl" /> Featured {/* Too large */}
-</AtomicText>
-```
-
-### Semantic Colors
 
-✅ **DO**:
-```tsx
-// ✅ Meaningful colors
-<AtomicIcon name="checkmark-circle" color="success" />
-<AtomicIcon name="warning" color="warning" />
-<AtomicIcon name="close-circle" color="error" />
-<AtomicIcon name="heart" color="primary" />
-```
-
-❌ **DON'T**:
-```tsx
-// ❌ Confusing colors
-<AtomicIcon name="trash" color="success" />
-<AtomicIcon name="checkmark" color="error" />
+// Custom SVG Icons
+<DesignSystemProvider
+  iconRenderer={({ name, size, color }) => (
+    <MySvgIcon name={name} width={size} height={size} fill={color} />
+  )}
+/>
 ```
 
-### Background Usage
+### With Background
 
-✅ **DO**:
 ```tsx
-// ✅ FAB icons
 <AtomicIcon
   name="add"
   size="md"
-  withBackground
   color="primary"
-/>
-
-// ✅ Status icons
-<AtomicIcon
-  name="checkmark"
-  size="sm"
   withBackground
-  color="success"
-  backgroundColor="#d4edda"
+  backgroundColor="#E3F2FD"
 />
 ```
 
-❌ **DON'T**:
+### Custom SVG Path (No Renderer Needed)
+
 ```tsx
-// ❌ Unnecessary background
 <AtomicIcon
-  name="home"
-  withBackground {/* Not needed */}
+  svgPath="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
+  svgViewBox="0 0 24 24"
+  color="primary"
 />
 ```
 
-## AI Coding Guidelines
-
-### For AI Agents
-
-When generating AtomicIcon components, follow these rules:
-
-1. **Always provide valid icon name**:
-   ```tsx
-   // ✅ Good - valid Ionicons
-   <AtomicIcon name="home" />
-   <AtomicIcon name="settings-outline" />
-   <AtomicIcon name="chevron-forward" />
-
-   // ❌ Bad - invalid names
-   <AtomicIcon name="invalid-icon" />
-   <AtomicIcon name="home_icon" />
-   ```
-
-2. **Always use appropriate size**:
-   ```tsx
-   // ✅ Good - size matches context
-   <Button>
-     <AtomicIcon name="add" size="sm" />
-   </Button>
-   <TabIcon icon="home" size="md" />
-
-   // ❌ Bad - wrong size
-   <Button>
-     <AtomicIcon name="add" size="xl" />
-   </Button>
-   ```
-
-3. **Always use semantic colors meaningfully**:
-   ```tsx
-   // ✅ Good - meaningful colors
-   <AtomicIcon name="checkmark" color="success" />
-   <AtomicIcon name="warning" color="warning" />
-   <AtomicIcon name="trash" color="error" />
-
-   // ❌ Bad - confusing colors
-   <AtomicIcon name="trash" color="success" />
-   ```
-
-4. **Always provide accessibility context**:
-   ```tsx
-   // ✅ Good - accessible
-   <AtomicIcon
-     name="menu"
-     accessibilityLabel="Open menu"
-     accessibilityRole="button"
-   />
-
-   // ❌ Bad - not accessible
-   <AtomicIcon name="menu" />
-   ```
-
-### Common Patterns
-
-#### Basic Icon
-```tsx
-<AtomicIcon name="heart" />
-```
-
-#### With Text
-```tsx
-<View style={{ flexDirection: 'row', alignItems: 'center' }}>
-  <AtomicIcon name="star" size="sm" color="warning" />
-  <AtomicText>Featured</AtomicText>
-</View>
-```
-
-#### Button Icon
-```tsx
-<Button onPress={handleAction}>
-  <AtomicIcon name="add" size="sm" color="white" />
-</Button>
-```
+## Accessibility
 
-#### Status Icon
 ```tsx
 <AtomicIcon
-  name="checkmark-circle"
-  size="lg"
-  color="success"
-  accessibilityLabel="Completed"
+  name="menu"
+  accessibilityLabel="Open navigation menu"
 />
 ```
 
-## Props Reference
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `name` | `IconName` | Yes | - | Ionicons icon name |
-| `size` | `IconSize` | No | `'md'` | Icon size |
-| `customSize` | `number` | No | - | Custom size (px) |
-| `color` | `IconColor` | No | - | Semantic color |
-| `customColor` | `string` | No | - | Custom color |
-| `svgPath` | `string` | No | - | Custom SVG path |
-| `svgViewBox` | `string` | No | `'0 0 24 24'` | SVG viewBox |
-| `withBackground` | `boolean` | No | `false` | Circular background |
-| `backgroundColor` | `string` | No | - | Background color |
-| `accessibilityLabel` | `string` | No | - | Accessibility label |
+## Migration from Ionicons-specific
 
-## Accessibility
+If you were using the old Ionicons-specific AtomicIcon:
 
-- ✅ Screen reader support
-- ✅ Accessibility label
-- ✅ Semantic role
-- ✅ Test ID support
+1. Add `iconRenderer` to your `DesignSystemProvider`
+2. Install your preferred icon library
+3. Icon names remain the same if using Ionicons
 
-## Performance Tips
+```tsx
+// Before (implicit Ionicons)
+<AtomicIcon name="heart" />
 
-1. **React.memo**: Component is already memoized
-2. **Static names**: Use constant icon names
-3. **Avoid re-renders**: Stabilize icon props
+// After (explicit Ionicons via renderer)
+<DesignSystemProvider
+  iconRenderer={({ name, size, color }) => (
+    <Ionicons name={name} size={size} color={color} />
+  )}
+>
+  <AtomicIcon name="heart" /> {/* Same usage */}
+</DesignSystemProvider>
+```
 
-## Related Components
+## Performance
 
-- [`AtomicButton`](./AtomicButton.README.md) - Button component
-- [`AtomicChip`](./AtomicChip.README.md) - Chip component
-- [`AtomicText`](./AtomicText.README.md) - Text component
+- Component is memoized with `React.memo`
+- Use stable icon names (avoid dynamic strings when possible)
+- Icon renderer is cached via Provider
 
-## License
+## Related
 
-MIT
+- [`IconProvider`](./IconRegistry.tsx) - Icon registry for custom renderers
+- [`AtomicButton`](./button/README.md) - Button with icon support
+- [`AtomicBadge`](./AtomicBadge.tsx) - Badge with icon support

package/src/atoms/AtomicIcon.tsx

@@ -1,30 +1,42 @@
 /**
- * AtomicIcon - Theme-aware Icon Component
+ * AtomicIcon - Agnostic Icon Component
  *
- * Uses @expo/vector-icons/Ionicons internally
- * Adds theme-aware semantic colors and background support
+ * This component is completely icon-library agnostic.
+ * Apps MUST provide their own icon renderer via DesignSystemProvider.
+ *
+ * @example
+ * // In your app, provide an icon renderer:
+ * import { MaterialIcons } from '@expo/vector-icons';
+ *
+ * <DesignSystemProvider
+ *   iconRenderer={({ name, size, color }) => (
+ *     <MaterialIcons name={name} size={size} color={color} />
+ *   )}
+ * >
+ *   <App />
+ * </DesignSystemProvider>
+ *
+ * // Then use AtomicIcon anywhere:
+ * <AtomicIcon name="favorite" size="md" color="primary" />
  */
 
 import React from "react";
 import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
 import Svg, { Path } from "react-native-svg";
-import { useAppDesignTokens } from '../theme';
+import { useAppDesignTokens } from "../theme";
+import { useIconRenderer, type IconRenderProps } from "./IconRegistry";
 import {
   type IconSize as BaseIconSize,
-  type IconName,
   type IconColor,
 } from "./AtomicIcon.types";
 
-// Re-export IconSize for convenience
 export type IconSize = BaseIconSize;
-export type { IconName, IconColor };
-
-const FALLBACK_ICON = "help-circle-outline";
+export type IconName = string;
+export type { IconColor, IconRenderProps };
 
 export interface AtomicIconProps {
-  /** Icon name (Ionicons) */
-  name?: IconName;
+  /** Icon name - interpreted by the app's icon renderer */
+  name?: string;
   /** Semantic size preset */
   size?: IconSize;
   /** Custom size in pixels (overrides size) */
@@ -33,7 +45,7 @@ export interface AtomicIconProps {
   color?: IconColor;
   /** Custom color (overrides color) */
   customColor?: string;
-  /** Custom SVG path for generic icons */
+  /** Custom SVG path for inline SVG icons */
   svgPath?: string;
   /** ViewBox for custom SVG (default: 0 0 24 24) */
   svgViewBox?: string;
@@ -74,123 +86,151 @@ const getSemanticColor = (
 };
 
 /**
- * Theme-aware icon component
- *
- * @example
- * <AtomicIcon name="heart-outline" size="md" color="primary" />
- * <AtomicIcon name="star" customSize={32} customColor="#FFD700" />
- * <AtomicIcon name="settings" size="lg" withBackground />
+ * Agnostic icon component - requires iconRenderer in DesignSystemProvider
  */
-export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(({
-  name,
-  size = "md",
-  customSize,
-  color,
-  customColor,
-  withBackground = false,
-  backgroundColor,
-  svgPath,
-  svgViewBox = "0 0 24 24",
-  accessibilityLabel,
-  testID,
-  style,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  // Calculate size
-  const baseSize = customSize ?? size;
-  const iconSizesMap = tokens.iconSizes as Record<string, number>;
-  const sizeInPixels: number = typeof baseSize === 'number'
-    ? baseSize * tokens.spacingMultiplier
-    : iconSizesMap[baseSize] ?? iconSizesMap['md'] ?? 24;
-
-  // Calculate color
-  const iconColor = customColor
-    ? customColor
-    : color
-      ? getSemanticColor(color, tokens)
-      : tokens.colors.textPrimary;
-
-  // Validate icon - use fallback and log warning in DEV if invalid
-  const isInvalidIcon = name && !(name in Ionicons.glyphMap);
-  const iconName = name && !isInvalidIcon ? name : FALLBACK_ICON;
-
-  if (__DEV__ && isInvalidIcon) {
-    console.warn(`[DesignSystem] Invalid icon name: "${name}". Falling back to "${FALLBACK_ICON}"`);
-  }
-
-  const iconProps = {
-    testID,
+export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(
+  ({
+    name,
+    size = "md",
+    customSize,
+    color,
+    customColor,
+    withBackground = false,
+    backgroundColor,
+    svgPath,
+    svgViewBox = "0 0 24 24",
     accessibilityLabel,
-    style: [
-      !svgPath && {
-        padding: 4, // Prevent font truncation
-        includeFontPadding: false, // Android specific
-      },
-      style,
-    ] as StyleProp<ViewStyle>,
-  };
-
-  if (svgPath) {
-    return (
-      <Svg
-        viewBox={svgViewBox}
-        width={sizeInPixels}
-        height={sizeInPixels}
-        key="custom-svg-icon"
-        {...iconProps}
-      >
-        <Path
-          d={svgPath}
-          fill={iconColor}
-        />
-      </Svg>
-    );
-  }
-
-  const iconElement = (
-    <Ionicons
-      name={iconName as keyof typeof Ionicons.glyphMap}
-      size={sizeInPixels}
-      color={iconColor}
-      {...iconProps}
-    />
-  );
-
-  if (withBackground) {
-    const bgColor = backgroundColor || tokens.colors.surfaceVariant;
-    const containerSize = sizeInPixels + 16;
-
-    return (
-      <View
-        style={[
-          styles.backgroundContainer,
-          {
-            width: containerSize,
-            height: containerSize,
-            borderRadius: containerSize / 2,
-            backgroundColor: bgColor,
-          },
+    testID,
+    style,
+  }) => {
+    const tokens = useAppDesignTokens();
+    const iconRenderer = useIconRenderer();
+
+    // Calculate size
+    const baseSize = customSize ?? size;
+    const iconSizesMap = tokens.iconSizes as Record<string, number>;
+    const sizeInPixels: number =
+      typeof baseSize === "number"
+        ? baseSize * tokens.spacingMultiplier
+        : iconSizesMap[baseSize] ?? iconSizesMap["md"] ?? 24;
+
+    // Calculate color
+    const iconColor = customColor
+      ? customColor
+      : color
+        ? getSemanticColor(color, tokens)
+        : tokens.colors.textPrimary;
+
+    // SVG path rendering (built-in, no external dependency)
+    if (svgPath) {
+      const svgElement = (
+        <Svg
+          viewBox={svgViewBox}
+          width={sizeInPixels}
+          height={sizeInPixels}
+          key="custom-svg-icon"
+          testID={testID}
+          accessibilityLabel={accessibilityLabel}
+        >
+          <Path d={svgPath} fill={iconColor} />
+        </Svg>
+      );
+
+      if (withBackground) {
+        return renderWithBackground(
+          svgElement,
+          sizeInPixels,
+          backgroundColor || tokens.colors.surfaceVariant,
           style,
-        ]}
-        testID={testID}
-        accessibilityLabel={accessibilityLabel}
-      >
-        {iconElement}
-      </View>
-    );
+          testID,
+          accessibilityLabel
+        );
+      }
+
+      return svgElement;
+    }
+
+    // No icon renderer provided - warn in dev and render nothing
+    if (!iconRenderer) {
+      if (__DEV__) {
+        console.warn(
+          "[DesignSystem] AtomicIcon requires an iconRenderer in DesignSystemProvider.\n" +
+            "Example:\n" +
+            "<DesignSystemProvider\n" +
+            '  iconRenderer={({ name, size, color }) => (\n' +
+            '    <YourIconLibrary name={name} size={size} color={color} />\n' +
+            "  )}\n" +
+            ">"
+        );
+      }
+      return null;
+    }
+
+    // Build render props
+    const renderProps: IconRenderProps = {
+      name: name || "",
+      size: sizeInPixels,
+      color: iconColor,
+      style: style as StyleProp<ViewStyle>,
+      testID,
+      accessibilityLabel,
+    };
+
+    const iconElement = iconRenderer(renderProps);
+
+    if (withBackground) {
+      return renderWithBackground(
+        iconElement,
+        sizeInPixels,
+        backgroundColor || tokens.colors.surfaceVariant,
+        style,
+        testID,
+        accessibilityLabel
+      );
+    }
+
+    return <>{iconElement}</>;
   }
-
-  return iconElement;
-});
+);
 
 AtomicIcon.displayName = "AtomicIcon";
 
+/**
+ * Helper to render icon with circular background
+ */
+function renderWithBackground(
+  iconElement: React.ReactNode,
+  sizeInPixels: number,
+  bgColor: string,
+  style: StyleProp<ViewStyle> | undefined,
+  testID: string | undefined,
+  accessibilityLabel: string | undefined
+): React.ReactElement {
+  const containerSize = sizeInPixels + 16;
+
+  return (
+    <View
+      style={[
+        styles.backgroundContainer,
+        {
+          width: containerSize,
+          height: containerSize,
+          borderRadius: containerSize / 2,
+          backgroundColor: bgColor,
+        },
+        style,
+      ]}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+    >
+      {iconElement}
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   backgroundContainer: {
     justifyContent: "center",
     alignItems: "center",
   },
 });
-
-

package/src/atoms/AtomicIcon.types.ts

@@ -1,26 +1,18 @@
 /**
  * Icon Type Definitions
- * Centralized icon types for @expo/vector-icons Ionicons
+ * Agnostic icon types - no dependency on any icon library
  */
 
-import type { Ionicons } from "@expo/vector-icons";
-
 /**
- * All available Ionicons names (type-safe)
+ * Icon name - just a string, interpreted by app's icon renderer
  */
-export type IoniconsName = keyof typeof Ionicons.glyphMap;
-
-/**
- * Icon name - either Ionicons or custom string
- */
-export type IconName = IoniconsName | string;
+export type IconName = string;
 
 /**
  * Semantic icon size presets
  */
 export type IconSizePreset = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 
-
 /**
  * Icon size - preset name or custom number in pixels
  */
@@ -50,25 +42,25 @@ export type IconColor =
  * Icon size mapping to pixels
  */
 export const ICON_SIZES: Record<IconSizePreset, number> = {
-    xs: 12,
-    sm: 16,
-    md: 20,
-    lg: 24,
-    xl: 32,
-    xxl: 48,
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
 } as const;
 
 /**
  * Get icon size in pixels
  */
 export function getIconSize(size: IconSize): number {
-    if (typeof size === "number") return size;
-    return ICON_SIZES[size];
+  if (typeof size === "number") return size;
+  return ICON_SIZES[size];
 }
 
 /**
  * Check if size is a preset
  */
 export function isIconSizePreset(size: IconSize): size is IconSizePreset {
-    return typeof size === "string" && size in ICON_SIZES;
+  return typeof size === "string" && size in ICON_SIZES;
 }

package/src/atoms/AtomicInput.tsx

@@ -14,7 +14,7 @@ import { InputHelper } from './input/components/InputHelper';
  *
  * Features:
  * - Pure React Native implementation (no Paper dependency)
- * - Ionicons for password toggle and custom icons
+ * - Icon support via AtomicIcon (app provides renderer)
  * - Outlined/filled/flat variants
  * - Error, success, disabled states
  * - Character counter

package/src/atoms/IconRegistry.tsx

@@ -0,0 +1,102 @@
+/**
+ * IconRegistry - Customizable Icon Rendering
+ *
+ * Allows apps to inject their own icon renderer instead of using
+ * the default Ionicons. This enables design system adoption without
+ * forcing a specific icon library.
+ *
+ * @example
+ * // App provides custom renderer
+ * import { MaterialIcons } from '@expo/vector-icons';
+ *
+ * const myRenderer = ({ name, size, color }) => (
+ *   <MaterialIcons name={name} size={size} color={color} />
+ * );
+ *
+ * <DesignSystemProvider iconRenderer={myRenderer}>
+ *   <App />
+ * </DesignSystemProvider>
+ */
+
+import React, { createContext, useContext, ReactNode } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+
+/**
+ * Props passed to the icon renderer function
+ * These are generic and not tied to any specific icon library
+ */
+export interface IconRenderProps {
+  /** Icon name - app interprets this based on their icon library */
+  name: string;
+  /** Size in pixels */
+  size: number;
+  /** Color (hex, rgba, named color, etc.) */
+  color: string;
+  /** Optional style */
+  style?: StyleProp<ViewStyle>;
+  /** Test ID for testing */
+  testID?: string;
+  /** Accessibility label */
+  accessibilityLabel?: string;
+}
+
+/**
+ * Icon renderer function type
+ * Apps provide this function to render icons with their preferred library
+ */
+export type IconRenderer = (props: IconRenderProps) => ReactNode;
+
+/**
+ * Internal registry store
+ */
+interface IconRegistryValue {
+  renderIcon: IconRenderer;
+}
+
+const IconRegistryStore = createContext<IconRegistryValue | null>(null);
+
+/**
+ * Icon provider props
+ */
+interface IconProviderProps {
+  /** Icon renderer function */
+  renderIcon: IconRenderer;
+  /** Children */
+  children: ReactNode;
+}
+
+/**
+ * IconProvider - Provides custom icon renderer to the component tree
+ *
+ * @example
+ * <IconProvider renderIcon={myCustomRenderer}>
+ *   <App />
+ * </IconProvider>
+ */
+export const IconProvider: React.FC<IconProviderProps> = ({
+  renderIcon,
+  children,
+}) => {
+  return (
+    <IconRegistryStore.Provider value={{ renderIcon }}>
+      {children}
+    </IconRegistryStore.Provider>
+  );
+};
+
+/**
+ * Hook to access the icon renderer
+ * Returns null if no custom renderer is provided (fallback to Ionicons)
+ */
+export const useIconRenderer = (): IconRenderer | null => {
+  const registry = useContext(IconRegistryStore);
+  return registry?.renderIcon ?? null;
+};
+
+/**
+ * Hook to check if a custom icon renderer is available
+ */
+export const useHasCustomIconRenderer = (): boolean => {
+  const registry = useContext(IconRegistryStore);
+  return registry !== null;
+};

package/src/atoms/index.ts

@@ -40,8 +40,17 @@ export {
     type IconSize,
     type IconColor,
     type IconName,
+    type IconRenderProps,
 } from './AtomicIcon';
 
+// Icon Registry (for custom icon renderers)
+export {
+    IconProvider,
+    useIconRenderer,
+    useHasCustomIconRenderer,
+    type IconRenderer,
+} from './IconRegistry';
+
 
 // Avatar
 export { AtomicAvatar, type AtomicAvatarProps } from './AtomicAvatar';

package/src/exception/presentation/components/ExceptionErrorState.tsx

@@ -16,7 +16,7 @@ import {
 } from "../../../theme";
 
 export interface ExceptionErrorStateProps {
-  /** Icon name from Ionicons */
+  /** Icon name (interpreted by app's icon renderer) */
   icon?: string;
   /** Error title */
   title: string;

package/src/theme/index.ts

@@ -77,6 +77,9 @@ export { useCommonStyles } from './hooks/useCommonStyles';
 
 export { DesignSystemProvider } from './infrastructure/providers/DesignSystemProvider';
 
+// Re-export icon types for convenience
+export type { IconRenderer, IconRenderProps } from '../atoms/IconRegistry';
+
 // =============================================================================
 // THEME OBJECTS
 // =============================================================================

package/src/theme/infrastructure/providers/DesignSystemProvider.tsx

@@ -8,6 +8,7 @@ import { useDesignSystemTheme } from '../globalThemeStore';
 import type { CustomThemeColors } from '../../core/CustomColors';
 import { SplashScreen } from '../../../molecules/splash';
 import type { SplashScreenProps } from '../../../molecules/splash/types';
+import { IconProvider, type IconRenderer } from '../../../atoms/IconRegistry';
 
 
 interface DesignSystemProviderProps {
@@ -16,7 +17,7 @@ interface DesignSystemProviderProps {
   /** Custom theme colors to override defaults */
   customColors?: CustomThemeColors;
   /** Custom fonts to load (name -> source map) */
-  fonts?: Record<string, any>; 
+  fonts?: Record<string, any>;
   /** Show loading indicator while initializing (default: true) */
   showLoadingIndicator?: boolean;
   /** Splash screen configuration (used when showLoadingIndicator is true) */
@@ -27,6 +28,15 @@ interface DesignSystemProviderProps {
   onInitialized?: () => void;
   /** Callback when initialization fails */
   onError?: (error: unknown) => void;
+  /**
+   * Custom icon renderer function
+   * Allows apps to use their own icon library instead of Ionicons
+   * @example
+   * iconRenderer={({ name, size, color }) => (
+   *   <MaterialIcons name={name} size={size} color={color} />
+   * )}
+   */
+  iconRenderer?: IconRenderer;
 }
 
 /**
@@ -42,6 +52,7 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   loadingComponent,
   onInitialized,
   onError,
+  iconRenderer,
 }: DesignSystemProviderProps) => {
   const [isInitialized, setIsInitialized] = useState(false);
   
@@ -104,10 +115,17 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
     content = children;
   }
 
+  // Wrap with IconProvider if custom renderer provided
+  const wrappedContent = iconRenderer ? (
+    <IconProvider renderIcon={iconRenderer}>{content}</IconProvider>
+  ) : (
+    content
+  );
+
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-        {content}
+        {wrappedContent}
       </SafeAreaProvider>
     </GestureHandlerRootView>
   );