Icon

Displays an svg icon from @edx/paragon/icons. See Icons Foundation Documentation for a list of all available icons.

// Included in this live jsx scope:
// import { Add, AddCircle } from '@edx/paragon/icons';
<Icon src={Add} />

// Included in this live jsx scope:
// import { Add, AddCircle } from '@edx/paragon/icons';
<Icon src={Add} />

HTML attributes can be passed to this component allowing for customization of the color, size, or addition of any necessary ARIA attributes.

// Included in this live jsx scope:
// import { Add, AddCircle } from '@edx/paragon/icons';
<div className="d-flex align-items-center bg-dark">
  <Icon src={Add} className="mx-3 text-white" />
  <Icon src={Add} className="text-white" style={{ height: '48px', width: '48px' }} />
</div>

// Included in this live jsx scope:
// import { Add, AddCircle } from '@edx/paragon/icons';
<div className="d-flex align-items-center bg-dark">
  <Icon src={Add} className="mx-3 text-white" />
  <Icon src={Add} className="text-white" style={{ height: '48px', width: '48px' }} />
</div>

Theme Variables (SCSS)#

// Icons sizes

$icon-inline: .8em !default;
$icon-sm: 1.25rem !default;
$icon-md: 1.5rem !default;
$icon-lg: 1.75rem !default;

Icon Props API

src element | func
An icon component to render. Example import of a Paragon icon component: import { Check } from '@edx/paragon/dist/icon';
Defaultnull
svgAttrs shape {
aria-label: string,
aria-labelledby: string,
}
HTML element attributes to pass through to the underlying svg element
Default{}
id string
the id property of the Icon element, by default this value is generated with the newId function with the prefix of Icon.
className string
A class name that will define what the Icon looks like.
hidden bool
a boolean that determines the value of aria-hidden attribute on the Icon span, this value is true by default.
Defaulttrue
screenReaderText string | element
a string or an element that will be used on a secondary span leveraging the sr-only style for screenreader only text, this value is undefined by default. This value is recommended for use unless the Icon is being used in a way that is purely decorative or provides no additional context for screen reader users. This field should be thought of the same way an alt attribute would be used for image tags.

Paragon Design System

Icon

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)