-
+
NOTE: SVG icons are treated as decorative by default and will be `aria-hidden` unless an
+ > `ariaLabel` is explicitly provided to the `` component
+
```html
```
+ With `ariaLabel`
+
+ ```html
+
+ ```
+
8. **Ensure your SVG renders properly** according to Figma in both light and dark modes on a client
which supports multiple style modes.
diff --git a/libs/components/src/icon/icon.stories.ts b/libs/components/src/icon/icon.stories.ts
index 53454567b7..7892bdd3ec 100644
--- a/libs/components/src/icon/icon.stories.ts
+++ b/libs/components/src/icon/icon.stories.ts
@@ -26,5 +26,9 @@ export const Default: Story = {
mapping: GenericIcons,
control: { type: "select" },
},
+ ariaLabel: {
+ control: "text",
+ description: "the text used by a screen reader to describe the icon",
+ },
},
};