# How to use Heroicons in your React app
[Heroicons](https://heroicons.com/) are a great resource, this is how to use them in your React app.
## Choose an Icon any Icon
First lets grab an icon from the [Heroicons](https://heroicons.com/) website. Simply search for an icon and click the "Copy JSX" button.
This will copy the icon to your clipboard ready to paste into your React project.
```
```
## Create the React component
We're using [Create React App](https://create-react-app.dev/) which automatically recognises the JSX SVG component we copied from the [Heroicons](https://heroicons.com/) website.
Create a new component file called `Icons.tsx` that we'll use to hold all our icons. Inside this file create a new component with the same name as the icon from the [Heroicons](https://heroicons.com/).
Keeping the same name helps if you need to go back to the site and update the icon version later.
*filename: Icons.tsx*
```
import React from 'react';
export const IconFire = () => (
);
```
## Styling with Tailwind CSS
We need to add a bit of styling to the SVG to make it render correctly. Here we're using [Tailwind CSS](https://tailwindcss.com/) to set the width of the icon.
*filename: Icons.tsx*
```