Icon
A universal icon wrapper with NativeWind className support for any icon library.
Icon
A wrapper component for SVG icons that enables NativeWind className support via cssInterop. Works with any icon library -- Lucide, Tabler, Phosphor, Hugeicons, and more.
Installation
npx @tapcn/cli add iconOr using shadcn directly:
npx shadcn@latest add https://tapcn.vercel.app/r/icon.jsonSupported Icon Libraries
tapcn works with any React Native icon library. Here are the recommended ones:
| Library | Package (React Native) | Icons | License |
|---|---|---|---|
| Lucide | lucide-react-native | 1,500+ | MIT |
| Tabler | @tabler/icons-react-native | 5,500+ | MIT |
| Phosphor | phosphor-react-native | 9,000+ | MIT |
| Hugeicons | @hugeicons/react-native | 4,600+ free | MIT |
Installing icon libraries
Pick one or more and install:
# Lucide (default, already included)
npx expo install lucide-react-native react-native-svg
# Tabler Icons
npx expo install @tabler/icons-react-native react-native-svg
# Phosphor Icons
npx expo install phosphor-react-native react-native-svg
# Hugeicons
npx expo install @hugeicons/react-nativeUsage
With Lucide (default)
import { Icon } from '~/components/ui/icon';
import { Heart } from 'lucide-react-native';
export function Example() {
return <Icon as={Heart} className="text-red-500" />;
}With Tabler Icons
import { Icon } from '~/components/ui/icon';
import { IconHeart } from '@tabler/icons-react-native';
export function Example() {
return <Icon as={IconHeart} className="text-red-500" />;
}With Phosphor Icons
import { Icon } from '~/components/ui/icon';
import { Heart } from 'phosphor-react-native';
export function Example() {
return <Icon as={Heart} className="text-red-500" />;
}With Hugeicons
import { Icon } from '~/components/ui/icon';
import { FavouriteIcon } from '@hugeicons/react-native';
export function Example() {
return <Icon as={FavouriteIcon} className="text-red-500" />;
}With different sizes
import { Settings } from 'lucide-react-native';
<Icon as={Settings} size={16} className="text-muted-foreground" />
<Icon as={Settings} size={24} className="text-foreground" />
<Icon as={Settings} size={32} className="text-primary" />Inside other components
The Icon component works well inside Button, Badge, and other components:
import { Button } from '~/components/ui/button';
import { Text } from '~/components/ui/text';
import { Icon } from '~/components/ui/icon';
import { ArrowRight } from 'lucide-react-native';
<Button>
<Text>Continue</Text>
<Icon as={ArrowRight} size={16} />
</Button>
<Button size="icon" variant="outline">
<Icon as={Settings} />
</Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | ComponentType | -- | Any icon component (Lucide, Tabler, Phosphor, Hugeicons, etc.) |
size | number | 14 | The icon size in pixels |
className | string | -- | NativeWind classes (e.g., text-primary for color) |
How it works
The Icon component uses cssInterop from NativeWind to map the className prop to the icon's color and size style properties. This means you can use Tailwind color utilities like text-red-500 to color icons, and they will work identically on web and native.
The component accepts any React component via the as prop, so it works with any icon library that follows the standard size/color prop convention.
Dependencies
nativewind-- for cssInterop- Plus your chosen icon library (e.g.,
lucide-react-native,@tabler/icons-react-native, etc.)