Introduction
Components
- Accordion
- Action Sheet
- Alert
- Audio Player
- Audio Recorder
- Audio Waveform
- Avatar
- AvoidKeyboard
- Badge
- BottomSheet
- Button
- Camera
- Camera Preview
- Card
- Carousel
- Checkbox
- Collapsible
- Color Picker
- Combobox
- Date Picker
- File Picker
- Gallery
- Hello Wave
- Icon
- Image
- Input
- Input OTP
- Link
- MediaPicker
- Mode Toggle
- Onboarding
- ParallaxScrollView
- Picker
- Popover
- Progress
- Radio
- ScrollView
- SearchBar
- Separator
- Share
- Sheet
- Skeleton
- Spinner
- Switch
- Table
- Tabs
- Text
- Toast
- Toggle
- Video
- View
Charts
Installation
pnpm dlx bna-ui add icon
Usage
import { Icon } from '@/components/ui/icon';
import { Heart, Star, Home } from 'lucide-react-native';<Icon name={Heart} size={24} />
<Icon name={Star} color="#FFD700" />
<Icon name={Home} lightColor="#000" darkColor="#fff" />Examples
Default
Sizes
Colors
Stroke Weights
Interactive Icons
Icon Grid
Themed Icons
API Reference
Icon
The main icon component that renders Lucide React Native icons with theming support.
| Prop | Type | Default | Description |
|---|---|---|---|
name | React.ComponentType<LucideProps> | - | The Lucide icon component to render. |
size | number | 24 | The size of the icon in pixels. |
color | string | - | Custom color for the icon. |
lightColor | string | - | Color to use in light theme. |
darkColor | string | - | Color to use in dark theme. |
strokeWidth | number | 1.8 | The stroke width of the icon. |
...rest | LucideProps | - | Additional props passed to the Lucide icon component. |
LucideProps
The Icon component accepts all props from Lucide React Native icons:
| Prop | Type | Default | Description |
|---|---|---|---|
strokeLinecap | string | round | The line cap style for strokes. |
strokeLinejoin | string | - | The line join style for strokes. |
fill | string | - | Fill color for the icon. |
fillOpacity | number | - | Opacity of the fill color. |
strokeOpacity | number | - | Opacity of the stroke color. |
Accessibility
The Icon component is built with accessibility in mind:
- Icons are decorative by default and hidden from screen readers
- When icons convey important information, wrap them with accessible text
- Proper color contrast for themed icons
- Supports dynamic text sizing through size prop
Common Icon Patterns
With Labels
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
<Icon name={Heart} size={16} />
<Text>Favorites</Text>
</View>;As Buttons
import { Pressable } from 'react-native';
<Pressable onPress={handlePress}>
<Icon name={Settings} size={24} />
</Pressable>;Navigation Icons
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
<Icon name={Home} />
<Icon name={Search} />
<Icon name={Bell} />
<Icon name={User} />
</View>