How to use iconography to inform readers about external links

Appending external links with icons that denote context improves the user experience and can increase high-intent clicks.

The destination of links on web pages is a mystery for most readers. Tech-savvy users know they can hover over or long-press a link to view the URL, but it still requires the user to take action to understand better the context of the link.

Aside from descriptive anchor text, using a visual cue is the best method to inform readers about a link’s attributes. The most commonly used visual cue is an icon with a box and arrow displayed at the end of an external link. The icon visually communicates to the reader that the link will take them away to a different site.

Wikipedia References and external link icon
Wikipedia uses icons for external links

Similar to what Wikipedia does, there’s an opportunity for web designers to provide more context to readers by extending the design pattern for external link icons and making them more specific. For example, alternative icons can denote links to social profiles, identify affiliate links, and highlight links to documents such as PDFs.

Before getting into the technical details of automatically appending links with icons using CSS and SVG images, here are a few real-life examples on Coywolf.

Articles on Coywolf frequently link to Wikipedia articles. The primary reason for linking to Wikipedia is to make it easy for readers to learn more about a topic if they aren’t familiar with it. Icons can be used to denote a reference link to a Wikipedia topic such as machine learning or a dictionary site for an unusual word like neuromerism.

Social profiles and posts

When articles on Coywolf reference a person, a link is added to their Twitter or LinkedIn profile. Appending those links with the social network’s logo helps the reader infer the link destination. For example, this is what it looks like when I link to my Twitter, LinkedIn, and Reddit profile pages:

The FTC guidelines recommend that sites conspicuously disclose affiliate relationships and links. Disclosures should appear above the fold and before the body of the article. Coywolf Reviews appends an icon to affiliate links, like this Fathom Analytics link, and uses the disclosure statement to communicate that links appended with the icon are affiliate links.

FTC affiliate disclosure
Affiliate disclosure used on Coywolf Reviews

Document types

Appending icons to document links help users know what to expect before clicking on them. It can be disorienting when a reader clicks on a link expecting a web page and gets a document instead. For example, it’s evident to the reader that the link to this FTC Endorsement and Testimonial Guide is a PDF.

1. Find the best icon

The first step is to find and choose the best icon for each link type. I recommend using SVG vector images instead of raster images like JPG, PNG, and WebP. SVGs are the optimal format for icons, and they will perfectly scale for users with zoomed-in views. The best source for SVG icons is The Noun Project, and if you need a logo for a brand, check out World Vector Logo or Logo SVG.

2. Optimize the image

The second step is to remove any white space around the SVG image and change the color optionally. I recommend using Boxy SVG, which is available as a PWA in Chrome and as a native app for Linux and macOS. In Boxy SVG, I choose Select All and then Export. When I export and save it as an SVG image, Boxy SVG will crop and remove the white space from the sides (if they are present).

Boxy SVG app
Editing and exporting an SVG image in Boxy SVG

3. Copy the image to the server

The third step is to copy the images to the web server. In the example code below, the images have been copied to the site’s root folder (i.e. https://coywolf.pro/affiliate.svg).

4. Add the CSS

The selector part of the CSS does four things:

  1. Selects the anchor link element: a
  2. Selects an attribute of the anchor element: href
  3. Matches the attribute’s value: *= "twitter.com"
  4. Uses a pseudo-element to place the icon after the link text: :after

The full selector, which matches twitter.com links for the example, look like this:

The declaration part of the CSS does four things:

  1. Displays the image inline with the link text: display:inline-block;
  2. Inserts a space and the icon image after the link text: content: " " url(/twitter.svg);
  3. Sets the width of the image, which may need to be adjusted based on the dimensions of the image: width:1.7rem;
  4. Sets the padding between the link text and the image, which may need to be adjusted: padding-left:.2rem;

The full CSS, which makes the icon appear after this link to Twitter, looks like this:

You may have noticed the article element in the code example. I use the article element to contain article content. I recommend only applying this technique to links within an article. Otherwise, it may adversely affect links used in other page parts, including the navigation. If you use something different, replace the article element with the element or class you use.

As previously stated, this technique can be used for document types. To match a document type, use its file extension.

Lastly, I recommend matching the rel attribute instead of the href attribute for affiliate links. All affiliate links should use rel="sponsored", and if they do, the CSS below will display the affiliate icon for every link using the sponsored attribute value.

Additional considerations when choosing icons

You will likely need some patience as you attempt to find the best icon for your needs. I spent countless hours finding and testing icons. Ones that I thought were perfect were unrecognizable when shrunk down, and others didn’t convey the message I wanted.

I recommend picking icons that are bold and minimal. You will want to avoid icons with small design elements, like a bookmark on a book. A small design element like that won’t be legible.

Lastly, I’ve loved working on this project. I’m pleasantly surprised each time I read an article on Coywolf, and there’s a PDF, Twitter, or an affiliate icon. I think the icons elevate how the content looks and improves the UX. I hope you’ll consider trying this with your sites.

Jon is the founder of Coywolf and the EIC and the primary author reporting for Coywolf News. He is an industry veteran with over 25 years of digital marketing and internet technologies experience. Follow @henshaw