HTML
Use 🔍
for 🔍 and 🔎
for 🔎
CSS (content string)
Use '\1F50D'
for 🔍 and '\1F50E'
for 🔎
As noted in comments, this depends on font and unicode support.
I suggest you stick with using an image or sprite sheet for this purpose to ensure that it's supported.
Update: Fonts
A new method for this is through the use of special font frameworks, which use a combination of web fonts and CSS helper classes. One example is Font Awesome (the example below uses the search icon):
<i class="fas fa-search" aria-hidden="true"></i>
Using this method has the benefit of having something that can be resized without a change in quality, as well as being subject to CSS rules like any other text, so rules like color
and text-shadow
can affect it.