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

external_link_arrow.txt

↗

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