Skip to main content
Design system

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.56 kB
Install:
npm install @washingtonpost/wpds-ui-kit
|Copy
Usage:
import { Icon } from "@washingtonpost/wpds-ui-kit"
|Copy
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.

  1. Container
  2. Icon glyph
  3. Label Visually Hidden

Options

Size

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

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".


API Reference

Icon

PropDescriptionTypeDefaultRequired
sizeThe name of the icon to display.
enum
number | 100 | 150 | 200
100 False
label
string
----
True
className
string
False