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.

Winter updates! We updated and added 8 patterns in the previous quarter.

Foundation

Icons

We leverage Font Awesome (v5.15.4) icons to communicate meaning, action, status, or feedback.

Feedback

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

Health

Icon HTML Unicode Usage
<i class="fas fa-clipboard-list"></i> &#xf46d; Lab and test results (Facilities), Compare GI benefits by school (Profile)
<i class="fas fa-dot-circle"></i> &#xf192; Health care facility operating status (Facilities)
<i class="fas fa-deaf"></i> &#xf2a4; Hearing aid (Facilities)

Hub

Icon HTML Unicode Usage
<i class="fas fa-star"></i> &#xf005; Burials
<i class="fas fa-briefcase"></i> &#xf0b1; Careers and employment, On-the-job Training (GI Bill Comparison tool)
<i class="fas fa-file-alt"></i> &#xf15c; Disability
<i class="fas fa-graduation-cap"></i> &#xf19d; Education, VA education and benefits (Profile)
<i class="fas fa-users"></i> &#xf0c0; Family member benefits
<i class="fas fa-medkit"></i> &#xf0fa; Healthcare
<i class="fas fa-home"></i> &#xf015; Housing
<i class="fas fa-shield-alt"></i> &#xf3ed; Life Insurance
<i class="fas fa-handshake"></i> &#xf2b5; Pension
<i class="fas fa-id-card"></i> &#xf2c2; Records
<i class="fas fa-flag-usa"></i> &#xf74d; Service member benefits

Identification

Icon HTML Unicode Usage
<i class="fas fa-phone"></i> &#xf095; Telephone number
<i class="fas fa-map-marker-alt"></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-user-circle"></i> &#f2bd; Homepage sign in button
<i class="fas fa-bullhorn"></i> &#f0e0; Announcement

Interaction

Icon HTML Unicode Usage
<i class="fas fa-plus"></i> &#xf067; Accordion expand indicator, Add item
<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-download"></i> &#xf019; Download item, Link - Download
<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-sort"></i> &#xf0dc; Form field dropdown
<i class="fas fa-trash-alt"></i> &#xf1f8; Remove or delete item

Messaging

Icon HTML Unicode Usage
<i class="fas fa-paperclip"></i> &#xf0c6; Attachment
<i class="fas fa-folder"></i> &#xf07b; Content folder, Move
<i class="fas fa-envelope"></i> &#xf0e0; Message, letter, Subscribe to news, notifications, or updates (Facilities)
<i class="fas fa-print"></i> &#xf02f; Print
<i class="fas fa-reply"></i> &#xf3e5; Reply
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-chevron-right"></i> &#xf054; Link - Active component
<i class="fas fa-arrow-down"></i> &#xf063; Navigate page down
<i class="fas fa-arrow-up"></i> &#xf062; Navigate page up
<i class="fas fa-search"></i> &#xf002; Search
<i class="fab fa-youtube"></i> &#xf167; Channel, Link - Channel, YouTube (Social)
<i class="fas fa-play-circle"></i> &#xf144; Video, Link - Video

Notifications

Icon HTML Unicode Usage
<i class="fas fa-exclamation-circle"></i> &#xf06a; Urgent - requiring user action
<i class="fas fa-info-circle"></i> &#xf05a; Informational - not requiring user action

Profile

Icon HTML Unicode Usage
<i class="fas fa-calendar-check"></i> &#xf274; Appointment
<i class="fas fa-clipboard-check"></i> &#xf46c; Claims and appeals
<i class="fas fa-file-invoice-dollar"></i> &#xf571; Debt
<i class="fas fa-dollar-sign"></i> &#xf155; Direct Deposit, Profile - Check your GI bill statement of benefits
<i class="fas fa-comments"></i> &#xf086; Messages
<i class="fas fa-file-medical"></i> &#xf477; Medical records
<i class="fas fa-user-check"></i> &#xf4fc; Payment history
<i class="fas fa-prescription-bottle"></i> &#xf485; Prescriptions
<i class="fas fa-suitcase"></i> &#xf0f2; Travel reimbursement

Scheduling

Icon HTML Unicode Usage
<i class="fas fa-calendar"></i> &#xf133; Duration (days/months/years), Link - Calendar
<i class="fas fa-building"></i> &#xf1ad; In-person appointment
<i class="fas fa-phone-alt"></i> &#xf879; Phone appointment
<i class="fas fa-clock"></i> &#xf0e0; Time (hours/minutes)
<i class="fas fa-video"></i> &#xf03d; Video appointment

Social

Icon HTML Unicode Usage
<i class="fab fa-facebook"></i> &#xf090; Facebook
<i class="fab fa-flickr"></i> &#xf16e; Flickr
<i class="fab fa-instagram"></i> &#xf167; Instagram
<i class="fab fa-twitter"></i> &#xf099; Twitter

Accessibility considerations

  • 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

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>
Edit this page in GitHub (Permissions required)
Last updated: Jan 26, 2023