Today we will show you how to add an icon in the react-select dropdown. In the previous articles, we have explained multiple examples with the react-select dropdown.

Demo Application

Steps to add an icon in the react-select

1. Implement the react-select dropdown
2. Customize the label for the dropdown
3. Output

1. Implement the react-select dropdown

Let’s implement the react-select dropdown in the react application. Check out the following article to implement a dropdown.

Implement dropdown in ReactJS

2. Customize the label for the dropdown

Let’s assume that we have a list of items that contain the icon and display text as below.

As an icon we have taken the svg image but you can take any icons such as line icons, font awesome icons, etc.

To customize the label, we will use the getOptionLabel property of the react-select dropdown.

3. Output

Let’s combine all the code together and see how it looks.

Run the application and check the output in the browser.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code