Skip to content

Instantly share code, notes, and snippets.

@miguelmota

miguelmota/external_link_arrow.txt

Last active May 4, 2026 11:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save miguelmota/322c89234d60de578f37d3c6d30f7e41 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save miguelmota/322c89234d60de578f37d3c6d30f7e41 to your computer and use it in GitHub Desktop.
Download ZIP
Unicode UTF-8 external link arrow symbol (closest thing to it)
@rku4er
Copy link
Copy Markdown

rku4er commented Jan 21, 2026

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

@Korb
Copy link
Copy Markdown

Korb commented Mar 21, 2026

But something like this (…) is still welcome.

Nope:

Screenshot 2026-03-21 at 16-02-02 Unicode UTF-8 external link arrow symbol (closest thing to it)

The advantage of using symbols rather than images is that it solves the issue of accessibility when customizing the UI.

@laurens94
Copy link
Copy Markdown

laurens94 commented May 2, 2026

When using these characters, some may be automatically converted to an Emoji (e.g. on iOS Safari).
To fix it, you can use css or append ︎ to it, like this: ⤴︎

More details here: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-variant-emoji

@Baerbeisser
Copy link
Copy Markdown

Baerbeisser commented May 4, 2026

But something like this (…) is still welcome.

The advantage of using symbols rather than images is that it solves the issue of accessibility when customizing the UI.

I meant the specific symbol, not using images instead of symbols.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment