Replace search icon with Font Awesome search icon or svg in Squarespace 7.1

Site URL: https://www.riosgarden.me/

Is it possible to replace the existing blurry search icon with the search icon from Font Awesome or svg ?

8 hours ago, georgeotsubo said:

Site URL: https://www.riosgarden.me/

Is it possible to replace the existing blurry search icon with the search icon from Font Awesome or svg ?

You could apply the following codes in Design > Custom Css. 

.sqs-search-ui-button-wrapper.color-dark .search-input {
 background-image: url(https://api.iconify.design/fa/search.svg);
}

You can check the icon

https://api.iconify.design/fa/search.svg

Before:

After:

@HoaLT thank you!!

@HoaLT One other question, how do you hide the icon when it is searching? The spinner is showing on top of the icon

6 hours ago, georgeotsubo said:

@HoaLT One other question, how do you hide the icon when it is searching? The spinner is showing on top of the icon

You can insert one addition config in Design > Css

.sqs-search-ui-button-wrapper.color-dark .search-input:focus {
  background-image: none;
}

@HoaLT Amazing, thank you!