JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<span class="IconContainer">
    <span class="Icon Icon--search"></span>
</span>

CSS

.IconContainer {
    background: white;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    display: inline-block;
    padding: 6px;
}

.Icon {
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    background-size: cover;
    vertical-align: top;
}

.Icon--search { background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%22178%22%20viewBox%3D%220%200%2064%20178%22%3E%3Cpath%20fill%3D%22%23989898%22%20d%3D%22M25.066%2049.066C11.2%2049.066%200%2038.134%200%2024.533%200%2010.933%2011.2%200%2025.066%200c13.868%200%2025.067%2010.934%2025.067%2024.533%200%2013.6-11.2%2024.533-25.067%2024.533zm0-43.2c-10.4%200-18.933%208.268-18.933%2018.4%200%2010.134%208.533%2018.4%2018.933%2018.4S44%2034.398%2044%2024.266s-8.268-18.4-18.934-18.4zM64%2055.2L54.667%2064%2035.2%2044.533l9.333-8.8L64%2055.2z%22%2F%3E%3Cpath%20fill%3D%22%23666766%22%20d%3D%22M25.066%20163.066C11.2%20163.066%200%20152.134%200%20138.533%200%20124.933%2011.2%20114%2025.066%20114c13.868%200%2025.067%2010.934%2025.067%2024.533%200%2013.6-11.2%2024.533-25.067%2024.533zm0-43.2c-10.4%200-18.933%208.268-18.933%2018.4%200%2010.134%208.533%2018.4%2018.933%2018.4S44%20148.397%2044%20138.265c0-10.132-8.268-18.4-18.934-18.4zM64%20169.2l-9.333%208.8L35.2%20158.533l9.333-8.8L64%20169.2z%22%2F%3E%3C%2Fsvg%3E'); }

.IconContainer:hover .Icon--search {
    background-position: 0 100%;
}