109

There are different ways to show graphics in a page next to text. I need to include a graphic/icon that indicates a new tab will be opened.

I know it's possible to do using at least these different methods:

  • Unicode character from default fonts
  • Unicode character from CSS loaded fonts
  • Inline SVG
  • Inline PNG

Please suggest a method to do this, and explain why or why not it's robust on different browsers and operating systems.

2
  • 4
    Is there a unicode character for that icon? Or should I use an image?
    – collimarco
    Apr 4, 2019 at 19:00
  • @collimarco, he is using an image in the question. It's not an icon.
    – pbarney
    Aug 25, 2021 at 20:03

17 Answers 17

135

I am coming late to this party, but look what I have found at CodePen !

enter image description here

a[target="_blank"]::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}
<a class="external" href="https://example.org" target="_blank">external link</a>

11
  • @wOxxOm : thanks for the edit and the code snippet. Interestingly the single colon in a[target="_blank"]:after works with Safari 11.1 and Firefox 61 in my hands. Which browser requires the double colon? Please feel free to edit the answer. Thanks Jan 11, 2019 at 11:20
  • 1
    All browsers support the "incorrect" single colon syntax, AFAIK. Probably because too many people don't know or don't care about the distinction between a pseudo-element and a pseudo-class.
    – wOxxOm
    Jan 11, 2019 at 11:26
  • 2
    This is definitely better than including a whole custom font, just to add a link-out icon =p Aug 28, 2019 at 16:25
  • 1
    Pretty neat, but it doesn't scale with the font. :( Apr 13, 2020 at 0:34
  • 3
    Adding 'filter' css property did the trick! filter: brightness(0) invert(1); Jan 18, 2021 at 9:45
54

For many Unicode characters you'll need to use the following font (at least for Windows, please comment for Linux and Mac if you're able to test):

a:link {font-family: 'Segoe UI Symbol' !important;}

Also you can apply CSS selectors to use the target attribute as so:

a[target='blank']
a[target]

Keep in mind that browsers are funny about the behavior of the a selector and a:link / a:visited so definitely test with that in mind.


Unicode 'Two Joined Squares' character:

http://www.fileformat.info/info/unicode/char/29c9/index.htm

Two Joined Squares

CSS

a[target='_blank']::after {content: '\29C9';}

Support

Mac OS X, Yosemite: 2 fonts, Apple Symbol and STIXGeneral


Unicode 'White Square with Upper Right Quadrant' character:

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

White Square with Upper Right Quadrant

CSS

a[target='_blank']::after {content: '\25F3';}

Support

Mac OS X, Yosemite: 3 fonts, Apple Symbol, STIXGeneral, Menlo.


Unicode 'Upper Right Drop-Shadowed White Square' character:

http://www.fileformat.info/info/unicode/char/2750/index.htm

Upper Right Drop-Shadowed White Square

CSS

a[target='_blank']::after {content: '\2750';}

Support

Mac OS X 10.10 Yosemite has three fonts: Arial Unicode MS, Menlo and Zapf Dingbats.

2
  • 7
    I doubt any of these symbols would be recognized by the majority of users as a symbol for an external link.
    – MrUpsidown
    Mar 25, 2020 at 1:17
  • I doubt making a criticism without offering something objectively better will do the world any good.
    – John
    Mar 25, 2020 at 1:44
47

I like this unicode symbol for Open-in-new-window

↗️ or ↗

North East Arrow Make sure you're using utf-8 html.

Html is &#x2197;

3
  • Is there an easy way to change its color?
    – Peanuts
    Aug 25, 2018 at 1:19
  • 2
    It's just text so <span style="color: purple">&#x2197;</span> should do it.
    – TrophyGeek
    Jun 12, 2021 at 1:48
  • Unicode is the safest answer (scales automatically with text). I usually inline style font-family: unicode; font-size: smaller; which keeps it from being colored and looks better. And I also use this fatter, more square arrow which, to me, seems more clear: 🡵 U+1F875 Sep 17, 2022 at 20:40
29

There's also U+1F5D7 OVERLAP: 🗗, added in Unicode 7.0 (June 2014).

Its comment is "overlapping offset windows".

HTML entity: &#x1F5D7;


(fileformat.info)

