Foundation
Icons
We currently leverage Font Awesome (v1) v5.15.4 but are migrating to USWDS icons (v3) with some additions for VA-specific use cases.
Appointments
| 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 |
Feedback
| 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 |
Health
| 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) |
Hub
| 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 |
Identification
| 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 |
Interaction
| 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 |
Messaging
| Icon v3 | Icon v3 name | Icon v1 | FontAwesome class | Usage |
|---|---|---|---|---|
|
|
attach_file | fas fa-paperclip | Attachment | |
|
|
folder | fas fa-folder | Content folder, Move | |
|
|
fas fa-envelope | Message, letter, Subscribe to news, notifications, or updates (Facilities) | ||
|
|
fas fa-print | |||
|
|
undo | fas fa-reply | Reply | |
|
|
chat | Secure messaging |
Navigation
| 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 |
Profile
| 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 |
Social
| Icon v3 | Icon v3 name | Icon v1 | FontAwesome class | Usage |
|---|---|---|---|---|
|
|
app_store | Apple App Store | ||
|
|
fab fa-facebook | |||
|
|
flickr | fab fa-flickr | Flickr | |
|
|
google_play | Google Play Store | ||
|
|
fab fa-instagram | |||
|
|
fab fa-twitter | |||
|
|
fab fa-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
spantag. Include a CSS class to visually hide this text, while keeping it visible to assistive technology. titleattribute 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>
</a>
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>
</a>