Status: 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.


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



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.

Always pair an icon with visible text
Avoid using an icon without visible text


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.


Below are different ways to display the default Icon visually.

Note: Warning and Success are pending review.

Inverse (This Variant must be manualy created in Sketch)


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


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.


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.

Other properties and technical documentation

There also may be HTML attributes or ARIA roles, states, and properties predetermined based on the component’s use case. These can be found whilst inspecting the live components in Storybook - Enterprise Icon.

The full list of EDDS properties and their HTML translations for this component is defined in the Storybook - Developer Documentation.

↑ Back to top