2
  • 1
    Not supported in Mac OS, 2017.
    – Julian
    May 22, 2017 at 19:04
  • 1
    I wouldn't rely on this one ... in Windows 10, Google Chrome, it doesn't work in March 2021.
    – Roger
    Mar 24, 2021 at 5:00
27

I'd go with something like this: opens in a new window

The icon you have chosen, as others have mentioned, is widely used by wikipedia and other sites to represent links to external sites. But this is more of a personal preference and not a web standard.

2
  • @www-0av-Com Not to be picky but the alt attribute should be used to describe the image, so in your example it could be something like: alt="New window icon". With that being said, a title attribute will display a tooltip on hover which in this case is great for accessibility and usability: title="Link opens in a new window", although I prefer to say nowadays "new tab" rather than "new window". Check out my complete answer here stackoverflow.com/questions/1899772/… Aug 6, 2018 at 3:42
  • 1
    Very late but I can't let this comment stand without a rebuttal. The alt attribute absolutely should not describe what the image looks like in these cases, and it should never mention "icon" or "image". The alt text should describe what the image does because it is a functional image. When choosing alt text no single rule like "describe the image" applies — context is everything. Read the whole WebAIM Alternative Text article — it's very good
    – Stephen P
    May 14, 2020 at 0:01
17

There's no such a thing as an established standard icon.

For example, the icon you chose is similar to the one used in wikipedia to mark links pointing to external websites (not belonging to wikipedia). You may however use it across your websites, and thus establish a convention within your own pages. Just make sure you do so consistently: ALL links marked with that icon MUST open to a new page, and ALL links not marked with it should open in the same page. You may improve accessibility, provided that you have a stable user base, who will have the chance to get used to your conventions. If your site is visited mostly by one-time visitors, then you'd be just adding visual clutter.

5
  • 2
    Yes, thanks that confirms my suspisions. I guess that the one thing the internet isn't is 'consistent' Dec 14, 2009 at 9:29
  • 3
    For anyone else looking for a public domain copy of the Wikipedia external link icon, it's here: commons.wikimedia.org/wiki/File:External.svg (You may need to rasterize it yourself - for some reason the pre-rasterized version is GPL-licensed) Apr 18, 2011 at 1:41
  • 2
    @TobiasCohen If the vector art is GPL'ed, then the raster art would also be GPL'ed, because it's a derived work. According to that link, however, the icon is public domain, so it's freely usable in both vector and raster form. Sep 21, 2012 at 16:21
  • I combined Ben's icon with John's CSS and ended up with a nice solution :)
    – RozzA
    Jan 1, 2016 at 1:00
  • 3
    Actually someone went through the hassle of writing a detailed proposal for the inclusion of this symbol into Unicode: europatastatur.de/material/Unicode_Proposal_External_Link.pdf . It's been 10 years... and it's still not there.
    – Jealie
    Feb 1, 2017 at 1:14
12

The closest I could find was NORTH WEST ARROW TO CORNER ⇱ and SOUTH EAST ARROW TO CORNER ⇲ -- but whoever created these icons didn't do NORTH EAST ARROW TO CORNER

http://www.fileformat.info/info/unicode/category/So/list.htm

2
  • 4
    you could rotate it with css to get north east Jun 20, 2014 at 22:56
  • I don't think that was an option when they were created, but yeah for css it works.
    – chovy
    Mar 24, 2020 at 3:03
12

OK, I'm late to the party, but here's what I came up with improving on all the other folk's answers:

<mockup of a link> external link icon

I found super neat icon here: https://icons8.com/icon/43738/external-link
Minified/optimized the SVG here: https://petercollingridge.appspot.com/svg-optimiser
And embedded base64 of the resulting SVG into a CSS style rule specifying all the sizes in ems:

a[target="_blank"]::after {
  content: "";
  width: 1em;
  height: 1em;
  margin: 0 0.05em 0 0.1em;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cGF0aCBkPSJNOSAyTDkgMyAxMi4zIDMgNiA5LjMgNi43IDEwIDEzIDMuNyAxMyA3IDE0IDcgMTQgMlpNNCA0QzIuOSA0IDIgNC45IDIgNkwyIDEyQzIgMTMuMSAyLjkgMTQgNCAxNEwxMCAxNEMxMS4xIDE0IDEyIDEzLjEgMTIgMTJMMTIgNyAxMSA4IDExIDEyQzExIDEyLjYgMTAuNiAxMyAxMCAxM0w0IDEzQzMuNCAxMyAzIDEyLjYgMyAxMkwzIDZDMyA1LjQgMy40IDUgNCA1TDggNSA5IDRaIi8+PC9zdmc+) no-repeat;
  background-size: contain;
  display: inline-block;
  vertical-align: text-bottom;
}
An <a href="" target="_blank">external link</a> is super pretty! 😁<br />
<span style="font-size: 2em;">In <a href="" target="_blank">all</a> sizes!</span><br />
<span style="font-size: 3em;">Even <a href="" target="_blank">super large</a> ones!</span><br />
<span style="font-size: 0.5em;">And in <a href="" target="_blank">super tiny ones</a> too!</span><br />

