---
title: Hover Interaction
description: This is a component which shows icon based on text hovered by user. By default it has alreay imported Twitter/x, Framer, Figma, Instagram, GitHub, LinkedIn, and it shows Square-Box icon by default it user tries to get other icons without importing. Importing steps are provided below.
author: MEbandhan
---

<ComponentPreview name="icon-hover-interaction--docs" />

## Installation

<Steps>
<Step>Install dependencies</Step>

```bash
npm install framer-motion @radix-ui/react-icons
```

<Step>Run the following command</Step>

It will create a new file `hover-interaction.tsx` inside the `components/animata/icon` directory.

```bash
mkdir -p components/animata/icon && touch components/animata/icon/hover-interaction.tsx
```

<Step>Paste the code</Step>

Open the newly created file and paste the following code:

```jsx file=<rootDir>/animata/icon/hover-interaction.tsx

```

</Steps>

<Step>Use the component with default/non-default interacitons</Step>

defaults are mentioned in the description

**Other than defaults**

1. Go to the [radix-ui icon page](https://www.radix-ui.com/icons)
2. Search for the icon.
3. Import the icon in the copied code. If the icon name is Twitter Logo, the import will be TwitterLogoIcon
4. Add switch case for that logo in **lower case**.

## Credits

Built by [Bandhan Majumder](https://github.com/bandhan-majumder)
