What is the best practice for showing an Icon next to text [closed]

Question

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?

Quadrillion

Is there a unicode character for that icon? Or should I use an image? – Bushel

@collimarco, he is using an image in the question. It's not an icon. – Tupiguarani

Answer 1

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.

Umbilical

Yes, thanks that confirms my suspisions. I guess that the one thing the internet isn't is 'consistent' – Quadrillion

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) – Rostov

@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. – Gaston

I combined Ben's icon with John's CSS and ended up with a nice solution :) – Elmoelmore

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. – Zonked

Regarding accessibility, you can add an accessible name after a forward slash in a CSS content chunk, e.g. a[download]::before {content:"\2B73" / "download";} – Greenfinch

Answer 2

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>

Cristinacristine

@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 – Antimony

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. – Ravenravening

This is definitely better than including a whole custom font, just to add a link-out icon =p – Errata

this solution works well; although, due to a dark background, i had to edit the image and find an online converter from my png image to the base64 string. resizing the image requires another lap around the create-convert track, but display:inline-block; vertical-align:text-top; finished off my display issues. thank you. – Prenatal

Pretty neat, but it doesn't scale with the font. :( – Aharon

@GregPettit Very true... I am sorry about that... :-) – Antimony

An data URI of an SVG would scale nicely, whereas the PNG does not. – Differ

How do we change it's color from black to white? – Beastly

Adding 'filter' css property did the trick! filter: brightness(0) invert(1); – Beastly

is there a way to change the color? – Unpaidfor

@SagivOfek I don't know :-( – Antimony

See paul's answer down the line. Scalable and color-editable! – Marmolada

Answer 3

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.

Sartorius

I doubt any of these symbols would be recognized by the majority of users as a symbol for an external link. – Fraternal

I doubt making a criticism without offering something objectively better will do the world any good. – Sartorius

Answer 4

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

↗️ or ↗

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

Html is ↗

Dorice

Is there an easy way to change its color? – Suffolk

It's just text so <span style="color: purple">&#x2197;</span> should do it. – Dorice

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 – Levitan

Answer 5

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

Its comment is "overlapping offset windows".

HTML entity: 🗗

---

(fileformat.info)

Elexa

Not supported in Mac OS, 2017. – Gentianella

I wouldn't rely on this one ... in Windows 10, Google Chrome, it doesn't work in March 2021. – Noddle

Answer 6

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.

Jutta

@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 #1900272 – Conferva

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 – Abel

Answer 7

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

Boeotia

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. – Boeotia

Superb turn-key solution. Thank you! 🙏🏽 – Manganate

Ab-so-lute-ly fabulous! And on that icons8 page you can also change the color and give it a transparant background. Exactly what I needed! :-) – Marmolada

Answer 8

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

Unhallow

you could rotate it with css to get north east – Nullification

I don't think that was an option when they were created, but yeah for css it works. – Unhallow

Answer 9

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

Trod

Answer 10

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>

Duplication

nice, but the result I get when I press "run code snippet" doesn't look like that image – Inspectorate

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. – Wholly

@Wholly You are right, so I added a second options that works without altering the html. – Duplication

Answer 11

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.

Conferva

Answer 12

Try |͟↗̱|:

|͟↗̱|

And for compatibility with Arial

∣͟↗̱∣

Degreeday

Answer 13

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

Standpoint

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. – Dick

Answer 14

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

Disencumber

Answer 15

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.

Pernickety

Answer 16

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.

Isbella

Might want to crop that icon. – Recorder

Answer 17

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>

Sporogonium

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Mangum

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Stout

Thanks for the comments. Origin edited to expand upon original answer. – Sporogonium