Is there Unicode glyph Symbol to represent "Search"

Question

Unicode has a million icon-like glyphs, but they're very hard to search.

Is there a Unicode glyph that looks like a "Binocular" or "magnifying glass"? Or is there a symbol that's used to mean "Search", which is in Unicode?

Solution 1

There is U+1F50D LEFT-POINTING MAGNIFYING GLASS (🔍) and U+1F50E RIGHT-POINTING MAGNIFYING GLASS (🔎).

You should use (in HTML) 🔍 or 🔎

They are, however not supported by many fonts (fileformat.info only lists a few fonts as supporting the Codepoint with a proper glyph).

Also note that they are outside of the BMP, so some Unicode-capable software might have problems rendering them, even if they have fonts that support them.

Generally Unicode Glyphs can be searched using a site such as fileformat.info. This searches "only" in the names and properties of the Unicode glyphs, but they usually contain enough metadata to allow for good search results (for this answer I searched for "glass" and browsed the resulting list, for example).

Note that you can use Unicode Variant Selectors to explicitly pick how the glyphs will be rendered. Specifically VS15 (U+FE0E) for text-style and VS16 (U+FE0F) for emoji-style are relevant here. Simply append them to your chosen Unicode symbol to indicated if you'd like it to be rendered as text or as an emoji (assuming the software/browser supports the selectors and the relevant representation):

Unicode Symbol	Variant Selector	HTML encoded	Result
U+1F50E	none	🔎	🔎
U+1F50E	VS15 = U+FE0E	🔎︎	🔎︎
U+1F50E	VS16 = U+FE0F	🔎️	🔎️

Note that the result might vary depending on platform. For example Chrome seems to always render this character as an Emoji on both Linux and Windows.

Solution 2

Use the ⚲ symbol (encoded as ⚲ or ⚲), and rotate it to achieve the desired effect:

<div style="-webkit-transform: rotate(45deg); 
               -moz-transform: rotate(45deg); 
                 -o-transform: rotate(45deg);
                    transform: rotate(45deg);">
    &#9906;
</div>

It rotates a symbol :)

Solution 3

I'd recommend using http://shapecatcher.com/ to help search for unicode characters. It allows you to draw the shape you're after, and then lists the closest matches to that shape.

Solution 4

Displayed correct at Chrome OS - screenshots from this system.

༗ U+0F17

⌕ U+2315

ᰄ U+1C04

Solution 5

You can simply add this CSS to your header

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet' type='text/css'>

next add this code in place where you want to display a glyph symbol.

<div class="fa fa-search"></div> <!-- smaller -->
<div class="fa fa-search fa-2x"></div> <!-- bigger -->

Have fun.

View more solutions

Comments

[Kzqai]

possible duplicate of What Unicode character do you use in your website? (instead of image icons)

[Keith Thompson]

You could use a sequence of glyphs: U+0053, U+0065, U+0061, U+0072, U+0063, U+0068 8-)}

[Ciro Santilli OurBigBook.com]

If this other question was closed, so should this one.

[chickens]

Not sure if svg do it for you but this is what I used, you can change the color from stroke attribute. <svg style="height:1em;" viewBox="0 0 12 13"><g stroke-width="2" stroke="#999999" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>

[Prasad Jadhav]

if we want to provide support for Unicode in any browser what steps do we have to follow?

[Jukka K. Korpela]

@Prasad Jadhav, the Unicode support issue is mostly a font problem nowadays, and it’s really a different question. For characters as rare (in fonts) as these, an embedded font (@font face) is probably the only option, and somewhat problematic (since Symbola is such a large font). The characters also appear in Quivira (version 3.7) and Segoe UI Symbol (version 5.01), but that’s still a very limited set of fonts. Quivira is a free font, Segoe UI Symbol is shipped with Windows 7 and allows editable embedding.

[redbmk]

that's an awesome tool. it's mostly finding Q's and O's when I try searching for a magnifying glass but still... pretty sweet tool

[vsync]

I've found magnifying glass. Try to draw better :p

[zopieux]

May I recommend "Telephone recorder" U+2315: ⌕? It is totally unrelated but resembles a magnifying glass somehow and seems to be included in standard fonts, where U+1F50D and U+1F50E don't.

[Spinal]

Arial (on Windows) also supports the "left pointing magnifying glass"

[Sebastian]

I found some nice pictures and characters here: charbase.com/block/miscellaneous-symbols-and-pictographs

[Niloct]

Well the point is to have a glyph text-based, and the symbol is way better looking than the unicode one. +1.

[John]

