Foundation
Icons
VADS icons are adapted from USWDS icons and also includes additional icons for VA-specific use cases. Our v1/legacy icon set used Font Awesome v5.15.4.
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_circle | Confirmation or completion, Alert - Success | ||
|
warning | fas fa-exclamation-triangle | Warning, Alert - Warning | |
|
error | fas fa-exclamation-circle | Error, Alert - Error | |
|
lock | fas fa-lock | Sign in or tool prompt, Alert - Continue | |
|
check | fas fa-check | Confirmation or completion, Process List |
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 | |
|
cancel | Cancel an action | ||
|
autorenew | fas fa-spinner | Loading indicator |
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 |
Requesting a new icon
If your team needs a new icon and wants to suggest adding it to the design system, follow these steps:
- Check Existing VADS Icons: Look through the current icon set to ensure a similar icon does not already exist. We aim to maintain consistency in semantic use by avoiding duplicating similar icons.
-
Explore USWDS Icons:
Search
USWDS Icon to see if another existing icon suits your
needs. Preferably, choose generic icons that could be reused in various applications.
If VADS and USWDS do not contain a suitable icon, you may search Material Icons or browse the official Material Design Icons Figma plugin by Google. Note that we typically use the "filled" icon style.
- Submit Your Icon: Once you've found a suitable icon for VADS, submit it using the following link:
These steps should streamline the process for suggesting and adding new icons to the design system.
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>
</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>