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

external_link_arrow.txt

↗

⤴ 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} ↗️