Unicode UTF-8 external link arrow symbol (closest thing to it)

external_link_arrow.txt

↗

or maybe one of:

↗ ⬈ ⇗ ➶ ➹ 🡥 🡵 🡽 🢅 ⬈ ⬀ ⭷ 🛪

“🔗” (U+1F517

alternatives are:

⧉, ⧉, ⮺, ⎋, ⏍, ◳, ❐, ⬔, ⭷, ↸, ⇱, ⤯, ↻, ⇲

I found this one which can be useful :

⎘

I found this one ☍

I don't like the emoji link for text, it's too much like a picture. This one is subtler (although... not actually a link)

There's also marriage, but it doesn't render well IMO ⚭

Honestly, this kind of works too ▞

And ⸙

⤴ looked good and relatively easy to infer in my implementation.
Example external link⤴

warning: Using unicode characters may work on your machine, but it may not work on other operating-systems/platforms, or even different fonts.

🗗

There is a Unicode proposal for introduction of external link symbol.

Thanks for sharing. This is interesting.

Waiting for the new Unicode approval, I started using the symbol ⎋ rotated for external links.
https://www.paulox.net/

Waiting for the new Unicode approval, I started using the symbol ⎋ rotated for external links. https://www.paulox.net/

Thank you for the symbol and the rotation hint. I incorporated them to style all external links on my website, (except the social links, which are essentially svg icons): https://bhoot.dev/about/#part-of-small-web

Waiting for the new Unicode approval, I started using the symbol ⎋ rotated for external links. https://www.paulox.net/

Thank you for the symbol and the rotation hint. I incorporated them to style all external links on my website ...

You're welcome 🤗

⤴ looked good and relatively easy to infer in my implementation. Example external link⤴

It does look good. The only issue I have with using that one is that the Markdown footnote extension uses this glyph/character to return you to the footnote anchor point:

To my brain, your glyph reads more like 'jump back up the page' than 'follow an external link'. I'm looking to replace that [Link] text with something more elegant, but using your glyph would definitely introduce confusion in this case.

I don't like the cartoony chain links though.

I really wanted to be able to use the Unicode proposed icon, and I ended up generating a guide on the final approach I took. It's not a unicode character, but it ends up looking great, and can easily be targeted to only external links.

In case it helps someone, here's what I did:

1. Add a text box containing the unicode arrow ↗ in Figma (using the default, permissively licensed, font Inter)
2. Export the SVG
3. Convert it to an inline data URL using https://yoksel.github.io/url-encoder/
4. Specify display: inline-block to allow us to set an height, and set the height in reference to the current font using em units.

Here's a tweaked variant that I ended up using (you might need / want different constants):

/* Add an indicator after external links that'll open in a new window. */
a[target="_blank"]::after {
  /* ↗, but nicer. SVG adapted from Inter's rendition of "↗". */
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 7 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.04261 6.80966L0.377841 6.14489L5.32102 1.19318H1.50284L1.51136 0.272727H6.90625V5.67614H5.97727L5.9858 1.85795L1.04261 6.80966Z' fill='black'/%3E%3C/svg%3E%0A");
  /* inline => inline-block, so that we can give it a height */
  display: inline-block;
  height: 0.5em;
  padding-inline: 0.2em;
  aspect-ratio: 1;
  line-height: 1;
  vertical-align: text-top;

  @media (prefers-color-scheme: dark) {
    filter: invert(100%);
  }
}

Caveat: The SVGs added this way can't use currentColor. For my purpose, the filter: invert in dark mode sufficed to work around this issue. Hopefully there will be a nicer way to do this in the future instead of these shenanigans.

In .md
{target=_blank} ↗️

/* Add an indicator after external links that'll open in a new window. */
a[target="_blank"]::after {
  /* ↗, but nicer. SVG adapted from Inter's rendition of "↗". */
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 7 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.04261 6.80966L0.377841 6.14489L5.32102 1.19318H1.50284L1.51136 0.272727H6.90625V5.67614H5.97727L5.9858 1.85795L1.04261 6.80966Z' fill='black'/%3E%3C/svg%3E%0A");
  /* inline => inline-block, so that we can give it a height */
  display: inline-block;
  height: 0.5em;
  padding-inline: 0.2em;
  aspect-ratio: 1;
  line-height: 1;
  vertical-align: text-top;

  @media (prefers-color-scheme: dark) {
    filter: invert(100%);
  }
}

Nice. Thank you.

I found for the chain link 🔗, I found lower case theta put in italics θ closely resembles it, or this symbol italicized a bit more, ⩉ (looks better in a larger font size) in a gray/normal text color.

Eh, a[href^="http"]:before { content: "⮺"; } is good enough for me. Like ⮺this.

But something like this is still welcome.

⎋ still works best for me, having tried many different combinations across fonts/operating systems over the years.

Using mask-image fixes the icon color issue:

a[target="_blank"]::after {
  content: "";
  display: inline-block;
  vertical-align: text-top;
  margin-left: .2em;
  font-size: 1em;
  height: .6em;
  width: .5em;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 512 512' width='16' height='16'%3E%3Cpath d='M 304.5,-0.5 C 366.5,-0.5 428.5,-0.5 490.5,-0.5C 501.167,2.83333 508.167,9.83333 511.5,20.5C 511.5,82.5 511.5,144.5 511.5,206.5C 501.584,227.306 486.251,232.472 465.5,222C 460.347,217.523 456.847,212.023 455,205.5C 454.667,169.833 454.333,134.167 454,98.5C 375.5,177 297,255.5 218.5,334C 206.598,343.031 194.265,343.697 181.5,336C 167.479,322.809 165.979,308.309 177,292.5C 255.5,214 334,135.5 412.5,57C 376.833,56.6667 341.167,56.3333 305.5,56C 288.961,50.441 281.795,38.941 284,21.5C 287.259,10.7444 294.092,3.41106 304.5,-0.5 Z'/%3E%3Cpath d='M 382.5,511.5 C 278.833,511.5 175.167,511.5 71.5,511.5C 32.4961,502.496 8.49613,478.496 -0.5,439.5C -0.5,335.833 -0.5,232.167 -0.5,128.5C 6.92037,93.5765 27.587,70.4099 61.5,59C 68.0469,57.2228 74.7136,56.2228 81.5,56C 121.167,55.3333 160.833,55.3333 200.5,56C 216.888,58.5531 225.888,68.0531 227.5,84.5C 227.125,99.3742 219.792,108.874 205.5,113C 164.167,113.333 122.833,113.667 81.5,114C 67.559,116.941 59.3923,125.441 57,139.5C 56.3333,235.833 56.3333,332.167 57,428.5C 59.5,443 68,451.5 82.5,454C 178.833,454.667 275.167,454.667 371.5,454C 385.559,451.608 394.059,443.441 397,429.5C 397.333,388.167 397.667,346.833 398,305.5C 403.567,288.95 415.067,281.783 432.5,284C 445.306,287.806 452.806,296.306 455,309.5C 455.667,349.833 455.667,390.167 455,430.5C 451.897,466.246 434.064,491.413 401.5,506C 395.165,508.289 388.831,510.123 382.5,511.5 Z'/%3E%3C/svg%3E%0A");
  mask-repeat: no-repeat;
  mask-size: contain;
}