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.
The icon component is not interactive on its own and will not emit events. However, it can be used in interactive elements.
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.
For available icon sizes, visit Style - Icons
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.