Skip to main content Skip to list of styles
Beta

This is a new service – give us your feedback to help improve it.

Styles

Icons

Use icons sparingly to reinforce call to actions and support small pieces of information such as metadata.

Contents

  1. Call to action icons
  2. Displaying information with icons

Don’t rely on icons alone to convey meaning. Ensure they are hidden from assistive technologies with aria-hidden="true".

Icons should appear alongside text at the same font size. Icons on tna-button elements are itentionally slightly smaller.

Icons are not included in TNA Frontend by default. The icons are defined in a separate CSS file called font-awesome.css which you will also have to include in your application.

Call to action icons

The main call to action button on a page can use an icon to add visual impact. Place the icon on the left of the button.

Avoid using icons in all call to action buttons.

Open this example in new tab

HTML 

<a href="#/explore-the-collection" class="tna-button">
  <i class="fa-solid fa-globe" aria-hidden="true"></i>
  Explore the collection
</a>

Nunjucks 

{% from "nationalarchives/components/button/macro.njk" import tnaButton %}

{{ tnaButton({
  text: "Explore the collection",
  href: "#/explore-the-collection",
  icon: "globe"
}) }}

With call to actions that benefit from an arrow or chevron icon that points to the right, align the icon to the right of the button text.

Open this example in new tab

HTML 

<a href="#/book-a-reading-room" class="tna-button tna-button--icon-right">
  <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
  Book a reading room
</a>

Nunjucks 

{% from "nationalarchives/components/button/macro.njk" import tnaButton %}

{{ tnaButton({
  text: "Book a reading room",
  href: "#/book-a-reading-room",
  icon: "arrow-right",
  rightAlignIcon: true
}) }}

Displaying information with icons

Use a description list to show a list of fields and values. If space allows, the titles can be enhanced with icons.

Open this example in new tab

HTML 

<dl class="tna-dl tna-dl--icon-padding">
  <dt>
    <i class="fa-solid fa-landmark" aria-hidden="true"></i>
    Held by
  </dt>
  <dd>The National Archives, Kew</dd>
  <dt>
    <i class="fa-solid fa-calendar" aria-hidden="true"></i>
    Date
  </dt>
  <dd>1972&ndash;1979</dd>
  <dt>
    <i class="fa-solid fa-database" aria-hidden="true"></i>
    Reference
  </dt>
  <dd>LC 4</dd>
</dl>

Chip lists with icons

For smaller lists of metadata, icons can be used inside a chip list.

Open this example in new tab

HTML 

<dl class="tna-dl-chips">
  <dt>Published</dt>
  <dd>
    <span class="tna-dl-chips__item">
      <i class="fa-solid fa-calendar" aria-hidden="true"></i>
      Saturday 28 June 2014
    </span>
  </dd>
  <dt>Author</dt>
  <dd>
    <a class="tna-dl-chips__item">
      <i class="fa-solid fa-user" aria-hidden="true"></i>
      James Cronan
    </a>
  </dd>
  <dt>Category</dt>
  <dd>
    <a class="tna-dl-chips__item">
      <i class="fa-solid fa-tag" aria-hidden="true"></i>
      Records and research
    </a>
  </dd>
  <dt>Comments</dt>
  <dd>
    <a href="#" class="tna-dl-chips__item">
      <i class="fa-solid fa-comment" aria-hidden="true"></i>
      3 comments
    </a>
  </dd>
</dl>

Back to top