Icon

The Icon component is a flexible wrapper around Lucide icons, providing consistent styling and extended functionality such as bordered and contained variants, interactive behaviors, and navigation links.

Features

• Lucide Icons Integration: Access to the complete set of Lucide icons
• Multiple Variants: Plain, bordered, and contained styling options
• Flexible Sizing: Predefined sizes or custom numerical values
• Interactive: Optional press handlers and link navigation
• Customizable: Control for color, stroke width, and fill properties
• Accessibility: Support for disabled states
• Dark Mode Support: Automatic light/dark mode styles

Import

import Icon, { IconName } from '@/components/Icon';

Props

Core Props

Styling Props

Sizes

The iconSize prop maps to the following dimensions:

Usage Examples

Basic Icon

<Icon name="home" />

Different Variants

<Icon name="settings" variant="plain" />
<Icon name="settings" variant="bordered" />
<Icon name="settings" variant="contained" />

Custom Sizes

{/* Using predefined sizes */}
<Icon name="user" iconSize="xs" />
<Icon name="user" iconSize="m" />
<Icon name="user" iconSize="xxl" />
 
{/* Using custom numeric size */}
<Icon name="bell" size={36} />

Interactive Icon

<Icon 
  name="heart" 
  onPress={() => console.log('Liked!')} 
  color="red" 
/>

Navigation Icon

<Icon 
  name="arrow-right" 
  href="/next-page" 
  variant="contained" 
/>

Customized Icon

<Icon 
  name="star" 
  color="#FFD700" 
  strokeWidth={1.5} 
  fill="#FFD700" 
  className="shadow-sm" 
/>

Disabled State

<Icon 
  name="trash" 
  onPress={() => console.log('Delete')} 
  disabled={isDisabled} 
  variant="contained" 
/>

Best Practices

Consistent Sizing

Choose a consistent approach to sizing icons throughout your application:

// Example of consistent icon sizing in a header
<View className="flex-row items-center">
  <Icon name="menu" iconSize="m" />
  <Text className="text-xl font-bold mx-4">Dashboard</Text>
  <Icon name="bell" iconSize="m" />
  <Icon name="user" iconSize="m" />
</View>

Semantic Color Usage

Use colors that reflect the icon's purpose:

<Icon name="check-circle" color="#4CAF50" /> {/* Success */}
<Icon name="alert-circle" color="#F44336" /> {/* Error */}
<Icon name="info" color="#2196F3" /> {/* Information */}
<Icon name="alert-triangle" color="#FF9800" /> {/* Warning */}

Appropriate Variants

Choose variants that match the context:

• Use plain for inline icons or when space is limited
• Use bordered to add subtle emphasis or for toggle controls
• Use contained for important actions or primary navigation

Implementation Details

The Icon component uses React Native's View and Pressable components for rendering. When the href prop is provided, it wraps the icon in an Expo Router Link component for navigation.

The component automatically handles theme colors and applies the correct styles based on the active theme. It supports both light and dark mode through the useThemeColors hook.

Notes

• The component imports Lucide icons from lucide-react-native
• When both size and iconSize are provided, iconSize takes precedence
• Container sizes are only applied when using variants other than plain
• The IconName type represents all available Lucide icons, excluding utility properties
• When using the href prop, the component becomes a navigation link using Expo Router