Search icon as placeholder css

Hi Gutenberg

In TT5 I have added search block to header. Button none border none, so that the search field shows as just placeholder txt above main menu. Instead of placeholder txt i want an icon to show as placeholder and no txt and make it float right to align with menu below.

For the button a search icon can be applied. Is it possible to get this icon (svg i believe) to show in the header search field as placeholder?

I have added a css clacc to this block and started some not working css and It does take effect. I just need to get it right.

/******** Global Search - Header Search Style ********/
.main-header-search-behaviour {
	width: 100%;
	box-sizing: border-box;
	background-image: url('https://bindesboell.com/wp-content/uploads/sites/5/2025/03/searchicon.webp');
	background-position: 10px 10px; 
	background-repeat: no-repeat;
	text-align: left;
	}

Again I prefer it to add the Guten icon, but here I tried uploading an image and that does not work.