@umituz/react-native-design-system 2.11.2 → 2.11.3

package/src/molecules/SearchBar/SearchHistory.tsx

@@ -5,7 +5,7 @@ import {
     StyleSheet,
 } from 'react-native';
 import { AtomicText } from '../../atoms/AtomicText';
-import { AtomicIcon } from '../../atoms/AtomicIcon';
+import { AtomicIcon, useIconName } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import type { SearchHistoryProps } from './types';
 
@@ -20,6 +20,8 @@ export const SearchHistory: React.FC<SearchHistoryProps> = ({
     clearLabel = 'Clear All',
 }) => {
     const tokens = useAppDesignTokens();
+    const clockIcon = useIconName('clock');
+    const closeIcon = useIconName('close');
 
     if (!history || history.length === 0) {
         return null;
@@ -58,7 +60,7 @@ export const SearchHistory: React.FC<SearchHistoryProps> = ({
                 >
                     <View style={styles.itemLeft}>
                         <AtomicIcon
-                            name="time-outline"
+                            name={clockIcon}
                             size="sm"
                             customColor={tokens.colors.textSecondary}
                         />
@@ -80,7 +82,7 @@ export const SearchHistory: React.FC<SearchHistoryProps> = ({
                         hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
                     >
                         <AtomicIcon
-                            name="close"
+                            name={closeIcon}
                             size="sm"
                             customColor={tokens.colors.textSecondary}
                         />

package/src/molecules/action-footer/ActionFooter.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { AtomicText } from '../../atoms/AtomicText';
-import { AtomicIcon } from '../../atoms/AtomicIcon';
+import { AtomicIcon } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import type { ActionFooterProps } from './types';
 

package/src/molecules/alerts/AlertBanner.tsx

@@ -9,7 +9,7 @@
 import React, { useEffect } from 'react';
 import { StyleSheet, View, Pressable } from 'react-native';
 import { useSafeAreaInsets } from '../../safe-area';
-import { AtomicText, AtomicIcon } from '../../atoms';
+import { AtomicText, AtomicIcon, useIconName } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import { Alert, AlertType, AlertPosition } from './AlertTypes';
 import { useAlertStore } from './AlertStore';
@@ -24,6 +24,7 @@ export function AlertBanner({ alert }: AlertBannerProps) {
     const dismissAlert = useAlertStore((state: { dismissAlert: (id: string) => void }) => state.dismissAlert);
     const insets = useSafeAreaInsets();
     const tokens = useAppDesignTokens();
+    const closeIcon = useIconName('close');
 
     const handleDismiss = () => {
         dismissAlert(alert.id);
@@ -111,7 +112,7 @@ export function AlertBanner({ alert }: AlertBannerProps) {
                             style={[styles.closeButton, { marginLeft: tokens.spacing.sm }]}
                             hitSlop={8}
                         >
-                            <AtomicIcon name="close" customSize={20} customColor={textColor} />
+                            <AtomicIcon name={closeIcon} customSize={20} customColor={textColor} />
                         </Pressable>
                     )}
                 </View>

package/src/molecules/alerts/AlertToast.tsx

@@ -7,7 +7,7 @@
 
 import React, { useEffect } from 'react';
 import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
-import { AtomicText, AtomicIcon } from '../../atoms';
+import { AtomicText, AtomicIcon, useIconName } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import { Alert, AlertType } from './AlertTypes';
 import { useAlertStore } from './AlertStore';
@@ -21,6 +21,7 @@ interface AlertToastProps {
 export function AlertToast({ alert }: AlertToastProps) {
     const dismissAlert = useAlertStore((state: { dismissAlert: (id: string) => void }) => state.dismissAlert);
     const tokens = useAppDesignTokens();
+    const closeIcon = useIconName('close');
 
     const dismiss = () => {
         dismissAlert(alert.id);
@@ -126,7 +127,7 @@ export function AlertToast({ alert }: AlertToastProps) {
                             style={[styles.closeButton, { marginLeft: tokens.spacing.sm }]}
                             hitSlop={8}
                         >
-                            <AtomicIcon name="close" customSize={20} customColor={textColor} />
+                            <AtomicIcon name={closeIcon} customSize={20} customColor={textColor} />
                         </Pressable>
                     )}
                 </View>

package/src/molecules/bottom-sheet/components/filter/FilterBottomSheet.tsx

@@ -8,7 +8,7 @@ import React, { forwardRef, useCallback } from 'react';
 import { View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
 import { BottomSheetModal } from '../BottomSheetModal';
 import type { BottomSheetModalRef } from '../../types/BottomSheet';
-import { AtomicText, AtomicIcon, AtomicButton } from '../../../../atoms';
+import { AtomicText, AtomicIcon, AtomicButton, useIconName } from '../../../../atoms';
 import { useAppDesignTokens } from '../../../../theme';
 import type { FilterOption, FilterCategory } from '../../types/Filter';
 import { FilterUtils } from '../../types/Filter';
@@ -33,6 +33,8 @@ export const FilterBottomSheet = forwardRef<BottomSheetModalRef, FilterBottomShe
     defaultId = 'all'
 }, ref) => {
     const tokens = useAppDesignTokens();
+    const checkIcon = useIconName('check');
+    const closeIcon = useIconName('close');
 
     if (__DEV__) {
         console.log('[FilterBottomSheet] Component mounted/rendered', { 
@@ -120,7 +122,7 @@ export const FilterBottomSheet = forwardRef<BottomSheetModalRef, FilterBottomShe
                     </AtomicText>
                 </View>
                 {isSelected && (
-                    <AtomicIcon name="checkmark" size="sm" color="primary" />
+                    <AtomicIcon name={checkIcon} size="sm" color="primary" />
                 )}
             </TouchableOpacity>
         );
@@ -167,7 +169,7 @@ export const FilterBottomSheet = forwardRef<BottomSheetModalRef, FilterBottomShe
                 <View style={styles.header}>
                     <AtomicText type="headlineSmall">{title || 'Filter'}</AtomicText>
                     <TouchableOpacity onPress={() => (ref as any).current?.dismiss()}>
-                        <AtomicIcon name="close" size="md" color="textPrimary" />
+                        <AtomicIcon name={closeIcon} size="md" color="textPrimary" />
                     </TouchableOpacity>
                 </View>
 

package/src/molecules/bottom-sheet/components/filter/FilterSheetComponents/FilterSheetHeader.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { AtomicText, AtomicIcon } from '../../../../../atoms';
+import { AtomicText, AtomicIcon, useIconName } from '../../../../../atoms';
 import type { useAppDesignTokens } from '../../../../../theme';
 
 interface FilterSheetHeaderProps {
@@ -9,14 +9,18 @@ interface FilterSheetHeaderProps {
     tokens: ReturnType<typeof useAppDesignTokens>;
 }
 
-export const FilterSheetHeader = ({ title, onClose, tokens }: FilterSheetHeaderProps) => (
-    <View style={[styles.header, { borderBottomColor: tokens.colors.border, borderBottomWidth: tokens.borders.width.thin }]}>
-        <AtomicText type="headlineMedium" style={styles.title}>{title}</AtomicText>
-        <TouchableOpacity onPress={onClose} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
-            <AtomicIcon name="close" size="md" color="primary" />
-        </TouchableOpacity>
-    </View>
-);
+export const FilterSheetHeader = ({ title, onClose, tokens }: FilterSheetHeaderProps) => {
+    const closeIcon = useIconName('close');
+
+    return (
+        <View style={[styles.header, { borderBottomColor: tokens.colors.border, borderBottomWidth: tokens.borders.width.thin }]}>
+            <AtomicText type="headlineMedium" style={styles.title}>{title}</AtomicText>
+            <TouchableOpacity onPress={onClose} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+                <AtomicIcon name={closeIcon} size="md" color="primary" />
+            </TouchableOpacity>
+        </View>
+    );
+};
 
 const styles = StyleSheet.create({
     header: {

package/src/molecules/bottom-sheet/components/filter/FilterSheetComponents/FilterSheetOption.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { AtomicText, AtomicIcon } from '../../../../../atoms';
+import { AtomicText, AtomicIcon, useIconName } from '../../../../../atoms';
 import type { useAppDesignTokens } from '../../../../../theme';
 import type { FilterOption } from '../../../types/Filter';
 
@@ -11,7 +11,10 @@ interface FilterSheetOptionProps {
     tokens: ReturnType<typeof useAppDesignTokens>;
 }
 
-export const FilterSheetOption = ({ option, isSelected, onPress, tokens }: FilterSheetOptionProps) => (
+export const FilterSheetOption = ({ option, isSelected, onPress, tokens }: FilterSheetOptionProps) => {
+    const checkCircleIcon = useIconName('checkCircle');
+
+    return (
     <TouchableOpacity
         onPress={() => onPress(option.id)}
         style={[
@@ -35,9 +38,10 @@ export const FilterSheetOption = ({ option, isSelected, onPress, tokens }: Filte
                 {option.label}
             </AtomicText>
         </View>
-        {isSelected && <AtomicIcon name="checkmark-circle" size="md" color="primary" />}
+        {isSelected && <AtomicIcon name={checkCircleIcon} size="md" color="primary" />}
     </TouchableOpacity>
-);
+    );
+};
 
 const styles = StyleSheet.create({
     option: {

package/src/molecules/circular-menu/CircularMenuCloseButton.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicIcon } from "../../atoms";
+import { AtomicIcon, useIconName } from "../../atoms";
 import { useAppDesignTokens } from "../../theme";
 import { LAYOUT } from "./constants";
 
@@ -12,6 +12,7 @@ export const CircularMenuCloseButton: React.FC<CircularMenuCloseButtonProps> = (
   onPress,
 }) => {
   const tokens = useAppDesignTokens();
+  const closeIcon = useIconName('close');
 
   return (
     <TouchableOpacity
@@ -31,7 +32,7 @@ export const CircularMenuCloseButton: React.FC<CircularMenuCloseButtonProps> = (
       accessibilityRole="button"
       accessibilityLabel="Close menu"
     >
-      <AtomicIcon name="close" size="md" color="secondary" />
+      <AtomicIcon name={closeIcon} size="md" color="secondary" />
     </TouchableOpacity>
   );
 };

package/src/molecules/countdown/components/Countdown.tsx

@@ -5,7 +5,7 @@ import { useCountdown } from '../hooks/useCountdown';
 import { CountdownHeader } from './CountdownHeader';
 import { TimeUnit } from './TimeUnit';
 import type { CountdownTarget, CountdownDisplayConfig } from '../types/CountdownTypes';
-import type { IconName } from '../../../atoms/AtomicIcon';
+import type { IconName } from '../../../atoms';
 
 export interface CountdownProps {
     target: CountdownTarget;

package/src/molecules/countdown/components/CountdownHeader.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { AtomicText, AtomicIcon } from '../../../atoms';
+import { AtomicText, AtomicIcon, useIconName } from '../../../atoms';
 import { useAppDesignTokens } from '../../../theme';
-import type { IconName } from '../../../atoms/AtomicIcon';
+import type { IconName } from '../../../atoms';
 
 export interface CountdownHeaderProps {
     title: string;
@@ -20,6 +20,7 @@ export const CountdownHeader: React.FC<CountdownHeaderProps> = ({
     onToggle,
 }) => {
     const tokens = useAppDesignTokens();
+    const swapIcon = useIconName('swap');
 
     return (
         <View style={[styles.container, { marginBottom: tokens.spacing.md }]}>
@@ -54,7 +55,7 @@ export const CountdownHeader: React.FC<CountdownHeaderProps> = ({
                     onPress={onToggle}
                 >
                     <AtomicIcon
-                        name="swap-horizontal"
+                        name={swapIcon}
                         size="sm"
                         color="onSurface"
                     />

package/src/molecules/info-grid/InfoGrid.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { AtomicText } from '../../atoms/AtomicText';
-import { AtomicIcon } from '../../atoms/AtomicIcon';
+import { AtomicIcon } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import type { InfoGridProps } from './types';
 

package/src/molecules/navigation/components/NavigationHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { AtomicText } from '../../../atoms';
-import { AtomicIcon } from '../../../atoms';
+import { AtomicIcon, useIconName } from '../../../atoms';
 import { useAppDesignTokens } from '../../../theme';
 import { useSafeAreaInsets } from '../../../safe-area';
 
@@ -18,6 +18,7 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
+  const arrowLeftIcon = useIconName('arrowLeft');
 
   const styles = StyleSheet.create({
     container: {
@@ -51,7 +52,7 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
       {onBackPress && (
         <TouchableOpacity onPress={onBackPress} style={styles.backButton}>
           <AtomicIcon
-            name="arrow-back"
+            name={arrowLeftIcon}
             size="md"
             color="textPrimary"
           />

package/src/molecules/navigation/hooks/useTabConfig.ts

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { View } from "react-native";
 import type { ParamListBase } from "@react-navigation/native";
-import { AtomicIcon } from "../../../atoms/AtomicIcon";
+import { AtomicIcon } from "../../../atoms";
 import { useAppDesignTokens } from "../../../theme";
 import { useResponsive } from "../../../responsive";
 import type { TabNavigatorConfig, TabScreen } from "../types";

package/src/molecules/navigation/types.ts

@@ -4,7 +4,7 @@ import type {
   BottomTabScreenProps,
 } from "@react-navigation/bottom-tabs";
 import type { StackNavigationOptions } from "@react-navigation/stack";
-import type { IconName } from "../../atoms/AtomicIcon";
+import type { IconName } from "../../atoms";
 
 export type NavigationParams = Record<string, unknown>;
 

package/src/molecules/navigation/utils/IconRenderer.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import type { IconRendererProps } from "../types";
-import { AtomicIcon } from "../../../atoms/AtomicIcon";
-import type { IconName } from "../../../atoms/AtomicIcon";
+import { AtomicIcon, type IconName } from "../../../atoms";
 
 type RenderIconFn = (
   iconName: IconName,

package/src/onboarding/presentation/components/OnboardingHeader.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicIcon } from "../../../atoms/AtomicIcon";
+import { AtomicIcon, useIconName } from "../../../atoms";
 import { AtomicText } from "../../../atoms/AtomicText";
 import { useLocalization } from "@umituz/react-native-localization";
 import { useOnboardingProvider } from "../providers/OnboardingProvider";
@@ -26,6 +26,7 @@ export const OnboardingHeader = ({
   const {
     theme: { colors },
   } = useOnboardingProvider();
+  const chevronLeftIcon = useIconName('chevronLeft');
 
   const skipText = skipButtonText || t("onboarding.skip");
 
@@ -46,7 +47,7 @@ export const OnboardingHeader = ({
           activeOpacity={0.7}
           hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
         >
-          <AtomicIcon name="chevron-back" customSize={20} customColor={colors.iconColor} />
+          <AtomicIcon name={chevronLeftIcon} customSize={20} customColor={colors.iconColor} />
         </TouchableOpacity>
       ) : (
         <View style={styles.headerButton} />

package/src/onboarding/presentation/components/OnboardingResetSetting.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicIcon } from "../../../atoms/AtomicIcon";
-import { AtomicText } from "../../../atoms/AtomicText";
+import { AtomicIcon, AtomicText } from "../../../atoms";
 import { useAppDesignTokens } from "../../../theme/hooks/useAppDesignTokens";
 
 export interface OnboardingResetSettingProps {

package/src/onboarding/presentation/components/OnboardingSlide.tsx

@@ -5,7 +5,7 @@
 
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { AtomicIcon } from "../../../atoms/AtomicIcon";
+import { AtomicIcon, useIconName } from "../../../atoms";
 import { AtomicText } from "../../../atoms/AtomicText";
 import type { OnboardingSlide as OnboardingSlideType } from "../../domain/entities/OnboardingSlide";
 import { BaseSlide } from "./BaseSlide";
@@ -23,6 +23,7 @@ export const OnboardingSlide = ({
   const {
     theme: { colors },
   } = useOnboardingProvider();
+  const checkCircleIcon = useIconName('checkCircle');
 
   const shouldShowIcon = slide.icon && !slide.hideIcon;
   const isEmoji = slide.iconType === 'emoji';
@@ -72,7 +73,7 @@ export const OnboardingSlide = ({
               ]}
             >
               <AtomicIcon
-                name="checkmark-circle"
+                name={checkCircleIcon}
                 size="sm"
                 customColor={colors.iconColor}
               />

package/src/onboarding/presentation/components/QuestionSlideHeader.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { AtomicIcon } from "../../../atoms/AtomicIcon";
-import { AtomicText } from "../../../atoms/AtomicText";
+import { AtomicIcon, AtomicText } from "../../../atoms";
 import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
 import { useOnboardingProvider } from "../providers/OnboardingProvider";
 

package/src/onboarding/presentation/components/questions/QuestionOptionItem.tsx

@@ -5,8 +5,7 @@
 
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicIcon } from "../../../../atoms/AtomicIcon";
-import { AtomicText } from "../../../../atoms/AtomicText";
+import { AtomicIcon, AtomicText } from "../../../../atoms";
 import type { QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 import type { OnboardingColors } from "../../types/OnboardingTheme";
 

package/src/onboarding/presentation/components/questions/RatingQuestion.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicIcon } from "../../../../atoms/AtomicIcon";
-import { AtomicText } from "../../../../atoms/AtomicText";
+import { AtomicIcon, AtomicText } from "../../../../atoms";
 import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 

package/src/onboarding/presentation/components/questions/SingleChoiceQuestion.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicIcon } from "../../../../atoms/AtomicIcon";
-import { AtomicText } from "../../../../atoms/AtomicText";
+import { AtomicIcon, AtomicText } from "../../../../atoms";
 import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 

package/src/theme/core/TokenFactory.ts

@@ -5,7 +5,7 @@ import { type DesignTokens, type ResponsiveTypography } from '../types/ThemeType
 
 /**
  * Create complete design tokens for a specific theme mode
- * 
+ *
  * ✅ Responsive by default
  * ✅ SINGLE SOURCE OF TRUTH
  *

package/src/theme/index.ts

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

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

@@ -8,71 +8,29 @@ import { useDesignSystemTheme, type ThemeMode } 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';
+import { useIconStore, type IconRenderer, type IconNames } from '../../../atoms/icon';
 
 
 interface DesignSystemProviderProps {
-  /** App content */
   children: ReactNode;
-  /**
-   * Custom theme colors to override defaults
-   * Apps can override ANY color key from the palette
-   * @example
-   * customColors={{
-   *   primary: '#FF6B6B',
-   *   onPrimary: '#FFFFFF',
-   *   backgroundPrimary: '#FFFFFF',
-   *   textPrimary: '#1A1A1A',
-   * }}
-   */
   customColors?: CustomThemeColors;
-  /**
-   * Initial theme mode for the app
-   * Apps control whether they start in light or dark mode
-   * @default 'light'
-   */
   initialThemeMode?: ThemeMode;
-  /** Custom fonts to load (name -> source map) */
   fonts?: Record<string, any>;
-  /** Show loading indicator while initializing (default: true) */
   showLoadingIndicator?: boolean;
-  /** Splash screen configuration (used when showLoadingIndicator is true) */
   splashConfig?: Pick<SplashScreenProps, 'appName' | 'tagline' | 'icon' | 'colors'>;
-  /** Custom loading component (overrides splash screen) */
   loadingComponent?: ReactNode;
-  /** Callback when initialization completes */
   onInitialized?: () => void;
-  /** Callback when initialization fails */
   onError?: (error: unknown) => void;
-  /**
-   * Custom icon renderer function
-   * Allows apps to use their own icon library
-   * @example
-   * iconRenderer={({ name, size, color }) => (
-   *   <LucideIcons name={name} size={size} color={color} />
-   * )}
-   */
-  iconRenderer?: IconRenderer;
+  /** Icon renderer - REQUIRED */
+  iconRenderer: IconRenderer;
+  /** Icon names mapping - REQUIRED */
+  iconNames: IconNames;
 }
 
-/**
- * DesignSystemProvider
- *
- * Main provider for the design system. Wraps your app and provides:
- * - Theme (colors, spacing, typography)
- * - Custom icon rendering
- * - Safe area handling
- * - Gesture handling
- *
- * ARCHITECTURE (based on Shopify Restyle, React Native Paper, Tamagui):
- * - Apps provide customColors to override default palette
- * - Apps set initialThemeMode to control light/dark mode
- * - All design system components use these values via useAppDesignTokens
- */
 export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   children,
   customColors,
-  initialThemeMode = 'light', // Default to light mode (most common)
+  initialThemeMode = 'light',
   fonts,
   showLoadingIndicator = true,
   splashConfig,
@@ -80,75 +38,54 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   onInitialized,
   onError,
   iconRenderer,
-}: DesignSystemProviderProps) => {
+  iconNames,
+}) => {
   const [isInitialized, setIsInitialized] = useState(false);
-
-  // Load fonts if provided
   const [fontsLoaded, fontError] = fonts ? useFonts(fonts) : [true, null];
 
   const initialize = useThemeStore((state) => state.initialize);
   const setThemeMode = useThemeStore((state) => state.setThemeMode);
   const setCustomColors = useDesignSystemTheme((state) => state.setCustomColors);
   const setGlobalThemeMode = useDesignSystemTheme((state) => state.setThemeMode);
+  const setIconConfig = useIconStore((state) => state.setConfig);
 
   useEffect(() => {
-    // WARN: customColors is required for proper theming
-    if (__DEV__ && !customColors) {
-      console.warn(
-        '[DesignSystem] ⚠️ customColors is REQUIRED!\n' +
-        'Your app must provide theme colors to DesignSystemProvider.\n' +
-        'Example:\n' +
-        '<DesignSystemProvider\n' +
-        '  customColors={{\n' +
-        '    primary: "#FF6B6B",\n' +
-        '    onPrimary: "#FFFFFF",\n' +
-        '    backgroundPrimary: "#FFFFFF",\n' +
-        '    textPrimary: "#1A1A1A",\n' +
-        '  }}\n' +
-        '  initialThemeMode="light"\n' +
-        '>'
-      );
+    // Set icon config (required)
+    if (iconRenderer && iconNames) {
+      setIconConfig(iconNames, iconRenderer);
     }
 
-    // Apply custom colors if provided
     if (customColors) {
       setCustomColors(customColors);
     }
 
-    // Set initial theme mode from app
     setGlobalThemeMode(initialThemeMode);
 
-    // Initialize theme store with the initial theme mode
     initialize()
       .then(async () => {
-        // After initialization, set the theme mode from app config
         await setThemeMode(initialThemeMode);
         setIsInitialized(true);
       })
       .catch((error) => {
-        setIsInitialized(true); // Still render app even on error
+        setIsInitialized(true);
         onError?.(error);
       });
-  }, [initialize, customColors, initialThemeMode, setCustomColors, setGlobalThemeMode, setThemeMode, onError]);
+  }, [initialize, customColors, iconNames, iconRenderer, initialThemeMode, setCustomColors, setGlobalThemeMode, setThemeMode, setIconConfig, onError]);
 
-  // Handle initialization completion when both theme and fonts are ready
   useEffect(() => {
     if (isInitialized && fontsLoaded) {
       onInitialized?.();
     }
   }, [isInitialized, fontsLoaded, onInitialized]);
 
-  // Handle font errors
   useEffect(() => {
     if (fontError) {
       onError?.(fontError);
     }
   }, [fontError, onError]);
 
-  // Determine if we should show loading state
   const isLoading = showLoadingIndicator && (!isInitialized || !fontsLoaded);
 
-  // Determine content to render based on loading state
   let content: ReactNode;
 
   if (isLoading) {
@@ -167,17 +104,10 @@ 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}>
-        {wrappedContent}
+        {content}
       </SafeAreaProvider>
     </GestureHandlerRootView>
   );