All CSS Search Icon

Do you want your search icon to load super fast?
Here is how you make an all CSS version of the search icon.

We all know CSS can be very powerful. We all use it to style our websites. But it can do much more.
As this loads faster than any resource, we’ve even implemented it in our own website as you can see in our searchbar.

Here is the code on how you make a search icon with a single div and CSS.

First we made a circle of the div with a border.
Then we used the :before to make the handle. It’s basicly a rectangle with different border radius.
And as last we styled an <i></i> tag inside the div.

See the Pen Search Icon CSS by Ben Aerens (@rundown) on CodePen.0

498 Views