Components

Icon

Use with caution: Available

Icons help communicate meaning, actions, status, or feedback. This component provides an easy way to access the foundational iconography of the Design System.

Examples

Default

View va-icon in Storybook

Usage

Refer to the U.S. Web Design System for usage guidance

How this component works

This web component provides access to the full suite of U.S. Web Design System iconography as well as additions specific to the VA. The list of available icons is a foundational element of the Design System.

Choosing between icons

Each icon has a chosen semantic meaning and should be used in a manner that is consistent with that meaning. For example, a clock icon is used to represent time and thus should not be ambiguously used to represent a date. Some icons are intentionally used in different applications because they share the same meaning.

Before introducing a new icon check the list to be see if the meaning of the icon you need corresponds to an existing icon. If you have questions about a new icon, or icon usage, feel free to reach out to the Design System team.

Icon Color

By default, the web component icon will display as --vads-color-base which is the base color set across VA.gov. If a different icon color is needed, style can be applied directly to the web component element using CSS. For example:

<va-icon size="4" name="alarm" class="alarm-icon" >

.alarm-icon {
  color: var(--vads-color-white);
}

Icon Sizing Reference

Size Attribute	Icon Preview	Rendered CSS Pixels
`3`		24 x 24
`4`		32 x 32
`5`		40 x 40
`6`		48 x 48
`7`		56 x 56
`8`		64 x 64
`9`		72 x 72

Code usage

Attributes and Properties

Property	Attribute	Type	Description
`icon`	`icon`	`string`	The name of the icon to use
`size`	`size`	`number`	The size variant of the icon, an integer between 3 and 9 inclusive
`srtext`	`srtext`	`string`	Screen-reader text if the icon has semantic meaning and is not purely decorative.