Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

August updates! We reorganized our patterns in August.

Foundation

Icons

We leverage Font Awesome icons to communicate meaning, action, status, or feedback.

Accessibility

  • When using a decorative icon, it shouldn’t be read out to screen-reader users because it doesn’t add to their understanding. Icons should be accompanied with text.
  • All interactive accessible icons must be keyboard accessible and touch accessible as well as clickable via a mouse.

When to use role="img"

If an icon is being used alone (without support text), it should have a role="img" AND appropriate ARIA markup OR screen reader only descriptive text.

When to use role="presentation"

If an icon is being used with visual (and assistive device) text, it should have role="presentation".

Examples:

Here are a few examples of icons being used in different contexts:

Icon being used alone

<IconHelp color={'#000000'} cssClass={'a-class'} id={'icon-help'} role={'img'} ariaLabel={'Help'} />

Icon being used with supporting text

<IconHelp color={'#000000'} cssClass={'a-class'} id={'icon-help'} role={'presentation'} ariaLabel={'Help'} />
Help

Icon being used alone inside an <a> tag

<a href="#">
  <IconHelp color={'#000000'} cssClass={'a-class'} id={'icon-help'} role={'img'} ariaLabel={'Help'} />
</a>

icon being used with supporting text inside an <a> tag

<a href="#">
  <IconHelp color={'#000000'} cssClass={'a-class'} id={'icon-help'} role={'presentation'} ariaLabel={'Help'} />
  Help
</a>
Icon HTML Unicode Usage
<i class="fas fa-angle-double-left"></i> &#xf100; Previous
<i class="fas fa-angle-double-right"></i> &#xf101; Next
<i class="fas fa-search"></i> &#xf002; Search

Interaction

Icon HTML Unicode Usage
<i class="fas fa-sort"></i> &#xf0dc; Form field dropdown
<i class="fas fa-chevron-down"></i> &#xf078; Dropdown expand indicator
<i class="fas fa-chevron-up"></i> &#xf077; Dropdown collapse indicator
<i class="fas fa-plus"></i> &#xf067; Accordion expand indicator
<i class="fas fa-minus"></i> &#xf068; Accordion collapse indicator
<i class="fas fa-times"></i> &#xf00d; Close indicator (modals, alerts)
<i class="fas fa-plus"></i> &#xf067; Add item
<i class="fas fa-trash"></i> &#xf1f8; Remove item

Feedback

Icon HTML Unicode Usage
<i class="fas fa-info-circle"></i> &#xf05a; Informational
<i class="fas fa-check-circle"></i> &#xf058; Confirmation or completion
<i class="fas fa-exclamation-triangle"></i> &#xf071; Warning
<i class="fas fa-exclamation-circle"></i> &#xf06a; Error

Identification

Icon HTML Unicode Usage
<i class="fas fa-phone"></i> &#xf095; Telephone number
<i class="fas fa-map-marker"></i> &#xf041; Location or address
<i class="fas fa-road"></i> &#xf018; Driving directions
<i class="fas fa-globe"></i> &#xf0ac; Website address
<i class="fas fa-question-circle"></i> &#xf059; Help or contact information
<i class="fas fa-cog"></i> &#xf013; Settings
<i class="fas fa-folder"></i> &#xf07b; Content folders (messaging)
<i class="fas fa-paperclip"></i> &#xf0c6; Attachment (messaging)
<i class="fas fa-calendar"></i> &#xf133; Duration (days/months/years)
<i class="fas fa-envelope"></i> &#xf0e0; Message, notfication, letter
<i class="fas fa-user-circle"></i> &#f2bd; Homepage sign in button icon

Hub icons

Icon HTML Unicode Usage
<i class="fas fa-medkit"></i> &#f0fa; Healtcare hub icon
<i class="fas fa-file-alt"></i> &#f15c; Disability hub icon
<i class="fas fa-graduation-cap"></i> &#f19d; Education hub icon
<i class="fas fa-id-card"></i> &#f2c2; Records hub icon
<i class="fas fa-briefcase"></i> &#f0b1; Careers hub icon
<i class="fas fa-handshake"></i> &#f2b5 Pension hub icon
<i class="fas fa-home"></i> &#f015; Housing hub icon
<i class="fas fa-shield-alt"></i> &#f3ed; Life Insurance hub icon
<i class="fas fa-star"></i> &#f005; Burials hub icon

Social media icons

Icon HTML Unicode Usage
<i class="fab fa-twitter"></i> &#f099; Twitter links
<i class="fab fa-facebook"></i> &#f090; Facebook links
<i class="fab fa-youtube"></i> &#f167; Youtube links
<i class="fab fa-instagram"></i> &#f16d; Instagram links
Edit this page in GitHub (Permissions required)
Last updated: May 25, 2022