@Niloct It's an html answer. I can't see the question being html-specific. In xaml you'd do something like <Grid.RenderTransform><CompositeTransform Rotation="-45" /></Grid.RenderTransform>. Are we taking web programming for granted now when asking a unicode question?

[Niloct]

John, I ended up using a png derived from this symbol, because in Windows it shows incorrectly a square. It is more elegant looking that the accepted one. Also, UTF-8 is what the actual web is encoded upon, so its a pragmatic answer.

[Eliasz Kubala]

On Linux (Ubuntu) is looks very good but when I use windows I only can see a square.

[Jon Hanna]

That means neuter in the sense "neither male nor female". If you're going to use a character just for its glyph then you'd be better off putting it in a font assigned somewhere in the Private Use Area, or using a PNG, rather than say "neither male nor female" and then apply a style to make it look like 🔍 or 🔎.

[tinkerr]

Adding more CSS files to the header slows down page load. CSS files are render-blocking.

[Eliasz Kubala]

You can add only important part of this file if you care about rendering.

[Eliasz Kubala]

It's not work in all browsers ;)

[LB--]

For those curious, it renders in color on Chromebooks: i.imgur.com/86b0a2o.png

[rr-]

Counter-downvoting, using css fonts is actually very reasonable especially when you find yourself need more and more icons.

[teewuane]

This worked really well for me. I made a <span class='icn icn-find'></span> then the css was .icn-find:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: block; content: "\26B2"; }. Works great!

[Mousey]

post the character code? it doesn't display

[Mousey]

very nice tool but doesn't find a magnifying glass/search icon, no list of characters and sadly not updated since 2012

[Vitaly Zdanevich]

@Mousey added codes and screenshots

[Thomas Weller]

OMG, first I wondered why you put a strikethrough ass there for a solution...

[Armfoot]

I arrived to this page looking for an "icon" that could be placed in placeholders (inside an <input>), therefore this is only a solution for the cases where you can use HTML.

[Louis Maddox]

I don't recommend "telephone recorder", I can't see it on the Windows machine I'm on. RE: Chromebooks, Chrome OS renders the emoji that's why it's in colour (there's crossover with a number of symbols that predated emoji).

[Lee Goddard]

Ironically, the site specified has no entry for 'search'. There are many UTF-8 character-name search sites around.

[phuclv]

Google usually also points to fileformat.info when you search for a character name

[phuclv]

@LB-- there's nothing new with that. Colored emoji has been there for quite some time and quite a lot of systems have support for it superuser.com/q/1173773/241386

[LB--]

@LưuVĩnhPhúc when I originally posted that screenshot in 2015, Windows did not render the emoji with color.

[Cris]

I don't like that it's colored

[Joachim Sauer]

@Chris: if you want to have strong control over how exactly it is displayed then either a.) don't use text, use images or b.) specify your own font that has exactly the desired glyph.

[Ciprian]

This is the best answer. The magnifying glass looks awesome. In 2018, all unicode characters get messed up by being turned into emojis. I have used it like this for a search form: #searchform:after { content: "\002315"; margin-left: -24px; }

[pfg]

If you don't want coloration, use the unicode variation selector 15 after it and it will instead appear as 🔎︎

[PRMan]

Upvote for FontAwesome. Tons of free glyphs for the web. Very useful.

[Lisa]

Thank you. U+2315 worked in a JSF xml-based markup view (RichFaces) as follows: <a4j:commandButton value="#{someBooleanExpr? '&#x25bc;' : '&#x2315;'}" />

[Kalmar]

Worth noting: Using a variant selector you can obtain a monochromatic font-like variant: 🔍︎ It is however a relatively new technology, so my old Android doesn't get it. The good thing is, it falls back to: 🔍 -- so possibly ugly, but still functional.

[Miro J.]

And because it's a CDN, it's probably cached already.

[Ṃųỻịgǻňạcểơửṩ]

By the way there are two emojis for the "search" icon

[bcody]

To the next person too lazy to search on how to get the Unicode variant working: Add &#xFE0E; immediately after the magnifying glass character.

[Majedur]

In bootstrap 4 You can use. <input type="text" class="fa" placeholder="&#xf002; Search" /> It's showing search in placeholder.

[André Boonzaaijer]

Update 2021: ⌕ (found with this tool) 0x2315 a.k.a. Telephone Recorder (no idea why it is called that but it is exactly the magnifying glass I've been searching for!)

[Lawrence Dol]

@ThomasWeller: Thank you -- now I can't unsee that. :-|

[Yossi Sternlicht]

Don't forget, if you use a span, to set the display to block or inline-block.

[MDave]

&#x2315 for the dummies like me.

[Zia Khan]

Thanks for Help. This work with one addition that it must be inside a tag like span and display should be block or inline-block.