117

I'm trying to find the Unicode symbol to make a button display the Unicode pause symbol. I was able to find that the Unicode play symbol is &#9658 but I'm looking for the equivalent of the Unicode pause symbol.

Edric
  • 24,639
  • 13
  • 81
  • 91
user3081307
  • 1,211
  • 2
  • 10
  • 8
  • 2
    Had this same question, but for a "Stop" button (square). [Roko's](http://stackoverflow.com/a/27053825/1797628) answer was the best for this. – starmandeluxe Oct 24 '15 at 13:46

12 Answers12

222

Unicode Standard for Media Control Symbols

Pause: ⏸︎

The Unicode Standard 13.0 (update 2020) provides the Miscellaneous Technical glyphs in the HEX range 2300–23FF

Miscellaneous Technical

Given the extensive Unicode 13.0 documentation, some of the glyphs we can associate to common Media control symbols would be as following:

Keyboard and UI symbols

23CF ⏏︎ Eject media

User interface symbols

23E9 ⏩︎ fast forward
23EA ⏪︎ rewind, fast backwards
23EB ⏫︎ fast increase
23EC ⏬︎ fast decrease
23ED ⏭︎ skip to end, next
23EE ⏮︎ skip to start, previous
23EF ⏯︎ play/pause toggle
23F1 ⏱︎ stopwatch
23F2 ⏲︎ timer clock
23F3 ⏳︎ hourglass
23F4 ⏴︎ reverse, back
23F5 ⏵︎ forward, next, play
23F6 ⏶︎ increase
23F7 ⏷︎ decrease
23F8 ⏸︎ pause
23F9 ⏹︎ stop
23FA ⏺︎ record

Power symbols from ISO 7000:2012

23FB ⏻︎ standby/power
23FC ⏼︎ power on/off
23FD ⏽︎ power on
2B58 ⭘︎ power off

Power symbol from IEEE 1621-2004

23FE ⏾︎ power sleep

Use on the Web:

A file must be saved using UTF-8 encoding without BOM (which in most development environments is set by default) in order to instruct the parser how to transform the bytes into characters correctly. <meta charset="utf-8"/> should be used immediately after <head> in a HTML file, and make sure the correct HTTP headers Content-Type: text/html; charset=utf-8 are set.

Examples:

HTML 
&#x23E9; Pictograph 
&#x23E9;&#xFE0E; Standardized Variant
CSS 
.icon-ff:before { content: "\23E9" }
.icon-ff--standard:before { content: "\23E9\FE0E" }
JavaScript 
EL_iconFF.textContent = "\u23E9";
EL_iconFF_standard.textContent = "\u23E9\uFE0E"

Standardized variant

To prevent a glyph from being "color-emojified" ⏩︎ / ⏩ append the code U+FE0E Text Presentation Selector to request a Standardized variant: (example: &#x23e9;&#xfe0e;)

Inconsistencies

Characters in the Unicode range are susceptible to the font-family environment they are used, application, browser, OS, platform.
When unknown or missing - we might see symbols like � or ▯ instead, or even inconsistent behavior due to differences in HTML parser implementations by different vendors.
For example, on Windows Chromium browsers the Standardized Variant suffix U+FE0E is buggy, and such symbols are still better accompanied by CSS i.e: font-family: "Segoe UI Symbol" to force that specific Font over the Colored Emoji (usually recognized as "Segoe UI Emoji") - which defies the purpose of U+FE0E in the first place - time will tell…

Scalable icon fonts

To circumvent problems related to unsupported characters - a viable solution is to use scalable icon font-sets like i.e:

Font Awesome

Player icons - scalable - font awesome

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<i class="fa fa-arrows-alt"></i>
<i class="fa fa-backward"></i>
<i class="fa fa-compress"></i>
<i class="fa fa-eject"></i>
<i class="fa fa-expand"></i>
<i class="fa fa-fast-backward"></i>
<i class="fa fa-fast-forward"></i>
<i class="fa fa-forward"></i>
<i class="fa fa-pause"></i>
<i class="fa fa-play"></i>
<i class="fa fa-play-circle"></i>
<i class="fa fa-play-circle-o"></i>
<i class="fa fa-step-backward"></i>
<i class="fa fa-step-forward"></i>
<i class="fa fa-stop"></i>
<i class="fa fa-youtube-play"></i>

Google Icons

enter image description here

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">pause</i>
<i class="material-icons">pause_circle_filled</i>
<i class="material-icons">pause_circle_outline</i>
<i class="material-icons">fast_forward</i>
<i class="material-icons">fast_rewind</i>
<i class="material-icons">fiber_manual_record</i>
<i class="material-icons">play_arrow</i>
<i class="material-icons">play_circle_filled</i>
<i class="material-icons">play_circle_outline</i>
<i class="material-icons">skip_next</i>
<i class="material-icons">skip_previous</i>
<i class="material-icons">replay</i>
<i class="material-icons">repeat</i>
<i class="material-icons">stop</i>
<i class="material-icons">loop</i>
<i class="material-icons">mic</i>
<i class="material-icons">volume_up</i>
<i class="material-icons">volume_down</i>
<i class="material-icons">volume_mute</i>
<i class="material-icons">volume_off</i>

and many other you can find in the wild; and last but not least, this really useful online tool: font-icons generator, Icomoon.io.

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • 2
    Annoyingly there's no "circled stop" button in the Google font/icons, so their "circled play" and "circled pause" set is incomplete... – Fizz Feb 29 '20 at 12:55
  • 1
    @Fizz https://github.com/google/material-design-icons/issues/851 – Roko C. Buljan Feb 29 '20 at 13:26
  • Awesome Answer - I love the effort that was put into it. Did you notice the official "ISO 7000 / IEC 60417 Symbol for Pause; Interruption is #5111B. See Media_Controls", which was pointed to by @intotecho in this underrated answer? → https://stackoverflow.com/a/48918561/4575793 – Cadoiz Apr 25 '20 at 21:54
  • 2
    The text presentation selector `︎` like in `▶︎` does not seem to work in Firefox and Chrome for android (2020 AC). – Luis A. Florit Oct 11 '20 at 07:11
  • The pause symbol (23F8) renders has an *orange* frame on Android (with font color black) and is super tall on Firefox/Chromium on Linux. Doesn't seem to be reliable cross-platform in 2021 :/ – Luc Jun 07 '21 at 20:59
  • @Luc Does it also happens using the **Standardized variant** as explained in a paragraph above? – Roko C. Buljan Jun 08 '21 at 05:51
  • @RokoC.Buljan Unfortunately it also happens when that is appended, specifically when using `⏸︎`, although I actually missed that paragraph before first commenting so thanks for the hint regardless! – Luc Jun 10 '21 at 20:45
  • @Luc After a second look, it also happens here on Stack Overflow (Windows 10, Chrome 91.0.4x) on that same Answer post. The first time I load the page I see the Emoji and only after a page refresh (without hard refresh) I finally see the Standardized variant being applied. I Already reported that (similar) bug to Chrome. A year ago... – Roko C. Buljan Jun 10 '21 at 21:31
125

There are various symbols which could be considered adequate replacements, including:

  1. | | - two standard (bolded) vertical bars.

  2. ▋▋ - &#9611; and another&#9611;

  3. ▌▌ - &#9612; and another&#9612;

  4. ▍▍ - &#9613; and another&#9613;

  5. ▎▎ - &#9614; and another&#9614;

  6. ❚❚ - &#10074; and another &#10074;

I may have missed out one or two, but I think these are the better ones. Here's a list of symbols just in case.

dsgriffin
  • 66,495
  • 17
  • 137
  • 137
64

Following may come in handy:

  • ⏩ &#x23e9;
  • ⏪ &#x23ea;
  • ⏫ &#x24eb;
  • ⏬ &#x23ec;
  • ⏭ &#x23ed;
  • ⏮ &#x23ee;
  • ⏯ &#x23ef;
  • ⏴ &#x23f4;
  • ⏵ &#x23f5;
  • ⏶ &#x23f6;
  • ⏷ &#x23f7;
  • ⏸ &#x23f8;
  • ⏹ &#x23f9;
  • ⏺ &#x23fa;

NOTE: apparently, these characters aren't very well supported in popular fonts, so if you plan to use it on the web, be sure to pick a webfont that supports these.

rr-
  • 14,303
  • 6
  • 45
  • 67
28

▐▐  is HTML and is made with this code: &#9616;&#9616;.

Here's an example JSFiddle.

indivisible
  • 4,892
  • 4
  • 31
  • 50
marcusmichaels
  • 397
  • 3
  • 6
23

I found it, it’s in the Miscellaneous Technical block. ⏸ (U+23F8)

birtannic124
  • 343
  • 2
  • 6
  • 3
    Not sure how the right answer got downvoted. See link below where this "double vertical bar" is also noted as "pause" in its comments. Too bad it doesn't seem to be well supported in the fonts (added to Unicode in June 2014). http://www.fileformat.info/info/unicode/char/23f8/index.htm – Anm Dec 05 '14 at 15:50
16

I'm using ▐ ▌

HTML: &#9616;&nbsp;&#9612;

CSS: \2590\A0\258C

Nathan Goings
  • 1,145
  • 1
  • 15
  • 33
7

If you want one that's a single character to match the right-facing triangle for "play," try Roman numeral 2. Ⅱ is &#8545; in HTML. If you can put formatting tags around it, it looks really good in bold. Ⅱ is <b>&#8545;</b> in HTML. This has much better support than the previously mentioned double vertical bar.

StarCrashr
  • 426
  • 4
  • 11
5

Modern browsers support 'DOUBLE VERTICAL BAR' (U+23F8), too:

http://www.fileformat.info/info/unicode/char/23f8/index.htm

For a music player it can act as a companion for 'BLACK RIGHT-POINTING POINTER' (U+25BA) because they both share equal width and height making it perfect for a play/pause button:

http://www.fileformat.info/info/unicode/char/25ba/index.htm

midzer
  • 347
  • 4
  • 4
  • 1
    On mac double vertical bar is surrounded by a skeuomorphic box looks different from black right-pointing pointer. – Will Aug 11 '17 at 18:04
3

There is no character encoded for use as a pause symbol, though various characters or combinations of characters may look more or less like a pause symbol, depending on font.

In a discussion in the public Unicode mailing list in 2005, a suggestion was made to use two copies of the U+275A HEAVY VERTICAL BAR character: ❚❚. But the adequacy of the result depends on font; for example, the glyph might have been designed so that the bars are too much apart. – The list discussion explains why a pause symbol had not been encoded, and this has not changed.

Thus, the best option is to use an image. If you need to use the symbol in text, it is best to create it in a suitably large size (say 60 by 60 pixels) and scale it down to text size with CSS (e.g., setting height: 0.8em on the img element).

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • You can also add some CSS like "letter-spacing: -6px" to the double Heavy Vertical Bar, so it it looks more like a real pause symbol. Example: http://jsfiddle.net/enKaA/ – JaGo May 12 '14 at 08:20
  • This is better than #9616 since it's the same height. – Aram Kocharyan Aug 25 '14 at 12:43
  • 2
    This answer is obsolete. Unicode 7.0 (released 2014) has added U+23F8 and matching symbols (play, stop, record) precisely for this purpose https://www.unicode.org/charts/PDF/Unicode-7.0/U70-2300.pdf – Fizz Feb 29 '20 at 12:02
2

The ISO 7000 / IEC 60417 Symbol for Pause; Interruption is #5111B. See Media_Controls

intotecho
  • 4,925
  • 3
  • 39
  • 54
0

I found a good option similar to the others but exact with the span tag. You can apply

<span>&#9616;</span>&#9616;

with no spaces.

Astrobouy
  • 11
  • 1
-2

Simply II looks good! Other idea:

  • Pause II: just two capital letters i, ie. roman two (font dependent, needs sans serif)
  • Pause II: as before, but bold
  • Pause ll: two small letters L
  • Pause ||: two vertical bars
  • Pause ": quote
  • Pause ᐦ: 0x1426 Canadian syllabics final double short vertical strokes
  • Pause ‖: 0x2016 double vertical line*

Partly inspried by https://shapecatcher.com.

<div style="font-family: Roboto">
Pause II: just two capital letters i (font dependent, needs sans serif)<br>
Pause <b>II</b>: as before, but bold<br>
Pause ll: two small letters L<br>
Pause ||: two vertical bars<br>
Pause ": quote<br>
Pause &#x1426;: 0x1426 Canadian syllabics final double short vertical strokes<br>
Pause &#x2016;: 0x2016 double vertical line<br>
<div/>
Friedrich -- Слава Україні
  • 2,901
  • 1
  • 21
  • 40