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.


Button - Icon

Also known as: Button - Tertiary

Use with caution: Candidate USWDS v3
The button icon variation acts as a tertiary button which has equal visual prominence to Link - Action and thus can be used in contexts that require a mix of links and buttons.


Change file

View Change file, used in the File input component in Storybook


View Delete, used in the File input component in Storybook


View va-button-icon cancel variation in Storybook


When to use Button - Icon

  • In a Card or other container alongside a primary link. This component is mainly intended to sit alongside a primary link, typically a Link - Active variation, within a Card. This allows the link to visually have the affordance as the primary action and the Button - Icon the affordance of a secondary action.

When to consider something else

  • When a secondary button will suffice. Button - Icon does not replace the Button - Secondary. Only use Button - Icon when Button - Secondary would visually dwarf a link primary action.

How this component works

  • Icon plus uppercase label. These buttons are composed of an icon and an uppercase label. The label is a verb that represents an action that the user is taking. Because the visual style of this button uses uppercase text, labels must be very concise actions and thus are limited to one or two words only. For example, “Change file”, “Delete”, and “Cancel”.

Requesting new instances

The 3 examples above are the only currently approved instances of this component. Use of icons in buttons of any type will be made on a case-by-case basis. If you feel you need an icon for a button, follow the process for requesting a new icon and indicate that you would like to use it in Button - Icon or another button type.

Content considerations

  • Delete is preferred to remove. We prefer words that describe exactly what will happen when you tap or click. Note: Currently, icon and button labels are hard-coded into the component. New icons and labels must be requested following the instructions above.

Accessibility considerations

  • Follow button considerations. This component should follow the same considerations as a typical button.
Edit this page in GitHub (Permissions required)
Last updated: May 20, 2024