import { Badge } from 'terra-icon/package.json?dev-site-package';

import IconBasePropsTable from 'terra-icon/lib/IconBase?dev-site-props-table';

<Badge />

# Terra Icon

The terra-icon component is used to visually represent a literal or symbolic object intended to initiate an action, communicate a status, or navigate the workflow.
Icons can be `meaningful` where they used to convey a semantic meaning or `decorative` where they are are simply used for aesthetic purposes.

See [Usage](#usage) for more information.

## Getting Started

- Install with [npmjs](https://www.npmjs.com):
  - `npm install terra-icon`

<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
## Peer Dependencies

This component requires the following peer dependencies be installed in your app for the component to properly function.

| Peer Dependency | Version |
|-----------------|---------|
| react           | ^16.8.5 |
| react-dom       | ^16.8.5 |
| react-intl      | ^2.8.0  |

<!-- AUTO-GENERATED-CONTENT:END -->

## Usage
The value for `a11yLabel` prop is required for the icons that are `meaningful` which means that they are intended to convey meaning. 

```jsx
import { IconAdd, IconEdit } from 'terra-icon';

<div>
  <IconAdd a11yLabel="add item"/>
  <IconEdit a11yLabel="edit item"/>
</div>
```

If icons are intended for aesthetic purposes (`decorative` icons) then `a11yLabel` can be ignored.

```jsx
import { IconAllergy, IconScratchPad } from 'terra-icon';
<div>
  <IconAllergy />
  <IconScratchPad />
</div>
```
Refer to [Accessibility guide](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/icon/AccessibilityGuide) to know more about informative and decorative icons.

## Component Features
* [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
* [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
* [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)

## Icon Props
<IconBasePropsTable />