Skip to main content

Icons

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

Icon library​

Refer to the VA Design System for additional guidance

Appointments​

Communication​

Feedback​

Form fields​

Health​

Interaction​

Messaging​

Payments​

Prescriptions​

Social media​

Other​

Note: The VA Mobile App icon library includes several icons that are not included in the VA Design System. These include:

  • check_box — used for form fields
  • crop_square — used for bullets
  • description_outlined — used for navigation
  • home_outlined — used for navigation
  • indeterminate_check_box — used for form fields
  • medical_services_outlined — used for navigation
  • radio_button_checked — used for form fields
  • request_quote_outlined — used for navigation

Icon component​

The Icon component should be used to display icons in the mobile app. It includes all icons from the Icon Library. See the component in Storybook.

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.

Refer to the VA Design System for accessibility considerations

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.
    • Also, note that all Material Design Icons are 24dp x 24dp and have 2dp of padding surrounding the live area. For more information, see the documentation from Material Design.

  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.