<SvgIcon> component is a re-usable component that wraps its children in an
This component is used by each individual icon component listed below.
Changing icon color
Icon components support a few built-in color options that can be applied by using one of the following utility classes.
If you need a different color for an icon, you can pass a custom class to an icon component through the
class prop. Then, in your application CSS, set the
|Color||CSS utility Class||Example|
Changing icon size
Icon components use
ems for their height and width and can thereby be sized by changing the font-size of the SVG element.
It is recommended that the font-size utilities be used.
Creating custom icons
<SvgIcon> component can be used for other custom icons. It allows you to pass in the SVG child elements. This component is recommended if you want built-in accessibility features and standard icon styles.
In the example below, the
<SvgIcon> component is used with a custom path.
|Describes the value of the |
|Additional CSS classes to be added to the svg element|
|The elements that make up the SVG|
|Long-text description of any SVG. Use for complex icons, otherwise |
|A custom |
|The descriptive name for the SVG icon|
|A string describing the viewbox of the SVG. It is recommended that the icon is centered and fill up the default viewport size. See this blog post for further explanation on viewBox and how to use it.|
The following CSS variables can be overridden to customize Icon components:
<SvgIcon> component has built-in accessibility features including:
- a built-in
titleattribute. For any specific exported icon, the
titleattribute is defaulted, but can be overwritten.
focusable="false"which prevents the icon from being focusable
role="img"which tells assistive technologies that the icon's purpose is as an image
descriptionattribute which can be used for a more detailed explanation of the icon's contents. Meant to be used to provide more detail than just the
- an available
ariaHiddenattribute which can be used if the icon's context is described elsewhere. For example, if the icon is part of a button with text, the text may provide the text description instead of the icon component.
For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.
ColorMeets AA color contrast standards for accessibility and color blindness.Complete
Forced Colors Mode (FCM)While using FCM the components text is legible and improves readability.Complete
WCAG 2.1 Level AA ConformanceAll Axe checks for WCAG AA compliance have passed.Complete
Screen readersVoiceOver, NVDA, and JAWS screen readers provide concise communication and interaction.Complete
Keyboard navigationComponent is fully navigable with a keyboard.Not applicable
StorybookComponent has stories to cover all defined props.Complete
ResponsiveComponent designed to work in all responsive breakpoints.Complete
Spanish translationsIncludes Spanish translations for default text content.Complete
CodeTokens implemented in code.Complete
DesignTokens implemented in the Sketch.Complete