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

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

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:

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:
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.