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.


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.



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.



View va-icon in Storybook


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.

How to migrate from Font Awesome to va-icon

Follow our detailed instructions on how to migrate to va-icon.

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 Default 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.
Edit this page in GitHub (Permissions required)
Last updated: Apr 12, 2024