Foundation

Icons

We leverage Font Awesome (v5.15.4) icons to communicate meaning, action, status, or feedback.

Appointments

HTML	Unicode	Usage
`<i class="fas fa-calendar"></i>`	``	Duration (days/months/years), Link - Calendar
`<i class="fas fa-building"></i>`	``	In-person appointment
`<i class="fas fa-phone-alt"></i>`	``	Phone appointment
`<i class="fas fa-clock"></i>`	``	Time (hours/minutes)
`<i class="fas fa-video"></i>`	``	Video appointment

Feedback

HTML	Unicode	Usage
`<i class="fas fa-info-circle"></i>`	``	Informational, Alert - Info, Notifications
`<i class="fas fa-check"></i>`	``	Confirmation or completion, Alert - Success
`<i class="fas fa-exclamation-triangle"></i>`	``	Warning, Alert - Warning
`<i class="fas fa-exclamation-circle"></i>`	``	Error, Alert - Error, Notifications

Health

HTML	Unicode	Usage
`<i class="fas fa-clipboard-list"></i>`	``	Lab and test results (Facilities), Compare GI benefits by school (Profile)
`<i class="fas fa-dot-circle"></i>`	``	Health care facility operating status (Facilities)
`<i class="fas fa-deaf"></i>`	``	Hearing aid (Facilities)

Hub

HTML	Unicode	Usage
`<i class="fas fa-star"></i>`	``	Burials
`<i class="fas fa-briefcase"></i>`	``	Careers and employment, On-the-job Training (GI Bill Comparison tool)
`<i class="fas fa-file-alt"></i>`	``	Disability
`<i class="fas fa-graduation-cap"></i>`	``	Education, VA education and benefits (Profile)
`<i class="fas fa-users"></i>`	``	Family member benefits
`<i class="fas fa-medkit"></i>`	``	Healthcare
`<i class="fas fa-home"></i>`	``	Housing
`<i class="fas fa-shield-alt"></i>`	``	Life Insurance
`<i class="fas fa-handshake"></i>`	``	Pension
`<i class="fas fa-id-card"></i>`	``	Records
`<i class="fas fa-flag-usa"></i>`	``	Service member benefits

Identification

HTML	Unicode	Usage
`<i class="fas fa-phone"></i>`	``	Telephone number
`<i class="fas fa-map-marker-alt"></i>`	``	Location or address
`<i class="fas fa-road"></i>`	``	Driving directions
`<i class="fas fa-globe"></i>`	``	Website address
`<i class="fas fa-question-circle"></i>`	``	Help or contact information
`<i class="fas fa-cog"></i>`	``	Settings
`<i class="fas fa-user-circle"></i>`	`&#f2bd;`	Homepage sign in button
`<i class="fas fa-bullhorn"></i>`	`&#f0e0;`	Announcement

Interaction

HTML	Unicode	Usage
`<i class="fas fa-plus"></i>`	``	Accordion expand indicator, Add item
`<i class="fas fa-minus"></i>`	``	Accordion collapse indicator
`<i class="fas fa-times"></i>`	``	Close indicator (modals, alerts)
`<i class="fas fa-download"></i>`	``	Download item, Link - Download
`<i class="fas fa-chevron-down"></i>`	``	Dropdown expand indicator
`<i class="fas fa-chevron-up"></i>`	``	Dropdown collapse indicator
`<i class="fas fa-sort"></i>`	``	Form field dropdown
`<i class="fas fa-trash-alt"></i>`	``	Remove or delete item

Messaging

HTML	Unicode	Usage
`<i class="fas fa-paperclip"></i>`	``	Attachment
`<i class="fas fa-folder"></i>`	``	Content folder, Move
`<i class="fas fa-envelope"></i>`	``	Message, letter, Subscribe to news, notifications, or updates (Facilities)
`<i class="fas fa-print"></i>`	``	Print
`<i class="fas fa-reply"></i>`	``	Reply

HTML	Unicode	Usage
`<i class="fas fa-angle-double-left"></i>`	``	Previous
`<i class="fas fa-angle-double-right"></i>`	``	Next
`<i class="fas fa-chevron-right"></i>`	``	Link - Active component
`<i class="fas fa-arrow-down"></i>`	``	Navigate page down
`<i class="fas fa-arrow-up"></i>`	``	Navigate page up
`<i class="fas fa-search"></i>`	``	Search
`<i class="fab fa-youtube"></i>`	``	Channel, Link - Channel, YouTube (Social)
`<i class="fas fa-play-circle"></i>`	``	Video, Link - Video

Notifications

Icon	HTML	Unicode	Usage
	`<i class="fas fa-exclamation-circle"></i>`	``	Urgent - requiring user action
	`<i class="fas fa-info-circle"></i>`	``	Informational - not requiring user action

Profile

HTML	Unicode	Usage
`<i class="fas fa-calendar-check"></i>`	``	Appointment
`<i class="fas fa-clipboard-check"></i>`	``	Claims and appeals
`<i class="fas fa-file-invoice-dollar"></i>`	``	Debt
`<i class="fas fa-dollar-sign"></i>`	``	Direct Deposit, Profile - Check your GI bill statement of benefits
`<i class="fas fa-comments"></i>`	``	Messages
`<i class="fas fa-file-medical"></i>`	``	Medical records
`<i class="fas fa-user-check"></i>`	``	Payment history
`<i class="fas fa-prescription-bottle"></i>`	``	Prescriptions
`<i class="fas fa-suitcase"></i>`	``	Travel reimbursement

HTML	Unicode	Usage
`<i class="fab fa-facebook"></i>`	``	Facebook
`<i class="fab fa-flickr"></i>`	``	Flickr
`<i class="fab fa-instagram"></i>`	``	Instagram
`<i class="fab fa-twitter"></i>`	``	Twitter

Accessibility considerations

When using a decorative icon, it shouldn’t be read out to screen-reader users because it doesn’t add to their understanding. Icons should be accompanied with text.
All interactive accessible icons must be keyboard accessible and touch accessible as well as clickable via a mouse.

When to use `role="img"`

If an icon is being used alone (without support text), it should have a `role="img"` AND appropriate ARIA markup OR screen reader only descriptive text.

When to use

If an icon is being used with visual (and assistive device) text, it should have `role="presentation"`.

Examples

Here are a few examples of icons being used in different contexts:

Icon being used alone

<IconHelp color={'#000000'} cssClass={'a-class'} id={'icon-help'} role={'img'} ariaLabel={'Help'} />

Icon being used with supporting text

<IconHelp color={'#000000'} cssClass={'a-class'} id={'icon-help'} role={'presentation'} ariaLabel={'Help'} /> Help

Icon being used alone inside an `<a>` tag

<a href="#"> <IconHelp color={'#000000'} cssClass={'a-class'} id={'icon-help'} role={'img'} ariaLabel={'Help'} /> </a>

icon being used with supporting text inside an `<a>` tag

<a href="#"> <IconHelp color={'#000000'} cssClass={'a-class'} id={'icon-help'} role={'presentation'} ariaLabel={'Help'} /> Help </a>