import { IconSymbol } from '@uhg-abyss/web/ui/IconSymbol';

icon

color

size

variant

<IconSymbol
  icon="home"
  variant="filled"
  size="$web.semantic.sizing.icon.utility.md"
  color="$web.semantic.color.icon.interactive.rest.tertiary"
/>

Icons

Use the icon property to adjust which icon is being selected.

Note: When using TypeScript, the icon property only accepts valid icon names. If an invalid icon name is provided, an error will be thrown. To verify that a given value is a valid icon name, use the isValidAssetName tool or use the ValidIconSymbolName type:

import { ValidIconSymbolName } from '@uhg-abyss/web/ui/IconSymbol';

let iconName: ValidIconSymbolName;

Colors

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

Note: Icon colors must meet the minimum 3:1 contrast ratio for non-text elements as per WCAG 2.1 guidelines.

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 '$web.semantic.sizing.icon.utility.md' (24px).

Symbol icon variants

Use the variant property to change the style of Symbol icons. The default variant is filled.

IconSymbol Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
color	string	'$web.semantic.color.icon.interactive.rest.tertiary'	-	Color of the IconSymbol
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	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.
icon	"function" | "123" | "360" | "10k" | "10mp" | "11mp" | "12mp" | "13mp" | "14mp" | "15mp" | "16mp" | "17mp" | "18_up_rating" | "18mp" | "19mp" | "1k" | "1k_plus" | "1x_mobiledata" | ... 3566 more ... | "zoom_out_map"	-		Name of the icon used for IconSymbol
size	string | number	'$web.semantic.sizing.icon.utility.md'	-	Size of the IconSymbol
sizes	Record<string, string | number>	'{ xs: '12px', sm: '16px', md: '24px', lg: '48px', xl: '64px', }'	-
title	string	-	-	Title of the IconSymbol
variant	"filled" | "outlined"	'filled'	-	Style variation of the IconSymbol
weight	string | number	400	-	Font weight of the IconSymbol

IconSymbol Classes

Class Name	Description
.abyss-icon-symbol	Icon Symbol element
.abyss-icon	Icon element

Meaningful or Control Icons

If the icon is being 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” symbol 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” symbol 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):

Abyss uses Google's Symbol Design System iconography that is simple, modern, friendly, and sometimes quirky. Each icon is created using Google's design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout user interfaces. Ensuring readability and clarity at both large and small sizes, these icons have been optimized for common platforms and display resolutions.

The source for these design icons can be found in the Material Symbol Icons Library).

Search