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.

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.

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.

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

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.

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.

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

Its comment is "overlapping offset windows".

HTML entity: 🗗

(fileformat.info)

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

↗️ or ↗

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

Html is ↗

Try |͟↗̱|:

|͟↗̱|

And for compatibility with Arial

∣͟↗̱∣

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

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>

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>

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;
}

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.

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

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>