By using the Chakra UI icon library

Approach:

We created the basic app having All Icons from the Chakra UI Icons library and placed it on the component for our understanding. We have also shown how to use a third-party icon library and use them in different components by importing them. The user can also create custom icons using the createIcon() function and Icon component. We have used a few selected icons to learn their usage for implementation, the developer can include other icons as per the need.

React Chakra UI Media and Icons component is tailored for managing media content and displaying icons and images. Chakra UI provides a set of commonly used interface icons you can use in your websites or apps. It helps the user provide a better user experience by identifying functionalities by looking at the media and icons images for hovering and helps the process work faster by just looking at them.

ReactJS Chakra UI provides multiple ways of using media icons as mentioned below.