Beta

Search Button SVG element, flat

Free

A magnifying glass is centred inside a wide rounded button. It suits a site search field or a searchable product catalogue.

Sign in to download. Free SVGs are free with any account.

searchfindlookupmagnifierbuttonselementflat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/cTZ_PdcfPfJp/amnt.svg" alt="Search Button" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 80" preserveAspectRatio="none" fill="currentColor"><path fill-rule="evenodd" d="M22 5h196a18 18 0 0 1 18 18v34a18 18 0 0 1-18 18H22A18 18 0 0 1 4 57V23A18 18 0 0 1 22 5Zm94 16a15 15 0 1 0 10.6 25.6L138 58a3 3 0 0 0 4.2-4.2l-11.6-11.6A15 15 0 0 0 116 21Zm0 6a9 9 0 1 1 0 18 9 9 0 0 1 0-18Z"/></svg>
CSS background-image
.search-button {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/cTZ_PdcfPfJp/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.search-button {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/cTZ_PdcfPfJp/amnt.svg") center / contain no-repeat;
}
React
import SearchButtonSvg from "./search-button.jsx"; // from the React tab above

<SearchButtonSvg width={48} height={48} />

Made with AMNT

AMNT SVG 1.1 drew this from the words Search Button: Wide rounded button with a magnifying glass centred inside. as part of the pack Website Buttons, Flat. Want one like it? Make your own in the SVG studio.

Rest of Website Buttons, Flat

Whole pack

Similar SVGs

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence