For every web application, image and icons are major part of application. In react js importing images and icons are little different compared to other libraries and frameworks.

Let’s understand how we can add images and icons inside a react js project.

Adding Images :

Inside App.js component, we are importing a image file or a react js logo file, location is this file should be in SRC folder.

Inside this SRC folder you can create another folders like assets and images but for now we are just placing this logo image file inside SRC folder and importing it into our App component.

Variable name for importing image can be anything, like here logo is the name for image but you can write any name to refer this image.

Inside image tag we are assigning this variable to src attribute.

Output for this code will be :

Adding Icons :

To imports icons in react js project we need to install the react icons first and for that we need to run this command.

After installing this, now you can add any icon from react icons library.

Click on this link to see all the react icons list.

https://react-icons.github.io/react-icons

To add a icon inside our project we need to import the icon library for example.

Inside App.css file add font-Size-200 class and set font-size:200px;

Output for above code is :

So the basic code structure is

and to call icons inside the JSX

You can find hundreds of icons on react icons page.

If you have any question feel free to comment.