Icon

Web Components Aetna CVS View in Storybook

A graphic symbol that visually supplements actions a user can take, ways to navigate or important information they need to understand.

Types

For a full list of available icons please see the icon style guide.

Default

Usage

Icons should primarily be used to visually supplement actions a user can take, ways to navigate or important information they need to understand.

Note: By default, the Icon component is ignored by screen readers. To change that, you will need to specify an ARIA label property in the component.

Behavior

The icon component is not interactive on its own and will not emit events. However, it can be used in interactive elements.

Visual Style

Icons are sized to fit the area within their bounding box, either top to bottom, left to right, or both.

Variants

Below are different ways to display the default Icon visually.

Note: Warning and Success are pending review.

Size

For available icon sizes, visit Style - Icons

Content Strategy

for information on how to write alt text for icons, visit Guidelines on writing Alternative Text for non-decorative icons

Accessibility

Annotating for EDDS Properties

Most components have a set of specific EDDS properties used by Engineering which may differ in meaning compared with the HTML Living Standard. The following identifies the most design-relevant properties and their usage guidelines that should be considered when using the component.

ariaLabel

The purpose of this property is to provide the user with a recognizable understanding of the icon’s meaning via assistive technologies. Although, in general, icons are designed to be decorative so their accessible name should be null (““). This is their default behavior. However, if the icon does convey new information then a short, concise, clear, and unambiguous name should be provided. To learn more on this read the Guidelines on writing Alternative Text for non-decorative icons.