External link icon

arrowsinterfacealso known as open in new, new tab, outbound
Colors byColorchord

Tap an icon to copy its SVG · copies stay currentColor at 24px — the swatches only tint the preview.

When to use it

The box with an arrow escaping through the corner: this link leaves the current site or app. Use it inline after the link text at roughly cap height, and reserve it for genuinely external destinations — decorating every link kills the signal. Heroicons names it arrow-top-right-on-square and Phosphor arrow-square-out, so don't give up when 'external' returns nothing.

Reach for the box-with-an-outbound-arrow to warn that a link leaves the current context — opens a new tab, or jumps to another site. It's an honesty marker: it sets the expectation that the user is about to navigate away. Keep it clear of share, which sends content to people, and of download, which lands a file on the device. It annotates a link; it is rarely a standalone button.

  • Reaching for Share? Reach for the share glyph when the user sends content outward rather than following a link elsewhere.
  • Reaching for Link? Reach for the chain when you mean a link or 'copy link', not specifically that it opens externally.
Every set here is open-licensed for commercial use with no attribution required in your product — the notices their licenses do require live on our set pages. No accounts, no download walls.

Related icons