How can I change a PNG search icon color?

sidramos · March 17, 2022

Site URL: https://www.firebellymarketing.com/blog

Hi I'm trying to change the png search image color from black to white. I tried the other answers but it inverts the whole search bar (including font colors). I only want to change the search icon. How can I do that? Thanks in advance.

tuanphan · March 19, 2022

First, download this icon & change it to white color with Photoshop, AI,...

https://static1.squarespace.com/universal/images-v6/icons/icon-searchqueries-20-dark.png

Next, upload new icon to your site

Next, add this to Design > Custom CSS

.sqs-search-ui-button-wrapper.color-dark .search-input {
    background-image: url(https://cdn.pixabay.com/photo/2022/03/06/05/30/clouds-7050884__480.jpg) !important;
}

Replace pixabay image with new icon url

sidramos · March 21, 2022

Thank you so much @tuanphan!! It worked!

How can I change a PNG search icon color?

Recommended Posts

sidramos

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

Posted Images

tuanphan

Link to comment

sidramos

Link to comment

Create an account or sign in to comment

News

tuanphan

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources