Unicode character to represent "fullscreen"?

D

11

21

I'm sort of surprised that this doesn't exist given the sheer number of arrow-like symbols in Unicode. Have I missed something? Or is there a character that looks similar to a fullscreen icon?

Dried answered 13/10, 2018 at 11:31 Comment(3)

Don't search for "fullscreen", you want "maximize". U+1F5D6. FontAwesome is pretty popular: fontawesome.com/icons?d=gallery&q=maximize. – Habanera 13/10, 2018 at 13:59

The symbol "maximize" U+1F5D6 is available even in most ordinary fonts, it's not specific to fontawesome. – Chuckhole 13/10, 2018 at 21:4

U+1F5D6: 🗖 <-- it's probably better than ⇱︎, but (as least as I view it from the chrome browser) it doesn't really look like a "fullscreen" button (think of the icons used on video players). Although, having said that, youtube's icon doesn't really have arrows: i.imgur.com/nNc7PtV.png – Dried 14/10, 2018 at 5:49

C

34

There is also U+26F6 "SQUARE FOUR CORNERS" ⛶ that looks somewhat similar to this image

maximize button youtube

that you've linked. No idea what the symbol was originally supposed to stand for, though... I'm also not sure that it actually does look like four corners in all fonts, maybe it's just the font of my particular browser.

Chuckhole answered 14/10, 2018 at 11:27 Comment(3)

To be used in HTML: ⛶ – Shenitashenk 31/5, 2020 at 10:48

To be used in CSS: SELECTOR::after { content: '\26F6'; padding: 10px; } – Shenitashenk 31/5, 2020 at 10:56

Unfortunately this unicode symbol is NOT yet supported in Apple MacOS/iOS (but it is already supported in Windows, Android, Linux, etc.) – Etching 5/12, 2020 at 15:30

C

24

If you search for expand from the link Hans Passant commented above you'll get the below

⛶ like what Youtube uses does appear among the result

Another suggestion:

U+21F1 ⇱ North West Arrow to Corner
U+21F2 ⇲ South East Arrow to Corner

The North East and South West versions don't exist but you can rotate or mirror the available ones to create the remaining two corners. But two corners are already enough to represent a fullscreen action, you don't need to fill all four corners

Other alternatives

U+2725 ✥ FOUR CLUB-SPOKED ASTERISK
U+21F9 ⇹ LEFT RIGHT ARROW WITH VERTICAL STROKE
U+21FC ⇼ LEFT RIGHT ARROW WITH DOUBLE VERTICAL STROKE
U+2921 ⤡ NORTH WEST AND SOUTH EAST ARROW
U+1F542 🕂 CROSS POMMEE (needs some modification or a special font to make the heads more arrow-like)
↔↕ (use alone or drawn onto each other to get a cross with arrows)
⤡⤢
⇳
⤄
🡤🡥🡦🡧
🡴🡵🡶🡷
🢄🢅🢆🢇
🢔🢕🢖🢗

Some examples with arrows

Here is another variation used by the player in vtvgiaitri.vn

I guess they can be made from ◣ U+25E3 Black Lower Left Triangle and ◥ U+25E5 Black Upper Right Triangle or some of the triangles like below

◸ U+25F8 Upper Left Triangle
◹ U+25F9 Upper Right Triangle
◺ U+25FA Lower Left Triangle
◿ U+25FF Lower Right Triangle
𝅊 U+1D14A Musical Symbol Triangle Notehead Left White
𝅋 U+1D14B Musical Symbol Triangle Notehead Left Black
𝅌 U+1D14C Musical Symbol Triangle Notehead Right White
𝅍 U+1D14D Musical Symbol Triangle Notehead Right Black
𝅎 U+1D14E Musical Symbol Triangle Notehead Down White
𝅏 U+1D14F Musical Symbol Triangle Notehead Down Black
𝅐 U+1D150 Musical Symbol Triangle Notehead Up Right White
𝅑 U+1D151 Musical Symbol Triangle Notehead Up Right Black

There are also ⤧⤨⤩⤪⤭⤮⤯⤰, unfortunately they don't have the double-head arrow version, but a simple solution like ⤪⤭ might work

You can draw on shapecatcher to find more relevant solutions or look for more arrows on

Cayla answered 15/10, 2018 at 3:41 Comment(1)

For more options, there's also ◰ "White Square With Upper Left Quadrant" and the other similar ones ◱◲◳ . – Devlin 13/4, 2022 at 2:47

P

9

FWIW, as of this writing, YouTube is using an SVG for its "SQUARE FOUR CORNERS" icon; here's the code:

<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
<path d="m 10,16 2,0 0,-4 4,0 0,-2 L 10,10 l 0,6 0,0 z"></path>
<path d="m 20,10 0,2 4,0 0,4 2,0 L 26,10 l -6,0 0,0 z"></path>
<path d="m 24,24 -4,0 0,2 L 26,26 l 0,-6 -2,0 0,4 0,0 z"></path>
<path d="M 12,20 10,20 10,26 l 6,0 0,-2 -4,0 0,-4 0,0 z"></path>
</svg>

