Search Link
A niffty little link that looks like the search button on brown.edu sites - good for headers to link to those pages.
Rendered Component
HTML
<a href="https://brown.edu" aria-label="navigate to search" class="search-link">
<svg viewBox="0 0 15 15" width="16" fill="white">
<title>search</title>
<path d="M5.623 0A5.626 5.626 0 00-.002 5.625a5.626 5.626 0 005.625 5.625 5.507 5.507 0 003.003-.872l4.233 4.256c.25.241.58.366.887.366a1.251 1.251 0 00.886-2.139l-4.255-4.233c.556-.864.871-1.89.871-3.003A5.626 5.626 0 005.623 0zm0 9.375a3.757 3.757 0 01-3.75-3.75 3.757 3.757 0 013.75-3.75 3.757 3.757 0 013.75 3.75 3.757 3.757 0 01-3.75 3.75z" fill-rule="evenodd"></path>
</svg>
</a>
CSS
.search-link {
background-color: #c00404;
width: 40px;
height: 40px;
border-radius: 50%;
opacity: 1;
cursor: pointer;
border: 1px solid #c00404;
display: flex;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
margin: 0;
}
.search-link:hover {
opacity: 0.8;
}