# Icon

Universal Icon component that handles FontAwesome, Phosphor, URLs, and text/emoji icons Supports size and animations for all icon types

## Installation

```tsx
import { Icon } from 'uxp/components';
```

## Signature

```tsx
const Icon: React.FunctionComponent<IconProps>
```

## Examples

```tsx
FontAwesome with IconProp
```

\<Icon icon={\['fas', 'save']} size="2x" spin />

````

```tsx
FontAwesome with string
````

\`\`\`

```tsx
Phosphor with PHIconProp
```

\<Icon icon={\['phb', 'house']} size="lg" />

````

```tsx
Phosphor with string
````

\`\`\`

```tsx
Images with size and animations
```

\`\`\`

```tsx
Text and emoji with size and animations
```

\`\`\`

### Related Types

* [IconProps](https://help.iviva.com/uxp/v5/additional-resources/types/iconprops)
* [FontAwesomeIconProps](https://help.iviva.com/uxp/v5/additional-resources/types/fontawesomeiconprops)
* [BaseIconProps](https://help.iviva.com/uxp/v5/additional-resources/types/baseiconprops)
* [AnimationProps](https://help.iviva.com/uxp/v5/additional-resources/types/animationprops)
* [SkeletonLoaderProps](https://help.iviva.com/uxp/v5/additional-resources/types/skeletonloaderprops)
* [PhosphorIconProps](https://help.iviva.com/uxp/v5/additional-resources/types/phosphoriconprops)
* [PHIconProp](https://help.iviva.com/uxp/v5/additional-resources/types/phiconprop)
* [PHIconPrefix](https://help.iviva.com/uxp/v5/additional-resources/types/phiconprefix)
* [ImageIconProps](https://help.iviva.com/uxp/v5/additional-resources/types/imageiconprops)
* [TextIconProps](https://help.iviva.com/uxp/v5/additional-resources/types/texticonprops)