Is there a default, standard, recommended or well known icon to denote that a link will open a new browser window?
This is for web accessibility reasons. Or is it basically a free for all?
I realize that those that will get the most use out of them (using screen readers) will not even care what the image looks like, and be more interested in the alt text.
Decided to go for this one : ![![new window icon][1].](https://i.stack.imgur.com/ZsU8V.png)
Unless someone can suggest a more widely adopted one?
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 class="external" href="https://example.org" 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:
http://www.fileformat.info/info/unicode/char/29c9/index.htm
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
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
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 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.
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
Haven't seen the following option.
It's just css and ends up like this: 
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>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: 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.
I know I'm late to the party, but FWIW here's my solution ¯\_(ツ)_/¯,
HTML:
<a href="#" target="_blank">Your link</a>
jQuery:
If you know of a vanilla JS version of this, please let us know, I'd be glad to add it here (I'm not a JS developer 😊)
$("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/anon/pen/MBBXjP (this link, for example, SHOULD open in a new window, lol).
For years this technique has been very useful for me because:
title attribute every time I create a link that opens in a new tab.target="_blank" and that's it.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.
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.
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("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;
}
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.