Parthenogenesis answered 16/4, 2020 at 15:5 Comment(0)

D

3

I'm currently using ⇱︎, which isn't great, but sort of gets the idea across. I've also played around with "merging" characters like this:

<div style="position:relative; display:inline-block;">
  <div>↖</div>
  <div style="position:absolute; top:0;">↗</div>
  <div style="position:absolute; top:0;">↘</div>
  <div style="position:absolute; top:0;">↙</div>
</div>

Which produces this:

But it'd be much nicer if there was a single character for that sort of shape.

Dried answered 13/10, 2018 at 11:34 Comment(2)

it looks more like a square with 4 smaller squares inside to me instead of 4 arrows – Cayla 13/10, 2018 at 11:41

it also looks a bit like ❖ (U+2756 BLACK DIAMOND MINUS WHITE X) with inverted colors. – Chuckhole 14/10, 2018 at 11:31

C

3

Here's the classic Windows "full screen" unicode icon:

https://www.fileformat.info/info/unicode/char/1f5d6/index.htm

Confectionary answered 18/1, 2020 at 20:10 Comment(1)

Noice, just what I was looking for – Yoshi 17/11, 2022 at 15:22

V

2

<sup>⇱</sup><sub>⇲</sub>

^⇱_⇲

Vaginitis answered 27/9, 2022 at 19:33 Comment(1)

People can use these two elements two times on top of each other mirrored and get the ULTIMATE FULLSCREEN ICON – Yoshi 17/11, 2022 at 15:23

D

1

You can use some of these Unicode chars:

⌈⌊⌊⌋
「」
┘┌└ ┐
╬
⛶
╭ ╮╯╰

with <sub> or <sup> + overlapping

Or arrows:

⇱⇲
⇳⇖⇗⇘⇙⇕⇔↔↕↖↗↘↙ (and other arrows...)

Deaton answered 6/9, 2019 at 2:20 Comment(0)

F

1

Echoing the previous answer (the one mentioning "expand" icon), I feel it's convenient to use Font Awesome (https://fontawesome.com/icons/expand?s=solid&f=classic). You may also download the css file and save in the local folder.

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet" />

<p>Font Awesome Expand icon:</p>
<i class="fa fa-expand"></i>

<p>Font Awesome Compress icon:</p>
<i class="fa fa-compress"></i>

Flu answered 27/2, 2023 at 15:31 Comment(0)

C

1

Google Material Icons includes a "fullscreen" icon that you can download as an svg. There's also a ◱ unicode character.

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var path = document.createElementNS("http://www.w3.org/2000/svg", 'path');

path.setAttribute("d", "M200 856V663h60v133h133v60H200Zm0-367V296h193v60H260v133h-60Zm367 367v-60h133V663h60v193H567Zm133-367V356H567v-60h193v193h-60Z");
svg.setAttribute("height", "48");
svg.setAttribute("viewBox", "0 96 960 960");
svg.setAttribute("width", "48");


svg.appendChild(path);
document.body.appendChild(svg);

<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M200 856V663h60v133h133v60H200Zm0-367V296h193v60H260v133h-60Zm367 367v-60h133V663h60v193H567Zm133-367V356H567v-60h193v193h-60Z"/></svg>

Carpetbag answered 18/5, 2023 at 22:31 Comment(0)

M

0

TL;DR Here is your copy-pasta "🗖", enjoy!

Source: Maximize

You might as well want to use the Fullwidth Low Line "＿" and one of the many Cross characters available "╳".

Source: Full-Width Underscore

Long story for the curious ones: The technical term for Full Screen is called Maximizing. The writing system with many symbols for everything you need is called Unicode. You can find multiple websites with comprehensive and easy copy-pasta lists of Unicode characters, such as compart.com (It's a nice website, try it!). The Maximize symbol was added in June 2014 with the Unicode update v7.0.

Trivia: It works like a charm with WPF in C# .NET.

Maunder answered 14/12, 2023 at 22:48 Comment(0)

J

0

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
#fullscreen {
font-size:3em;
display: inline-block;
position: relative
}
#plus {
position: absolute;
font-weight: bolder;
font-size:2.5em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white
}
</style>
</head>
<body>
<div id="fullscreen">
<b>&#9633;</b>
<b id="plus">&#43;</b>
</div>
</body>
</html>

Jensen answered 18/12, 2023 at 9:55 Comment(2)

I use CSS and HTML only using just 2 characters: □ and white + inside. You can zoom it. The central symmetry is guaranteed. – Jensen 18/12, 2023 at 10:32

The file contains only 352 bytes. Just two interlaced icons , a □ and a +. The 352-byte magic of this solution lies in its elegant simplicity. Uncompromising functionality with minimal footprint. That's what sets this solution apart. – Jensen 15/1 at 9:37

Recommended topics

Hot tags