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

I know of at least these different methods which might be used:

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

Which of these is most reliable/viable? Are there other techniques which may be better? Are there any caveats to be aware of?

17 Answers

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

a[target="_blank"]::after { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==); margin: 0 3px 0 5px; }

<a href="" target="_blank">external link</a>

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:

⧉

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:

◳

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:

❐

CSS

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

Support

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

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

↗️ or ↗

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

Html is ↗

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

Its comment is "overlapping offset windows".

HTML entity: 🗗

(fileformat.info)

I'd go with something like this:

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.

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.

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>

I found super neat icon here:
Minified/optimized the SVG here:
And embedded base64 of the resulting SVG into a CSS style rule specifying all the sizes in ems:

a[target="_blank"]::after { content: "" / "opens in new tab/window"; 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>In <a href="" target="_blank">all</a> sizes!</span><br /> <span>Even <a href="" target="_blank">super large</a> ones!</span><br /> <span>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.

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

Haven't seen the following option.
It's just css and ends up like this:

See here: (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></span> <br/> <a href="#" target="_blank">Just link</a>

Four useful symbols: ⧉ ❐ ⍈ ⎘

⧉ ⧉ ⧉　　U+29C9 TWO JOINED SQUARES ❐ ❐ ❐　　U+2750 UPPER RIGHT DROP-SHADOWED WHITE SQUARE ⍈ ⍈ ⍈　　U+2348 APL FUNCTIONAL SYMBOL QUAD RIGHTWARDS ARROW ⎘ ⎘ ⎘　　U+2398 NEXT PAGE 

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: (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.

Try |͟&nearr;̱|:

|͟↗̱| 

And for compatibility with Arial

∣͟↗̱∣ 

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

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("") format("truetype"); } a[target='_blank']::after { content: ' \f35d'; font-family: "FontAwesomeSolid"; color: blue; } 

Here's an "external link" symbol from 177 characters of 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>

<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".

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.

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

1:

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.

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" 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>