Icons for Links

There are three standard icons for text links, each an arrow either before or after the link text.

  1. Icon Types
  2. Usage
  3. Disabled Links

Icon Types

There are three types of link icon.

  • icon-arrow, the usual orange arrow to the left of the link.
  • icon-arrow-back, an orange arrow to the left of the link, pointing backwards.
  • icon-arrow-forward, an orange arrow to the right of the link, pointing forward – for example for links that point to the next step in an ongoing process.
Links with different link icons
<a href="#" class="icon-arrow">Standard link icon</a>

<a href="#" class="icon-arrow-back">I'm backin' out</a>

<a href="#" class="icon-arrow-forward">Follow the man in that Taxi!</a>

Usage

All link icon classes can be applied either to lists containing a number of links, or to individual links.

Link icons on lists and individual links
<ul class="icon-arrow">
    <li><a href="#">One link</a></li>
    <li><a href="#">Another link that has a lot more words than the others because that's good for conversion, right?</a></li>
    <li><a href="#">One too many</a></li>
</ul>

<a href="#" class="icon-arrow">Who</a>
<a href="#" class="icon-arrow">Needs</a>
<a href="#" class="icon-arrow">Lists</a>
<a href="#" class="icon-arrow">Anyway</a>

Disabled Links

All link icons have an inactive state for when you disable the link.

Disabled links
<a href="#" class="icon-arrow">Active</a><br />
<a href="#" class="icon-arrow disabled">Disabled</a>

<a href="#" class="icon-arrow-back">Active</a><br />
<a href="#" class="icon-arrow-back disabled">Disabled</a>

<a href="#" class="icon-arrow-forward">Active</a><br />
<a href="#" class="icon-arrow-forward disabled">Disabled</a>