How to Use the Icon Component from @/components/ui

[dirkcremers]

Hi there,

I tried using the Button component with an icon, but I’m running into an issue. It looks like I need to register or import the Icon component, but I can’t seem to find it.

Here’s the example I’m referring to:

import { Button } from '@/components/ui/button';
import { Icon } from '@/components/ui/icon';
import { Text } from '@/components/ui/text';
import { Mail } from 'lucide-react-native';
 
export function ButtonWithIconPreview() {
  return (
    <Button>
      <Icon as={Mail} className="text-primary-foreground" />
      <Text>Login with Email</Text>
    </Button>
  );
}

My question:

• How can I use the Icon component from @/components/ui?
• Is it part of React Native Reanimated (RNR), or do I need to set it up differently?
• If it’s not included, what’s the recommended way to achieve the same effect?

Thanks!

[mrzachnugent]

Hey @dirkcremers, thanks for bringing this up. You can find the info here: https://reactnativereusables.com/docs/changelog#august-2025-new-icon-component

When a component depends on it like the accordion.tsx, and you use the CLI to add that component, the icon component is added automatically. When adding manually, the instructions show how to add the icon component.

I'll add the icon component to the list of components to clear this up.

[dirkcremers]

@mrzachnugent Thanks for clarifying! This worked like a charm! thanks