It works absolutely amazing for me!
I'm probably never going back to whatever solution there might be.

2
  • Also I found useful to specify selector as a[target="_blank"]:not(.no-external-link-icon)::after so you can disable icon display adding class no-external-link-icon to <a> element.
    – paul
    Dec 19, 2020 at 14:51
  • Superb turn-key solution. Thank you! 🙏🏽
    – avalanche1
    Dec 6, 2021 at 21:47
8

Haven't seen the following option.
It's just css and ends up like this: open in new window icon

See here: https://codepen.io/Bets/pen/KGBqqb (the run snippet below does not display right)

Edit: Added another option that does not need another element after link.

   

 .newWindow {
      display:inline-block;
      margin-left:5px;
      position: relative;
      border: 1px solid;
      width: 8px;
      height: 8px;
    }

    .newWindow:after {
      position: absolute;
      top:-8px;
      right:-2px;
      font-size:0.8em;
      content:"\1f855";
    }

    .newWindow:before {
      position: absolute;
      top: -3px;
      right: -3px;
      content: " ";
      border: 4px solid white;
    }

a[target="_blank"] {
         position: relative;
    }

a[target="_blank"]:after {
     position: absolute;
     top: 3px;
     right: -15px;
     content: "\1f855";
     font-size: 13px;
     color: black;
     line-height: 3px;
     height: 5px;
     width: 5px;
     border-right: 2px solid white;
     border-top: 2px solid white;
}

a[target="_blank"]:before {
     position: absolute;
     top: 4px;
     right: -15px;
     content: " ";
     border: 1px solid black;
     width: 8px;
     height: 8px;
}
<a href="#">Link followed by span</a><span class="newWindow"></span>
<br/>
<a href="#" target="_blank">Just link</a>

3
  • nice, but the result I get when I press "run code snippet" doesn't look like that image
    – c z
    Jan 3, 2019 at 13:16
  • Looks OK, but the css is too compex to add it as a style modificator to a link style like a[target="_blank"]::after . Your solution requires to include the div in the html for each link you need it. Other solutions require no changes to the html. It only adds the symbol to links that has the target attribute specified.
    – awe
    Jul 19, 2019 at 9:38
  • @awe You are right, so I added a second options that works without altering the html.
    – bets
    Jul 21, 2019 at 7:59
8

Four useful symbols: ⧉ ❐ ⍈ ⎘

⧉ &#x29C9; &#10697;  U+29C9 TWO JOINED SQUARES
❐ &#x2750; &#10064;  U+2750 UPPER RIGHT DROP-SHADOWED WHITE SQUARE
⍈ &#x2348; &#9032;  U+2348 APL FUNCTIONAL SYMBOL QUAD RIGHTWARDS ARROW
⎘ &#x2398; &#9112;  U+2398 NEXT PAGE
5

Try |͟↗̱|:

|&#863;&nearr;&#817;|

And for compatibility with Arial

&#8739;&#863;&nearr;&#817;&#8739;
4

Nowadays you can use the icons from Font Awesome 5, from cheatsheet - solid icons:

enter image description here

Which comes close to the icon that was chosen.

Looking at solid.css I noticed that the name of the font is "Font Awesome 5 Free":

a[target='_blank']::after {
    content: ' \f35d';
    font-family: "Font Awesome 5 Free";
    color: blue;
}

Or in case you don't use Font Awesome css and want to target the font only:

@font-face {
    font-family: "FontAwesomeSolid";
    font-weight: bold;
    font-style: normal;
    src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.ttf") format("truetype");
}

