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.


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.



Use icons to communicate meaning, action, status, or feedback.

We currently leverage Font Awesome (v1) v5.15.4 but are migrating to USWDS icons (v3) with some additions for VA-specific use cases.


Icon v3 Icon v3 name Icon v1 FontAwesome class Usage
calendar_today fas fa-calendar Duration (days/months/years), Link - Calendar
location_city fas fa-building In-person appointment
phone fas fa-phone-alt Phone appointment
schedule fas fa-clock Time (hours/minutes)
tty TTY
videocam fas fa-video Video appointment


Icon v3 Icon v3 name Icon v1 FontAwesome class Usage
info fas fa-info-circle Informational, Alert - Info
check fas fa-check Confirmation or completion, Alert - Success
warning fas fa-exclamation-triangle Warning, Alert - Warning
error fas fa-exclamation-circle Error, Alert - Error


Icon v3 Icon v3 name Icon v1 FontAwesome class Usage
assignment fas fa-clipboard-list Lab and test results (Facilities), Compare GI benefits by school (Profile)
adjust fas fa-dot-circle Health care facility operating status (Facilities)
hearing_disabled fas fa-deaf Hearing aid (Facilities)


Icon v3 Icon v3 name Icon v1 FontAwesome class Usage
star fas fa-star Burials
work fas fa-briefcase Careers and employment, On-the-job Training (GI Bill Comparison tool)
description fas fa-file-alt Disability
school fas fa-graduation-cap Education, VA education and benefits (Profile)
groups fas fa-users Family member benefits
medical_services fas fa-medkit Healthcare
home fas fa-home Housing
shield fas fa-shield-alt Life Insurance
handshake fas fa-handshake Pension
identification fas fa-id-card Records
flag fas fa-flag-usa Service member benefits


Icon v3 Icon v3 name Icon v1 FontAwesome class Usage
phone fas fa-phone Telephone number
phone_iphone Phone, Telephone number in Crisis Line modal
location_on fas fa-map-marker-alt Location or address
directions fas fa-road Driving directions
language fas fa-globe Website address
help fas fa-question-circle Help or contact information
settings fas fa-cog Settings
account_circle fas fa-user-circle Homepage sign in button
campaign fas fa-bullhorn Announcement


Icon v3 Icon v3 name Icon v1 FontAwesome class Usage
add fas fa-plus Accordion expand indicator, Add item
remove fas fa-minus Accordion collapse indicator
close fas fa-times Close indicator (modals, alerts)
file_download fas fa-download Download item, Link - Download
expand_more fas fa-chevron-down Dropdown expand indicator
expand_less fas fa-chevron-up Dropdown collapse indicator
unfold_more fas fa-sort Form field dropdown
delete fas fa-trash-alt Remove or delete item


Icon v3 Icon v3 name Icon v1 FontAwesome class Usage
attach_file fas fa-paperclip Attachment
folder fas fa-folder Content folder, Move
mail fas fa-envelope Message, letter, Subscribe to news, notifications, or updates (Facilities)
print fas fa-print Print
undo fas fa-reply Reply
chat Secure messaging
Icon v3 Icon v3 name Icon v1 FontAwesome class Usage
navigate_far_before fas fa-angle-double-left Previous
navigate_far_next fas fa-angle-double-right Next
launch fas fa-external-link-alt External link
navigate_next fas fa-chevron-right Link - Active component
navigate_before fas fa-chevron-left Pagination - Navigate previous
arrow_downward fas fa-arrow-down Navigate page down
arrow_back fas fa-arrow-up Navigate page up
search fas fa-search Search
youtube fab fa-youtube Channel, Link - Channel, YouTube (Social)
play_circle fas fa-play-circle Video, Link - Video


Icon v3 Icon v3 name Icon v1 FontAwesome class Usage
event_available fas fa-calendar-check Appointment
assignment_turned_in fas fa-clipboard-check Claims and appeals
request_quote fas fa-file-invoice-dollar Debt
attach_money fas fa-dollar-sign Direct Deposit, Profile - Check your GI bill statement of benefits
forum fas fa-comments Messages
note_add fas fa-file-medical Medical records
how_to_reg fas fa-user-check Payment history
medication fas fa-prescription-bottle Prescriptions
work fas fa-suitcase Travel reimbursement


Icon v3 Icon v3 name Icon v1 FontAwesome class Usage
app_store Apple App Store
facebook fab fa-facebook Facebook
flickr fab fa-flickr Flickr
google_play Google Play Store
instagram fab fa-instagram Instagram
twitter fab fa-twitter Twitter
linkedin fab fa-linkedin LinkedIn
x X

Accessibility considerations

Icon usage typically falls into two categories, decorative and semantic.

  • Decorative icons are icons that are only used for visual reinforcement. If these were removed from the page, users would still be able to understand and use the page.
  • Semantic icons are icons that convey meaning, rather than only being decorative. This includes icons without text next to them that are used as interactive elements such as buttons.

Using decorative icons

If your icons are only decorative, manually add an aria-hidden attribute to the icon for accessibility.

Using semantic icons

If your icons have semantic meaning, you have to manually add a few things to make it accessible. There are two methods, non-interactive and interactive, so choose the one that suits your use case.

Non-interactive icons

Ideally, any icon would also have a visible label associated with it. But if you must use an icon without a visible label, follow the guidance below to make it accessible.

For icons used on non-focusable elements, manually add the following for accessibility:

  • aria-hidden="true" attribute.
  • A text-alternative inside of a span tag. Include a CSS class to visually hide this text, while keeping it visible to assistive technology.
  • title attribute on the icon to provide a tooltip for sighted mouse users.
Non-interactive example
<i aria-hidden="true" class="fas fa-car" title="Time to complete"></i> 
<span class="sr-only"/>Time to complete:</span>
<span>4 minutes</span>

Interactive icons

If an icon is a focusable interactive element, you do not need to add visually hidden alternative text as described above. In this case, an aria-label with a text description on the interactive element is sufficient. A title attribute can also be added to provide a tooltip for sighted mouse users.

Interactive example

In this example, the link element contains the alternative text, the icon inside of it is decorative.

<a href="#" aria-label="View inbox, you have unread messages">
  View inbox <i aria-hidden="true" class="fas fa-circle"></i>

As stated earlier, ideally, the following example would have a visible text label. Use this example with caution.

<a href="#" aria-label="View calendar">
  <i aria-hidden="true" class="fas fa-calendar" title="View calendar"></i>
Edit this page in GitHub (Permissions required)
Last updated: Mar 28, 2024