WPDS Documentation & Resources

Icon Component

The icon component sets the size of an icon and adds a label that will be announced by screen readers.

Bundle size: 1.33 kB

Install:

npm install @washingtonpost/wpds-ui-kit|Copy

Usage:

import { Icon } from "@washingtonpost/wpds-ui-kit"|Copy

Storybook: View on Storybook

Source: View on Github

Anatomy

Icon component shown with an Add icon asset. Inspect the HTML to see the props. Or use a screen reader to read the label.

Container
Icon glyph
Label Visually Hidden

Options

Size

The size can be 100, 150, or 200. The size sets the width and height of the SVG.


Open in Playroom

Label

The label is required for screen readers. It is used to describe the icon to screen readers. It is also used as the aria-label for the icon. It is recommended to use a short, descriptive label. For example, "Go to Next Page".


Open in Playroom

API Reference

Icon

Prop	Description	Type	Default	Required
fill		string \| WPDSThemeColorObject	currentColor	False
className		string		False
id		string	----	False
size		number \| "100" \| "150" \| "200"	100	False
label	The name of the icon to display.	string	----	True
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	CSS	----	False
alt		string	----	False