Hello,
You don’t need to add custom css to svg if you want to appear it before title because we put it in the h2 tags so it will use h2 styles. But you have to modify the search title section. If I am correct this screenshot you share above is from your theme DarkPixlz’s Modern Theme?
I checked that theme and I think the problem is you use huge paddings and font-size to align title to center and there is no enough space to the search icon.
.search-container .search-page-heading {
padding: 2em 3.8em;
font-size: 5em;
}
My suggestion:
I use margins instead of padding but not needed on sides - because .search-header already have 10% padding on sides - to have enough space to the icon and use smaller font-size especially on mobile. To fix the vertical align you can add 1em margin to top as your .main-outlet has a 3em padding on top.
Probably better to see if I change the background.
.search-container .search-page-heading {
margin: 1em 0 2em 0;
font-size: 5em; // use smaller font size on smaller screen
text-align: center;
}