# xpl-icon

## Available Icons

For a complete list of available icon names, see [ICONS.md](./ICONS.md) (164 icons).

You can also browse icons visually in [Storybook](?path=/story/components-icons--icons) with search functionality.

## Usage

```html
<xpl-icon icon="rocket" size="24"></xpl-icon>
```

The `icon` property accepts any icon name as a string. See the links above for the full list of available icons.

---

<!-- Auto Generated Below -->


## Properties

| Property            | Attribute          | Description              | Type     | Default     |
| ------------------- | ------------------ | ------------------------ | -------- | ----------- |
| `backgroundColor`   | `background-color` | Icon's background color. | `string` | `undefined` |
| `icon` _(required)_ | `icon`             | Name of icon.            | `string` | `undefined` |
| `size`              | `size`             | Size of icon             | `number` | `undefined` |


## Dependencies

### Used by

 - [xpl-accordion](../xpl-accordion)
 - [xpl-banner](../xpl-banner)
 - [xpl-button](../xpl-button)
 - [xpl-data-card](../xpl-data-card)
 - [xpl-dropdown-option](../xpl-dropdown/xpl-dropdown-option)
 - [xpl-header-accordion](../xpl-header-accordion)
 - [xpl-input](../xpl-input)
 - [xpl-input-color](../xpl-input/xpl-input-color)
 - [xpl-input-date](../xpl-input/xpl-input-date)
 - [xpl-input-file](../xpl-input/xpl-input-file)
 - [xpl-input-phone](../xpl-input/xpl-input-phone)
 - [xpl-input-search](../xpl-input/xpl-input-search)
 - [xpl-input-time](../xpl-input/xpl-input-time)
 - [xpl-large-card](../xpl-large-card)
 - [xpl-list-item](../xpl-list/xpl-list-item)
 - [xpl-modal](../xpl-modal)
 - [xpl-pagination](../xpl-pagination)
 - [xpl-progress-bar](../xpl-progress-bar)
 - [xpl-progress-indicator](../xpl-progress-indicator)
 - [xpl-select](../xpl-select)
 - [xpl-side-nav-item](../xpl-side-nav/xpl-side-nav-item)
 - [xpl-slideout](../xpl-slideout)
 - [xpl-spotlight](../xpl-spotlight)
 - [xpl-table](../xpl-table)
 - [xpl-table-header-cell](../xpl-table-header-cell)
 - [xpl-tag](../xpl-tag)
 - [xpl-toast](../xpl-toast)
 - [xpl-top-nav](../xpl-top-nav)
 - [xpl-top-nav-item](../xpl-top-nav/xpl-top-nav-item)
 - [xpl-top-nav-menu](../xpl-top-nav/xpl-top-nav-menu)
 - [xpl-utility-bar](../xpl-utility-bar)

### Graph
```mermaid
graph TD;
  xpl-accordion --> xpl-icon
  xpl-banner --> xpl-icon
  xpl-button --> xpl-icon
  xpl-data-card --> xpl-icon
  xpl-dropdown-option --> xpl-icon
  xpl-header-accordion --> xpl-icon
  xpl-input --> xpl-icon
  xpl-input-color --> xpl-icon
  xpl-input-date --> xpl-icon
  xpl-input-file --> xpl-icon
  xpl-input-phone --> xpl-icon
  xpl-input-search --> xpl-icon
  xpl-input-time --> xpl-icon
  xpl-large-card --> xpl-icon
  xpl-list-item --> xpl-icon
  xpl-modal --> xpl-icon
  xpl-pagination --> xpl-icon
  xpl-progress-bar --> xpl-icon
  xpl-progress-indicator --> xpl-icon
  xpl-select --> xpl-icon
  xpl-side-nav-item --> xpl-icon
  xpl-slideout --> xpl-icon
  xpl-spotlight --> xpl-icon
  xpl-table --> xpl-icon
  xpl-table-header-cell --> xpl-icon
  xpl-tag --> xpl-icon
  xpl-toast --> xpl-icon
  xpl-top-nav --> xpl-icon
  xpl-top-nav-item --> xpl-icon
  xpl-top-nav-menu --> xpl-icon
  xpl-utility-bar --> xpl-icon
  style xpl-icon fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*