Icon

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.

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.

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

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.

Primary
Emphasized
Inverse (This Variant must be manualy created in Sketch)
Info
Error

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.

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