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.
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.
Use cases for contextual icons appended to external links
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.
Reference links
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 Fediverse (i.e., Mastodon), LinkedIn, or Reddit 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 Mastodon, LinkedIn, and Reddit profile pages:
Affiliate links
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.
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.
How to append icons to external links using CSS and SVG images
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).
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/fediverse.svg).
4. Add the CSS
The selector part of the CSS does four things:
- Selects the anchor link element:
a - Selects an attribute of the anchor element:
href - Matches the attribute’s value:
*= "henshaw.social" - Uses a pseudo-element to place the icon after the link text:
:after
The full selector, which matches henshaw.social links, for example, look like this:
The declaration part of the CSS does four things:
- Displays the image inline with the link text:
display:inline-block; - Inserts a space and the icon image after the link text:
content: " " url(/fediverse.svg); - Sets the width of the image, which may need to be adjusted based on the dimensions of the image:
width:1.2rem; - Sets the padding between the link text and the image, which may need to be adjusted:
padding-left:.4rem;
The full CSS, which makes the icon appear after this link to Mastodon, 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 loved working on this project. I’m pleasantly surprised each time I read an article on Coywolf, and there’s a PDF, Wikipedia, Fediverse, 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 @[email protected]