Skip to main content


Used to display Pando Icons.


  1. Container (optional)
  2. Icon


import { Icon } from '@pluralsight/react'



Live Editor


There are 3 ways to customize the Icon component.

1. Unused Classes

Each component layer of the Icon has a unused class name that can be utilized in your local CSS to customize the Icon at any level.

  1. pando-icon: The element of the Icon.

2. Passing a className prop

You can pass a className prop to the Icon component to customize the Icon. This is useful if your project uses CSS Modules or a CSS-in-JS library like Emotion.

Example of using CSS Modules to customize the Icon.
import customStyles from './customStyles.module.css'

function CustomIcon(props) {
return <Icon className={customStyles.custom}>{props.children}</Icon>

3. Ejected Icon

For a low-level "ejected" approach, you can use the Headless-styles API to customize the Icon however you prefer while keeping the accessibility behavior.

import { getIconProps } from '@pluralsight/headless-styles'

To learn more about the Headless-styles API, check out the Headless-styles documentation.


There are no behavior patterns required for the Icon.



interface IconProps extends SVGAttributes<SVGSVGElement> {
ariaHidden?: boolean
ariaLabel?: string // Required if ariaHidden is false
customSize?: string
size?: 's' | 'm' | 'l'
  1. Any prop that can be passed to an SVG element.
  2. Ref is forwarded to a span container element.
  3. ariaHidden is a boolean that determines whether the icon is hidden from screen readers. If ariaHidden is false, ariaLabel is required.
  4. ariaLabel is a string that is read by screen readers. It is required if ariaHidden is false.
  5. customSize is a string that sets the width and height of the icon. It overrides the size prop.
  6. size is a string that sets the width and height of the icon. It is overridden by the customSize prop.


The Pando Icon is fully accessible and screen-readable through the following features:

  1. The ariaHidden prop hides the icon from screen readers if set to true.
  2. The ariaLabel prop is required if ariaHidden is false.
  3. The role prop is set to img by default.