Skip to main content

Icon

Used to implement icons and adapt their properties.

github
View source code
import { Icon } from '@uhg-abyss/web/ui/Icon';
() => {
  const customIcon = (
    <svg height="24" width="24" viewBox="0 0 16 16">
      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
    </svg>
  );


  return (
    <Icon size="24px" title="github">
      {customIcon}
    </Icon>
  );
};

Usage​

Use Icon to implement custom SVG icons

Colors​

Use the color prop to set the color of the icon. This prop accepts any valid CSS color identifieropens in a new window (RGB, HSL, named color, etc.) as well as Abyss color tokens. The default value is '$web.semantic.color.icon.interactive.rest.tertiary'.

Color contrast

Icon colors must meet the minimum 3:1 contrast ratio for non-text elements as per WCAG 2.1 guidelinesopens in a new window.

Size​

Use the size property to adjust the size of an icon. This prop accepts a number or a token value. The default value is 24px.

Icon Props​

Name
Type
DefaultA11yDescription
children
string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined
The children of the Icon component
className
string | undefined
CSS class name to apply to each element within the component
color
string | undefined
'$web.semantic.color.icon.interactive.rest.tertiary'
The color of the icon
css
CSSProperties | Partial<Record<"abyss-icon", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
disableDefaultProviderProps
boolean | undefined
false
If set to true, the component will not use the DefaultPropsProvider values.

If you aren’t using the DefaultPropsProvider, this prop can be ignored.
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
icon
string | undefined
The icon name
onProcessSVG
Function | undefined
Function to process the SVG
size
string | number | undefined
'md'
The size of the icon
sizes
Record<string, string | number> | undefined
{ xs: '12px', sm: '16px', md: '24px', lg: '48px', xl: '64px', }
slotProps
Partial<Record<"icon", SlotPropsLeafValue>> | undefined
Props to pass to individual internal slots of the component.
See slotProps for more information
spriteSheetId
string | undefined
The ID of the sprite sheet
spriteSheetSrc
string | undefined
The source of the sprite sheet
src
string | undefined
The source of the icon image
title
string | undefined
The icon's accessible name. When provided, the icon is exposed to screen readers as a meaningful image (role="img"); otherwise it's hidden as decorative.
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

Icon Classes​

Class NameDescription
.abyss-iconIcon root element

Meaningful or Control Icons​

If the icon is used in a setting where it is the only element providing meaning, then that same meaning should be conveyed to screen reader users. The below implementation provides examples of situations in which the title property is required and should describe the purpose of the image.

Example 1: An alert icon is used to convey a sense of urgency; there is adjacent text ("There is a data outage") but the text doesn't include any words that convey urgency. So, in this case, the icon should have a text alternative such as "Alert" or "Warning".


Example 2: An "X" material icon is used as a close button on a modal dialog. There is no adjacent text, so the icon should have a text alternative of "close" or "close window".

Decorative Icons​

If the icon is being used in a setting in which it just a decorative element (which is the default case for icons), then the icon should be ignored by screen readers. The below implementation provides example of which situations would be classified as decorative.

Example 1: An alert icon is used next to an urgent message and the word "Alert" is included in the adjacent text. In this case, the icon becomes decorative in nature and should be ignored by screen readers.


Example 2: An "X" material icon is used as a close button on a modal dialog; the word "Close" appears to the right of the button. In this case, the icon should be considered decorative and ignored by screen readers.

Icon, IconBrand, and IconSymbol examples​

Samples of all three icon components with and without titles (alt text):

Table of Contents