a[target='_blank']::after {
    content: ' \f35d';
    font-family: "FontAwesomeSolid";
    color: blue;
}
1
  • This answer may be better than the others for these reasons: [1] Using unicode characters may work on your machine, but it may not work on other operating-systems/platforms, or even different fonts. [2] Using inline SVG is better, but you sometimes end up with trouble getting the vertical spacing right if you have text nearby.
    – Cameron
    Jan 25, 2022 at 23:44
4

I know I'm late to the party, but FWIW here's my solution ¯\(ツ)/¯,

HTML:

<a href="#" target="_blank">Your link</a>

JavaScript:

Vanila JS

var tlinks = document.querySelectorAll("a[target=_blank]");
for (var x = 0; x < tlinks.length; x++) {
    tlinks[x].title = "Opens in new tab/window";
    var currentClass = tlinks[x].getAttribute("class");
    if (currentClass == null) currentClass = "";
    tlinks[x].setAttribute("class", currentClass + " new-tab");
}

Or

jQuery

$("a[target='_blank']").attr({title:"Link opens in a new tab"}).addClass("new-tab");

CSS:

.new-tab:after {
    display: inline-block;
    content: "⇱";
    position: relative;
    top: -5px;
    margin-left: 2px;
    transform: rotate(90deg);
}

Demo:

Here's a Pen: https://codepen.io/ricardozea/pen/dyVXXVr (this link, for example, SHOULD open in a new window, lol).

What about this icon 🗗?

I would've loved to be able to use this icon 🗗, the problem is that it's not supported in iOS devices and I think macOS either.


For years this technique has been very useful for me because:

  • I don't have to manually add a title attribute every time I create a link that opens in a new tab.
  • I don't have to add the new window icon.
  • The JavaScript and the CSS do the heavy lifting, all I need to do is add target="_blank" and that's it.
  • If I don't have access to the HTML but still need/want to enhance the accessibility of an interface, I can do so with this method.
  • This method works great for both inline and block-level elements.
2

On my WordPress blog, I've had to link to several sites that apparently disable the back button (Facebook and Google Translate results). For those links I set them to open a new window. I've collected little "new window" icons but they always interrupt the line spacing (maybe it's a WordPress thing; there's no extra space around the icons) so I decided to go with a title="" that says "Link opens new window" and a text icon [+] within the link, at the end of the link text, separated by a space.

2

Here's an "external link" symbol from 177 characters of SVG:
external link symbol

<svg height="40" width="30" viewBox="0 0 1024 768"><path d="M640 768H128V258L256 256V128H0v768h768V576H640V768zM384 128l128 128L320 448l128 128 192-192 128 128V128H384z"/></svg>

<svg height="40" width="30" viewBox="0 0 1024 768"><path d="M640 768H128V258L256 256V128H0v768h768V576H640V768zM384 128l128 128L320 448l128 128 192-192 128 128V128H384z"/></svg>

...and here's the source including discussion on why Unicode rejected implementation of an "external link sign".

1

How about something like the attached image (which anyone's free to use or edit)?enter image description here

1: enter image description here

I'm thinking of adding this to the right of existing single buttons so they become a horizontal button group giving users the option to click the link and open it in a new window.

1
  • 11
    Might want to crop that icon.
    – Kirk Woll
    Dec 1, 2012 at 19:23
0

The short answer is no, there's not a well defined icon to use. Any icon described in the responses here should suffice but...

As the icon is aimed at meeting a WCAG Success Criterion 3.2.5: Change on request, its purpose needs to be described, both visually and assistively.

To meet that requirement I suggest adding an aria label to an embedded icon, or alt text to an image, along with a title to give the icon meaning.

<a href="someplace.html" target="_blank">Link description
    <svg aria-label="New window" title="New window" style="fill:currentColor;width:1em;height:1em" viewBox="0 0 24 24">
        <path d="M5 3C4 3 3 4 3 5v14c0 1 1 2 2 2h14c1 0 2-1 2-2v-7h-2v7H5V5h7V3H5zm9 0v2h3.6l-9.3 9.3 1.4 1.4L19 6.4V10h2V3h-7z"/>
    </svg>
</a>

Or, if the "New window" icon is set in the background of the link, as in the [target="blank"]::after solutions offered:

<a href="someplace.html" target="_blank" title="New window" aria-label="Link description (opens in new window)">Link description</a>
3

Not the answer you're looking for? Browse other questions tagged or ask your own question.