search.svg

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="42px" height="40px" viewBox="0 0 42 40" enable-background="new 0 0 42 40" xml:space="preserve">
<path class="search-bg" d="M17.422,23.585c-3.96,0-7.17-3.21-7.17-7.17c0-3.96,3.21-7.17,7.17-7.17c3.96,0,7.17,3.21,7.17,7.17
	C24.592,20.375,21.382,23.585,17.422,23.585z M34.458,30.066l-6.794-5.778c-0.702-0.632-1.453-0.922-2.06-0.894
	c1.604-1.879,2.572-4.315,2.572-6.979c0-5.94-4.815-10.755-10.755-10.755c-5.94,0-10.755,4.815-10.755,10.755
	c0,5.94,4.815,10.755,10.755,10.755c2.663,0,5.1-0.969,6.979-2.572c-0.028,0.607,0.262,1.358,0.894,2.06l5.778,6.793
	c0.989,1.099,2.605,1.192,3.591,0.206C35.65,32.671,35.557,31.055,34.458,30.066z"/>
</svg>

searchform.php

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
	<label>
	    <span class="screen-reader-text">Search for:</span>
	    <input type="search" class="search-field" placeholder="Search" value="" name="s" title="Search for:" />
	</label>
	<input type="submit" class="search-submit" value="Search" />
</form>

style.less

.search-container {
	clear:left;
	float:right;
	position:relative;
	input[type="search"] {
		width:auto;
		.margin(0 auto);
		border:1px solid #c08e40;
		border-radius: 5px;
		.padding(0 0 0 10px);
		font-weight: normal;
		.line-height(42px);
		.height(42px);
		.font-size(18px);
	}
	input[type="submit"] {
		position:absolute;
		.margin(auto);
		.width(42px);
		.padding(0);
		//.line-height(1.5);
		.line-height(40px);
		.height(40px);
		.font-size(18px);
		.top(1px);
		.right(1px);
		border-radius: 4px;
		background-color:#fff;
		color:#fff;
		border:none;
		background-image:url(search.svg);
		background-repeat:no-repeat;
		background-position:center;
		cursor:pointer;
		text-indent:999em;
	}
	input[type="submit"]:hover {
		background-color:#c08e40;
	}
}