An official website of the United States government
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.
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
fas fa-circle-check
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
acute
In progress status
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)
local_shipping
Shipped items, Mobile app
pill
Medications
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
refresh
Reload view, Mobile app
delete
fas fa-trash-alt
Remove or delete item
cancel
fas fa-circle-xmark
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
inbox
Inbox, Messaging, Mobile app
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
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
fact_check
Submitted
work
fas fa-suitcase
Travel reimbursement
Social
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
developer.va.gov
Icon v3
Icon v3 name
Icon v1
FontAwesome class
Usage
key
Authentication
sell
Tags
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, _do not_ include srtext on the component. The component will add an aria-hidden attribute to the icon for accessibility.
Icon buttons containing a decorative icon plus a visual label are supported with Button - Icon, but with limited options. Rather than supporting any text and icon combination, these will be added on a case-by-case basis. Generally, we feel that icons in buttons are not necessary.
Using semantic icons
We do not advise using icons as links or buttons on their own. Links and buttons should always have a visible label.
Exceptions to this are a close button on a modal or an alert. However, it is advised to use the design system component for these scenarios, as they are coded with the proper accessibility attributes.