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.

Spring updates Design System releases are now documented after every sprint!

Foundation

Icons

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.

Appointments

Icon Value Usage calendar_today Duration (days/months/years), Link - Calendar location_city In-person appointment phone Phone appointment schedule Time (hours/minutes) tty TTY videocam Video appointment

Feedback

Icon Value Usage info Informational, Alert - Info check_circle Confirmation or completion, Alert - Success warning Warning, Alert - Warning error Error, Alert - Error lock Sign in or tool prompt, Alert - Continue check Confirmation or completion, Process List

Health

Icon Value Usage acute In progress status assignment Lab and test results (Facilities), Compare GI benefits by school (Profile) adjust Health care facility operating status (Facilities) hearing_disabled Hearing aid (Facilities) local_shipping Shipped items, Mobile app pill Medications

Hub

Icon Value Usage star Burials work Careers and employment, On-the-job Training (GI Bill Comparison tool) description Disability school Education, VA education and benefits (Profile) groups Family member benefits medical_services Healthcare home Housing shield Life Insurance handshake Pension identification Records flag Service member benefits

Identification

Icon Value Usage phone Telephone number phone_iphone Phone, Telephone number in Crisis Line modal location_on Location or address directions Driving directions language Website address help Help or contact information settings Settings account_circle Homepage sign in button campaign Announcement

Interaction

Icon Value Usage add Accordion expand indicator, Add item remove Accordion collapse indicator close Close indicator (modals, alerts) file_download Download item, Link - Download expand_more Dropdown expand indicator expand_less Dropdown collapse indicator unfold_more Form field dropdown refresh Reload view, Mobile app delete Remove or delete item cancel Cancel an action autorenew Loading indicator filter_alt Filter filter_list List filter

Messaging

Icon Value Usage attach_file Attachment folder Content folder, Move inbox Inbox, Messaging, Mobile app mail Message, letter, Subscribe to news, notifications, or updates (Facilities) print Print undo Reply chat Secure messaging Icon Value Usage navigate_far_before Previous navigate_far_next Next launch External link navigate_next Link - Active component navigate_before Pagination - Navigate previous arrow_downward Navigate page down arrow_back Navigate page up search Search youtube Channel, Link - Channel, YouTube (Social) play_circle Video, Link - Video

Profile

Icon Value Usage event_available Appointment assignment_turned_in Claims and appeals request_quote Debt attach_money Direct Deposit, Profile - Check your GI bill statement of benefits forum Messages note_add Medical records how_to_reg Payment history medication Prescriptions fact_check Submitted work Travel reimbursement

Social

Icon Value Usage app_store Apple App Store facebook Facebook flickr Flickr google_play Google Play Store instagram Instagram twitter Twitter linkedin LinkedIn x X

developer.va.gov

Icon Value 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:

  1. 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.
  2. 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.

  3. Submit Your Icon: Once you've found a suitable icon for VADS, submit it using the following link:

    Request a new addition to the Design System

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.

Edit this page in GitHub (Permissions required)
Last updated: Mar 21, 2025