223

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?

Damjan Pavlica
  • 31,277
  • 10
  • 71
  • 76
Prasad Jadhav
  • 5,090
  • 16
  • 62
  • 80
  • possible duplicate of [What Unicode character do you use in your website? (instead of image icons)](http://stackoverflow.com/questions/1342103/what-unicode-character-do-you-use-in-your-website-instead-of-image-icons) – Kzqai Jul 30 '13 at 18:36
  • 4
    You could use a sequence of glyphs: U+0053, U+0065, U+0061, U+0072, U+0063, U+0068 8-)} – Keith Thompson Aug 21 '13 at 21:49
  • 1
    If [this other question](http://stackoverflow.com/questions/1384380/is-there-a-unicode-glyph-that-looks-like-a-key-icon?lq=1) was closed, so should this one. – Ciro Santilli OurBigBook.com Jan 31 '14 at 16:05
  • 1
    Not sure if svg do it for you but this is what I used, you can change the color from stroke attribute. – chickens Apr 09 '19 at 01:22

5 Answers5

262

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.

Joachim Sauer
  • 302,674
  • 57
  • 556
  • 614
  • if we want to provide support for Unicode in any browser what steps do we have to follow? – Prasad Jadhav Aug 20 '12 at 11:13
  • 7
    @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. – Jukka K. Korpela Aug 20 '12 at 13:28
  • 28
    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. – zopieux Jun 18 '13 at 14:02
  • 1
    Arial (on Windows) also supports the "left pointing magnifying glass" – Spinal Aug 27 '13 at 08:52
  • 1
    For those curious, it renders in color on Chromebooks: https://i.imgur.com/86b0a2o.png – LB-- Apr 08 '15 at 18:56
  • 1
    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). – Louis Maddox Aug 13 '16 at 03:59
  • Ironically, the site specified has no entry for 'search'. There are many UTF-8 character-name search sites around. – Lee Goddard Jan 05 '17 at 13:08
  • Google usually also points to fileformat.info when you search for a character name – phuclv Mar 04 '17 at 17:06
  • @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 http://superuser.com/q/1173773/241386 – phuclv Mar 04 '17 at 17:07
  • @LưuVĩnhPhúc when I originally posted that screenshot in 2015, Windows did not render the emoji with color. – LB-- Mar 05 '17 at 01:39
  • I don't like that it's colored – Cris Dec 06 '17 at 02:05
  • @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. – Joachim Sauer Dec 06 '17 at 15:09
  • 5
    If you don't want coloration, use the unicode variation selector 15 after it and it will instead appear as ︎ – pfg May 30 '18 at 03:23
  • 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. – Kalmar Jan 24 '19 at 10:39
  • By the way there are two emojis for the "search" icon – Ṃųỻịgǻňạcểơửṩ Nov 13 '19 at 20:46
  • 1
    To the next person too lazy to search on how to get the Unicode variant working: Add ︎ immediately after the magnifying glass character. – bcody Mar 16 '20 at 13:22
  • In bootstrap 4 You can use. It's showing search in placeholder. – Majedur Oct 01 '20 at 06:36
139

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 :)

dmatamales
  • 306
  • 2
  • 8
Ricky Sahu
  • 23,455
  • 4
  • 42
  • 32
  • 1
    Well the point is to have a glyph text-based, and the symbol is way better looking than the unicode one. +1. – Niloct Jan 29 '14 at 16:58
  • 1
    @Niloct It's an html answer. I can't see the question being html-specific. In xaml you'd do something like ``. Are we taking web programming for granted now when asking a unicode question? – John Mar 04 '14 at 18:09
  • 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. – Niloct Mar 04 '14 at 21:02
  • 3
    On Linux (Ubuntu) is looks very good but when I use windows I only can see a square. – Eliasz Kubala Sep 10 '14 at 07:33
  • 6
    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 ``. – Jon Hanna Oct 14 '14 at 14:01
  • It's not work in all browsers ;) – Eliasz Kubala Mar 30 '15 at 11:56
  • 4
    This worked really well for me. I made a `` 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! – teewuane Jun 12 '15 at 02:52
  • Don't forget, if you use a span, to set the display to block or inline-block. – Yossi Sternlicht Mar 02 '21 at 12:29
  • 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. – Zia Khan May 23 '22 at 21:57
71

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.

john holt ripley
  • 788
  • 11
  • 16
  • 11
    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 – redbmk Apr 05 '13 at 23:39
  • 9
    I've found magnifying glass. Try to draw better :p – vsync Apr 08 '13 at 13:22
  • 1
    I found some nice pictures and characters here: http://www.charbase.com/block/miscellaneous-symbols-and-pictographs – Sebastian Nov 24 '13 at 14:33
  • very nice tool but doesn't find a magnifying glass/search icon, no list of characters and sadly not updated since 2012 – Mousey Sep 15 '15 at 18:29
  • 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!) – André Boonzaaijer Jan 11 '21 at 09:49
38

Displayed correct at Chrome OS - screenshots from this system.

tibetan astrological sign sgra gcan -char rtags U+0F17 ༗ U+0F17

telephone recorder (U+2315) ⌕ U+2315

lepcha letter gla (U+1C04) ᰄ U+1C04

Vitaly Zdanevich
  • 13,032
  • 8
  • 47
  • 81
4

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.

Eliasz Kubala
  • 3,836
  • 1
  • 23
  • 28
  • 1
    Adding more CSS files to the header slows down page load. CSS files are render-blocking. – tinkerr Mar 11 '15 at 06:57
  • You can add only important part of this file if you care about rendering. – Eliasz Kubala Mar 11 '15 at 09:09
  • 2
    Counter-downvoting, using css fonts is actually very reasonable especially when you find yourself need more and more icons. – rr- May 13 '15 at 09:56
  • I arrived to this page looking for an "icon" that could be placed in placeholders (inside an ``), therefore this is only a solution for the cases where you can use HTML. – Armfoot Dec 07 '15 at 19:06
  • Upvote for FontAwesome. Tons of free glyphs for the web. Very useful. – PRMan Jun 29 '18 at 18:37
  • And because it's a CDN, it's probably cached already. – Miro J. Mar 07 '19 at 14:14